Screen Design and Implementation - Final Task

Project Overview

This project focuses on screen design and implementation, where the screen design was created using Figma and implemented using HTML and CSS. This is the final task for the course Introduction to Web Technology - HTML & CSS during Winter Semester 2024 at University of Applied Sciences St. Pölten.

Technologies Used

• Figma (for screen design)
• HTML5 (for structuring the webpage)
• CSS3 (for styling and layout)

Project Guidelines

The implementation follows the course requirements, including:

• Responsive design for 1920x1080 (desktop) and 390x844 (mobile) resolutions.
• Consistent design across all pages (navigation, fonts, colors, and layout).
• No inline styles or <style> elements—only external stylesheets.
• Semantic HTML structure for accessibility and best practices.
• Navigation highlighting for the active page.
• Validation compliance with W3C standards.
• Proper code formatting using VS Code/WebStorm.
• No usage of tables for layout or <br> elements for spacing.

Project Structure

/ project-folder
│── index.html         # Main landing page
│── subPage/
│   ├── speakers.html  # Sub-page (Speakers section)
│── assets/
│   ├── css/
│   │   ├── style.css  # Main stylesheet
│   │   ├── style2.css # Additional stylesheet
│   ├── images/        # All images used in the project

Features

• Fully responsive design for both desktop and mobile.
• Navigation bar with active page highlighting.
• Gallery section with images.
• Sponsor section displaying event sponsors.
• Footer section with relevant links and information.

Notes

• The project uses Google Fonts via a link in the index.html file.

Author

This project was developed by Abiodun Adefusi as part of the coursework for Introduction to Web Technology - HTML & CSS at University of Applied Sciences St Pölten.

---

---

---

Last Updated: February 2025