Now it´s time to learn some tools. Even though we could technically write HTML and CSS on any text editor, I find it much more productive to use one with great extensions and functionality that allow us to be more productive. I will present you with 2 tools I use regularly, one online (CodePen, in this article) and one that you will have to download as an app (Visual Studio Code, in the following article). Let´s get started!
This is the landing page once you sign up (don´t worry, it is free). There you will see the gallery I was talking about before where you can take a look at different Pens and pick the one you like and take a look under the hood. Let’s see how a CodePen looks inside:
That´s a CodePen I shared the other day. It´s a responsive dashboard with some basic structure, a topbar, a sidebar, and some panels. It´s done mostly in HTML and CSS. And there you can see the window get´s split up in HTML, CSS, JS, and a preview of what your code does. After you created your account you can just enter to any Pen and modify it and Save (ctrl + s) and it will automatically save a copy of that Pen with your modifications in your profile. So feel free to modify and test as many things as you want, you are not changing the original Pen of the owner.
Create your own CodePen
Just to test things out go-ahead to this link. Create your account on CodePen and try creating your own CodePen with the following HTML code:
<h1> Hello World! </h1> <p> Some text you would like to see on your page </p>
If you do this you will see a Title with the text Hello World! and then some text that you should modify. Of course, it won´t have styles but for now, that is good enough. We are learning HTML and with CodePen under your belt, you have a great way to practice what you will be learning in the next article. Also, h1 stands for heading 1, which is the most important heading and should be the “biggest” in your website, and p stands for paragraph. We will be introducing new tags whenever we can and this was a good opportunity to do so.
Those are the basics about CodePen, I hope you liked the site and if you don´t or if you are interested in looking for other non-online option for creating your sites the following article will help you install and configure Visual Studio Code. See you there!