AltSchool Africa Assignment: Frontend Basics - HTML and CSS 💻

Overview

Welcome to my AltSchool assignment repository! This project focuses on fundamental web design skills using HTML and CSS. The assignment includes creating and styling web pages, implementing navigation, forms, tables, and media elements.

Project Description

This repository is organized into four primary web pages:

1. Personal Web Pages:

   • Page 1: A personal profile page containing:
     • ALT School ID
     • Biography
     • Reason for joining AltSchool
     • Goals for the School of Engineering program
     • Fragment identifiers for section navigation and a scroll-to-top feature.
   • Page 2: An application form replicating the ALT School application form, featuring global navigation and semantic HTML tags.

2. Additional Web Pages:

   • Page 3: A table that outlines courses and schools within AltSchool Africa.
   • Page 4: A media-rich page that uses various HTML media elements to create a compelling self-introduction. Includes a <picture> element with multiple sources for responsiveness on different devices.

Pages and Features

Page 1: About Me

• Content: Personal information, biography, reason for joining AltSchool, and goals.
• Features: Fragment identifiers for smooth in-page navigation and a scroll-to-top button.

Page 2: Application Form

• Content: Replication of the ALT School application form.
• Features: Global navigation linking to the About Me page and proper use of semantic HTML.

Page 3: Courses and Schools

• Content: A structured table listing the schools and their respective courses within AltSchool Africa.
• Features: Clear and accessible layout.

Page 4: Media Elements

• Content: A page showcasing various HTML media elements to communicate a powerful message about myself.
• Features: Responsive design using the <picture> element with multiple sources for optimal display across devices.

Folder Structure

AltSchool_Semester1_Web_Design_HTML_CSS/ │ ├── index.html ├── form.html ├── table.html ├── media.html │ ├── .git │ ├── assets/ │ ├── images/ │ ├── audios/ │ └── videos/ │ └── css/ ├── index.css ├── form.css ├── table.css └── media.css

My Process

Built with

• HTML5: For structuring web pages
• CSS3: For styling and layout
• Semantic HTML: For accessibility and proper structuring
• Responsive Design: Ensuring usability across various devices

Contributing

Feel free to contribute by opening an issue or submitting a pull request. Your suggestions and improvements are welcome!

Useful Resources

• HTML Picture Element
• CSS Tutorial
• Responsive Web Design
• Free file converter
• Free photo resizer

Author

Website:

• LinkedIn: Izuchukwu Alex Nwachukwu
• X(Twitter): @alexxandda