Skip to content

Latest commit

 

History

History
70 lines (45 loc) · 5.56 KB

lesson1.md

File metadata and controls

70 lines (45 loc) · 5.56 KB

HTML/CSS 1

What will we learn today?

  • Semantic HTML tags
  • CSS selectors, CSS cascade, Pseudo-classes such as :hover/:focus
  • Box model: margin/padding/border etc...
  • CSS specificity

<<<<<<< HEAD The example website you'll begin working with is available on Github.

In order to get started, please fork it on Github, so it shows up under your account. Then clone it in your terminal and open it with VS Code (our chosen IDE).

Further reading Let's refresh how HTML tags are structured - https://www.w3schools.com/html/html5_syntax.asp

Exercise (pair programming): Pair with another student. One will be typing into the computer (they will be driving), the second will be helping out. The person who is driving will create a new repository in their Github account. This repository will contain an empty website. Add the necessary HTML and CSS in order to re-create the top level of the 'bikes for refugees' website: icon, menu links and 'Donate now' button. ======= The example website you'll begin working with is available on this GitHub repository. Fork the repository to your personal account and use the following terminal commands to download the files to your projects folder.

  1. cd ~
  2. cd <your-project-directory>
  3. git clone [email protected]:<your_username>/bikes-for-refugees.git

Exercise: Spend a few minutes exploring the .html and .css files for this page. Why don't we put everything in one file?

origin/scotland

Resources

  1. HTML5 - semantic elements
  2. CSS Selectors - MDN
  3. The Cascade - MDN
  4. Box Model - MDN
  5. Box Model, box-sizing: border-box - CSS Tricks
  6. CSS specificity - MDN
  7. Pseudo classes - MDN

Homework

  1. (finish by 26th of April) Read about advanced CSS selectors and then practice by playing this CSS selector game. It gets hard at the end, but try your best!

  2. (submit pull-request by 29th of April) Using what you have learned before, look at the build a house repository and try to build at least 2 of the houses in CSS.

  3. (submit pull-request by 3rd of May) Do our css challenge. With the same HTML, build different CSS stylesheets to give it several appearances. Do it for at least three examples. For example, example 1, example 2 and example 3. Or pick one from Zen Garden.

  4. (submit pull-request by 6th of May) Fork this repo and follow the instructions on the README - https://github.com/Code-Your-Future/html-css-project

(If you need help with Forking - then refer back to this tutorial)

(If you need help on how to do pull-requests, check this pull-request tutorial)

Optional

  1. Try changing the appearance of the bikes-for-refugees page without touching the HTML. Can you move the sidebar to the left side of the page? Can you reverse the order of "upcoming events", by putting "help us cycle" first and "join us for our fundraiser" last?

  2. Start your own CSS library. Extract all the CSS that you would like to be able to use in other websites into a separate file. This file should be in a separate repository, and published under your-username.github.io/style.css. Determine the URL of this file and load it alongside your original CSS file in the index.html of bikes-for-refugees.

Prepare for the next class

  1. (Est. 4-5 hours) Complete the first three lessons in this course on Responsive Web Design Fundamentals. You should complete Why Responsive?, Starting Small and Building Up. Don't worry if you don't have a phone you can use for Remote Debugging. You can use the browser's Device Emulation instead.

  2. Split in groups, research and prepare a presentation about one of these topics (briefly covered in Lesson 2):