Topics

• Gather all necessary assets to start work on your site: Font selections and css links to them; color palette definitions using CSS variables; images; icons; etc…
• CSS variables;
• CSS reset & initial font definitions;
• Solving initial layout;

Problem Set

Build the first version of your project with a nice structure in a folder:

• my_project/
  • img/
    • all jpgs, pngs, etc…
  • css/
    • style.css
  • index.html

Using the in-class tutorial for CSS variables, CSS reset, and default body fonts define them in your style.css.

Create your index.html boilerplate and your initial HTML skeleton. Using these try to solve your first layout problem. For example if you have a ‘hero’ image that needs to cover the entire background of the fullpage and other elements sit atop.

Consider building your own boilerplate for projects, here’s an example and the zip file.

reference variables and reset

/* variable definitions */
:root {
  --primary-color: #ff7b33;
  --secondary-color: #3c5a4f;
  --heading-font: 'Abril Fatface', Cursive;
  --body-font: 'Poppins', Sans-Serif;
  --body-font-size: 16px;
}

/* css reset  */
*,
*::before,
*::after {
  margin: 0;
  padding: 0;
  box-sizing: inherit;
}

/* initial typography and box sizing */
body {
  box-sizing: border-box;
  font-family: var(--body-font);
  font-size: var(--body-font-size);
}

For the blog

Describe how you solved your initial layout problem. What ‘CSS Tricks’ did you use – Flexbox, Postioning, etc…;

And of course link to the first version of the project on your server.