villian79/course-advanced-css-and-sass

Learning repo based on "Advanced CSS and Sass: Flexbox, Grid, Animations and More!" course by Jonas Schmedtmann

Course: Advanced CSS and Sass

Learning repo based on "Advanced CSS and Sass: Flexbox, Grid, Animations and More!" course by Jonas Schmedtmann

Projects completed:

#	Project name
1.	Natours
2.	Trillo
3.	Nexter

Link to the Course: https://www.udemy.com/course/advanced-css-and-sass/

Link to images resource used: https://unsplash.com/

link to videos resource used: https://coverr.co/

link to SVG resource used: https://icomoon.io/

Link to the Resources Page: https://codingheroes.io/resources/

Main Objective: Recover my knowledge of CSS

course-advanced-css-and-sass's Issues

Use BEM in the project

To create a scalable, component-based website, we need to use BEM model.
BEM: block__element--modifier
Details here

Create nice animated button on Hero page

Design requirements:

• Button color: white
• Button corners: rounded
• Shadow at the bottom and to the right
• When the button clicked, the effect should be like a button pressed a bit
• When the button hovered, the animation should be like the button spreads and fades away to its sides

Implement SASS and refactor existing code

To make development more manageable, we need to implement SASS
We need to add .scss files to the existing codebase

Title should be centered on the page

Title line should be separated into two lines with spans, uppercased, and centered across the header page

Add animation on Header text for better UI

Add a small sliding animation to the Header text for a better user experience.

Proposals:

Have two lines of the header text slide to the center from different directions. Top from left to right, bottom from right to left.

Responsive design for the project

At the moment the page is not responsive. We need to make it mobile-friendly

Simple CSS reset for the project

Before starting a project, we need to write a basic CSS reset to remove default browser styling.
A CSS reset is a snippet of code placed at the beginning of the CSS cascade to set, reset or 'normalize' default styling, establish a predictable starting point for customization, and improve cross-browser consistency.

Create a video background in the Stories section

It would be nice to have a nice background video in the Stories section.
Videos can be obtained here: https://coverr.co/

Adjust all static px values to rem

Using rem values makes further development easier, so we need to change fixed px values to rem

What needs to be done:

• - Create initial root font-size in % of the initial root size value. The default root size for browsers is 16px, but it can be changed by the user. So we need to take this into account.
• - Replace all static values in px with rem values
• - Apply Reset settings to all ::before and ::after elements on the page
• - Have all elements on the page inherit the box-sizing value of the body element

Logo should be fixed in the top-left corner

Logo should be 30px wide and placed in the absolute position in the top-left corner