Unit 1: Creating Pages with HTML/CSS



Learner Outcomes

HTML Structure

Students will:

  • Be able to identify a site’s purpose and target audience
  • Be able to prepare a sketch of the web site outlining key design elements.
  • Understand the importance of proper page descriptions and titles. (SEO)
  • Be able to choose a SEO friendly domain name.
  • Be able to install Wamp server (localhost) or use online hosting.
  • Have a basic understanding of HTML syntax, including the difference between elements and attributes.
  • Be able to identify HTML tags and be able to create a blank HTML page using essential tags.
  • Be able to organize content on an HTML page using headings, paragraphs, divs, images, lists, links, tables … etc.
  • Know the difference between block, inline-block, and inline level tags.
  • Be able to apply the concepts of nesting and assigning available attributes to tags.
  • Be able to create a navigation menu using an unordered list.
  • Be able to upload/manage projects with Github.

HTML Styling

Students will:

  • Be able to use CSS to style a variety of HTML elements.
  • Understand the difference between an external style sheet, internal style sheet, and inline styling.
  • Have learned about various online tools that are available to help select colors for web pages.
  • Be able express color using CSS
  • Know how to express typography effectively on web pages.
  • Know the difference between serif and sans-serif fonts
  • Know which font families to use on a website, based in part on the likelihood that these fonts will be installed on users’ computers.
  • Be able to format the text of a website using font-family, font-size, font-weight, line-height, text-align, and letter-spacing properties.
  • Be able to understand the difference between margin, border, and padding.
  • Be able to add margins, borders, and paddings to HTML elements.
  • Be able to understand the difference between the ID and Class attribute when styling.
  • Be able to use the :hover, :focus, and :active  pseudo-classes to help the user track navigation
  • Be able to use the :first-letter pseudo-class to distinctly stylize the first letter of a block of text.
  • Be able to understand the position properties of an element (static, relative, fixed or absolute)
  • Be able to apply CSS positioning to create columns on a web page.
  • Be able create a CSS Layout using display:table.
  • Be able to use positioning properties to make an unordered list look like a navigation menu.
  • Be able to use SASS to create CSS (advanced)

Resources

Code Academy HTML and CSS (simulation)
W3 Schools HTML5 Lessons (text)
Floats:Two Column Design
Float Tutorial
W3 Schools CSS (text)
Learn SASS (text)
Editor: NotePad++  , Dreamweaver (Installed on computers)