Front-End Web Development Lesson 1 HTML Basics
Front-End Web Development
Lesson 1HTML Basics
Learning Objectives~ Establish community in the classroom and create a safe space to ask questions and learn through making mistakes.
~ Recognize the different roles and responsibilities in web development.
~ Articulate the progression of HTML to HTML5.
~ Apply and experiment with HTML tags <html><head><!DOCTYPE html><body><h1><h6>.
~ Practice using FEWD course tools (sublime text, finder, chrome).
ScheduleOverview + Housekeeping + Student Experience | 60 minutes
Intro To Front-End Web Development | 20 minutes
Navigating Your Computer + Server | 10 minutes
HTML Tags & Using Sublime | 60 minutes
GA Press Release
Lab Time | 30 minutes
Cookies Recipe
FEWD Overview
Access Schoology
~ Course Syllabus~ Pre-Work~ Lessons: Week by Week
~ Discussions
Student ExperienceGene Babon | Instructor Leon Noel | Teaching Assistant
Jenn Contois Trevor Hudson
Caroline Epp Carol Lieb
Patrick Feger Íñigo López Vázquez
Sarah Hanley Floyd Miller
Melissa Hines Timothy Orazem
Brian Hoffer
Intro to Front-End DevelopmentFront-End Development (client-side) Back-End Development (server-side)
HTML > HTML5 Ruby
CSS > CSS3 PHP
JavaScript > jQuery Python
Perl
C++
Navigating Your Computer
PC vs MacDesktop + external storageCreate File Structure: week_01_basics
01_html_basics02_css_basics
Navigating Web Server
Access GA Web Serverhttp://studio.generalassemb.ly/
~ download FileZilla~ connect to server~ create personal directory (file folder)
~ upload files at end of each lesson
Version Control
Getting Started with GitHubThursday, March 6, 6:30 pm - 8:00 pm
HTML Tags & Using Sublime
HTML vs. HTML5
~ HTML5 is HTML with a few additions.~ The Doctype tells you if the page is HTML5 ready.
HTML Tags & Using Sublime
HTML History
HTML Tags & Using Sublime
HTML History
World Wide Web ConsortiumHTML Table LayoutsInternet Archive Wayback Machine
HTML Tags & Using Sublime
HTML Syntax
HTML Tags & Using Sublime
HTML Syntax
HTML Tags & Using Sublime
Content TagsHeading Elements
<h1>Largest Heading</h1><h2> . . . </h2><h3> . . . </h3><h4> . . .</h4><h5> . . . </h5><h6>Smallest Heading</h6>
HTML Tags & Using Sublime
Content TagsText Elements
<p>This is a paragraph</p><code>This is some computer code</code>
HTML Tags & Using Sublime
Content TagsUnordered list
<ul> </ul>
Unordered list item<li>First item</li><li>Next item</li>
HTML Tags & Using Sublime
Content TagsUnordered list and list item
<ul><li>First item</li><li>Next item</li>
</ul>
HTML Tags & Using Sublime
Content Tagslinks
<a href="next_page.html">Next page</a>
HTML Tags & Using Sublime
Code Along
Downloads:
template.txtga_press_release.txt
Lab Time
Create cookies.html
Downloads:
cookie_recipe.txtcookies.jpg
Homework
Video
How the Internet Works in 5 minutes video.