https://github.com/mafsida/goit-markup-hw-03

This is the third assignment from the Full Stack Developer course at GoIT. In this module, I applied Flexbox for layout, configured element geometry, margins, and paddings. The project demonstrates responsive and structured layout using CSS Flexbox
https://github.com/mafsida/goit-markup-hw-03

css development flexbox frontend geometry goit goit-markup-hw-02 html margins markup paddings responsive-design semantic-html styles web web-design

Last synced: 23 days ago
JSON representation

This is the third assignment from the Full Stack Developer course at GoIT. In this module, I applied Flexbox for layout, configured element geometry, margins, and paddings. The project demonstrates responsive and structured layout using CSS Flexbox

• Host: GitHub
• URL: https://github.com/mafsida/goit-markup-hw-03
• Owner: mafSida
• Created: 2024-07-31T13:43:03.000Z (6 months ago)
• Default Branch: main
• Last Pushed: 2024-09-18T09:26:49.000Z (5 months ago)
• Last Synced: 2024-11-16T18:31:27.313Z (3 months ago)
• Topics: css, development, flexbox, frontend, geometry, goit, goit-markup-hw-02, html, margins, markup, paddings, responsive-design, semantic-html, styles, web, web-design
• Language: HTML
• Homepage: https://mafsida.github.io/goit-markup-hw-03/
• Size: 765 KB
• Stars: 0
• Watchers: 1
• Forks: 0
• Open Issues: 0
• Metadata Files:
  • Readme: README.md

Awesome Lists containing this project

README

        
# GoIT Markup Home Work 3

Responsive layout with Flexbox and element geometry configuration.

## Overview

This project is the third assignment of the GoIT Full Stack Developer course. It builds on the previous work by introducing CSS Flexbox for layout and positioning of elements. I focused on configuring element geometry, margins, paddings, and borders. The project also includes image optimization and uses the `modern-normalize` stylesheet for consistent cross-browser styling.

The design mockup used for this assignment can be found [here](https://www.figma.com/design/wuEpGhwCepGCOUw7mZFRac/Web-Studio-(Version-5.0)?node-id=0-1&node-type=canvas&t=iMO7bWQ8BFWCih1e-0).

## Screenshots

All screenshots related to the project can be found in the [images folder](./images).

## Summary

In this project, I have:

- Applied Flexbox for layout and element positioning.

- Configured margins, paddings, and borders based on the design mockup.

- Used semantic HTML and CSS best practices.

- Optimized images using the Squoosh service.

- Added and customized modern-normalize to reset default styles.

This assignment strengthened my skills in responsive design, layout structuring with Flexbox, and using CSS for fine-tuning element geometry.