Learning Plan 1: CSS Basics

Overview of Learning Plan 1

  • Identify CSS selector types.
  • Explain parts of a declaration.
  • Examine CSS properties.
  • Explore grouping selectors.
  • Examine CSS comment syntax.
  • Explore CSS comment best practices.
  • Identify ways of inserting CSS.
  • Explore the use of multiple stylesheets.
  • Explain the cascading principle.

HTML5 Semantic Tag Conversion Practice

Description

This practice involves revising two HTML documents to make the use of HTML5 semantic elements. The practice also explores linking the HTML to external stylesheets and revising the CSS styles to reference the new HTML5 semantic elements.

HTML tag conversion practice 1
Practice 1

HTML tag conversion practice 2
Practice 2

Reflection Statement

Before this lesson plan, I knew how to code using HTML5 semantic elements. Semantic elements are easier for me to use than "article" containers. This lesson plan was a review of semantic elements for me. I prefer not to use "article" if possible. I still need more practice with how to use section with article.

CSS Basics Project

Web Trends Report

Description

This is a sample web page with a two column layout applying basic CSS for styling and layout purposes. The layout uses HTML5 semantic elements and basic CSS layout properties with an external stylesheet. This layout also uses CSS for styling color and text.

CSS Basics Project

Reflection Statement

Prior to this learning plan, I was familiar with using CSS for styling color, text, and using floats for styling layouts. I prefer flexbox over the float and other positioning properties. This lesson plan was a review for me. I could use more practice using the clear property with float.