- Create a mock-up
- Plot the content
- Markup the content with HTML tags
- Layout the CSS for desktop
- Extend the markup
- Extend the CSS with @media query
- Learn from your mistakes
There are thing you want to do methodologically. And creating a web page is one of them.
Create a Mock-up
Create a Mock-up
This is were you get creative. No codes needed here. Just good old fashion pen and paper. An A4 sized paper would suffice. Just put in the paper what you imagine.
Plot Your Content
Just think about what you are going to tell your audience, viewers or visitors. Just like how you would right a letter, journal, report or just about anything. Don't think about it like a webpage. We'll get to the codes later. This is all text and pics(whenever needed)
Content is King
You probably heard or read about this and there's a reason why it's popular. That's because content is literally the king. Content is what make visitors come to you. Content is the reason why you have traffic. In short: it's necessary. So, make sure you got that down first. Dont' move on to the next without finishing your content first.
Markup the Content with HTML Tags
You would have a title, headers, sub-headers, paragraphs, images, forms, etc. But don't use CSS. Not yet, at least. Why? It has to start from the root, which is the content. HTML can stand on it's own, CSS cannot. So, you want an HTML that you can read without any design. It should be straight up, plain and simple.
Don't Use a Tag if You Don't Need a Tag
Use only what you need. Because not only does it add to how much the page would consume, it's also dirty. Steve Jobs talked about a thing he learned from his father. “He loved doing things right. He even cared about the look of the parts you couldn't see.” If you're a front end web developer then I suggest to clean up your codes. Again, if you're not done with the base tags, don't proceed.
Layout the CSS for Desktop
This is where your design would come to life and take its initial shape. Basic elements like fonts, alignment, color and sizes are tackled here. If you encounter a bug and you need to add more tags on your HTML, skip it. Note down all possible bugs and complete your CSS. Those bugs will be dealt with in the next step.
Extend the Markup
Some designs would require hacking. If a straight up CSS can't do it and we need a little tweaking, then we need to add more tags and declarations This means looking for a way to make things work and to realize your design.
<div><span>
These are you friendly neighborhood tags. These are the team that you call for back-up. Utilize them carefully and proceed with caution. You will find out more of these as you progress.
Extend the CSS with @media query
So you have finished your page. Now you check it with other devices such as ipads, ipods, android phones or tablets.use @media on your CSS and viewport meta tag on your HTML. Refine the design until you see the desired result.
Learn From Your Mistakes
When you finish, you will have things that you wish you did and probably try again. This could probably by on the design. Say, the button should be a little narrow of the headline should have a different background color. But you have to stop yourself. Learn from that mistake and prepare for the next project. You will not finish if you keep repeating the cycle. Stick to the design and finish it. Don't do the same mistake on the next project.
Extend the Markup
Some designs would require hacking. If a straight up CSS can't do it and we need a little tweaking, then we need to add more tags and declarations This means looking for a way to make things work and to realize your design.
<div><span>
These are you friendly neighborhood tags. These are the team that you call for back-up. Utilize them carefully and proceed with caution. You will find out more of these as you progress.
Extend the CSS with @media query
So you have finished your page. Now you check it with other devices such as ipads, ipods, android phones or tablets.use @media on your CSS and viewport meta tag on your HTML. Refine the design until you see the desired result.
Learn From Your Mistakes
When you finish, you will have things that you wish you did and probably try again. This could probably by on the design. Say, the button should be a little narrow of the headline should have a different background color. But you have to stop yourself. Learn from that mistake and prepare for the next project. You will not finish if you keep repeating the cycle. Stick to the design and finish it. Don't do the same mistake on the next project.
