Making with Code

CSS Lab #

In this lab, you will start learning to write CSS code! CSS defines the design style and layout of web site.

[0] Set up #

💻 Start by cloning your starter code. Be sure to change yourgithubusername to your actual Github username.

cd ~/desktop/making_with_code/unit04_webdesign
git clone https://github.com/the-isf-academy/lab_css_yourgithubusername

💻 cd into the lab

cd lab_html_yourgithubusername

📄 This repo contains the following:

  • index.html
  • styles.css
  • assets/ - contains 5 images
  • README.md

[0] Wireframe Design #

🎨 In this lab you will design a wireframe for the G9 & G10 ELP. A wireframe is a layout design for a website.

✏️ Complete the wireframe design document.

[1] Develop the Wireframe #

💻 Exchange wireframe design documents and implement your partners design in HTML and CSS. This will require you to write CSS rules for various HTML elements.

✅ You must implement class and id selectors

🎨 Go to fonts.google.com to find a custom font.

  • Select Get Font
  • Select Get embeded code
  • Copy the code from the Embed code in the <head> of your html into the head of your html file
  • You can then use the name of the font in the css file

[2] Deliverables #

⚡✨ Once you've successfully completed the lab:

☑️ Fill out this Google form

💻 Push your code to Github.

  • git status
  • git add -A
  • git status
  • git commit -m “describe your code and your process here”

    be sure to customize this message, do not copy and paste this line

  • git push