design2 How CSS Works


  • Section 03, videos 011 – 021
  • Notes for Section 03
  • Exercise files to complete are based on the previous week’s natours/v1. Each week you’re going to be making a duplicate of the previous version of the project and then renumbering. This week you will work through two additional versions, so that means two additional copies. Not to worry the edits to each version are minor, but represent specific learning milestones
    • for responsive units
    • natours/v2/img/
    • natours/v2/css/style.css
    • natours/v2/index.html
    • for BEM renaming
    • natours/v3/img/
    • natours/v3/css/style.css
    • natours/v3/index.html

Blogging Questions

There are certain CSS properties applied to a parent element that are “inherited” by the child elements. Name four properties that are inherited and four properties that are not inherited. Describe why you believe each is inherited or not.

Describe the differences between inline, block, and inline-block. Why would you want to use the inline-block value? Hint you have an example use in your Natours project.

design1 – Intermediate HTML


  • Section 04 videos 020 – 031
  • Exercise files to publish to your server as HTML
    • all-intermediate.html (includes all the code-along pieces, screenshot)
    • table-pokemon.html I’m not going to give Colt’s boilerplate data for the Pokemon table. I’d rather you find names of Pokemon and direct links to images using the Bulbapedia list of Generation I Pokemon.
    • form-exercise.html

Blogging Questions

Find an example form on a website and complete the following:

  • Create a screenshot of the form and a link to the form. Include both in your post;
  • Recreate the HTML structure of your example form. Research and employ input types you think are being used other than ones presented. Don’t worry if it’s not perfect, but using the Enlighter code snippet tool, add your code.
  • Describe the input types you used and describe how the browser presents user interaction with them.

design1 – My Hobby/Interest HTML Problem Set

Recreate the above HTML page picking your own hobby/interest illustrating two examples. Consider he following parameters:

  • create a main heading;
  • included for each example;
    • give a sub-heading;
    • set the width of images to 300px;
    • provide a link to a source of information for each example;
    • create an unordered list;
    • create two lorem-ipsum paragraphs
    • bold face some text in one paragraph
    • organize the code for each example in a div

design2 – Comment Box Problem Set

Create the above full page hero using only HTML, CSS and one background image.

  • Follow the proscribed file naming and directory structure
    • 01-comment-box/index.html
    • 01-comment-box/img/hero.jpg
    • 01-comment-box/css/style.css
  • Using the proscribed methods from the Natours header tutorial, include the following in your CSS:
    • a reset
    • body element presets
    • no other element selectors, follow the tutorial’s pattern for writing classes
  • attach a chosen google font and set as the default body font
  • chose a background image from and edit the pixel dimensions so that neither the height or width exceeds 2000px.
  • use the clip-path property (and the clip path generator if you want) to create the comment box shape.
  • use the proscribed position properties/hierarchy as well as the top, left, and transform properties to center the comment box.
  • Place default text within the comment box and the box should resize automatically. Come up with solutions to center and format the text similarly to the example

What is Web Design?

white and green sheetwork on brown surface via José Alejandro Cuffia

In a course with the title “design” included you might think you will be spending a lot of time creating designs – thinking about TYPE, COLOR, and LAYOUT of a variety of visual elements on a page. You will be doing this, but not with digital imaging tools such as Photoshop or even much pen and paper (ok you will do this a bit). You main tool is a text editor and designing with HTML/CSS is additional set of skills on top of design.

You’ll be spending most of your time learning the tools and tricks for implementing designs and less time on actual designing and design theory. With this in mind you will be learning to read and re-create designs. Can you note all the elements of a piece of design and successfully implement them with code. This will be an accomplishment in and of itself. And by the end of the semester hopefully you will do a bit of original designs as well.

For a first assignment, review web designer, developer, teacher Jonas Schmedtmann’s resources page for web design. Pick any resource, and describe what it’s useful for in the context of what you expect to learn this semester. In your first blog post describe what you hope to learn this semester and how the resource you chose could be helpful.

design2 – Natours Project, Setup and First Steps



Problem Set

Files to publish on your server:

  • 01-comment-box/index.html
  • 01/comment-box/img/hero.jpg
  • 01/comment-box/css/style.css

Blog Questions

  • Describe how the files are organized for the Natours project and how they are linked together.
  • Describe two interesting new pieces of CSS or CSS techniques you learned in this first set of tutorials. Include a code sample with Enlighter

design1 – Introduction to HTML



  • Section 03, videos 008 – 019
  • design1 03 tutorial notes (to come)
  • Exercise files to publish on your server as HTML
    • my-first-page.html
    • page2.html
    • lists-alignment.html
    • recreate-page.html

Problem Set

Files for the Intro to HTML:

  • my-hobby.html

Blog Questions

  • Describe the importance of the HTML “Boilerplate.” What are it’s main parts? And what are they used for?
  • What’s the importance of naming an HTML file index.html?