Brett Haymaker, JavaScript Developer & Instructor
If we have time:
- media queries
- transitions
- animations
Identify common HTML elements and write with correct
syntax
Assign attributes to elements
Correctly indent content according to document
hierarchy
Recognize name and purpose of HTML5 semantic
elements
Build a basic static HTML webpage from scratch
A tag is essentially an element or object that you will place on the page. These elements are represented by an opening tag and a closing tag.
Elements can be nested inside of one another... We use indentation to visually communicate this nested hierarchy.
The main components of every HTML document...
10 MINUTES
In the ugly/ directory in the class starter files
30 MINUTES
Link external stylesheets to your web page.
Use CSS selectors to target elements for styling.
Style basic CSS properties of an element.
Set the box model properties to control the size of
elements.
CSS Lab!
CSS stands for Cascading Style Sheets. This is where we will tell page elements that we have added to our HTML document how they will appear - and in some cases, how they will behave.
We have three ways of applying CSS to our HTML elements
Specificity refers to how a selector, or a group of selectors, is ranked by the CSS language. While CSS is known for its cascading behavior, this same cascade can be broken and over-ridden.
Knowing how CSS determines and calculates specificity can help us craft our styles more efficiently and accurately. Take a look:
Every element in your web page is a rectangular box. This box consists of 4 distinct parts:
What's the difference? Experiment!
15 - 30 MINUTES
Using your resume .html file, experiment with the CSS properties we have covered thus far:
Project Setup from scratch
Display Types
Positioning
Floats and clear
Together, let's:
The CSS display property has three main options, and it's important to know how those options alter the orientation and the flow of elements on the page.
1. display: block;
2. display: inline;
3. display: inline-block;
Positioning is intended to move an element outside it's normal flow on the page, whether that flow is inline, block, or inline-block.
Floats were created as a way for us to impose behavior on page elements that fall outside of the normal flow. By applying floats, we alter the normal flow of the document...
...an alteration that we need to restore to the document after we done floating elements. If we don't 'clear' a float - our page will behave in perplexing, unexpected ways.
We can add an additional div at the bottom of our floated elements
OR
we can take advantage of CSS psuedo-elements like :after & :before
Netlify deployment
Other hosting platforms
Bluehost
Dreamhost
FTP / SSH
FileZilla
HTML & CSS:
marksheet.io
learn.shayhowe.com
css-tricks.com/guides/beginner
Quick Survey:
Contact information:
brett.haymaker@gmail.com
@BrettHaymaker
brett-haymaker.com