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 ...
Schedule
Student Experience | 60 minutes
Intro To Front-End Web Development | 20 minutes
Navigating Your Computer | 10 min...
Student Experience
Gene Babon | Instructor

Leon Noel | Teaching Assistant

David Cantacesso

Aaron Myran

Grant McAuslan
...
Intro to Front-End Development
Front-End Development (client-side)

Back-End Development (server-side)

HTML > HTML5

Ruby...
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 HTML...
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> . ...
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 v...
Upcoming SlideShare
Loading in...5
×

Lesson 01

91

Published on

Published in: Technology, Design
0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total Views
91
On Slideshare
0
From Embeds
0
Number of Embeds
0
Actions
Shares
0
Downloads
1
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide

Lesson 01

  1. 1. Front-End Web Development FEWD
  2. 2. FEWD Overview Access Schoology ~ Course Syllabus ~ Pre-Work ~ Lessons: Week by Week ~ Discussions
  3. 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. 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. 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. 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. 7. Navigating Your Computer PC vs Mac Desktop + external storage File Structure: Week_01_Basics 01_html_basics 02_css_basics
  8. 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. 9. HTML Tags & Using Sublime HTML History
  10. 10. HTML Tags & Using Sublime HTML Syntax
  11. 11. HTML Tags & Using Sublime HTML Syntax
  12. 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. 13. HTML Tags & Using Sublime Content Tags Text Elements <p>This is a paragraph</p> <code>This is some computer code</code>
  14. 14. HTML Tags & Using Sublime Content Tags Unordered list <ul> </ul> Unordered list item <li>First item</li> <li>Next item</li>
  15. 15. HTML Tags & Using Sublime Content Tags Unordered list and list item <ul> <li>First item</li> <li>Next item</li> </ul>
  16. 16. HTML Tags & Using Sublime Content Tags links <a href="next_page.html">Next page</a>
  17. 17. HTML Tags & Using Sublime GA Press Release
  18. 18. Lab Time Cookie Recipe
  19. 19. Homework Assignment Create a personal website with about me and resume pages. Video How the Internet Works in 5 minutes video.
  1. A particular slide catching your eye?

    Clipping is a handy way to collect important slides you want to go back to later.

×