How 2 Build a Website
Step One: Find a topic that interests you. Examples from the class: Paper.js, Aerolux Light Bulbs, Piskel, Farmbot, and Hektor, a drawing robot.
Step Two: Build a wireframe on paper (with real pen or pencil; no computers for this step!).
A wireframe is a simple drawing meant to represent your intended webpage layout that does not require coding. Your final project will have a main page and two additional pages, so use this time to decide on an audience for your website, and what they might be looking for when they visit. For example, if your technology is a program used to create things, a gallery page and a tutorial page might be appropriate.
If there are other websites about your topic (or similar technologies), look to the structure of their webpages. You will probably notice that the pages within a site are built similarly: with a header, a navigation section, a content section, and a footer. Be sure to include these in your wireframe. Additionally, websites usually have a vertical rhythm or grid. This tutorial is more in-depth than we need, but check out the first image to get an idea of what we mean when we say "grid"—similar elements are the same size, and things line up vertically and horizontally. Make it easy on yourself by following a grid that each page follows.
Step Three: Learn about webpage grids, and the newest CSS elements that make this easy. Take a look at the first example on this page, then click "view example" underneath. Do yours look different? If so, it means you need to update your browser to the cutting-edge.
- If you're using Chrome, type "chrome://flags" into the Omnibox.
- If you aren't using Chrome, click here.
- Press ctrl+f and start typing "Experimental Web Platform Features" to find that flag.
- Press "Enable," then restart your browser.
- Head back to the first example link. They should now match!
Take a look at the other examples on the page; they become more complex as you go further down, so you might find one similar to your wireframe. Click "View Example" for one, and look at the CSS and HTML. Notice the grid elements in the CSS—these are the magic elements your browser now understands, and make the grid possible.
Now begin to build your website. Start a new GitHub repo, and enable GitHub Pages (see below if you've forgotten how). Start with a few boxes as the examples do, then begin adding your own content.
Step Four: Now that you have a general grid and page layout, look to the page design of your sources—what makes the information easy to read? How do the sources create a hierarchy of information? How do they guide your eye? This chapter has an excellent overview of webpage design. Click "next page" at the bottom to move through the information. Another chapter covers web typography; feel free to begin with either, but read both!
Inspiration
- Code My UI great gallery; learn some js, as well!
- This is the resource used by all who build webpages, from students to professionals
- CSS X-Men <--CSS absurdity
- Animista.net, for wonderful CSS elements