Web design, how to use the same enviroment of the exercises?

Basically that’s my question:

I’m starting my first Tribute page project, and I find quite abrupt the change from the exercises enviroment to that of codepen.

In the exercises, every time i want to add an element, a list pops up showing all different options starting with the same letter.

In codepen that list doesn’t shows up, and I already tried adding bootstrap or sass… i don’t even know if that would help.

It’s quite hard to remember all the grammar, and without this option it will take me many more hours as I would have to go back to each lesson to remember exactly how those elements works.

Any sugestion?

In codepen you can type div and hit tab and it will turn into <div></div>

In the css if you have

body {

and you’ve just typed back hit ctrl-space and a list will popup.

Same in the JS window.
Typing document. then hit ctrl-space a list will pop up.


Wow, I had no idea, it’s wonderful, many many thanks!

Do you have a link where i can find all the different shortcuts?

On the bottom left of the codepen footer there is a link for shortcuts.

1 Like