HyperCompany - Tech Homework

This project was generated with Angular CLI version 16.2.12.

Web Layout Challenge - Completed Project

Overview

Welcome to the completed Web Layout Challenge! This project involved creating a new website with two pages, each showcasing different layout techniques—Flexbox and CSS Grid. The goal was to implement identical layouts on both pages while meeting various design and functionality requirements.

Project Highlights

Layouts

• Page One (Flexbox): Successfully implemented a responsive layout with Flexbox, showcasing the title "One".
• Page Two (CSS Grid): Implemented an equally responsive layout using CSS Grid, featuring the title "Two".

Consistent Design

• Both pages exhibit a cohesive and consistent design to ensure a seamless user experience.

Page Structure

• The site consists of two pages, with the header and footer always visible on both pages.

Form and Buttons

• Utilized text form fields within a single form, with optional form validation.
• Disabled the SUBMIT button if the form is invalid.
• Disabled the RESET button if the form is empty.

Mobile Responsiveness

• Ensured mobile responsiveness for an optimal user experience.
• Implemented navigation between components using the SUBMIT button, creating a toggle/endless loop.
• Implemented color reset and field clearing functionality with the RESET button.

Color and Interaction

• Assigned unique colors to each MENU ITEM.
• Enabled background color changes for HEADER, FOOTER, and buttons upon clicking a MENU ITEM. The selected color persists after navigation.
• Added hover effects to MENU ITEMs and buttons.

Scrolling

• Limited scrolling to the BODY element to maintain a clean and controlled scrolling experience.

Content Container

• The content container is consistently centered both vertically and horizontally.

Additional Styling

• Fixed width for SIDEBAR and MENU ITEMS for a structured and organized appearance.
• Ensured responsiveness for TITLE, TEXT FORM FIELD, and buttons.
• Allowed creative freedom for colors, borders, and content.

Getting Started

To explore the completed project, clone this repository and review the codebase. Feel free to analyze the implementation of various layout techniques and the fulfillment of specified requirements.

Conclusion

The Web Layout Challenge has been successfully completed, demonstrating proficiency in creating responsive and visually appealing layouts. Thank you for the opportunity to work on this project!

Further help

To get more help on the Angular CLI use ng help or go check out the Angular CLI Overview and Command Reference page.