It seems like you are using an ad blocker. To enhance your experience and support our website, please consider:

  1. Signing in to disable ads on our site.
  2. Sign up if you don't have an account yet.
  3. Or, disable your ad blocker by doing this:
    • Click on the ad blocker icon in your browser's toolbar.
    • Select "Pause on this site" or a similar option for lancecourse.com.

LCC: Web Apps Development Essentials

Course by zooboole,

Last Updated on 2024-09-05 14:50:08

Day 7: End Of Week Project

End of Week Project:

Personal Portfolio Website

After learning about the web and HTML throughout this week, it's time to gear up and get your hands dirty with a real project. You are going to build your personal portfolio website!

Goal:

Create a 3-4 page personal portfolio website to explore essential HTML tags. The project will be divided into a header, navigation, main content, and footer, with rich use of semantic HTML tags. Learn how to create a multi-page website.

Page 1: Home / Introduction Page

Filename: index.html
Purpose: Introduce yourself and provide a brief overview of the site
Instructions:

  • Use the <header> tag to introduce your name and navigation.
  • The <nav> should contain links to the other pages.
  • The <main> tag should include a <section> for your introduction and a call-to-action.
  • Include an <img> tag for your profile picture.
  • The <footer> should display a copyright message or social media links.

Page 2: About Page

Filename: about.html
Purpose: Provide detailed information about yourself.
Instructions:

  • Use a <header> and <nav>to keep consistent site navigation.
  • In the <main>, create a <section> to describe your background.
  • Use an unordered list (<ul>) to list your skills and a description list (<dl>) to explain terms like "Front-End" and "Back-End."
  • Embed a relevant video( of Your Journey) using the <video> or <iframe> tag.

Page 3: Projects Page

Filename: projects.html
Purpose: Showcase your work with projects.
Instructions:

  • Use a <header> with navigation.
  • The <main> should include a <section> that lists 3-4 projects.
  • Use an ordered list (<ol>) for project titles and descriptions.
  • Embed project screenshots with <img> tags and provide links using <a>.

Page 4: Contact Page

Filename: contact.html
Purpose: Allow visitors to contact you via a form.
Instructions:

  • The <header> contains navigation and the page title.
  • The <main> includes a <section> with a contact form inside a <div>.
  • Use input fields for name, email, and message. Add labels for each input.
  • Include a media embed or image of a location/map.
  • The <footer> can contain additional links or contact details.

Note

This project is designed to help you consolidate your understanding of HTML through the creation of a personal portfolio site that you can continue to build on in the future. Take some time and try it on your own.

Use the W3C Validator to validate each page.

Good Luck!