Skip to content

Instantly share code, notes, and snippets.

@M0119
Last active March 21, 2019 05:33
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save M0119/638e53ab46cca51e2c9563f71ffe79b5 to your computer and use it in GitHub Desktop.
Save M0119/638e53ab46cca51e2c9563f71ffe79b5 to your computer and use it in GitHub Desktop.

Lecture ✍️

Fundamental CSS

  • Creating what harrisonmalone.com actually is (fonts, margin, classes and ids, using ids to link to days)
  • Introduction to class and id
  • Styling a specific element within a class .content p
  • Emphasize class is for many things id is for one thing
  • External stylesheets (can also use style tag in head but don't)

CSS box model

Looking at box model, padding is fat being added to organs, border is skin, margin is space you're away from me.

Padding and margin syntax.

.box {
  /* margin: top right bottom left */
  margin: 10px 0px 10px 0px;
  /* shorter way */
  margin: 10px 0px;
}

Preventing default margin set by browser

body {
  margin: 0px;
}

Can override elements with certain box model attributes on them

p {
  margin: 5px 0px;
}

Other stuff

  • Introduction to unsplash
  • Different values (px, vh, vw, %)
  • Google fonts, font awesome
  • Different displays (inline, inline block, block)

Components

  • What is a component, it's a single piece of your website, making things modular is much cleaner, also kind of how react works
  • CSS components (using import)
  • Build some components (buttons, cards, badges, labels)
  • Pseudo-class (hover) to create box shadow effect on button
  • For cards show off position relative and absolute
  • Box shadow generator or just use figma
  • Quick intro to media queries
  • Creating something in figma, implementing it in css, digital color meter, searching for inspiration, link to figma buttons, link to inspiration

Challenge 1

Create a landing page like the image below.

You'll need to research background images, linear gradient, setting height for background, difference between margin and padding.

Challenge 2

Create a website that has a fixed nav like the image below, with links that allow you to jump to different points on the page. Think about font-family and font-size.

Challenge 3

Create a page with a fixed scrollable sidebar, similar to bootstrap website

Challenge 4

Overview

Create multiple button, card, badge and label components, create a reusable page (library) of different components The workflow is to go find a component that you like (for me it was material design), recreate or remix it in figma, and then implement it in html and css

Specs

Create at least 5 buttons and 3 cards

Optional: create 2 labels and badges (for reference as to what they are see bootstrap)

Challenge 5

Recreate this dropdown menu using the hover pseudo class.

Challenge 6

Practise with media queries

Part 1

Create a page with a full width and full height blue background

When the page is less than 600px make it have a red background

Part 2

Create another html page

At mobile view (less than 600px) have just one item in navbar, a logo (can just be a 50px by 50px circle) thats centre aligned and links somewhere

At a bigger view make the navbar have 4 different links, have logo left aligned and 4 different links right aligned

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment