Professional Documents
Culture Documents
Intro - To - Coding NEW 5.8 Livestream
Intro - To - Coding NEW 5.8 Livestream
Intro - To - Coding NEW 5.8 Livestream
LEARNING OBJECTIVES
‣ Describe the role of HTML, CSS and JavaScript in web development.
‣ Use HTML to add structure to a basic webpage
‣ Use CSS to add styles to a webpage
‣ Describe the various opportunities to continue learning web-development
AGENDA
Intro to HTML
Intro to CSS
Next Steps
HTML, CSS & JAVASCRIPT
FRONT END IS MADE UP OF…
HTML
CSS JavaScript
THE THREE AMIGOS: STRUCTURE, STYLE, BEHAVIOR
CONTENT STYLE
BONES HTML CSS
SKIN
FUNCTIONALITY
JAVASCRIPT
BRAIN
LET'S TAKE A CLOSER LOOK
https://codepen.io/madeline10302/pen/JpmGdg?editors=1000
ACTIVITY: DISTINGUISH BETWEEN HTML, CSS, AND JS
DIRECTIONS
Fill in each of the blanks with HTML, CSS or JavaScript
1. Visit uber.com.
2. The words “Get there, Your day belongs to you” appears due to
EXERCISE
______?
<h1>Hello World!</h1>
HOW DO I WRITE HTML?
<tagName>content</tagName>
ELEMENT
FRONT END
GUIDED PRACTICE
HTML CODE-ALONG
h2 - h6 Subheadings <h2>Articles</h2>
<ul>
<li>Avocados</li> • Avocados
<li>Tortilla Chips</li> • Tortilla Chips
<li>Pepper Jack Cheese</li> • Pepper Jack Cheese
</ul>
<ol>
<li>Learn to code</li> 1. Learn to code
<li>Take over the world</li> 2. Take over the world
</ol>
STRUCTURAL TAGS — UNORDERED LISTS
Users can click on anything between the opening and closing <a> tags.
<a>Amazon</a>
CLICKABLE TEXT
ANCHORS (LINKS TO OTHER PAGES)
<a href="">Amazon</a>
HREF ATTRIBUTE:
GOES IN OPENING TAG
ANCHOR
The href attribute is how you specify where the link should take the user
<a href="http://www.amazon.com">Amazon</a>
LAB — PART 1
ACTIVITY: PRACTICE WRITING HTML
DIRECTIONS
SOLUTION CODE
EXERCISE
INTRO TO CSS
HTML
CSS BASICS
WHAT IS CSS?
body { h1, p {
background-color: #22475E; color: #98D2BF;
} }
DEFAULT TEXT STYLES & BACKGROUND-COLOR
body {
background-color: #22475E;
color: #0D2C40;
}
COLOR
TYPEFACE TERMINOLOGY — PART 1
40px
25px
FONT FAMILY
Arial Georgia
Web font services — like Google Fonts — allow us to ensure that all users can see the same font.
body { p {
font-family: 'Raleway'; font-family: 'Lato';
} }
COLOR
LAB — PART 2
CODING 101 : HTML + CSS
REFERENCE PAGES:
• Mozilla Developer Network
• W3Schools
• CSS Tricks
ACTIVITY: CREATING YOUR FIRST HTML FILE
DIRECTIONS
1. Write CSS to replicate the mockup for Part 2. You can choose
between the regular or advanced version.
SOLUTION CODE
EXERCISE
EXIT SURVEY
INTRO TO CODING : HTML + CSS
ga.co/introto
Mobile & Laptop Friendly
NEXT STEPS
ACTIVITY: AFTER CLASS YOU CAN…
DIRECTIONS
1. Go to dash.ga.co
2. There are 5 projects available to you that cover what
EXERCISE we went over tonight and more!
INTRO TO CODING : HTML + CSS
STAYING CURRENT
• From Zero to Front-End Hero
• Codecademy
• CodeSchool
• Treehouse
THANKS!