front end web development
Brett Haymaker, JavaScript Developer, Consultant & Instructor
FEWD 17
ATTENDANCE!
Learning Objectives:
-
Introduction
-
Review class trajectory and expectations
-
Familiarize ourselves with classroom resources (class portal TBD)
-
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.
-
IF WE ARE BRAVE: Git, GitHub
-
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
-
Final Presentations
Expectations /
What success looks like
- Grit
- Growth mindset
- Punctuality
- in-class
- assignments
- Responsibility
- Research
- Office hours @GA
- Tuesdays
- 5:30 - 7:30pm
- Homework
- Assigned: Wednesday nights
- Due: The following Tuesday night
Git, Github and Version Control
- Git - What is it?
- Why do we use it?
- Github - the porcelain toilet for Git
- Github Desktop - a desktop app that allows us to interface with Git and Github
Let's walk through this step by step...
HTML Tags & CSS Selectors Review
HTML
CSS Selectors
WHY DO WE USE SUBLIME?
A REVIEW.
GET ON THE SAME PAGE: Install 'Emmett', '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
-
Review and practice with Git, Github and Github Desktop
-
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 17
Lesson 1
FEWD17-HTML-Week-1
By Brett Haymaker
FEWD17-HTML-Week-1
Week 1 Lesson 1
- 40