HTML, CSS, Javascript + ... Tutorial

If you need a refresher on using Google Chrome Developer tools.For this project, please use an updated version of Google Chrome for website testing. Watch this

There will be times when you need to obtain website content like images, text, jquery information, and other resources. Please contact me when you have arrived at those steps and I will share how to obtain them.

Please do not wait until the last minute to attempt this exam. It takes a considerable amount of time, even though you are guided during each step. I recommend at least an hour a day. Doing so should take you about 9-10 days. If you spend more than an hour each day (perhaps in 30 min segments), you will be finished in less time.

Omnifoods Restaurant Responsive Website Tutorial

Here is an overview.

Complete the following tutorial to create a responsive website. Your page should look exactly as is indicated in the tutorial.

  1. Setup (14:50)
  2. Establishing Responsiveness (10:04)
  3. Building the Header: Part One (16:08)
  4. Building the Header: Part Two (21:59)
  5. Building the Header: Part Three (20:10)
  6. Building the Feature Section: Part One (15:07)
  7. Building the Feature Section: Part Two (17:56)
  8. Building the Favorite Meals Section: Part One (12:22)
  9. Building the Favorite Meals Section: Part Two (11:35)
  10. Building the How It Works Section: Part One (9:10)
  11. Building the How It Works Section: Part Two (17:27)
  12. Building the Cities Section: Part One (12:43)
  13. Building the Cities Section: Part Two (16:17)
  14. Building the Customer Testimonials Section: Part One (6:06)
  15. Building the Customer Testimonials Section: Part Two (15:30)
  16. Building the Sign-up Section: Part One (9:53)
  17. Building the Sign-up Section: Part Two (18:58)
  18. Building the Contact Form: Part One (16:33)
  19. Building the Contact Form: Part Two (9:25)
  20. Building the Footer: Part One (6:42)
  21. Building the Footer: Part Two (18:20)
  22. Making the Website Responsive: Part One (19:47)
  23. Making the Website Responsive: Part Two (21:45)
  24. A Note About Web Browsers (12:42)
  25. Adding JavaScript: Introduction to JQuery (9:51)
  26. Building a 'sticky' navigation: Part One (12:53)
  27. Building a 'sticky' navigation: Part Two (10:53)
  28. Scrolling to Elements (10:10)
  29. Adding Animations to Scroll (14:39)
  30. Making the Navigation Responsive (20:15)
  31. Using PHP to make your Form Work (23:31)

Extra

  1. Creating a Favicon (5:11)
  2. Performance Optimization: site speed (12:12)
  3. Search Engine Optimization = SEO (8:23)
  4. Launch Your Website (9:19)
  5. Google Analytics (5:47)
  6. Adding a Map (19:18)