10. HTML, CSS, and Bootstrap¶
- Define HTML5
- Learn about HTML markup
- Learn about CSS styling
- Understand HTML and CSS work together
- Understand the pros and cons of Bootstrap
- Practice creating basic HTML / CSS sites
- Practice using Bootstrap to build web sites quickly
The fifth version of the HyperText Markup Language (HTML5) is a standard defining a markup language and APIs for structuring and presenting content on the Web. An HTML document consists of nested sets of elements represented by tags like <body>, <p>, and <video> which define the semantics of a Web page.
The third version of the Cascading Style Sheets (CSS3) standard defines defining a style language used to express the look and formatting of documents written in a markup language. A CSS file contains blocks of style declarations for colors, fonts, sizes, positions, and so on that can apply to elements in a HTML documents.
- Awesome Co. Homepage on slide 4 (~8 minutes)
- The Grid on slide 5 (~6 minutes)
- Semantic Bootstrap on slide 12 (~13 minutes)
If time permits, review these additional pages:
- Skim the HTML5 article on Wikipedia. (~15 minutes)
- Read Chapters 1 through 4 of CSS Basics. (~10 minutes)
- Read the HTML Dog Beginner Tutorial. (~10 minutes)
- Read the Bootstrap article on Wikipedia. (~10 minutes).
- Read Building Twitter Bootstrap. (~15 minutes)
- Read Bootstrap without all the debt. (~10 minutes)
You will need to complete the Setting Up instructions before you proceed with these exercises. Once you are set up, SSH into tottbox using the
vagrant ssh command from the setup instructions. Then tackle the problems below. Document what you find in a gist and share it with the TotT community later.
10.3.1. Run a tiny web server¶
Create a project folder in the tottbox shared directory. On tottbox, change to that directory and run
python -m SimpleHTTPServer. Back on your host machine, open your web browser and visit http://192.168.33.10:8000. You should see an empty directory listing.
10.3.2. (Re-)design the TotT web site¶
Create a simple HTML web page for the TotT meet-up in the
index.html file in your project folder. Use the content on the current front-page of the TotT meet-up site or make up your own description. Use appropriate HTML5 tags to indicate headings, sections, navigation, and so on. Make sure it renders properly in your browser. Don’t spend much time on making it look spiffy yet.
10.3.3. Get Bootstrap¶
Download the assets from the Bootstrap site. Or, get fancy and try using a frontend package manager like bower. Your choice. In either case, get the Bootstrap CSS and JS files into the project folder you created.
10.3.4. Style your page with Bootstrap¶
Add the Bootstrap CSS and JS to your
index.html. Refresh your browser and make sure you see the Bootstrap typography styles take hold.
Now design a layout for the page content that highlights the key facts about the meet-up. Use appropriate styles and components from Bootstrap to do so. For example, you might consider using the grid feature to put simple summaries of what, when, and where above the fold instead of one after the other down the page.
10.3.5. Try it on mobile¶
If you have a mobile device, try visiting your site on it. If you want to keep it running on tottbox and visit it there, you’ll need to modify your tottbox Vagrantfile to forward port 8000 on your tottbox VM to your host machine and
vagrant reload your VM. Then you’ll need to visit the IP address of your host box in your web browser to view it.
Alternatively, if you have a Dropbox account or other static site hosting, you can dump your site there and view it on your mobile.
10.3.6. Apply a new theme¶
Switch the Bootstrap theme to one of the free offerings from Pixelkit. Follow their instructions on how to make the change.
10.3.7. Add CSS3 eye-candy¶
Learn about CSS3 transitions, transforms, and animations by searching the web. Think about where you might apply such eye-candy tastefully on the TotT site. Then try your hand at adding the feature. For example, you might try transitioning in more details about any of the basic facts about the meet-up when the user mouses over the initial text. (Hint: Check out these original hover effects for inspiration.)
10.3.8. Ensure keyboard accessibility¶
Try navigating the page you built using the keyboard alone. Learn the basic keyboard navigation commands for your browser and OS. Try moving focus among the interactive elements you added to the page (e.g., buttons, links). Try activating all of them. Are there any holes? If so, fix them. (Hint: Did you add mouseovers? Can you trigger them without a mouse?)
If you want to try your hand at something larger than an exercise, consider one of the following.