Starter files, final projects and FAQ for my Advanced CSS course

I've tested this on both Brave and FireFox. I've tried to fix this and it works. May you update the code please, thanks.

My code is here (sass/layout/_navigation.scss)
.navigation {
&__link {
            display: none;

&__checkbox:checked ~ &__nav &__list &__item &__link {
        &:visited {
            display: inline-block;
2021-07-15 (2)
2021-07-15 (3)

The Natours project.
On Firefox, the rotating cards don't have perspective when "backface-visibility" property is hidden.

Please clarify what is the solution here, for the cards to have perspective?


natours@1.0.0 compile:sass C:\Users\MICKEYDP\Desktop\natours
node-sass sass/main.scss css/style.css

"status": 1,
"file": "C:/Users/MICKEYDP/Desktop/natours/sass/main.scss",
"line": 30,
"column": 7,
"message": "Function rgb is missing argument $blue.",
"formatted": "Error: Function rgb is missing argument $blue.\n on line 30 of sass/main.scss\n>> rgb($color-primary-light, 0.8),\r\n ------^\n"
npm ERR! errno 1
npm ERR! natours@1.0.0 compile:sass: node-sass sass/main.scss css/style.css
npm ERR! Exit status 1
npm ERR!
npm ERR! Failed at the natours@1.0.0 compile:sass script.
npm ERR! This is probably not a problem with npm. There is likely additional logging output above.

npm ERR! A complete log of this run can be found in:
npm ERR! C:\Users\MICKEYDP\AppData\Roaming\npm-cache_logs\2018-10-20T14_01_32_138Z-debug.log

When trying to run live server with npm run or npm start,

Microsoft Windows Defender gives this threat warning and,
compilation of sass and live server crashes


Good morning!

Jonas, how are you?

I have a question/complain about you course of CSS.

I found a bug in your site if you reload the page all design crashed, I found this when I build tours card, if you refresh the page in tour cards the property back-face-visibility doesn`t work well, first it show back card and 2 seconds after it show front card.

In Udemy I dont find anyone fix that and have many question about this without a answer .

Could you please help us to fix that.

I attached some gif record to show the problem.

ezgif com-optimize

Sorry for my english.

This project currently has no LICENSE file. By default the project is restricted under full Copyright, meaning students cannot make derivatives. Please consider adding an open-source license to this project.

Popup is not laid out correctly for small screen.

On line 28 there is

       font-family: 5rem;

should be

        font-size: 5rem;

I have downloaded the project files from the GitHub to the computer as a ZIP file. But it says that the file is corrupted.

Screenshot 2021-03-14 154505

In the _form.scss, I see there is a syntax error which regarding rbga as rgba. It could be better if you correct it!

node-sass version: 4.9

when i installed and ran node-sass in vscode, terminal said that
{ "status": 3, "message": "File to read not found or unreadable: E:/learn/react-app1/src/index.scss", "formatted": "Internal Error: File to read not found or unreadable: E:/learn/react-app1/src/index.scss\n" }

When I compile from the terminal, it is successful. Later, when I then open the site, this is different from the previous one. On the page I only see the sentence in the button.

I don't know where I'm wrong. Could you please help me?

Can I ask a question? In the following block display is used twice. Is it correct? I've found VS Code most of the time doesn't highlight some peculiarities like display property in the video....

  &__visited {
    color: var(--color-grey-light-1);
    text-decoration: none;
    text-transform: uppercase;
    display: block;
    padding: 1.5rem 3rem;
    display: flex; 
    align-items: center;

Hello to everyone!

Could any body explain me how an image i.e. a magnifier icon is able to overlap search form? I can't remember the detail relating to the matter. I can't recall if we used a negative value for a margin. Does it become possible once flex is used? The icon seems to be stuck to a right side of a form. Wow, it's really impressive! I wonder why Jonas didn't make emphasis on the feature.

If so... why does the icon hover over search field (above), not under?

The last question is unrelated to the matter but I'm also curious about the icon's background. What is the purpose in using a color? Can't icon's background be just transparent? I tried.... no difference.

Just finished the lesson, what I can say? It seems Jonas doesn't know how it works. He sounds like - take it for granted. I've read a couple of articles, it's clear how it's expected to work though it doesn't work in the project. Even if it worked parameters and results are inconsistent. if we take as an example a lesson in which we changed properties like padding, width, height, etc - Everything was consistent and the "code" behaved as expected. With all those images.... no matter which method you implement the result is always unpredictable.
To my mind the feature with responsive images has been poorly implemented in the browser (or badly processed in Developer Tool). Provided the size of a container is less than 150 pixels there should be definitely selected an image 300px wide not 1000px!

I was following the code and found out that when I write something in the search box and hit the button, the input field comes out of focus and nothing happens. The button isn't clickable when the input field is in focus.

I don't think there would be a point in pasting the whole code.... though the problem appears with scaling. When I hove a mouse's cursor and the photograph begins zooming out I can see from right and left sides a thin layer of mirrored animation. It's around 1px thin.
Dunno what defect saw Jonas while recording video I've already tried to apply backface-visibility: hidden; property- it didn't solve the issue. However, I remember that we've been working with float elements so another one trick we used was overflow: hidden; once I typed it after position: relative; - it work like a charm even though I don't understand why it's only me who experienced the defect.