HTML Basics Lesson

Front-End Web
Development
Lesson 1
HTML 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).

FEWD Overview
Access Schoology
~ Course Syllabus
~ Pre-Work
~ Lessons: Week by Week
~ Discussions

Student Experience
Gene 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 Development
Front-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 Mac
Desktop + external storage
Create File Structure:
week_01_basics
01_html_basics
02_css_basics

Navigating Web Server
Access GA Web Server
http://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 GitHub
Thursday, 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 History

HTML History
World Wide Web Consortium
HTML Table Layouts
Internet Archive Wayback Machine

HTML Syntax

Content Tags
Heading Elements
<h1>Largest Heading</h1>
<h2> . . . </h2>
<h3> . . . </h3>
<h4> . . .</h4>
<h5> . . . </h5>
<h6>Smallest Heading</h6>

Content Tags
Text Elements
<p>This is a paragraph</p>
<code>This is some computer code</code>

Content Tags
Unordered list
<ul> </ul>
Unordered list item
<li>First item</li>
<li>Next item</li>

Content Tags
Unordered list and list item
<ul>
<li>First item</li>
<li>Next item</li>
</ul>

Content Tags
links
<a href="next_page.html">Next page</a>

Code Along
Downloads:
template.txt
ga_press_release.txt

Lab Time
Create cookies.html
Downloads:
cookie_recipe.txt
cookies.jpg

Homework
Video
How the Internet Works in 5 minutes video.

HTML Basics Lesson

Recommended

Recommended

More Related Content

Viewers also liked

Viewers also liked (20)

Similar to HTML Basics Lesson

Similar to HTML Basics Lesson (20)

More from Gene Babon

More from Gene Babon (20)

HTML Basics Lesson