2 ms·
If you're just building a website — i.e., not a highly interactive web application — here's what I'd recommend. I've been building websites since 1998, FWIW, al
by ftio 8y ago
If you're just building a website — i.e., not a highly interactive web application — here's what I'd recommend. I've been building websites since 1998, FWIW, although I'm now a stupid product manager, so take this with a grain of salt.
1. Write semantic HTML in a sane, human-centric order. Do not write any CSS yet.
2. Open your new web page in a browser. Imagine CSS doesn’t exist and you’re stuck with whatever the browser gives you forever (shudder). Is your site well-organized? Is it easy to read, to navigate? Are the most important elements on your page afforded the appropriate level of prominence?
3. Imagine everyone looking at your website reads every line of HTML top to bottom. You’re not allowed to use classes or IDs. Do your readers know what, say, the title of your blog article is? Do they know where the navigation is?
4. Do you have multiple page “types” (e.g., blog post, blog index, about me, home page)? Do this for all of those types. Don’t forget to keep making your HTML semantic. Copy and paste similar bits (navigation, etc.) from pages you’ve already created. Yes, if you make changes to one, you will have to change both.
5. Once you’ve done all of these, put a <style> tag linking to a single vanilla CSS file in the header of your simplest page. Start adding styles, beginning with text styling. Can you still tell that links are links? Is it still easy to find the navigation? Do headers look like headers? Good.
6. Did you have to pollute your HTML with a lot of classes to accomplish what you wanted to accomplish, design-wise? This might be OK, but you probably added too many. Can you accomplish the same thing using semantic elements instead? Do so.
7. Copy that <style> tag to the other pages. Do they look pretty decent? They should. Add whatever additional styles those pages NEED.
8. Yes, it does suck having to copy and paste all these repeated blocks all over the place. Find a static site generator or use something like CodeKit[1] so you can use simple includes rather than configuring the mess that is most static site generators. I use a static site generator for my site[2] for fun but don't really need one.
Have fun.
1. https://codekitapp.com https://codekitapp.com
2. https://ft.io https://ft.io