When I started learning HTML5 and CSS I had a lot of challenges while managing the structure of the web page and position of the elements.
Thanks to that I had to spent so much time fixing issues because I couldn’t find the origin of the problem.
When I thought that I was almost finished, the project started showing conflicts between some components.
I changed properties on an element in a part of the web page, then it started to affect the behavior of another.
Also, I hated that I had to examine parts of the project that were working fine before and start modifying the code.
It was like I was doing everything backward and It made me feel lost and that I wasn’t advancing in my project debugging.
It was a complete mess and it became an impossible job.
What I’m describing it’s a common mistake between new learners and because of that, I thought of using a system to overcome this issue.
What I came up with is dividing the design into parts and focus on one and move to the next when It’s finished.
What I’m talking about is dividing the web page into segments that shouldn’t affect other parts of the page and then work on them.
Applying this method will help you to:
- Organize your thoughts.
- Take better decisions in the early stages of the process.
- Have a DRY (Don’t Repeat Yourself) code that you can reuse in other projects.
- Be more productive.
So, I’ll explain the process and for this, I’ll use an American weekly news magazine called Newsweek as a reference since I build a clone of it a few weeks ago.
First, you should divide the web page into boxes or modules.
As you can see I took a screenshot of the website and I divided it according to the basic components.
It’s the header, main and footer, also I added height, width and background color to each of them.
This step is important because the layout of the web page will be based on it and it’s a common mistake between beginners to overlook it.
So, take your time to think about it. What I did in this situation is to check the behavior of the components and code of the original website to have an idea of what I needed to do.
Then open your code editor and create the basic structure of the website, it would be elements without content.
Now you should have three empty boxes with colors, like this.
What I would do next is work on the margins, paddings, position of the boxes, how the elements should behave and interact with each other.
Another thing is that you should also work on the behavior of the boxes depending on the screen size.
For this part generally, I use CSS Grid as it helps me to have a tidier layout.
Only when you get the result that you want you can move to the next step.
Two, do the same inside of the first box.
Move to the header and split it in little boxes and add different background colors.
Here I divided the header into two parts and I used the colors yellow and blue to distinguish them.
Then, you add the yellow box to your HTML and start working with its properties to make it look like the original.
If you take a look at the Newsweek website you see that the header’s size adjusts to the width of the browser.
In smaller screen sizes with a width of less than 992px, it changes to another for mobile versions.
What I would do in this situation is to keep working on the yellow box to do that behavior and look.
Remember not to add buttons or content and again, divide the yellow box in pieces.
As you can see I created three boxes that are going to contain the small elements like the weather, date, logo and sign in and subscribe buttons.
I would add those divs and use Flexbox to position the boxes since I need them to adjust to the width of the browser and I would look for issues and fix them right away.
Next, I added the final divs (blue and green) where I am going to put the text and icons.
Next, I added the final divs (blue and green) where I am going to put the text and icons.
Here you can use any property that you prefer for positioning the elements.
Additionally, I didn’t touch the logo since it is an image that doesn’t have any other parts inside.
Have you noticed what are we doing?
We are working from macro to micro. This will help us see very which element isn’t behaving as it should.
Three, finally the last step!
Now you can start adding all content like text or images, and you can delete the background colors and add some styling if you need to.
This the best part because you can appreciate how everything takes their place filling the voids without any trouble.
Once you get to this step everything should be fine and if you have an issue, well you’ll know exactly where the problem could be.
Here I showed how to do it with a small section of the web page, what you can do is apply the steps to the rest of the design.
The intention is that you shouldn’t need to go back to touch again any of those element’s properties.
Your work in that part is done and it will help you to save time.
Some of the benefits are:
- The big projects will become a list of tasks, easier to work on.
- You wouldn’t feel overwhelmed with the desitions that you need to take in the early stages of the process.
- You can spend more time making improvements instead of debugging.
- The process will be more satisfactory since you can see real progress in the project.
And the most important of all is that this way of thinking can be applied to other parts of your life.
Yes! as I said, it will help you to change the way you can deal with the problems that may come your way.