4 ms·

I am interested in learning this style but keep getting drawn into some frameworks. What order would you recommend learning to create sites in this style?

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
apo 8y ago
I can think of two approaches: 1. Get a better idea of the tools already at your disposal (HTML5, CSS3). I can recommend Dive into HTML5 http://diveinto.html5doctor.com http://diveinto.html5doctor.com 2. Start building. Literally, start with the barebones Hello World given in the article. Then gradually turn it into your site, making liberal use of Stack Overflow (direct search) and Google.
- mmsimanga 8y ago
  Thanks for the link. This whole thread is refreshing. I am someone who does not do web development for a living but occasionally builds a website. Every time I start building a new site I am at a complete loss where to start. Yet I have been doing HTML and CSS since 1999. I am going back to basics, starting with your link.
  - raywu 8y ago
    Open web inspector when you develop a website. You can get a better feel for how changing CSS on the fly take place on the actual webpage. I would save a copy of the HTML from the top level comment of this thread and use it as a base to start any new project. I like to start from scratch and add Bootstrap should I need responsiveness once I get to that point. L
    - mmsimanga 8y ago
      Thanks for the tips.

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

apo 8y ago

I can think of two approaches: 1. Get a better idea of the tools already at your disposal (HTML5, CSS3). I can recommend Dive into HTML5 http://diveinto.html5doctor.com http://diveinto.html5doctor.com 2. Start building. Literally, start with the barebones Hello World given in the article. Then gradually turn it into your site, making liberal use of Stack Overflow (direct search) and Google.

mmsimanga 8y ago
Thanks for the link. This whole thread is refreshing. I am someone who does not do web development for a living but occasionally builds a website. Every time I start building a new site I am at a complete loss where to start. Yet I have been doing HTML and CSS since 1999. I am going back to basics, starting with your link.
- raywu 8y ago
  Open web inspector when you develop a website. You can get a better feel for how changing CSS on the fly take place on the actual webpage. I would save a copy of the HTML from the top level comment of this thread and use it as a base to start any new project. I like to start from scratch and add Bootstrap should I need responsiveness once I get to that point. L
  - mmsimanga 8y ago
    Thanks for the tips.