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:

  1. Draw the hierarchy of your family tree (or any family tree)
  2. 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.
  3. REVIEW: WHAT IS THE DOM?
  4. REVIEW: HOW IS A FAMILY TREE SIMILAR TO THE DOM?
  5. 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:

  1. Add information that would be on your business card
  2. Wrap that information in html tags that are appropriate

  3. Use the following tags:

    1. h1, h2, p, strong, ul, ol, li, a 

  4. If you are stuck, look up the tag

Together, let's:

  1.  Declare the doctype
  2. 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

  1. Add a style rule in the browser
  2. Copy that style rule
  3. Paste it into your text editor
  4. 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 Survey

Class name: FEWD 17

Lesson 1

FEWD17-HTML-Week-1

By Brett Haymaker

Made with Slides.com

FEWD17-HTML-Week-1

Week 1 Lesson 1

  • 27

More from Brett Haymaker