https://github.com/dominikdanielewicz/goit-markup-hw-08

HTML & CSS module - Final website project #8
https://github.com/dominikdanielewicz/goit-markup-hw-08

bem css3 figma html5 rwd sass scss

Last synced: about 1 month ago
JSON representation

HTML & CSS module - Final website project #8

• Host: GitHub
• URL: https://github.com/dominikdanielewicz/goit-markup-hw-08
• Owner: DominikDanielewicz
• Created: 2022-09-29T16:36:39.000Z (over 2 years ago)
• Default Branch: main
• Last Pushed: 2023-04-25T18:09:35.000Z (almost 2 years ago)
• Last Synced: 2024-11-09T20:52:41.534Z (3 months ago)
• Topics: bem, css3, figma, html5, rwd, sass, scss
• Language: HTML
• Homepage: https://dominikdanielewicz.github.io/goit-markup-hw-08/
• Size: 2.07 MB
• Stars: 0
• Watchers: 1
• Forks: 0
• Open Issues: 0
• Metadata Files:
  • Readme: README.md

Awesome Lists containing this project

README

        
# HTML & CSS module - Website project #8 - Final

## The final HTML & CSS module project. A website based on a Figma graphic design.

### Demo Link

https://dominikdanielewicz.github.io/goit-markup-hw-08/

### Description

Task completed during the GoIT Fullstack Developer course. In this project I'm creating HTML markup, page layout, with CSS code using the SASS preprocessor. BEM methodology applied. Responsive design and more.

- Responsive design with mobile first approach

- Images are responsive and support x1 and x2 pixel density

- Project HTML-code is done using the BEM methodology

- Project CSS code is done using the SASS preprocessor

- Forms added into modal

- All HTML pages have a style normalizer modern-normalize - https://github.com/sindresorhus/modern-normalize

- Added animated decorative effects

- Markup, icon styling and decorative effects added

- To generate an SVG sprite, used Icomoon - https://icomoon.io/

- To optimize the generated SVG sprite, used svgomg - https://jakearchibald.github.io/svgomg/

- Styles for geometry (width, margins, paddings and borders) and content positioning with Flexbox for page layout based on Figma

- Markup validated with dedicated online service - https://validator.w3.org/

- In the root of the project, there is a folder called images, which contains images

- There are no capital letters, spaces and transliteration in the file names, only English letters and words

- All images and text content are taken from the Figma design.

- All raster images are optimized using squoosh - https://squoosh.app/

- Source code is formatted with Prettier

- The code is in line with the guide - https://codeguide.co/

### Technologies

- HTML 

- CSS 

- SASS 

- Figma