In this ongoing assignment, you'll experience what it's like to work as a web developer, building a website from the ground up using HTML and CSS. This project will guide you through the process of creating and styling a professional website, reinforcing your understanding of the foundational concepts of web development.
Throughout this assignment, you'll be tasked with building different sections of a website, each designed to introduce new HTML and CSS concepts. You’ll start with the basic structure using HTML, and as you progress, you’ll enhance the site’s design and functionality with various CSS techniques and frameworks.
You have taken on a client who is a small but growing business. Your task is to build them a new website to showcase their products/services and build an online presence.
- Band
- Pet Store
- Bakery
- Gym
- Or your own idea!
- Basic HTML Structure: Set up the core structure of your website.
- CSS Styling: Enhance your site using various CSS techniques.
- Advanced Design: Utilize CSS frameworks to create a polished, responsive design.
Review the included example which represents the kind of site you'll have created by the time you finish all 4 on the job projects." Adjust to your preference.
Free stock images and videos can be downloaded at https://www.pexels.com.
Utilize documentation such as W3 Schools and MDN for all things related to HTML and CSS.
Use AI tools such as ChatGPT and Claude to help you learn. As you integrate AI tools into your learning process, it's essential to use them responsibly. AI can be a powerful resource to assist you, but it’s important to ensure that you truly understand and engage with the content it generates. This will not only enhance your learning experience but also help you develop critical thinking and problem-solving skills.
In this section, you will create the basic foundation of a webpage using essential HTML tags. This exercise will help you understand the structure of a webpage and how to organize content using basic HTML elements.
- Create a new directory and index.html file.
- Set up a new GitHub repository for your project. (This repository here is not your starter code)
- Initialize your local project directory and connect it to the newly created GitHub repository.
- Set up a basic HTML boilerplate for your project.
- Create a navigation bar representing the different sections of the website.
- Create a header section for the client's name.
- Create paragraph sections describing who the client is, what they do, etc.
- Create a directory for assets (images, videos, etc).
- Create a gallery of images/videos for your project.
- A "Contact Us" form should also be included.
- Add a footer section for your project as well.
- Use Git to
add,commit, andpushyour changes to the repository for your project.
| Criteria | Exemplary Performance (Full Marks) | Proficient Performance (Partial Marks) | Developing Performance (Half Marks) | Needs Improvement (No Marks) |
|---|---|---|---|---|
| Technical Acceptance Criteria (60 pts) | 54-60 | 42-53 | 30-41 | 0-29 |
| Workflow Appropriacy (15 pts) | 14-15 | 11-13 | 8-10 | 0-7 |
| Documentation (15 pts) | 14-15 | 11-13 | 8-10 | 0-7 |
| User Experience (10 pts) | 9-10 | 7-8 | 5-6 |
🛑 Only use this as a reference 🛑
💾 Not something to copy and paste 💾
Note: This lab references a solution file located here (link not shown).
© All rights reserved to ThriveDX