SlideShare uma empresa Scribd logo
1 de 19
Baixar para ler 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.

Mais conteúdo relacionado

Mais procurados

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
 

Mais procurados (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
 

Destaque (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
 

Semelhante a Lesson 01

Semelhante a 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
 

Mais de 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
 

Último

+971581248768>> SAFE AND ORIGINAL ABORTION PILLS FOR SALE IN DUBAI AND ABUDHA...
+971581248768>> SAFE AND ORIGINAL ABORTION PILLS FOR SALE IN DUBAI AND ABUDHA...+971581248768>> SAFE AND ORIGINAL ABORTION PILLS FOR SALE IN DUBAI AND ABUDHA...
+971581248768>> SAFE AND ORIGINAL ABORTION PILLS FOR SALE IN DUBAI AND ABUDHA...
?#DUbAI#??##{{(☎️+971_581248768%)**%*]'#abortion pills for sale in dubai@
 
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
 

Último (20)

Connector Corner: Accelerate revenue generation using UiPath API-centric busi...
Connector Corner: Accelerate revenue generation using UiPath API-centric busi...Connector Corner: Accelerate revenue generation using UiPath API-centric busi...
Connector Corner: Accelerate revenue generation using UiPath API-centric busi...
 
MINDCTI Revenue Release Quarter One 2024
MINDCTI Revenue Release Quarter One 2024MINDCTI Revenue Release Quarter One 2024
MINDCTI Revenue Release Quarter One 2024
 
Axa Assurance Maroc - Insurer Innovation Award 2024
Axa Assurance Maroc - Insurer Innovation Award 2024Axa Assurance Maroc - Insurer Innovation Award 2024
Axa Assurance Maroc - Insurer Innovation Award 2024
 
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
 
Cyberprint. Dark Pink Apt Group [EN].pdf
Cyberprint. Dark Pink Apt Group [EN].pdfCyberprint. Dark Pink Apt Group [EN].pdf
Cyberprint. Dark Pink Apt Group [EN].pdf
 
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
 
Manulife - Insurer Transformation Award 2024
Manulife - Insurer Transformation Award 2024Manulife - Insurer Transformation Award 2024
Manulife - Insurer Transformation Award 2024
 
Apidays New York 2024 - Passkeys: Developing APIs to enable passwordless auth...
Apidays New York 2024 - Passkeys: Developing APIs to enable passwordless auth...Apidays New York 2024 - Passkeys: Developing APIs to enable passwordless auth...
Apidays New York 2024 - Passkeys: Developing APIs to enable passwordless auth...
 
AXA XL - Insurer Innovation Award Americas 2024
AXA XL - Insurer Innovation Award Americas 2024AXA XL - Insurer Innovation Award Americas 2024
AXA XL - Insurer Innovation Award Americas 2024
 
+971581248768>> SAFE AND ORIGINAL ABORTION PILLS FOR SALE IN DUBAI AND ABUDHA...
+971581248768>> SAFE AND ORIGINAL ABORTION PILLS FOR SALE IN DUBAI AND ABUDHA...+971581248768>> SAFE AND ORIGINAL ABORTION PILLS FOR SALE IN DUBAI AND ABUDHA...
+971581248768>> SAFE AND ORIGINAL ABORTION PILLS FOR SALE IN DUBAI AND ABUDHA...
 
DEV meet-up UiPath Document Understanding May 7 2024 Amsterdam
DEV meet-up UiPath Document Understanding May 7 2024 AmsterdamDEV meet-up UiPath Document Understanding May 7 2024 Amsterdam
DEV meet-up UiPath Document Understanding May 7 2024 Amsterdam
 
[BuildWithAI] Introduction to Gemini.pdf
[BuildWithAI] Introduction to Gemini.pdf[BuildWithAI] Introduction to Gemini.pdf
[BuildWithAI] Introduction to Gemini.pdf
 
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...
 
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
 
MS Copilot expands with MS Graph connectors
MS Copilot expands with MS Graph connectorsMS Copilot expands with MS Graph connectors
MS Copilot expands with MS Graph connectors
 
Artificial Intelligence Chap.5 : Uncertainty
Artificial Intelligence Chap.5 : UncertaintyArtificial Intelligence Chap.5 : Uncertainty
Artificial Intelligence Chap.5 : Uncertainty
 
"I see eyes in my soup": How Delivery Hero implemented the safety system for ...
"I see eyes in my soup": How Delivery Hero implemented the safety system for ..."I see eyes in my soup": How Delivery Hero implemented the safety system for ...
"I see eyes in my soup": How Delivery Hero implemented the safety system for ...
 
CNIC Information System with Pakdata Cf In Pakistan
CNIC Information System with Pakdata Cf In PakistanCNIC Information System with Pakdata Cf In Pakistan
CNIC Information System with Pakdata Cf In Pakistan
 
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, ...
 
FWD Group - Insurer Innovation Award 2024
FWD Group - Insurer Innovation Award 2024FWD Group - Insurer Innovation Award 2024
FWD Group - Insurer Innovation Award 2024
 

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.