• Sign Up
  • Login

Remember me

Forgot your password?
Code Pajamas
  • Courses
  • Paths
  • Sign Up
  • Log In
  • 0 Items

HTML & CSS: Building Responsive Websites

Introduction
Setup
Creating Web Pages
Web Fundamentals HTML Fundamentals Code Along Exercise 1 Quiz 1 Lab 1 - HTML Magazine Cover Lab 2 - Personal Site Project - Step 1 Resources
Styling Content
CSS Fundamentals CSS Color & Type Styles Code Along Exercise 2 Quiz 2 Lab 3 - Puppy Wheelbarrow Lab 4 - Personal Site Project - Step 2 Resources
Page Layout
CSS Box Model Code Along Exercise 3 CSS Layouts Using Floating Grids Code Along Exercise 4 Quiz 3 Lab 5 - CSS Octopus Grid Lab 6 - Personal Site Project - Step 3 Resources
Positioning & Box Style
CSS Positioning CSS Box Styles Code Along Exercise 5 Quiz 4 Lab 7 - CSS Boombox Construction Lab 8 - Personal Site Project - Step 4 Resources
Responsive Site Pages
Responsive Design Code Along Exercise 6 Quiz 5 Lab 9 - Responsive Octopus Site Lab 10 - Personal Site Project - Step 5 Resources
Site Publishing
Using FileZilla FTP Client Final Words

Lab 2 - Personal Site Project - Step 1

Overview

In this lab you will start building your own personal website project that you will add to each week throughout the course. In the past for this project, students have built portfolio sites, résumé pages, sites celebrating a new baby or family pet, wedding announcement sites, sites for a friend, family, or your own business. Some have built sites for hobbies from fitness, gaming, to synth collections. Others have re-built non-profit sites or donation pages for charities. Whatever you choose to build it is entirely up to you. Since this is most likely the first website you will build on your own, it is a good idea to keep the site under 5 pages. If you get stuck or are not sure what to build you can use the code along exercises each week to give you some direction. Just try to create your own content instead of rebuilding the same site in the code along. It is recommended that you build your project in a different folder than this one, with a name you create yourself. This file is merely meant to provide directions only.

Directions

  1. Create an index.html page and at least 2 other pages and link them to each other.
  2. Create an images folder and place a few images into this folder.
  3. Make sure to add the following content throughout the pages:
    • Image
    • Links
    • Table
    • Form
    • Iframe (embed Youtube or Google Map)
    • Headings
    • Lists
    • Paragraphs Note: It's okay to leave out some of the content if you do not wish it to be in your final site project, but hey its good practice you can always delete it later on.
  4. When you are done, use the W3C HTML Validator to validate all of your pages at:

https://validator.w3.org/#validate_by_input

Next Lesson

Learn Remotely

Access All Online Content

Course Info

360 minutes of video
5 quizzes
6 code along exercises
10 labs
Slides
Resources
Final project
Instructor: Jonathan Grover
38 students enrolled
Purchase to unlock
Please wait while we attempt to send your message!
Thank you for your question. We will contact you soon by email!

Ask Question

Use the form below to submit a question and we will get back to you via email shortly.





Twitter

Loading...Follow @codepjs
Loading...

Facebook

Share
Code Pajamas

Product

Courses
Paths

Company

About
Instructors
Careers

Support

FAQ
Contact

Legal

Terms
Privacy

Connect

Facebook
Twitter
Instagram
Threadless

Mailing List

Subscribe
© 2017 Code Pajamas. All Rights Reserved. Made with ♥︎ in Brooklyn, NY, USA, Earth, Orion Spur, Milky Way Galaxy, Laniakea Supercluster