Practicing HTML and CSS Basics

Now that you have a basic grasp of HTML and CSS, let’s have some fun. In this section, there are two experiments designed to give you practice building websites and interfaces. I use the term “experiments” because in experiments, you learn as much from your failure as you do from your success.

Experiment 1

In our first experiment, we are going to use CodePen. CodePen is a front-end playground where you can code HTML and CSS without having to store files locally. It also has live previews that update as soon as you save your code.

By using CodePen, you kill two birds with one stone. On one hand, you practice HTML and CSS. On the other hand, you create a basic progress portfolio. We are also going to use Dribbble, which is a site full of design inspiration.

Go to Dribbble and find a design that is simple enough to code in a few hours. I selected a few designs to get you started: 1, 2, 3, 4, and 5. I chose mobile-first web designs because they are less complex than their desktop counterparts. However, feel free to choose desktop designs as well.

After you’ve decided on a design, go ahead and try coding it in CodePen. If you get stuck, remember that StackOverflow is your friend. Another useful practice is to go on websites like Medium, AirBnB, and Dropbox and using the inspector tool to see how they achieve different layouts and styles. Also, take a look at some of the pens on CodePen. I picked out a few good references:

If your copy looks different from the original, don’t be discouraged. Keep practicing with different designs and you’ll notice improvement each time.

If you don’t have a design background, it’s likely your design eye is underdeveloped. A front-end developer with a good design eye will be able to identify good designs and replicate them perfectly. I wrote an article a few weeks ago on how to develop your design eye.

Experiment 2

Hopefully the first experiment gave you some confidence with writing HTML and CSS. For experiment 2, we’re going to take a look at some sites, then code a few of their components.

Some websites use CSS frameworks or obfuscate their CSS classnames, making it hard for you to read their source code. That is why I selected a few well-designed websites with easy to read source code.

Dropbox for Business: Try replicating their hero section

AirBnB: Try replicating their footer

PayPal: Try replicating their navigation bar

Invision: Try replicating their signup section at the bottom of the page

Stripe: Try replicating their payments section

Once again, the focus of experiment 2 is not to recreate the entire page. Although that certainly wouldn’t hurt! Choose a couple of key components like a navigation bar or a hero section to code. I provided a suggestions next to the list of sites but feel free to choose other components.

You can code this experiment in CodePen or store it locally. If you choose to store it locally, you can either download this example project as a boilerplate or create the files from scratch. I suggest using an editor like Atom or Sublime.

Also, keep in mind that for any website, you can always see its HTML and CSS. Just right click the page or a component on the page, click inspect, and a panel will pop up with the HTML on the left and the CSS on the right. Once you are done or get stuck, use the inspector to see how your HTML and CSS compare.