Class 03 ‐ CSS intro

Part 1

• Have you done your learning log this week? Respond to one or several of this week's readings.
• Craigslist Redesign Presentations
• Today's slides
  • HTML Refresher
  • Absolute vs. Relative Paths
  • What is the DOM?
  • CSS
    • Classes vs. IDs
    • CSS Box Model
    • CSS Positioning 101
    • CSS Advanced Positioning
• Exercise:
  • Take your homework from Week 1 (the make believe restaurant page) and add some css to your page.
  • Include at least three classes on your page. You can either add these attributes to existing elements or add additional elements and attach attributes.
  • Style the elements with attributes in your style.css file.
  • Add a background color to at least one element on the page
  • Include and style at least one span element
  • Style your nav bar so it looks like a nav bar (the placement is up to you)
    • Refer to this W3 Schools guide
    • Its ok if the links in the menu do not go anywhere
  • Feel free to add any additional CSS styling you desire.
  • Upload your index.html and style.css file to CodePen.

PART 2

• CSS Questions
  • Fonts
    • Web Safe Fonts
  • CSS Units
  • The Float Property
  • Inline v. Inline Block
• Remaining Craigslist Redesign Presentations
• Code along- Building Google's homepage with CSS
  • Link to Code Pen

Assignment

Take the mockup you made with your Craigslist redesign assignment and recreate it with HTML and CSS. Don't worry about adding any interactivity such as dropdown menus or linking to any other pages. Upload your zip folder containing an html file, a css file, and any image files you used.

Learning Log suggestions for this week:

• CSS div/span, class/id
• HTML semantic tags
• CSS box model
• CSS alignment
• CSS box model
• CSS Positioning 101
• CSS Advanced Positioning
• Collection of CSS Beginner Tutorials
• Collection of CSS Intermediate Tutorials