Web Technologies Basics Hand in 1
Web Fundamentals LU — HTML & CSS Project
Overview
This project was created for Hand-in 1 of the Web Fundamentals Learning Unit. It was developed in accordance with the hand-in requirements.
The website consists of structured pages that summarize and organize HTML and CSS elements, and code to adapt to different screen sizes and a pattern for a static site with an external stylesheet, as well as a separate contact page. The content reflects my learning process and presents key principles of HTML and CSS design in a structured and accessible format.
Hand-in requirements:
- Determine when and how to utilize web technologies as a software solution
- All pages should be responsive
- Use media queries and at least 2 breakpoints
- Apply various CSS rules without using a framework
Project Structure
├── index.html - HTML Basics page
├── CSS.html - CSS Basics page
├── contact.html - Personal information page
└── style.css - External stylesheet
The project consists of three linked HTML pages, all styled using a single external CSS file.
Pages
index.html — HTML Basics
- Most frequently used HTML tags
- Basic HTML rules
- Semantic structure
- Table layout
- Navigation to other pages
CSS.html — CSS Basics
- Common CSS properties
- Box model, Flexbox, Grid
- Typography rules
- Media queries explanation
- Design principles
contact.html — Personal Information
- Displays personal details
- Demonstrates layout reuse
- Uses the same global styling
- Consistent design with other pages
Styling (style.css)
The project uses a custom dark terminal theme with:
- CSS custom properties (variables)
- Flexbox layout
- Responsive breakpoints
- Styled tables
- Sticky header
- Accessible skip link
- Custom code blocks
- Consistent design system