jonasschmedtmann / advanced-css-course Goto Github PK

when we first load the webpage or refresh the webpage we can clearly see the navbar items getting squished on the left side. How can we fix this?

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

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.

Hi Jonas!

I hope your are doing great. First of all I want to thank you for your well designed course. So far I have learned a ton of awesome new stuff and I am looking forward to continue.

Like a lot of other people I ran into the same issue using the --watch flag.
After watching your video again and paying more attention it works like a charm! VSC is such a great editor. I love the build in terminal function! Comes in really handy.

But anyway, I would like to make a comment on your 2nd solution. When using the two lines of code you provided the terminal throws an error. When the two lines are separated by a coma everything is compiled well.

Best,
Jan

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....

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

Good morning!

Jonas, how are you?

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

I found a bug in your site https://natours.netlify.com/ 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.

Sorry for my english.

The header links or navigation bar links in the Natours project are not visible since the opacity is 0 however they can still be clicked without opening the header by clicking at the left side of the form. To fix this problem you should add the following pieces of code to the _navigation.scss:

&__link {
&:link,
&:visited {
display: inline-block;

//add this visibility visibility: hidden;

		font-size: 3rem;
		font-weight: 300;
		padding: 1rem 2rem;
		color: $color-white;
		text-decoration: none;
		text-transform: uppercase;
		background-image: linear-gradient(120deg, transparent 0%, transparent 50%, $color-white 50%);
		background-size: 230%;
		transition: all 0.4s;

		span {
			margin-right: 1.5rem;
			display: inline-block;
		}
	}

&__checkbox:checked ~ &__nav &__link {
	visibility: visible;
}

[email protected] 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! code ELIFECYCLE
npm ERR! errno 1
npm ERR! [email protected] compile:sass: node-sass sass/main.scss css/style.css
npm ERR! Exit status 1
npm ERR!
npm ERR! Failed at the [email protected] 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

only the back card side is rotating the front side card is fixed in place.

hello Jonass .
iam on of ur stuidents i got the adcanced course i need to tell you that u need to updated the github version of this course files becouse it contains alot of bugges in most of the projects
like
1-Natours the navbar is hidden but i can click on the side and see it its there but hidden
2-project trillo icons gone and the margin and padding did glitch
3-project \Nexter all good :D 💃
hope you fix the first 2
i will include some puctures to show u

SASS Compile not working. I have followed the tutorial but it's showing multiple errors.
Here is the Command line
npm run compile:sass

It is coming up with these errors.
An output directory must be specified when compiling a directory npm ERR! code ELIFECYCLE npm ERR! errno 1 npm ERR! [email protected] compile:sass: node-sass sass/main.scss css/style.css`
npm ERR! Exit status 1
npm ERR!
npm ERR! Failed at the [email protected] 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\Jahid\AppData\Roaming\npm-cache_logs\2018-05-03T20_17_13_135Z-debug.log`

I am also attaching the scirpt package.json file.
{ "name": "ui", "version": "1.0.0", "description": "Ui for QR Code generator", "main": "index.js", "scripts": { "compile:sass": "node-sass sass/main.scss css/style.css" }, "author": "Jahid Anowar", "license": "ISC", "devDependencies": { "node-sass": "^4.9.0" } }

Some of us have noticed that the repo is putting the CTA section and button on the far right of the page, rather than the bottom of the page as it is in the videos.

Logging the issue so my PR has somewhere to land :-)

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!

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?

I can't access the website it likely times out when accessed from France.

Hope this helps

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.

https://choosealicense.com

...

Could not download the starter pack for the project. Please help...!!!

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" }

As you can see, the nav bar links are overlapping the other elements even with the navigation bar not enabled and they are clickable making the interation with other elements impossible if they are under the links.

I tested the published version of the Natours page available at https://natours.netlify.com/ using google chrome on macOS.

Since I haven't reached the part of the course that the navbar was developed, I won't be able to find the most elegant solution for that.

• When I run npm install compile:sass it loads and just gives me on my terminal only not opening in the browser

` dee@dee:~/Downloads/Natours$ npm run compile:sass

[email protected] compile:sass
node-sass sass/main.scss css/style.css

Rendering Complete, saving .css file...
Wrote CSS to /home/dee/Downloads/Natours/css/style.css
dee@dee:~/Downloads/Natours$ `

;-)

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

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.
https://radikal.ru/video/9vdeoxvqIDF
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.

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.

http://prntscr.com/jd0wxf

Hi,
I have come across a problem. I am now on natours sass section. I can't set the width of the columns with calc function. It shows error in chrome dev tool.

Please help me.

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.

.navigation {
&__link {
            display: none;
    }

&__checkbox:checked ~ &__nav &__list &__item &__link {
        &:link,
        &:visited {
            display: inline-block;
        }
    }
}

https://user-images.githubusercontent.com/64778285/125754742-0c800d4c-b420-4030-a688-9121b2131299.mp4

On line 28 there is

       font-family: 5rem;

should be

        font-size: 5rem;

Hi,
I tried to run Trillo project, starter version, and when I tried to run in terminal npm install it failed.
I updated the devDependencies in packages.json so the versions of the npms will be update to the latest versions and it fixed the problem. Probably an old version of at least one of the npms caused the error..

old:
"devDependencies": {
"autoprefixer": "^7.1.4",
"concat": "^1.0.3",
"node-sass": "^4.5.3",
"npm-run-all": "^4.1.1",
"postcss-cli": "^4.1.1"
}

new: (latest versions from npmjs.com):
"devDependencies": {
"autoprefixer": "^10.4.13",
"concat": "^1.0.3",
"node-sass": "^8.0.0",
"npm-run-all": "^4.1.5",
"postcss-cli": "^10.1.0"
}

Loaded your settings but bitches on your: "Oceanic Next (dimmed bg)"

Says does not exist, which I guess it does not?

Cheers
Jonathan

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

CVE-2010-3971

The Book Now popup looks quite odd on smaller screens and have to press back (android) to get out of it (no other way around leaving it).

Here you can see body paddind still remains 30px i mean it is not responsive. and the center text is larger the body.

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?

Popup is not laid out correctly for small screen.