Top Banner
Front-End Web Development Lesson 1 HTML Basics
22
Welcome message from author
This document is posted to help you gain knowledge. Please leave a comment to let me know what you think about it! Share it to your friends and learn new things together.
Transcript
Page 1: Lesson 01

Front-End Web Development

Lesson 1HTML Basics

Page 2: Lesson 01

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).

Page 3: Lesson 01

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

Page 4: Lesson 01

FEWD Overview

Access Schoology

~ Course Syllabus~ Pre-Work~ Lessons: Week by Week

~ Discussions

Page 5: Lesson 01

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

Page 6: Lesson 01

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++

Page 7: Lesson 01

Navigating Your Computer

PC vs MacDesktop + external storageCreate File Structure: week_01_basics

01_html_basics02_css_basics

Page 8: Lesson 01

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

Page 10: Lesson 01

HTML Tags & Using Sublime

HTML vs. HTML5

~ HTML5 is HTML with a few additions.~ The Doctype tells you if the page is HTML5 ready.

Page 11: Lesson 01

HTML Tags & Using Sublime

HTML History

Page 13: Lesson 01

HTML Tags & Using Sublime

HTML Syntax

Page 14: Lesson 01

HTML Tags & Using Sublime

HTML Syntax

Page 15: Lesson 01

HTML Tags & Using Sublime

Content TagsHeading Elements

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

Page 16: Lesson 01

HTML Tags & Using Sublime

Content TagsText Elements

<p>This is a paragraph</p><code>This is some computer code</code>

Page 17: Lesson 01

HTML Tags & Using Sublime

Content TagsUnordered list

<ul> </ul>

Unordered list item<li>First item</li><li>Next item</li>

Page 18: Lesson 01

HTML Tags & Using Sublime

Content TagsUnordered list and list item

<ul><li>First item</li><li>Next item</li>

</ul>

Page 19: Lesson 01

HTML Tags & Using Sublime

Content Tagslinks

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

Page 20: Lesson 01

HTML Tags & Using Sublime

Code Along

Downloads:

template.txtga_press_release.txt

Page 21: Lesson 01

Lab Time

Create cookies.html

Downloads:

cookie_recipe.txtcookies.jpg

Page 22: Lesson 01

Homework

Video

How the Internet Works in 5 minutes video.