Lesson 01

472 views
398 views

Published on

0 Comments
1 Like
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total views
472
On SlideShare
0
From Embeds
0
Number of Embeds
1
Actions
Shares
0
Downloads
3
Comments
0
Likes
1
Embeds 0
No embeds

No notes for slide

Lesson 01

  1. 1. Front-End Web Development Lesson 1 HTML Basics
  2. 2. 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).
  3. 3. Schedule Overview + 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
  4. 4. FEWD Overview Access Schoology ~ Course Syllabus ~ Pre-Work ~ Lessons: Week by Week ~ Discussions
  5. 5. Student Experience Gene 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
  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 Create File Structure: week_01_basics 01_html_basics 02_css_basics
  8. 8. Navigating Web Server Access GA Web Server http://studio.generalassemb.ly/ ~ download FileZilla ~ connect to server ~ create personal directory (file folder) ~ upload files at end of each lesson
  9. 9. Version Control Getting Started with GitHub Thursday, March 6, 6:30 pm - 8:00 pm
  10. 10. HTML Tags & Using Sublime HTML vs. HTML5 ~ HTML5 is HTML with a few additions. ~ The Doctype tells you if the page is HTML5 ready.
  11. 11. HTML Tags & Using Sublime HTML History
  12. 12. HTML Tags & Using Sublime HTML History World Wide Web Consortium HTML Table Layouts Internet Archive Wayback Machine
  13. 13. HTML Tags & Using Sublime HTML Syntax
  14. 14. HTML Tags & Using Sublime HTML Syntax
  15. 15. HTML Tags & Using Sublime Content Tags Heading Elements <h1>Largest Heading</h1> <h2> . . . </h2> <h3> . . . </h3> <h4> . . .</h4> <h5> . . . </h5> <h6>Smallest Heading</h6>
  16. 16. HTML Tags & Using Sublime Content Tags Text Elements <p>This is a paragraph</p> <code>This is some computer code</code>
  17. 17. HTML Tags & Using Sublime Content Tags Unordered list <ul> </ul> Unordered list item <li>First item</li> <li>Next item</li>
  18. 18. HTML Tags & Using Sublime Content Tags Unordered list and list item <ul> <li>First item</li> <li>Next item</li> </ul>
  19. 19. HTML Tags & Using Sublime Content Tags links <a href="next_page.html">Next page</a>
  20. 20. HTML Tags & Using Sublime Code Along Downloads: template.txt ga_press_release.txt
  21. 21. Lab Time Create cookies.html Downloads: cookie_recipe.txt cookies.jpg
  22. 22. Homework Video How the Internet Works in 5 minutes video.

×