Need comments for Personal Porrfolio project and some questions

https://codepen.io/chleung510/pen/OJRPyQV

Hi everyone,

Since this is last project of the responsive chapter and I want to wrap things up, I might have more questions…

1.) I looked at the template and noticed the CSS about “Base reset”. Is it important to do the base reset and what is the function of that?
2.) I notice that all every template of responsive projects has the following CSS and I already understood that the purpose is to apply the rule(s) to all elements, before all elements and after all elements. But what exactly before all elements and after all elements??

*, *::before, *::after{ … }

3.) I also notice that they set font-size: 62.5% for the whole page and stated the purpose was for easy rem calculation based on the comments. I assume that is because the programmer wanted to use rem as measuring unit and it is for easier conversion between rem and px later on. But I am not sure…

4.) I noticed that when we code using Codepen, everything we code will go into body section. Why Codepen has such kind of setting. Since I have been using Codepen to code and it has been a while since I last used code editor to code, are there anything I need to pay attention about when I switch to code editor?

5.) I used w3c validation tool to check my codes, I got an error message saying I have elements with duplicated ID. I wonder why elements with duplicated class name is allowed but duplicated ID is not allowed?

6.) Finally, is there a way that I can adjust which part/corner of the “.project-image” shown to viewers instead of making new screenshots of projects? (I used object-fit: cover CSS to maintain the original quality of the image.)

Thanks in advance!

Hi there,

Your tribute page is shown three times in your projects section.

I’ll try to answer some of your questions.

If you open the settings for your pen, you can add stuff for the head if you need to. Codepen is a “playground” for people to start coding quickly with everything set up for them. When you build websites outside of Codepen, you will have to link stylesheets, and add other things to the head on your own.

The id selector is meant to be unique. id will override style rules targeted by class or element. If you are only targeting one element, you can use id. Otherwise, you should use class.

For instance, if you have a ul, with some sort of style for the links, you would give all your links a class. But if you want to highlight one of the links with a different color, you would give that one link an id.

Hope that makes sense.

1 Like

Your page looks good @gvghk1. Dealing with your questions;

What did your search results show you that you don’t understand? A simple search for css base reset gives answers that I think are significant. Should also answer your second question.
A little further in this research will lead you to “CSS Reset” versus “Normalize CSS”. A lot more than I can type here but it’s something to read up and familiarize yourself with.

For your third question, yes, that’s why they did that.

Codepen provides the boilerplate for you. You can read more in their official documentation. If you’d like to see what they add you can export your project and see the elements that they’ve added behind the scenes. For instance, open the index.html file that’s found in the exported dist folder and view the source and you’ll see the elements that were added before and after the body element.

Partially explained in this FCC lesson but you can get more information with a quick search.

If I’m understanding this correctly, codepen creates large and small screen shots of your pens that can be used in your portfolio. Access them from;
https://codepen.io/userName/pen/slug/image/large.png (for the large screenshot)
or
https://codepen.io/userName/pen/slug/image/small.png (for the small screenshot)

  • where you replace userName with your codepen userId and slug with the id of one of your codepen pens and then copy that link into your portfolio
1 Like

Thanks for your assistance and the reading materials that your provided.

I also read this and understood better. Does it necessary mean that
this CSS *, *::before, *::after{ … } would apply to all real elements within the body element, before body element and after body element?

Merry Christmas for everyone anyway!