CodePen view layer of my grid

Hello guys, im working on the first project of the responsive web design certification.
Im using CodePen.io as required. Im trying to create a css grid for a layout of the website.
I watched a video-tutorial and the guy in the video could hover over his created container to see the layer and how the grid is looking. Here is the video Intro to CSS Grid - Create a Basic Layout - Web Design Tutorial - YouTube (see min 02:08)
This is pretty nice since im having some troubles understanding how the actual grid i created until now is looking since i dont know how or if i can see the layer on CodePen aswell. This would be very helpful for me to know what im actually doing. I dont want to just copy the layer of him.
Is there a function like this on CodePen.io aswell?
Thanks for your help.

Right click your page and press inspect

1 Like

From the FAQ:

Do I have to use CodePen for the front end projects?

As long as your code is publicly viewable, and you have a live demo, you can use whatever you want.

You can use GitHub pages or surge.sh as alternatives to CodePen.

The Objective clearly states to build a CodePen.io app that is functionally similar to this: https://codepen.io/freeCodeCamp/full/zNqgVx.
Also im doing the Responsive Web Design certification not the Front End Development Libraries certification. Is this project still considered a front end objective and is it sure that i can use whatever?
Thanks

The question comes up frequently, do I have to use codepen hence my pasting in the response from the FAQ.
I was just letting you know.

As to your original question, it was answered in the second post.
If it helps, you can open your pen in 'debug` view and use cmd + opt + i (Mac) to open dev tools (ctrl + shift + j in Windows)

1 Like

HI @HanyBaba !
Welcome to the forum!

CodePen is not required.

Functionally similar does not mean you have to use codepen or build the project exactly like the sample.
Functionally similar just means you need to pass the user stories.
You are supposed to give it your own style and code different from the sample.

The first 4 certifications are all frontend focused.

  • Responsive Web Design
  • JavaScript Algorithms and Data Structures
  • Front end Libraries
  • Data Visualization

Yes.
They are your projects.
The only requirements are to pass the user stories and submit a live link.

People have submitted project from replit, codepen, codesandbox, github pages, and more.

The only reason why codepen is suggested is because it is easy to setup for beginners.

But if you feel comfortable working with other tools, then you can.
freeCodeCamp doesn’t care what you work with.

Hopefully that clears it up!

1 Like

the functionality you are talking about is actually built in Chrome browser and i beleive other browsers have their own similar functionality as well. You just need to right click over a page content and press inspect, which will bring the display you are looking for. It has various segments, including DOM elements, styling, console and whatnot. You can also resize the window and use different environement, like phone display, seee its responsivenes and behavior. If you dig some more, you can also find some extra functionalities regarding flex and grid

1 Like

Nice, thank you for the help :slight_smile:

Thank you for the great explanation, im kinda comfortable with CodePen right now.
But im still interested in which other tools are also recommended for beginners?

You could started learning how to use a code editor like visual studio code.
freeCodeCamp has a beginner course to get you started.

Learning about version control would be good too.
Version control will track your changes that you make to your code.
Git is the most popular version control system and GitHub is a place to store your code so other developers can view it.

1 Like