SlideShare a Scribd company logo
1 of 19
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
Student Experience
Gene Babon | Instructor

Leon Noel | Teaching Assistant

David Cantacesso

Keith Frankel

Grant McAuslan

Henry McGovern

Jon Mehlman

Aaron Myran

Erik Schoeffel

Blake Toder

Philip White

Taso Petridis

Joseph Steele
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 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="next_page.html">Next page</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.

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 2010
Matthew Mobbs
 
Baawjsajq109
Baawjsajq109Baawjsajq109
Baawjsajq109
Thinkful
 
Brian lucas capstone project
Brian lucas capstone projectBrian lucas capstone project
Brian lucas capstone project
Brian Lucas
 
Lesson 206 11 oct13-1500-ay
Lesson 206 11 oct13-1500-ayLesson 206 11 oct13-1500-ay
Lesson 206 11 oct13-1500-ay
Codecademy Ren
 

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
 
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
 
WEBD 162: What is a Web Page?
WEBD 162: What is a Web Page?WEBD 162: What is a Web Page?
WEBD 162: What is a Web Page?
 
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
 
WEBD 162 Week 02 LWD4e
WEBD 162 Week 02 LWD4eWEBD 162 Week 02 LWD4e
WEBD 162 Week 02 LWD4e
 
Baawjsajq109
Baawjsajq109Baawjsajq109
Baawjsajq109
 
Introduction to HTML5+CSS
Introduction to HTML5+CSSIntroduction to HTML5+CSS
Introduction to HTML5+CSS
 
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
 
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
 
Kentico Cloud Best Practices
Kentico Cloud Best PracticesKentico Cloud Best Practices
Kentico Cloud Best Practices
 
Fcc1219
Fcc1219Fcc1219
Fcc1219
 
Brian lucas capstone project
Brian lucas capstone projectBrian lucas capstone project
Brian lucas capstone project
 
Week7 assignment c
Week7 assignment cWeek7 assignment c
Week7 assignment c
 
Don’t forget to add doctype
Don’t forget to add doctypeDon’t forget to add doctype
Don’t forget to add doctype
 
HTML standards
HTML standardsHTML standards
HTML standards
 
Lesson 206 11 oct13-1500-ay
Lesson 206 11 oct13-1500-ayLesson 206 11 oct13-1500-ay
Lesson 206 11 oct13-1500-ay
 
Getting started with HTML & CSS
Getting started with HTML & CSSGetting started with HTML & CSS
Getting started with HTML & CSS
 
WordPress Developer tools
WordPress Developer toolsWordPress Developer tools
WordPress Developer tools
 
HTML
HTMLHTML
HTML
 
Rapid WordPress Theme Development
Rapid WordPress Theme DevelopmentRapid WordPress Theme Development
Rapid WordPress Theme Development
 

Viewers also liked (6)

Séance 4 - Publier sur Internet
Séance 4 - Publier sur InternetSéance 4 - Publier sur Internet
Séance 4 - Publier sur Internet
 
Html5apis thenewfrontier-knowit-110203080245-phpapp02
Html5apis thenewfrontier-knowit-110203080245-phpapp02Html5apis thenewfrontier-knowit-110203080245-phpapp02
Html5apis thenewfrontier-knowit-110203080245-phpapp02
 
Bibliographie autour de la seconde guerre mondiale
Bibliographie autour de la seconde guerre mondialeBibliographie autour de la seconde guerre mondiale
Bibliographie autour de la seconde guerre mondiale
 
HTML5 - now or later
HTML5 - now or laterHTML5 - now or later
HTML5 - now or later
 
Javascript Basics - part 1
Javascript Basics - part 1Javascript Basics - part 1
Javascript Basics - part 1
 
Javascript Tutorial
Javascript TutorialJavascript Tutorial
Javascript Tutorial
 

Similar to Lesson 01

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
 
Byowwhc
ByowwhcByowwhc
Byowwhc
 
HTML Semantic Tags
HTML Semantic TagsHTML Semantic Tags
HTML Semantic Tags
 
Feccphx9:25
Feccphx9:25Feccphx9:25
Feccphx9:25
 
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
 
Byowwhc117
Byowwhc117Byowwhc117
Byowwhc117
 
Byowwhc117
Byowwhc117Byowwhc117
Byowwhc117
 
Byowwhc43
Byowwhc43Byowwhc43
Byowwhc43
 
Introduction to basic HTML [Librarian edition]
Introduction to basic HTML [Librarian edition]Introduction to basic HTML [Librarian edition]
Introduction to basic HTML [Librarian edition]
 
HTML5_3.ppt
HTML5_3.pptHTML5_3.ppt
HTML5_3.ppt
 
An-Introduction-to-HTML
An-Introduction-to-HTMLAn-Introduction-to-HTML
An-Introduction-to-HTML
 
Html.pptx
Html.pptxHtml.pptx
Html.pptx
 
S dwebsite12.18.17
S dwebsite12.18.17S dwebsite12.18.17
S dwebsite12.18.17
 
A109 base code html
A109 base code   htmlA109 base code   html
A109 base code html
 
HTML5 Essential Training
HTML5 Essential TrainingHTML5 Essential Training
HTML5 Essential Training
 
Html5
Html5Html5
Html5
 
Html5
Html5Html5
Html5
 
Html5
Html5Html5
Html5
 

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

Why Teams call analytics are critical to your entire business
Why Teams call analytics are critical to your entire businessWhy Teams call analytics are critical to your entire business
Why Teams call analytics are critical to your entire business
panagenda
 
Finding Java's Hidden Performance Traps @ DevoxxUK 2024
Finding Java's Hidden Performance Traps @ DevoxxUK 2024Finding Java's Hidden Performance Traps @ DevoxxUK 2024
Finding Java's Hidden Performance Traps @ DevoxxUK 2024
Victor Rentea
 
Cloud Frontiers: A Deep Dive into Serverless Spatial Data and FME
Cloud Frontiers:  A Deep Dive into Serverless Spatial Data and FMECloud Frontiers:  A Deep Dive into Serverless Spatial Data and FME
Cloud Frontiers: A Deep Dive into Serverless Spatial Data and FME
Safe Software
 

Recently uploaded (20)

Web Form Automation for Bonterra Impact Management (fka Social Solutions Apri...
Web Form Automation for Bonterra Impact Management (fka Social Solutions Apri...Web Form Automation for Bonterra Impact Management (fka Social Solutions Apri...
Web Form Automation for Bonterra Impact Management (fka Social Solutions Apri...
 
Apidays New York 2024 - The value of a flexible API Management solution for O...
Apidays New York 2024 - The value of a flexible API Management solution for O...Apidays New York 2024 - The value of a flexible API Management solution for O...
Apidays New York 2024 - The value of a flexible API Management solution for O...
 
Strategize a Smooth Tenant-to-tenant Migration and Copilot Takeoff
Strategize a Smooth Tenant-to-tenant Migration and Copilot TakeoffStrategize a Smooth Tenant-to-tenant Migration and Copilot Takeoff
Strategize a Smooth Tenant-to-tenant Migration and Copilot Takeoff
 
Apidays New York 2024 - The Good, the Bad and the Governed by David O'Neill, ...
Apidays New York 2024 - The Good, the Bad and the Governed by David O'Neill, ...Apidays New York 2024 - The Good, the Bad and the Governed by David O'Neill, ...
Apidays New York 2024 - The Good, the Bad and the Governed by David O'Neill, ...
 
Understanding the FAA Part 107 License ..
Understanding the FAA Part 107 License ..Understanding the FAA Part 107 License ..
Understanding the FAA Part 107 License ..
 
Rising Above_ Dubai Floods and the Fortitude of Dubai International Airport.pdf
Rising Above_ Dubai Floods and the Fortitude of Dubai International Airport.pdfRising Above_ Dubai Floods and the Fortitude of Dubai International Airport.pdf
Rising Above_ Dubai Floods and the Fortitude of Dubai International Airport.pdf
 
Why Teams call analytics are critical to your entire business
Why Teams call analytics are critical to your entire businessWhy Teams call analytics are critical to your entire business
Why Teams call analytics are critical to your entire business
 
Polkadot JAM Slides - Token2049 - By Dr. Gavin Wood
Polkadot JAM Slides - Token2049 - By Dr. Gavin WoodPolkadot JAM Slides - Token2049 - By Dr. Gavin Wood
Polkadot JAM Slides - Token2049 - By Dr. Gavin Wood
 
Finding Java's Hidden Performance Traps @ DevoxxUK 2024
Finding Java's Hidden Performance Traps @ DevoxxUK 2024Finding Java's Hidden Performance Traps @ DevoxxUK 2024
Finding Java's Hidden Performance Traps @ DevoxxUK 2024
 
How to Troubleshoot Apps for the Modern Connected Worker
How to Troubleshoot Apps for the Modern Connected WorkerHow to Troubleshoot Apps for the Modern Connected Worker
How to Troubleshoot Apps for the Modern Connected Worker
 
Corporate and higher education May webinar.pptx
Corporate and higher education May webinar.pptxCorporate and higher education May webinar.pptx
Corporate and higher education May webinar.pptx
 
Cloud Frontiers: A Deep Dive into Serverless Spatial Data and FME
Cloud Frontiers:  A Deep Dive into Serverless Spatial Data and FMECloud Frontiers:  A Deep Dive into Serverless Spatial Data and FME
Cloud Frontiers: A Deep Dive into Serverless Spatial Data and FME
 
Artificial Intelligence Chap.5 : Uncertainty
Artificial Intelligence Chap.5 : UncertaintyArtificial Intelligence Chap.5 : Uncertainty
Artificial Intelligence Chap.5 : Uncertainty
 
Biography Of Angeliki Cooney | Senior Vice President Life Sciences | Albany, ...
Biography Of Angeliki Cooney | Senior Vice President Life Sciences | Albany, ...Biography Of Angeliki Cooney | Senior Vice President Life Sciences | Albany, ...
Biography Of Angeliki Cooney | Senior Vice President Life Sciences | Albany, ...
 
WSO2's API Vision: Unifying Control, Empowering Developers
WSO2's API Vision: Unifying Control, Empowering DevelopersWSO2's API Vision: Unifying Control, Empowering Developers
WSO2's API Vision: Unifying Control, Empowering Developers
 
Strategies for Landing an Oracle DBA Job as a Fresher
Strategies for Landing an Oracle DBA Job as a FresherStrategies for Landing an Oracle DBA Job as a Fresher
Strategies for Landing an Oracle DBA Job as a Fresher
 
Navigating the Deluge_ Dubai Floods and the Resilience of Dubai International...
Navigating the Deluge_ Dubai Floods and the Resilience of Dubai International...Navigating the Deluge_ Dubai Floods and the Resilience of Dubai International...
Navigating the Deluge_ Dubai Floods and the Resilience of Dubai International...
 
Apidays New York 2024 - Scaling API-first by Ian Reasor and Radu Cotescu, Adobe
Apidays New York 2024 - Scaling API-first by Ian Reasor and Radu Cotescu, AdobeApidays New York 2024 - Scaling API-first by Ian Reasor and Radu Cotescu, Adobe
Apidays New York 2024 - Scaling API-first by Ian Reasor and Radu Cotescu, Adobe
 
presentation ICT roal in 21st century education
presentation ICT roal in 21st century educationpresentation ICT roal in 21st century education
presentation ICT roal in 21st century education
 
TrustArc Webinar - Unlock the Power of AI-Driven Data Discovery
TrustArc Webinar - Unlock the Power of AI-Driven Data DiscoveryTrustArc Webinar - Unlock the Power of AI-Driven Data Discovery
TrustArc Webinar - Unlock the Power of AI-Driven Data Discovery
 

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
  • 5. Student Experience Gene Babon | Instructor Leon Noel | Teaching Assistant David Cantacesso Keith Frankel Grant McAuslan Henry McGovern Jon Mehlman Aaron Myran Erik Schoeffel Blake Toder Philip White Taso Petridis Joseph Steele
  • 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 HTML vs. HTML5 ~ HTML5 is HTML with a few additions. ~ The Doctype tells you if the page is HTML5 ready.
  • 9. HTML Tags & Using Sublime HTML History
  • 10. HTML Tags & Using Sublime HTML Syntax
  • 11. HTML Tags & Using Sublime HTML Syntax
  • 12. HTML Tags & Using Sublime Content Tags Heading Elements <h1>Largest Heading</h1> <h2> . . . </h2> <h3> . . . </h3> <h4> . . .</h4> <h5> . . . </h5> <h6>Smallest Heading</h6>
  • 13. HTML Tags & Using Sublime Content Tags Text Elements <p>This is a paragraph</p> <code>This is some computer code</code>
  • 14. HTML Tags & Using Sublime Content Tags Unordered list <ul> </ul> Unordered list item <li>First item</li> <li>Next item</li>
  • 15. HTML Tags & Using Sublime Content Tags Unordered list and list item <ul> <li>First item</li> <li>Next item</li> </ul>
  • 16. HTML Tags & Using Sublime Content Tags links <a href="next_page.html">Next page</a>
  • 17. HTML Tags & Using Sublime GA Press Release
  • 19. Homework Assignment Create a personal website with about me and resume pages. Video How the Internet Works in 5 minutes video.