I got some few question in Mind!

I got some few question in Mind!


Hi How’s every one doing? Happy Turkey day(Thanks Giving)
I’ve been in project two for a while trying to figure out what and how the code’s work in the website creation https://codepen.io/freeCodeCamp/pen/YqLyXB

My question is what and why is this code:
in Postcss, and some of it I can’t find it in google.( some I did and I can’t still understand why?)

1 :flex;
2 flex-flow:row wrap;
3 @use
4 .&bar-toggle { the “.&”) I did search it in google and kinda make sense that it’s equal to a img = &
5 img but is it just the (anchor text?)
6 >*:not

And a Couple in JS
elHeight = element.offsetHeight;
dHeight = document.body.offsetHeight;
wHeight = window.innerHeight;
wScrollCurrent = window.pageYOffset;
wScrollDiff = wScrollBefore - wScrollCurrent;

  • flex is one of the two layout modules in CSS (other being grid). Big article/reference on it. And a game to explain how to use it

  • @use lets you define things to apply from PostCSS plugins in a CSS file (see the example here, which uses @use to say to PostCSS that a plugin that removes comments is to be applied https://github.com/postcss/postcss-use/blob/master/README.md).

  • for 4/5, are you sure you have the syntax right for that, and the explanation of what it does? Because if it’s like any other CSS preprocessor, syntax is not quite that and what it does is not what you’ve written.

  • > is the CSS direct child selector. * means anything in CSS. selector:not(someOtherSelector) means select selector as long as it is not someOtherSelector. Like div:not(.special-div) would select all divs that do not have the class special-div. You need to provide a little more code, it’s difficult to explain exactly what something is doing when only a small snippet of it is given.


Dan,Love the support !!!

Much love and Appreciate your time and attention,

and yes I somewhat kinda get it know.

main {

margin:0 auto;
box-shadow: 0px 0px 2px 1px rgba(0, 0, 0, 0.2);
header {
padding:70px 10% 50px;
@media(min-width:1023px) {
padding:50px 30px ;
img {
margin:30px 0 10px;
.intro-text {
@media(min-width:1023px) {

that’s the main code.


also forgot, the & is it and? Like

a text { …

and text {…

or & text { …

main {
  *:not(.scroll-top) {

Thay means select any element nested in the main element that does not have the class scroll-top

& is normally used when nesting things in languages that compile to CSS to reference the parent selector of the current declaration block. This probably reads as gibberish, but it’s very simple in practice - this is an article about using it in SCSS, but it works basically the same way for all preprocessors


Dude you know alot,

Thank’s again DanCouper!!!


The JavaScript you posted is figuring out the height of the window and the position that the user is scrolled to in the window. Normally code like that it’s used to set up smooth scrolling: you click a link, and the page scrolls to the position on the page the link points at. That code gives the correct positions, then you use some method of animating it.


Kinda Sense that, thanks Dan, if there is anything I can to help, GIve back just ask!!!

Much love and Be Blessed


Also Dan, I have one more question what is the difference between " and ’ ?


There isn’t in JavaScript (or CSS/HTML) - they can be used interchangeably. "I am a string" and 'I am a string' will render out the same.

Just as a comparison, other languages are often a lot more strict - normally strings use ", character lists (basically an array of digits representing character codes) use '. Note character lists are genuinely horrible to work with most of the time, so JavaScript’s approach is OK.

In general, on most modern codebases I’ve worked on the convention is to use single quotes in JavaScript and CSS, double quotes in HTML. But as either is fine, that’s just common stylistic convention, it doesn’t really matter.