2/8 + 2/10

This week the focus is on HTML and CSS. I’m assuming that you have had some experience before so it’s a refresher but we go fast.

Before Class: LEARN

Do this: (1–3 before Monday, 4–5 before Wednesday)

1. Accounts
   1. Access your LinkedIn Learning Account
   2. Create GitHub account. If you already have one, make sure you remember the login info.
2. Work on your Dev Environment
   1. There were issues with the macOS instructions. Students in office hours helped me find and fix those (thanks!).
   2. We also found that there can be issues you might be having with this that are not your fault but could prevent the instructions from working. Let me know if you’re running into problems.
3. Watch my recorded presentation of Everything is a Box slide deck
   1. Video Link
   2. Slides Link (download)

4. Watch this video on CSS
   1. Don’t Fear Starting from Scratch: CSS [11:02]
   2. Note: you can just watch to help refresh concepts. This is part of a larger series of videos. If you want to try to follow along, great. Try using VS Code that you should have installed.
5. Play the CSS Dinner Selector Game
   1. Take a screenshot of how far you make it. You don’t have to finish it.
   2. This really helps to explore and learn the CSS Selectors.

Optional Resources

These are optional resources related to what we are doing this week. You don’t have to do these before class, but you can look if you have time or feel you need to explore more.

• Ken Bellows’s Stop using so many divs! An intro to semantic HTML article.
  • This explains when to use the most common sectioning elements (page structure).
• HTML Essential Training by Jen Simmons
  • This is on LinkedIn Learning so you will need to be able to access that account to follow the link.
• MDN HTML Elements Reference
  • This is a great reference to keep handy. MDN is for Mozilla Developers Network. Mozilla makes the Firefox browser and other things.
• MDN CSS Reference
  • selectors
  • syntax
  • values
  • cascade
  • shorthand
• Lea Verou’s Introduction to Modern Web Technologies
  • It’s long but interactive. It covers HTML, CSS and JS. Don’t go all through at once.

In Class: EXPLORE

DO THIS

• Join the Live Class Sessions
• Have your computer ready to follow along.
• Also have GitHub and CodePen accounts active.

AFTER CLASS: REPORT

DO THIS

• Complete your Learning Journal

Link will be available after WEDNESDAY’s CLASS

Learning Journal