Unit1

Unit 1: HTML & CSS

Module 1.1

Pre-Course Material

• (Optional):
  • Understanding the Web
    • OC course time: 4 hrs

Course Material

• 1.1 Build Your First Web Pages With HTML and CSS
  • OC course time: 10 hrs

Mini-Projects

• Included in OC course:
  • Mini-Project 1.1a: Build a basic personalized HTML web page
• Not included in OC course:
  • Mini-Project 1.1b (Optional): HTML Forms

Self-Graded Assignments

• Included in OC course:
  • 4 auto-graded quizzes
  • Basic HTML
    • First lines of HTML/CSS exercise
    • First HTML tags
    • Bold and italics
    • Links
    • Lists
    • Images
  • Pages structure HTML
    • Semantic HTML basics
    • divs and spans
    • classes and ids
    • Line breaks
  • Basic CSS
    • Linking stylesheet
    • Setting colors
    • Setting colors sandbox
    • Fonts
    • Font sandbox
    • Text effects
• Not included in OC course:
  • HTML forms (exercises from FreeCodeCamp)
    • Text field
    • Create form element
    • Add submit button
    • Radio buttons
    • Checkboxes

Module 1.2

Course Material

• Included in OC course:
  • Create Web Page Layouts With CSS
    • OC course time: 10 hrs
• Not included in OC course:
  • Basics of Chrome Developer Tools:
    • What is Chrome DevTools (2 mins)
      • Read only the first 2 sections (Chrome DevTools and Open DevTools) and then move on to the CSS section
    • Finding elements' CSS (8 mins)
      • Skip last 3 sections starting with “View a page in print mode”
    • Changing elements' CSS (10 mins)
    • Simulate mobile devices (5 mins)
      • Read only the first two sections within Simulating a mobile viewport, stop when you get to "Show rulers"
    • Code coverage (Optional - advanced)

Mini-Projects

• Included in OC course:

  • Mini-Project 1.2a: Create a page about your projects using padding, widths, media queries
  • Mini-Project 1.2b: Create your own layout with CSS Grid

• Not included in OC course:

  • Mini-Project 1.2c (Optional): Flexbox and CSS Grids: Build Comic strip

Self-Graded Assignments

• Included in OC course:

  • 4 auto-graded quizzes
  • Box model
    • Create a container element
    • Borders
    • Padding
    • Margins, including centering a div
    • Media queries
  • CSS grid
    • Create basic grid
    • Grid template property
    • Grid lines
    • Grid measurements
  • Flexbox
    • Flex direction & wrapping
    • Alignment and justification
    • Aligning multiple rows
    • Adjust dimensions
    • Reorder elements

• Not included in OC course:

  • Chrome Developer Tools exercise: Viewing and changing CSS (6 mins)

Module 1.3 (Optional)

• Included in OC course:
  • Go deeper into CSS: Produce Maintainable CSS With Sass
    • OC course time: 15 hrs

Unit 1 Project

Access the Unit 1 Project here.