Natours-description

This is practice project I've developed by following along with Jonas Schmedtmann's Advanced CSS and Sass course.

Technologies

• HTML5
• SCSS(BEM)
• NPM & NPM Scripts
• Responsive Web Design
• 7-1 pattern
• Linear gradients
• Video html element

What I've learned?

During creation of this landing page I learnd about many new CSS properties and techniques, in which I didn't had prevoius experience, and best ways how to implement them in project.

While creating the header part of the page I've learned how to use "clip-path"property, which gives really nice design feature where backgrounds are cut off.

Also,this project taught a lot of neat ways to use css in order to create some delightful effects. These cards, for instance, flip when hovered.

There are many useful details used on booking form on this site. Custom radio buttons, nice angled overlay, and upon typing in either input, the placeholder text drifts underneath so that is still labeled in some way.

Very valuable lesson was about how to arhitect my code, for what i used BEM methodology. I also learned how to implement 7-1 Sass pattern, which is a great way to impose some structure on your file system.

Important part of this course is about responsive web design, where lessons about responsive images comes in handy, and not just consedering responsive design, but also as a one of crucial parts for better web performance overall.Here I learned different techniques about serving right image for different screen sizes.

On following example I used "art direction" and "density switching" techniques with <picture> and <source> html elements, togheter with "srcset" attribute, on my footer logo. This allows me to serve different images for different resolutions and widths of the screen.

Screen size: 1200px

Screen size: 600px

Those are just some of many great features i learned throughout this course. For live preview, please check out link bellow.

Live preview

Click here for live preview!