Magazine project-navigation, scrolling , view help

1 : quick question, although i already looked this up and have forgotten: what is the difference between “.red” and “red” as a selector? why the period? I think because there is more than one element it applies to?

2 : the magazine problem is proving to be very hard to learn anything. the “preview” is too compact and when I slide the coding window over to make it smaller, it just resets on the next step. a pop out window doesn’t work either because I dont know how to switch in-between fast and efficiently. I want to be able to see the code working on whatever part I am on, and I just dont know how to.

3 : I also would like to “jump” to whatever part of the HTML I am applying the CSS to without having to scroll for it.

without these things I am just putting my head down and blindly just typing out what I am told, observing and absorbing nothing. I have thought about split screen , which is possible in Edge but not Chrome. I have a very big monitor. I for sure want to go to double monitors eventually, its actually going to be a “gift” to myself once I finish some stuff lol.
any suggestions welcomed, appreciated!

Edit: Although not efficient yet, I have managed to open split screen in Edge with the code on one side and the magazine on the other.

.red refers to an element that has the class “red”
Just red refers to nothing. Its not an element, id, or class so its not a valid selector. Having . in front makes it a class, and having a # in front makes it an id

You can use ctrl+f and search the html element, class, id, or text you are applying the css for. You can see my screenshot in the upper right. Right now, its searching for all h1 on the page and you just press the arrow to go to the next occurrence of whatever it is you are searching for