10. HTML, CSS, and Bootstrap

Author:Peter Parente

10.1. Goals

  • 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

10.2. Introduction

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.

Together with JavaScript, HTML and CSS define what can be accomplished on the Web today, and experienced by users of Web browsers.

Bootstrap is a front-end framework that makes bootstrapping visually pleasing, mobile and desktop friendly, potentially dynamic Web sites easy. It contains a set of CSS styles that create a consistent, skinnable look-and-feel; a set of components that go beyond the basic constructs of HTML; and a set of JavaScript utilities that enable common, dynamic Web page behaviors.

To get started, watch the Bootstrap slidecast (~39 minutes) which shows uses for Bootstrap styles, layouts, components, and JavaScript behaviors. The slidecast includes demos of the following:

If time permits, review these additional pages:

10.3. Exercises

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?)

10.4. Projects

If you want to try your hand at something larger than an exercise, consider one of the following.

10.4.1. Revisit the dead-drop

If you attended the Express and Jade meet-up, use Bootstrap to style your dead-drop web app.

10.5. References

HTML5 Rocks
Tutorials, articles, demos, and sample code for HTML5 related technologies
Dive Into HTML5
”... elaborates on a hand-picked selection of features from the HTML5 specification and other fine standards.”
Can I use ...
Browser compatibility tables for HTML5 and related features