Magic Home

The main goal of this project is to use almost everything I have learnt about HTML5, CSS3 and Sass. Achiving a proffesional looking website and a clean design.

Technologies used:

Html

Css

Sass

Javascript

What did I learn with this project?

- Best Practices: BEM method to name classes in CSS and HTML, Keep It Organized ,Make It Understandable

- Sass as a CSS pre-processor, that offers: Efficient syntax, Readable styles files, Reusable components (@mixins and @extends)

- CSS3 features: Flexbox, Grid, Animations, Variables, Pseudo-elements, Pseudo-classes, Media Queries

- JavaScript most used methods: querySelector(), querySelectorAll(), toggle(), forEach(), addEventListener(), insertAdjacentHTML(), contains()

What interesting things can I find in this project?

- PRO Navigation Bar, that converts itself into a floating menu on smaller devices.

- Testimonials Slider.

- Modal Window Form.

Improvements and ideas

- Compress the size of the images reducing them to the maximum size used on the page.

- Use different size images for each media query to improve performance.