/portfolio_homepage

Primary LanguageCSS

Odin CSS/HTML Project: Homepage

Description of Project

In this project we are tasked with making a responsive website that will feature 3 layouts.

The 3 layouts will target:

  1. Mobile devices
  2. Tablets
  3. Desktop computers

My Goals

I will focus on honing these CSS skills:

  • Responsive web design with Flexbox and Grid
  • Maintainable and terse CSS (separation of layout classes from styling classes)
    • For concrete elements use BEM for names (eg "header__menu-item")
    • For styling use utility classes (eg ".clr-accent")
    • Use as few media queries as possible (3 in this case)

I will also focus on these HTML skills:

  • Responsive images
    • Use of to provide multiples of the same image
    • Use of to provide "art direction" (cropping) for one image
  • Proper usage of semantic HTML tags

Project Specs

Link to project specs

Screenshots

(Add screenshots here)

How it's made

HTML, CSS, JavaScript (npm + webpack)