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)