SlideShare a Scribd company logo

Lesson 01

•
•
Gene Babon
Gene Babon

This document provides an overview of an introductory front-end web development course. It outlines the course structure including lessons on HTML basics, CSS basics, and JavaScript. It introduces key concepts like the difference between front-end and back-end development. The document details the first lesson which establishes a safe learning environment and covers basic HTML tags and using tools like Sublime Text. It also includes the schedule, instructor and teaching assistant information, and introductory content on navigating computers and HTML history.

TechnologyDesign
1 of 20
Download to read offline
Front-End Web Development FEWD
FEWD Overview Access Schoology ~ Course Syllabus ~ Pre-Work ~ Lessons: Week by Week ~ Discussions
Lesson 01 - HTML Basics ~ 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).
Schedule Student Experience | 60 minutes Intro To Front-End Web Development | 20 minutes Navigating Your Computer | 10 minutes HTML Tags & Using Sublime | 60 minutes GA Press Release Lab Time | 30 minutes Cookies Recipe | Resume
Student Experience Gene Babon | Instructor Leon Noel | Teaching Assistant David Cantacesso Aaron Myran Grant McAuslan Taso Petridis Henry McGovern Erik Schoeffel Jon Mehlman Philip White
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 File Structure: Week_01_Basics 01_html_basics 02_css_basics
HTML Tags & Using Sublime
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 Syntax
HTML Tags & Using Sublime HTML Syntax
HTML Tags & Using Sublime Content Tags Heading Elements <h1>Largest Heading</h1> <h2> . . . </h2> <h3> . . . </h3> <h4> . . .</h4> <h5> . . . </h5> <h6>Smallest Heading</h6>
HTML Tags & Using Sublime Content Tags Text Elements <p>This is a paragraph</p> <code>This is some computer code</code>
HTML Tags & Using Sublime Content Tags Unordered list <ul> </ul> Unordered list item <li>First item</li> <li>Next item</li>
HTML Tags & Using Sublime Content Tags Unordered list and list item <ul> <li>First item</li> <li>Next item</li> </ul>
HTML Tags & Using Sublime Content Tags links <a href="Link">First item</a>
HTML Tags & Using Sublime GA Press Release
Lab Time Cookie Recipe
Homework Assignment Create a personal website with about me and resume pages. Video How the Internet Works in 5 minutes video.

Recommended

Lesson 01
Lesson 01Lesson 01
Lesson 01Gene Babon
 
Lesson 01
Lesson 01Lesson 01
Lesson 01Gene Babon
 
Lesson 01
Lesson 01Lesson 01
Lesson 01Gene Babon
 
Deck 893ff61f-1fb8-4e15-a379-775dfdbcee77-12-173-252-450
Deck 893ff61f-1fb8-4e15-a379-775dfdbcee77-12-173-252-450Deck 893ff61f-1fb8-4e15-a379-775dfdbcee77-12-173-252-450
Deck 893ff61f-1fb8-4e15-a379-775dfdbcee77-12-173-252-450
Justin Ezor
 
Introduction to HTML5
Introduction to HTML5Introduction to HTML5
Introduction to HTML5
Mohammad Tahsin Alshalabi
 
Php workshop L0 Introduction
Php workshop L0 IntroductionPhp workshop L0 Introduction
Php workshop L0 Introduction
Mohammad Tahsin Alshalabi
 
Intro javascript build a scraper (3:22)
Intro javascript build a scraper (3:22)Intro javascript build a scraper (3:22)
Intro javascript build a scraper (3:22)
Thinkful
 
Fundamentals of HTML5
Fundamentals of HTML5Fundamentals of HTML5
Fundamentals of HTML5
St. Petersburg College
 

Recommended

Lesson 01
Lesson 01Lesson 01
Lesson 01Gene Babon
 
Lesson 01
Lesson 01Lesson 01
Lesson 01Gene Babon
 
Lesson 01
Lesson 01Lesson 01
Lesson 01Gene Babon
 
Deck 893ff61f-1fb8-4e15-a379-775dfdbcee77-12-173-252-450
Deck 893ff61f-1fb8-4e15-a379-775dfdbcee77-12-173-252-450Deck 893ff61f-1fb8-4e15-a379-775dfdbcee77-12-173-252-450
Deck 893ff61f-1fb8-4e15-a379-775dfdbcee77-12-173-252-450
Justin Ezor
 
Introduction to HTML5
Introduction to HTML5Introduction to HTML5
Introduction to HTML5
Mohammad Tahsin Alshalabi
 
Php workshop L0 Introduction
Php workshop L0 IntroductionPhp workshop L0 Introduction
Php workshop L0 Introduction
Mohammad Tahsin Alshalabi
 
Intro javascript build a scraper (3:22)
Intro javascript build a scraper (3:22)Intro javascript build a scraper (3:22)
Intro javascript build a scraper (3:22)
Thinkful
 
Fundamentals of HTML5
Fundamentals of HTML5Fundamentals of HTML5
Fundamentals of HTML5
St. Petersburg College
 
Web design 2 - Basic HTML 2010
Web design 2 - Basic HTML 2010Web design 2 - Basic HTML 2010
Web design 2 - Basic HTML 2010Matthew Mobbs
 
Php workshop L02 php basics
Php workshop L02 php basicsPhp workshop L02 php basics
Php workshop L02 php basics
Mohammad Tahsin Alshalabi
 
A New Open Source Approach to Rapid Authoring of E-Learning
A New Open Source Approach to Rapid Authoring of E-LearningA New Open Source Approach to Rapid Authoring of E-Learning
A New Open Source Approach to Rapid Authoring of E-Learning
Tonia A. Dousay
 
Deck 893ff61f-1fb8-4e15-a379-775dfdbcee77-12-173-252 (4)
Deck 893ff61f-1fb8-4e15-a379-775dfdbcee77-12-173-252 (4)Deck 893ff61f-1fb8-4e15-a379-775dfdbcee77-12-173-252 (4)
Deck 893ff61f-1fb8-4e15-a379-775dfdbcee77-12-173-252 (4)
Jordan Zurowski
 
Introduction to HTML5+CSS
Introduction to HTML5+CSSIntroduction to HTML5+CSS
Introduction to HTML5+CSS
Ramses Cabello
 
Lesson 111 24 aug13-1430-ay
Lesson 111 24 aug13-1430-ayLesson 111 24 aug13-1430-ay
Lesson 111 24 aug13-1430-ayCodecademy Ren
 
Feccphx9:25
Feccphx9:25Feccphx9:25
Feccphx9:25
Thinkful
 
Getting Started Adobe Edge Code CC & Brackets
Getting Started Adobe Edge Code CC & BracketsGetting Started Adobe Edge Code CC & Brackets
Getting Started Adobe Edge Code CC & Brackets
Teerasej Jiraphatchandej
 
Week7 assignment c
Week7 assignment cWeek7 assignment c
Week7 assignment c
s1240139_HokutoMorita
 
Time is the enemy
Time is the enemyTime is the enemy
Time is the enemy
Leonidas Palaiokostas
 
Introduction to WordPress Security
Introduction to WordPress SecurityIntroduction to WordPress Security
Introduction to WordPress Security
Nile Flores
 
Java script tutorial
Java script tutorialJava script tutorial
Java script tutorial
Son Nguyen
 
WordPress - From the Start - WordCamp Sofia 2013
WordPress - From the Start - WordCamp Sofia 2013WordPress - From the Start - WordCamp Sofia 2013
WordPress - From the Start - WordCamp Sofia 2013
Stanko Metodiev
 
5 Tools to Make You a More Effiecient Teacher
5 Tools to Make You a More Effiecient Teacher5 Tools to Make You a More Effiecient Teacher
5 Tools to Make You a More Effiecient TeacherBrooke Storms
 
Dynamic Website
Dynamic WebsiteDynamic Website
Dynamic WebsiteRyan Scheel
 
Introduction to Optimizing WordPress for Website Speed
Introduction to Optimizing WordPress for Website SpeedIntroduction to Optimizing WordPress for Website Speed
Introduction to Optimizing WordPress for Website Speed
Nile Flores
 
Web development basics
Web development basicsWeb development basics
Web development basicsKalluri Vinay Reddy
 
How to install wordpress
How to install wordpressHow to install wordpress
How to install wordpress
CBitss Technologies
 
Brian lucas capstone project
Brian lucas capstone projectBrian lucas capstone project
Brian lucas capstone projectBrian Lucas
 
HTML5 : How to start learning HTML5 (easy and fast)
HTML5 : How to start learning HTML5 (easy and fast)HTML5 : How to start learning HTML5 (easy and fast)
HTML5 : How to start learning HTML5 (easy and fast)
Bhathiya Nuwan
 
Course Blog Tutorial
Course Blog TutorialCourse Blog Tutorial
Course Blog Tutorialphilosophy139
 
Html5 & less css
Html5 & less cssHtml5 & less css
Html5 & less css
Graham Johnson
 

More Related Content

What's hot

Web design 2 - Basic HTML 2010
Web design 2 - Basic HTML 2010Web design 2 - Basic HTML 2010
Web design 2 - Basic HTML 2010Matthew Mobbs
 
Php workshop L02 php basics
Php workshop L02 php basicsPhp workshop L02 php basics
Php workshop L02 php basics
Mohammad Tahsin Alshalabi
 
A New Open Source Approach to Rapid Authoring of E-Learning
A New Open Source Approach to Rapid Authoring of E-LearningA New Open Source Approach to Rapid Authoring of E-Learning
A New Open Source Approach to Rapid Authoring of E-Learning
Tonia A. Dousay
 
Deck 893ff61f-1fb8-4e15-a379-775dfdbcee77-12-173-252 (4)
Deck 893ff61f-1fb8-4e15-a379-775dfdbcee77-12-173-252 (4)Deck 893ff61f-1fb8-4e15-a379-775dfdbcee77-12-173-252 (4)
Deck 893ff61f-1fb8-4e15-a379-775dfdbcee77-12-173-252 (4)
Jordan Zurowski
 
Introduction to HTML5+CSS
Introduction to HTML5+CSSIntroduction to HTML5+CSS
Introduction to HTML5+CSS
Ramses Cabello
 
Lesson 111 24 aug13-1430-ay
Lesson 111 24 aug13-1430-ayLesson 111 24 aug13-1430-ay
Lesson 111 24 aug13-1430-ayCodecademy Ren
 
Feccphx9:25
Feccphx9:25Feccphx9:25
Feccphx9:25
Thinkful
 
Getting Started Adobe Edge Code CC & Brackets
Getting Started Adobe Edge Code CC & BracketsGetting Started Adobe Edge Code CC & Brackets
Getting Started Adobe Edge Code CC & Brackets
Teerasej Jiraphatchandej
 
Week7 assignment c
Week7 assignment cWeek7 assignment c
Week7 assignment c
s1240139_HokutoMorita
 
Time is the enemy
Time is the enemyTime is the enemy
Time is the enemy
Leonidas Palaiokostas
 
Introduction to WordPress Security
Introduction to WordPress SecurityIntroduction to WordPress Security
Introduction to WordPress Security
Nile Flores
 
Java script tutorial
Java script tutorialJava script tutorial
Java script tutorial
Son Nguyen
 
WordPress - From the Start - WordCamp Sofia 2013
WordPress - From the Start - WordCamp Sofia 2013WordPress - From the Start - WordCamp Sofia 2013
WordPress - From the Start - WordCamp Sofia 2013
Stanko Metodiev
 
5 Tools to Make You a More Effiecient Teacher
5 Tools to Make You a More Effiecient Teacher5 Tools to Make You a More Effiecient Teacher
5 Tools to Make You a More Effiecient TeacherBrooke Storms
 
Introduction to Optimizing WordPress for Website Speed
Introduction to Optimizing WordPress for Website SpeedIntroduction to Optimizing WordPress for Website Speed
Introduction to Optimizing WordPress for Website Speed
Nile Flores
 
How to install wordpress
How to install wordpressHow to install wordpress
How to install wordpress
CBitss Technologies
 
Brian lucas capstone project
Brian lucas capstone projectBrian lucas capstone project
Brian lucas capstone projectBrian Lucas
 
HTML5 : How to start learning HTML5 (easy and fast)
HTML5 : How to start learning HTML5 (easy and fast)HTML5 : How to start learning HTML5 (easy and fast)
HTML5 : How to start learning HTML5 (easy and fast)
Bhathiya Nuwan
 

What's hot (20)

Web design 2 - Basic HTML 2010
Web design 2 - Basic HTML 2010Web design 2 - Basic HTML 2010
Web design 2 - Basic HTML 2010
 
Php workshop L02 php basics
Php workshop L02 php basicsPhp workshop L02 php basics
Php workshop L02 php basics
 
A New Open Source Approach to Rapid Authoring of E-Learning
A New Open Source Approach to Rapid Authoring of E-LearningA New Open Source Approach to Rapid Authoring of E-Learning
A New Open Source Approach to Rapid Authoring of E-Learning
 
Deck 893ff61f-1fb8-4e15-a379-775dfdbcee77-12-173-252 (4)
Deck 893ff61f-1fb8-4e15-a379-775dfdbcee77-12-173-252 (4)Deck 893ff61f-1fb8-4e15-a379-775dfdbcee77-12-173-252 (4)
Deck 893ff61f-1fb8-4e15-a379-775dfdbcee77-12-173-252 (4)
 
Introduction to HTML5+CSS
Introduction to HTML5+CSSIntroduction to HTML5+CSS
Introduction to HTML5+CSS
 
Lesson 111 24 aug13-1430-ay
Lesson 111 24 aug13-1430-ayLesson 111 24 aug13-1430-ay
Lesson 111 24 aug13-1430-ay
 
Feccphx9:25
Feccphx9:25Feccphx9:25
Feccphx9:25
 
Getting Started Adobe Edge Code CC & Brackets
Getting Started Adobe Edge Code CC & BracketsGetting Started Adobe Edge Code CC & Brackets
Getting Started Adobe Edge Code CC & Brackets
 
Week7 assignment c
Week7 assignment cWeek7 assignment c
Week7 assignment c
 
Time is the enemy
Time is the enemyTime is the enemy
Time is the enemy
 
Introduction to WordPress Security
Introduction to WordPress SecurityIntroduction to WordPress Security
Introduction to WordPress Security
 
Java script tutorial
Java script tutorialJava script tutorial
Java script tutorial
 
WordPress - From the Start - WordCamp Sofia 2013
WordPress - From the Start - WordCamp Sofia 2013WordPress - From the Start - WordCamp Sofia 2013
WordPress - From the Start - WordCamp Sofia 2013
 
5 Tools to Make You a More Effiecient Teacher
5 Tools to Make You a More Effiecient Teacher5 Tools to Make You a More Effiecient Teacher
5 Tools to Make You a More Effiecient Teacher
 
Dynamic Website
Dynamic WebsiteDynamic Website
Dynamic Website
 
Introduction to Optimizing WordPress for Website Speed
Introduction to Optimizing WordPress for Website SpeedIntroduction to Optimizing WordPress for Website Speed
Introduction to Optimizing WordPress for Website Speed
 
Web development basics
Web development basicsWeb development basics
Web development basics
 
How to install wordpress
How to install wordpressHow to install wordpress
How to install wordpress
 
Brian lucas capstone project
Brian lucas capstone projectBrian lucas capstone project
Brian lucas capstone project
 
HTML5 : How to start learning HTML5 (easy and fast)
HTML5 : How to start learning HTML5 (easy and fast)HTML5 : How to start learning HTML5 (easy and fast)
HTML5 : How to start learning HTML5 (easy and fast)
 

Viewers also liked

Course Blog Tutorial
Course Blog TutorialCourse Blog Tutorial
Course Blog Tutorialphilosophy139
 
Html5 & less css
Html5 & less cssHtml5 & less css
Html5 & less css
Graham Johnson
 
Webinar: Front End Web Development - Trendy Web Designs Using HTML5
Webinar: Front End Web Development - Trendy Web Designs Using HTML5Webinar: Front End Web Development - Trendy Web Designs Using HTML5
Webinar: Front End Web Development - Trendy Web Designs Using HTML5
Edureka!
 
A Work Day Of A Web Developer
A Work Day Of A Web DeveloperA Work Day Of A Web Developer
A Work Day Of A Web Developer
Edureka!
 
Intro To Twitter Bootstrap
Intro To Twitter BootstrapIntro To Twitter Bootstrap
Intro To Twitter Bootstrap
Ahmed Haque
 
Node.js & Twitter Bootstrap Crash Course
Node.js & Twitter Bootstrap Crash CourseNode.js & Twitter Bootstrap Crash Course
Node.js & Twitter Bootstrap Crash Course
Aaron Silverman
 
Intro to HTML5
Intro to HTML5Intro to HTML5
Intro to HTML5Vlad Posea
 
Introduce Bootstrap 3 to Develop Responsive Design Application
Introduce Bootstrap 3 to Develop Responsive Design ApplicationIntroduce Bootstrap 3 to Develop Responsive Design Application
Introduce Bootstrap 3 to Develop Responsive Design Application
eXo Platform
 
Web Development with HTML5, CSS3 & JavaScript
Web Development with HTML5, CSS3 & JavaScriptWeb Development with HTML5, CSS3 & JavaScript
Web Development with HTML5, CSS3 & JavaScript
Edureka!
 
AngularJs Crash Course
AngularJs Crash CourseAngularJs Crash Course
AngularJs Crash Course
Keith Bloomfield
 
Crash Course in AngularJS + Ionic (Deep dive)
Crash Course in AngularJS + Ionic (Deep dive)Crash Course in AngularJS + Ionic (Deep dive)
Crash Course in AngularJS + Ionic (Deep dive)
ColdFusionConference
 
Bootstrap ppt
Bootstrap pptBootstrap ppt
Bootstrap ppt
Ishtdeep Hora
 
Introduction to Bootstrap
Introduction to BootstrapIntroduction to Bootstrap
Introduction to Bootstrap
Ron Reiter
 
Bootstrap 3 - Sleek, intuitive, and powerful mobile first front-end framework...
Bootstrap 3 - Sleek, intuitive, and powerful mobile first front-end framework...Bootstrap 3 - Sleek, intuitive, and powerful mobile first front-end framework...
Bootstrap 3 - Sleek, intuitive, and powerful mobile first front-end framework...
Cedric Spillebeen
 

Viewers also liked (14)

Course Blog Tutorial
Course Blog TutorialCourse Blog Tutorial
Course Blog Tutorial
 
Html5 & less css
Html5 & less cssHtml5 & less css
Html5 & less css
 
Webinar: Front End Web Development - Trendy Web Designs Using HTML5
Webinar: Front End Web Development - Trendy Web Designs Using HTML5Webinar: Front End Web Development - Trendy Web Designs Using HTML5
Webinar: Front End Web Development - Trendy Web Designs Using HTML5
 
A Work Day Of A Web Developer
A Work Day Of A Web DeveloperA Work Day Of A Web Developer
A Work Day Of A Web Developer
 
Intro To Twitter Bootstrap
Intro To Twitter BootstrapIntro To Twitter Bootstrap
Intro To Twitter Bootstrap
 
Node.js & Twitter Bootstrap Crash Course
Node.js & Twitter Bootstrap Crash CourseNode.js & Twitter Bootstrap Crash Course
Node.js & Twitter Bootstrap Crash Course
 
Intro to HTML5
Intro to HTML5Intro to HTML5
Intro to HTML5
 
Introduce Bootstrap 3 to Develop Responsive Design Application
Introduce Bootstrap 3 to Develop Responsive Design ApplicationIntroduce Bootstrap 3 to Develop Responsive Design Application
Introduce Bootstrap 3 to Develop Responsive Design Application
 
Web Development with HTML5, CSS3 & JavaScript
Web Development with HTML5, CSS3 & JavaScriptWeb Development with HTML5, CSS3 & JavaScript
Web Development with HTML5, CSS3 & JavaScript
 
AngularJs Crash Course
AngularJs Crash CourseAngularJs Crash Course
AngularJs Crash Course
 
Crash Course in AngularJS + Ionic (Deep dive)
Crash Course in AngularJS + Ionic (Deep dive)Crash Course in AngularJS + Ionic (Deep dive)
Crash Course in AngularJS + Ionic (Deep dive)
 
Bootstrap ppt
Bootstrap pptBootstrap ppt
Bootstrap ppt
 
Introduction to Bootstrap
Introduction to BootstrapIntroduction to Bootstrap
Introduction to Bootstrap
 
Bootstrap 3 - Sleek, intuitive, and powerful mobile first front-end framework...
Bootstrap 3 - Sleek, intuitive, and powerful mobile first front-end framework...Bootstrap 3 - Sleek, intuitive, and powerful mobile first front-end framework...
Bootstrap 3 - Sleek, intuitive, and powerful mobile first front-end framework...
 

Similar to Lesson 01

Html week8 2019 2020 for g10 by eng.osama ghandour
Html week8 2019 2020 for g10 by eng.osama ghandourHtml week8 2019 2020 for g10 by eng.osama ghandour
Html week8 2019 2020 for g10 by eng.osama ghandour
Osama Ghandour Geris
 
Html week7 2019 2020 by eng.osama ghandour
Html week7 2019 2020 by eng.osama ghandourHtml week7 2019 2020 by eng.osama ghandour
Html week7 2019 2020 by eng.osama ghandour
Osama Ghandour Geris
 
HTML Semantic Tags
HTML Semantic TagsHTML Semantic Tags
HTML Semantic Tags
Bruce Kyle
 
Byowwhc
ByowwhcByowwhc
Byowwhc
Thinkful
 
Module 1 - Introduction to HTML.pdf
Module 1 - Introduction to HTML.pdfModule 1 - Introduction to HTML.pdf
Module 1 - Introduction to HTML.pdf
Humphrey Humphrey
 
Web Concepts - an introduction - introduction
Web Concepts - an introduction - introductionWeb Concepts - an introduction - introduction
Web Concepts - an introduction - introduction
clement swarnappa
 
HTML5 Essential Training
HTML5 Essential TrainingHTML5 Essential Training
HTML5 Essential Training
Kaloyan Kosev
 
Introduction to basic HTML [Librarian edition]
Introduction to basic HTML [Librarian edition]Introduction to basic HTML [Librarian edition]
Introduction to basic HTML [Librarian edition]
Kosie Eloff
 
Byowwhc117
Byowwhc117Byowwhc117
Byowwhc117
Thinkful
 
Byowwhc117
Byowwhc117Byowwhc117
Byowwhc117
Thinkful
 
HTML5_3.ppt
HTML5_3.pptHTML5_3.ppt
HTML5_3.ppt
NEILMANOJC1
 
S dwebsite12.18.17
S dwebsite12.18.17S dwebsite12.18.17
S dwebsite12.18.17
Thinkful
 
Fecrash10:3:17 sd
Fecrash10:3:17 sdFecrash10:3:17 sd
Fecrash10:3:17 sd
Thinkful
 
An-Introduction-to-HTML
An-Introduction-to-HTMLAn-Introduction-to-HTML
An-Introduction-to-HTML
HatemMagdyMohamed
 
Html.pptx
Html.pptxHtml.pptx
Html.pptx
SuhaibKhan62
 

Similar to Lesson 01 (20)

Html week8 2019 2020 for g10 by eng.osama ghandour
Html week8 2019 2020 for g10 by eng.osama ghandourHtml week8 2019 2020 for g10 by eng.osama ghandour
Html week8 2019 2020 for g10 by eng.osama ghandour
 
Html week7 2019 2020 by eng.osama ghandour
Html week7 2019 2020 by eng.osama ghandourHtml week7 2019 2020 by eng.osama ghandour
Html week7 2019 2020 by eng.osama ghandour
 
HTML Semantic Tags
HTML Semantic TagsHTML Semantic Tags
HTML Semantic Tags
 
Byowwhc
ByowwhcByowwhc
Byowwhc
 
Module 1 - Introduction to HTML.pdf
Module 1 - Introduction to HTML.pdfModule 1 - Introduction to HTML.pdf
Module 1 - Introduction to HTML.pdf
 
Web Concepts - an introduction - introduction
Web Concepts - an introduction - introductionWeb Concepts - an introduction - introduction
Web Concepts - an introduction - introduction
 
Byowwhc26
Byowwhc26Byowwhc26
Byowwhc26
 
HTML5 Essential Training
HTML5 Essential TrainingHTML5 Essential Training
HTML5 Essential Training
 
Introduction to basic HTML [Librarian edition]
Introduction to basic HTML [Librarian edition]Introduction to basic HTML [Librarian edition]
Introduction to basic HTML [Librarian edition]
 
Byowwhc117
Byowwhc117Byowwhc117
Byowwhc117
 
Byowwhc117
Byowwhc117Byowwhc117
Byowwhc117
 
HTML5_3.ppt
HTML5_3.pptHTML5_3.ppt
HTML5_3.ppt
 
S dwebsite12.18.17
S dwebsite12.18.17S dwebsite12.18.17
S dwebsite12.18.17
 
Byowwhc43
Byowwhc43Byowwhc43
Byowwhc43
 
Xhtml
XhtmlXhtml
Xhtml
 
Fecrash10:3:17 sd
Fecrash10:3:17 sdFecrash10:3:17 sd
Fecrash10:3:17 sd
 
An-Introduction-to-HTML
An-Introduction-to-HTMLAn-Introduction-to-HTML
An-Introduction-to-HTML
 
A109 base code html
A109 base code htmlA109 base code html
A109 base code html
 
Html.pptx
Html.pptxHtml.pptx
Html.pptx
 
Html5
Html5Html5
Html5
 

More from Gene Babon

Job Search | Tropical Depressions | Bowling Alleys
Job Search | Tropical Depressions | Bowling AlleysJob Search | Tropical Depressions | Bowling Alleys
Job Search | Tropical Depressions | Bowling Alleys
Gene Babon
 
Tech Over Fifty Launch Meeting
Tech Over Fifty Launch MeetingTech Over Fifty Launch Meeting
Tech Over Fifty Launch Meeting
Gene Babon
 
Anatomy Virtual Self Study Group NEPHP 2018
Anatomy Virtual Self Study Group NEPHP 2018Anatomy Virtual Self Study Group NEPHP 2018
Anatomy Virtual Self Study Group NEPHP 2018
Gene Babon
 
Become a Front End Web Developer
Become a Front End Web DeveloperBecome a Front End Web Developer
Become a Front End Web Developer
Gene Babon
 
Navigating a Career in Web Technology
Navigating a Career in Web TechnologyNavigating a Career in Web Technology
Navigating a Career in Web Technology
Gene Babon
 
Info Session
Info SessionInfo Session
Info Session
Gene Babon
 
Info session
Info sessionInfo session
Info session
Gene Babon
 
Getting Things Done
Getting Things DoneGetting Things Done
Getting Things Done
Gene Babon
 
jQuery Mobile Hour 4
jQuery Mobile Hour 4jQuery Mobile Hour 4
jQuery Mobile Hour 4Gene Babon
 

More from Gene Babon (20)

Job Search | Tropical Depressions | Bowling Alleys
Job Search | Tropical Depressions | Bowling AlleysJob Search | Tropical Depressions | Bowling Alleys
Job Search | Tropical Depressions | Bowling Alleys
 
Tech Over Fifty Launch Meeting
Tech Over Fifty Launch MeetingTech Over Fifty Launch Meeting
Tech Over Fifty Launch Meeting
 
Anatomy Virtual Self Study Group NEPHP 2018
Anatomy Virtual Self Study Group NEPHP 2018Anatomy Virtual Self Study Group NEPHP 2018
Anatomy Virtual Self Study Group NEPHP 2018
 
Become a Front End Web Developer
Become a Front End Web DeveloperBecome a Front End Web Developer
Become a Front End Web Developer
 
Navigating a Career in Web Technology
Navigating a Career in Web TechnologyNavigating a Career in Web Technology
Navigating a Career in Web Technology
 
Info Session
Info SessionInfo Session
Info Session
 
Info session
Info sessionInfo session
Info session
 
Getting Things Done
Getting Things DoneGetting Things Done
Getting Things Done
 
jQuery Mobile Hour 4
jQuery Mobile Hour 4jQuery Mobile Hour 4
jQuery Mobile Hour 4
 
Lesson 17
Lesson 17Lesson 17
Lesson 17
 
Lesson 18
Lesson 18Lesson 18
Lesson 18
 
Lesson 17
Lesson 17Lesson 17
Lesson 17
 
Lesson 16
Lesson 16Lesson 16
Lesson 16
 
Lesson 15
Lesson 15Lesson 15
Lesson 15
 
Lesson 11
Lesson 11Lesson 11
Lesson 11
 
Lesson 10
Lesson 10Lesson 10
Lesson 10
 
Lesson 09
Lesson 09Lesson 09
Lesson 09
 
Lesson 05
Lesson 05Lesson 05
Lesson 05
 
Lesson 04
Lesson 04Lesson 04
Lesson 04
 
Lesson 03
Lesson 03Lesson 03
Lesson 03
 

Recently uploaded

Assuring Contact Center Experiences for Your Customers With ThousandEyes
Assuring Contact Center Experiences for Your Customers With ThousandEyesAssuring Contact Center Experiences for Your Customers With ThousandEyes
Assuring Contact Center Experiences for Your Customers With ThousandEyes
ThousandEyes
 
Kubernetes & AI - Beauty and the Beast !?! @KCD Istanbul 2024
Kubernetes & AI - Beauty and the Beast !?! @KCD Istanbul 2024Kubernetes & AI - Beauty and the Beast !?! @KCD Istanbul 2024
Kubernetes & AI - Beauty and the Beast !?! @KCD Istanbul 2024
Tobias Schneck
 
Bits & Pixels using AI for Good.........
Bits & Pixels using AI for Good.........Bits & Pixels using AI for Good.........
Bits & Pixels using AI for Good.........
Alison B. Lowndes
 
Transcript: Selling digital books in 2024: Insights from industry leaders - T...
Transcript: Selling digital books in 2024: Insights from industry leaders - T...Transcript: Selling digital books in 2024: Insights from industry leaders - T...
Transcript: Selling digital books in 2024: Insights from industry leaders - T...
BookNet Canada
 
FIDO Alliance Osaka Seminar: Overview.pdf
FIDO Alliance Osaka Seminar: Overview.pdfFIDO Alliance Osaka Seminar: Overview.pdf
FIDO Alliance Osaka Seminar: Overview.pdf
FIDO Alliance
 
Key Trends Shaping the Future of Infrastructure.pdf
Key Trends Shaping the Future of Infrastructure.pdfKey Trends Shaping the Future of Infrastructure.pdf
Key Trends Shaping the Future of Infrastructure.pdf
Cheryl Hung
 
Knowledge engineering: from people to machines and back
Knowledge engineering: from people to machines and backKnowledge engineering: from people to machines and back
Knowledge engineering: from people to machines and back
Elena Simperl
 
Connector Corner: Automate dynamic content and events by pushing a button
Connector Corner: Automate dynamic content and events by pushing a buttonConnector Corner: Automate dynamic content and events by pushing a button
Connector Corner: Automate dynamic content and events by pushing a button
DianaGray10
 
JMeter webinar - integration with InfluxDB and Grafana
JMeter webinar - integration with InfluxDB and GrafanaJMeter webinar - integration with InfluxDB and Grafana
JMeter webinar - integration with InfluxDB and Grafana
RTTS
 
Monitoring Java Application Security with JDK Tools and JFR Events
Monitoring Java Application Security with JDK Tools and JFR EventsMonitoring Java Application Security with JDK Tools and JFR Events
Monitoring Java Application Security with JDK Tools and JFR Events
Ana-Maria Mihalceanu
 
Leading Change strategies and insights for effective change management pdf 1.pdf
Leading Change strategies and insights for effective change management pdf 1.pdfLeading Change strategies and insights for effective change management pdf 1.pdf
Leading Change strategies and insights for effective change management pdf 1.pdf
OnBoard
 
Slack (or Teams) Automation for Bonterra Impact Management (fka Social Soluti...
Slack (or Teams) Automation for Bonterra Impact Management (fka Social Soluti...Slack (or Teams) Automation for Bonterra Impact Management (fka Social Soluti...
Slack (or Teams) Automation for Bonterra Impact Management (fka Social Soluti...
Jeffrey Haguewood
 
Generating a custom Ruby SDK for your web service or Rails API using Smithy
Generating a custom Ruby SDK for your web service or Rails API using SmithyGenerating a custom Ruby SDK for your web service or Rails API using Smithy
Generating a custom Ruby SDK for your web service or Rails API using Smithy
g2nightmarescribd
 
Epistemic Interaction - tuning interfaces to provide information for AI support
Epistemic Interaction - tuning interfaces to provide information for AI supportEpistemic Interaction - tuning interfaces to provide information for AI support
Epistemic Interaction - tuning interfaces to provide information for AI support
Alan Dix
 
From Siloed Products to Connected Ecosystem: Building a Sustainable and Scala...
From Siloed Products to Connected Ecosystem: Building a Sustainable and Scala...From Siloed Products to Connected Ecosystem: Building a Sustainable and Scala...
From Siloed Products to Connected Ecosystem: Building a Sustainable and Scala...
Product School
 
Smart TV Buyer Insights Survey 2024 by 91mobiles.pdf
Smart TV Buyer Insights Survey 2024 by 91mobiles.pdfSmart TV Buyer Insights Survey 2024 by 91mobiles.pdf
Smart TV Buyer Insights Survey 2024 by 91mobiles.pdf
91mobiles
 
UiPath Test Automation using UiPath Test Suite series, part 4
UiPath Test Automation using UiPath Test Suite series, part 4UiPath Test Automation using UiPath Test Suite series, part 4
UiPath Test Automation using UiPath Test Suite series, part 4
DianaGray10
 
Elevating Tactical DDD Patterns Through Object Calisthenics
Elevating Tactical DDD Patterns Through Object CalisthenicsElevating Tactical DDD Patterns Through Object Calisthenics
Elevating Tactical DDD Patterns Through Object Calisthenics
Dorra BARTAGUIZ
 
GenAISummit 2024 May 28 Sri Ambati Keynote: AGI Belongs to The Community in O...
GenAISummit 2024 May 28 Sri Ambati Keynote: AGI Belongs to The Community in O...GenAISummit 2024 May 28 Sri Ambati Keynote: AGI Belongs to The Community in O...
GenAISummit 2024 May 28 Sri Ambati Keynote: AGI Belongs to The Community in O...
Sri Ambati
 
Neuro-symbolic is not enough, we need neuro-*semantic*
Neuro-symbolic is not enough, we need neuro-*semantic*Neuro-symbolic is not enough, we need neuro-*semantic*
Neuro-symbolic is not enough, we need neuro-*semantic*
Frank van Harmelen
 

Recently uploaded (20)

Assuring Contact Center Experiences for Your Customers With ThousandEyes
Assuring Contact Center Experiences for Your Customers With ThousandEyesAssuring Contact Center Experiences for Your Customers With ThousandEyes
Assuring Contact Center Experiences for Your Customers With ThousandEyes
 
Kubernetes & AI - Beauty and the Beast !?! @KCD Istanbul 2024
Kubernetes & AI - Beauty and the Beast !?! @KCD Istanbul 2024Kubernetes & AI - Beauty and the Beast !?! @KCD Istanbul 2024
Kubernetes & AI - Beauty and the Beast !?! @KCD Istanbul 2024
 
Bits & Pixels using AI for Good.........
Bits & Pixels using AI for Good.........Bits & Pixels using AI for Good.........
Bits & Pixels using AI for Good.........
 
Transcript: Selling digital books in 2024: Insights from industry leaders - T...
Transcript: Selling digital books in 2024: Insights from industry leaders - T...Transcript: Selling digital books in 2024: Insights from industry leaders - T...
Transcript: Selling digital books in 2024: Insights from industry leaders - T...
 
FIDO Alliance Osaka Seminar: Overview.pdf
FIDO Alliance Osaka Seminar: Overview.pdfFIDO Alliance Osaka Seminar: Overview.pdf
FIDO Alliance Osaka Seminar: Overview.pdf
 
Key Trends Shaping the Future of Infrastructure.pdf
Key Trends Shaping the Future of Infrastructure.pdfKey Trends Shaping the Future of Infrastructure.pdf
Key Trends Shaping the Future of Infrastructure.pdf
 
Knowledge engineering: from people to machines and back
Knowledge engineering: from people to machines and backKnowledge engineering: from people to machines and back
Knowledge engineering: from people to machines and back
 
Connector Corner: Automate dynamic content and events by pushing a button
Connector Corner: Automate dynamic content and events by pushing a buttonConnector Corner: Automate dynamic content and events by pushing a button
Connector Corner: Automate dynamic content and events by pushing a button
 
JMeter webinar - integration with InfluxDB and Grafana
JMeter webinar - integration with InfluxDB and GrafanaJMeter webinar - integration with InfluxDB and Grafana
JMeter webinar - integration with InfluxDB and Grafana
 
Monitoring Java Application Security with JDK Tools and JFR Events
Monitoring Java Application Security with JDK Tools and JFR EventsMonitoring Java Application Security with JDK Tools and JFR Events
Monitoring Java Application Security with JDK Tools and JFR Events
 
Leading Change strategies and insights for effective change management pdf 1.pdf
Leading Change strategies and insights for effective change management pdf 1.pdfLeading Change strategies and insights for effective change management pdf 1.pdf
Leading Change strategies and insights for effective change management pdf 1.pdf
 
Slack (or Teams) Automation for Bonterra Impact Management (fka Social Soluti...
Slack (or Teams) Automation for Bonterra Impact Management (fka Social Soluti...Slack (or Teams) Automation for Bonterra Impact Management (fka Social Soluti...
Slack (or Teams) Automation for Bonterra Impact Management (fka Social Soluti...
 
Generating a custom Ruby SDK for your web service or Rails API using Smithy
Generating a custom Ruby SDK for your web service or Rails API using SmithyGenerating a custom Ruby SDK for your web service or Rails API using Smithy
Generating a custom Ruby SDK for your web service or Rails API using Smithy
 
Epistemic Interaction - tuning interfaces to provide information for AI support
Epistemic Interaction - tuning interfaces to provide information for AI supportEpistemic Interaction - tuning interfaces to provide information for AI support
Epistemic Interaction - tuning interfaces to provide information for AI support
 
From Siloed Products to Connected Ecosystem: Building a Sustainable and Scala...
From Siloed Products to Connected Ecosystem: Building a Sustainable and Scala...From Siloed Products to Connected Ecosystem: Building a Sustainable and Scala...
From Siloed Products to Connected Ecosystem: Building a Sustainable and Scala...
 
Smart TV Buyer Insights Survey 2024 by 91mobiles.pdf
Smart TV Buyer Insights Survey 2024 by 91mobiles.pdfSmart TV Buyer Insights Survey 2024 by 91mobiles.pdf
Smart TV Buyer Insights Survey 2024 by 91mobiles.pdf
 
UiPath Test Automation using UiPath Test Suite series, part 4
UiPath Test Automation using UiPath Test Suite series, part 4UiPath Test Automation using UiPath Test Suite series, part 4
UiPath Test Automation using UiPath Test Suite series, part 4
 
Elevating Tactical DDD Patterns Through Object Calisthenics
Elevating Tactical DDD Patterns Through Object CalisthenicsElevating Tactical DDD Patterns Through Object Calisthenics
Elevating Tactical DDD Patterns Through Object Calisthenics
 
GenAISummit 2024 May 28 Sri Ambati Keynote: AGI Belongs to The Community in O...
GenAISummit 2024 May 28 Sri Ambati Keynote: AGI Belongs to The Community in O...GenAISummit 2024 May 28 Sri Ambati Keynote: AGI Belongs to The Community in O...
GenAISummit 2024 May 28 Sri Ambati Keynote: AGI Belongs to The Community in O...
 
Neuro-symbolic is not enough, we need neuro-*semantic*
Neuro-symbolic is not enough, we need neuro-*semantic*Neuro-symbolic is not enough, we need neuro-*semantic*
Neuro-symbolic is not enough, we need neuro-*semantic*
 

Lesson 01

  • 2. FEWD Overview Access Schoology ~ Course Syllabus ~ Pre-Work ~ Lessons: Week by Week ~ Discussions
  • 3. Lesson 01 - HTML Basics ~ 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).
  • 4. Schedule Student Experience | 60 minutes Intro To Front-End Web Development | 20 minutes Navigating Your Computer | 10 minutes HTML Tags & Using Sublime | 60 minutes GA Press Release Lab Time | 30 minutes Cookies Recipe | Resume
  • 5. Student Experience Gene Babon | Instructor Leon Noel | Teaching Assistant David Cantacesso Aaron Myran Grant McAuslan Taso Petridis Henry McGovern Erik Schoeffel Jon Mehlman Philip White
  • 6. 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++
  • 7. Navigating Your Computer PC vs Mac Desktop + external storage File Structure: Week_01_Basics 01_html_basics 02_css_basics
  • 8. HTML Tags & Using Sublime
  • 9. HTML Tags & Using Sublime HTML vs. HTML5 ~ HTML5 is HTML with a few additions. ~ The Doctype tells you if the page is HTML5 ready.
  • 10. HTML Tags & Using Sublime HTML History
  • 11. HTML Tags & Using Sublime HTML Syntax
  • 12. HTML Tags & Using Sublime HTML Syntax
  • 13. HTML Tags & Using Sublime Content Tags Heading Elements <h1>Largest Heading</h1> <h2> . . . </h2> <h3> . . . </h3> <h4> . . .</h4> <h5> . . . </h5> <h6>Smallest Heading</h6>
  • 14. HTML Tags & Using Sublime Content Tags Text Elements <p>This is a paragraph</p> <code>This is some computer code</code>
  • 15. HTML Tags & Using Sublime Content Tags Unordered list <ul> </ul> Unordered list item <li>First item</li> <li>Next item</li>
  • 16. HTML Tags & Using Sublime Content Tags Unordered list and list item <ul> <li>First item</li> <li>Next item</li> </ul>
  • 17. HTML Tags & Using Sublime Content Tags links <a href="Link">First item</a>
  • 18. HTML Tags & Using Sublime GA Press Release
  • 20. Homework Assignment Create a personal website with about me and resume pages. Video How the Internet Works in 5 minutes video.