front end web development
Brett Haymaker, Web Developer @ c|change & instructor
FEWD 14
ATTENDANCE!
Learning Objectives:
-
Introduction
-
Review class trajectory and expectations
-
Familiarize ourselves with classroom resources (fewd.digital)
-
Apply HTML tags to a web page and experiment with html tags.
-
Describe the DOM and draw a simple DOM tree.
-
Create and link an external style sheet.
-
Who Am I?
-
What am I doing here?
-
What do I want to accomplish?
-
What do I excel at?
-
Why this course?
-
WHAT ARE YOU EXCITED ABOUT?
Where we are going
-
Three Main Units
-
Each unit is composed of about 3-weeks of lessons
-
First unit is on HTML / CSS
-
Second unit will focus in on JavaScript
-
Third unit will focus on projects
Expectations /
What success looks like
- Grit
- Growth mindset
- Punctuality
- in-class
- assignments
- Responsibility
- Research
fewd.digital
HTML Tags & CSS Selectors Review
HTML
CSS Selectors
WHY DO WE USE SUBLIME?
A REVIEW.
GET ON THE SAME PAGE: Install 'Emmett', 'Prettify', 'AutoPrefix CSS', 'VIEW IN BROWSER'
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
</body>
</html>
The Body Analogy
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<h1>Hello, World!</h1>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit.
Repellendus assumenda molestiae quibusdam, nulla doloremq perferendis
illo nisi voluptates hic quae, rem fuga amet pariatur! Animi provident
ea numquam distinctio dolore?</p>
<a href="./contact.html"></a>
</body>
</html>It's draw time
Instructions:
- Draw the hierarchy of your family tree (or any family tree)
- Apply the principles of a family tree and draw the hierarchy of an HTML document. Use the members of the family as a guide. Apply HTML elements to your tree.
- REVIEW: WHAT IS THE DOM?
- REVIEW: HOW IS A FAMILY TREE SIMILAR TO THE DOM?
- REVIEW: HOW IS A FAMILY TREE DIFFERENT FROM THE DOM?
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style type="text/css" media="screen">
h1 {
color: grey;
}
.headline {
font-size: 25px;
}
#navmenu {
background-color: blue;
}
</style>
</head>
<body>
<nav id="navmenu">
<ul>
<li>Home</li>
<li>Blog</li>
<li>Contact</li>
</ul>
</nav>
<h1 class="headline">Hello, World!</h1>
<p class="copy">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Repellendus assumenda molestiae quibusdam, nulla doloremque perferendis illo nisi voluptates hic quae, rem fuga amet pariatur! Animi provident ea numquam distinctio dolore?</p>
<a href="./contact.html"></a>
</body>
</html><!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<link rel="stylesheet" href="/styles/main.css">
</head>
<body>
<nav id="navmenu">
<ul>
<li>Home</li>
<li>Blog</li>
<li>Contact</li>
</ul>
</nav>
<h1 class="headline">Hello, World!</h1>
<p class="copy">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Repellendus assumenda molestiae quibusdam, nulla doloremque perferendis illo nisi voluptates hic quae, rem fuga amet pariatur! Animi provident ea numquam distinctio dolore?</p>
<a href="./contact.html"></a>
</body>
</html><!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<nav id="navmenu">
<ul>
<li>Home</li>
<li>Blog</li>
<li>Contact</li>
</ul>
</nav>
<h1 class="headline">Hello, World!</h1>
<p class="copy">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Repellendus assumenda molestiae quibusdam, nulla doloremque perferendis illo nisi voluptates hic quae, rem fuga amet pariatur! Animi provident ea numquam distinctio dolore?</p>
<a href="./contact.html"></a>
</body>
</html>LET's BUILD TOGETHER...
Your turn:
- Add information that would be on your business card
- Wrap that information in html tags that are appropriate
-
Use the following tags:
-
h1, h2, p, strong, ul, ol, li, a
-
- If you are stuck, look up the tag
Together, let's:
- Declare the doctype
- Create the basic structure of an html document
Using 'Developer Tools' to Apply our styles risk-free
Let's spin up our business cards in the browser and inspect the page
- Add a style rule in the browser
- Copy that style rule
- Paste it into your text editor
- Link your styles to an external stylesheet
Opportunity for Self-Direction
Following our browser-text-editor-back-to-browser workflow, experiment with styling your Business cards and adding content.
Let's get comfortable with the process of jumping between the browser and our files. This is THE process for web development.
Bonus: Add an image.
: : CLASS recap : :
Learning Objectives:
-
Let's introduce ourselves
-
Review class trajectory and expectations
-
Familiarize ourselves with classroom resources (fewd.digital)
-
Apply HTML tags to a web page and experiment with html tags.
-
Describe the DOM and draw a simple DOM tree.
-
Create and link an external style sheet.
EXIT
TICKET
Class name: FEWD 14