5 Awesome HTML and CSS projects to build (with codepen preview)
Tags: html, css, webdev, beginners
Published: 2022-02-14 01:42:03

Coding is a fun and exciting practice but how do you measure your progress in your learning journey?

Here are some cool ideas your could build to put your skills to a test.

**1. Survey Forms**

Survey forms are very popular first projects and are a great way to test your skills on HTML form validation. Also, creating a survey form is a great way to test the different form elements (radio, checkboxes, textareas, etc.) all in one form.


You could start with a simple form like this:


![form pic](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/gylog4tikhxrqsrssaii.jpg)

and then move to forms with more styling and responsiveness like this [survey form](https://codepen.io/babi-b/pen/MWbZJrK): 

{% codepen https://codepen.io/babi-b/pen/MWbZJrK %}

**2. Tribute Page**
A tribute page is one of the simplest web pages you could build as a beginner as it requires just basic skills in HTML and CSS

You could experiment with different concepts in CSS like adding images, links, paragraphs and then using CSS to beautify the page. This is an example of a simple responsive [tribute page](https://codepen.io/babi-b/pen/mdOzzZj):

{%codepen https://codepen.io/babi-b/pen/mdOzzZj %}

..and this is an example of a vibrant tribute page by [Michael Schneider](https://codepen.io/michaelsndr/pen/LYYPqpa):

{%codepen https://codepen.io/michaelsndr/pen/LYYPqpa %}

**3. Landing pages**

Creating a landing page is a delightful process. You let your imaginations fly. Also, you get to test several skills in HTML and CSS like positioning contents on the page, footers, creating columns and sections, color palettes and the list goes on. 

You could start with something simple like Brad Traversy's [video landing page](https://codepen.io/bradtraversy/pen/BaoWWjb)

{% codepen https://codepen.io/bradtraversy/pen/BaoWWjb %}

and then challenge your skill to build more complicated pages like this [product landing page](https://codepen.io/babi-b/pen/zYoygoP):

{% codepen https://codepen.io/babi-b/pen/zYoygoP %}

**4. Technical Documentation**

Even without javascript, it is possible to create a technical documentation page with just HTML and CSS. You have the freedom to create. 

To build the technical documentation, you could use this [sample](https://codepen.io/freeCodeCamp/full/NdrKKL) freeCodeCamp provides.

With CSS, you could create sleek documentation page like [Markus Lising's](https://codepen.io/marcusnapoleon/pen/aPBPdL) page

{% codepen https://codepen.io/marcusnapoleon/pen/aPBPdL %}

or may decide to spice up your page with animations like this [documentation](https://codepen.io/babi-b/pen/qBRdwjo)

{% codepen https://codepen.io/babi-b/pen/qBRdwjo %}

**5. Personal Portfolio**

There is a temptation to want to create a portfolio only when you've built more skills or learned more technologies. Good news, you don't need to wait for a certain time in the future. You can do it now, with just HTML and CSS.

If you have doubts, here a some amazing portfolio's other have built...

{% codepen https://codepen.io/ThiagoFerreir4/pen/eNMxEp %}

_credit_: [Thiago Ferreira](https://codepen.io/ThiagoFerreir4/pen/eNMxEp)

{% codepen https://codepen.io/gymratpacks/pen/jMwOvg %}

_credit_: [Aaron Cuddeback](https://codepen.io/gymratpacks/pen/jMwOvg)

{% codepen https://codepen.io/thomasvaeth/pen/WQxQem %}

_credit_: [Thomas Vaeth](https://codepen.io/thomasvaeth/pen/WQxQem)

---

**Conclusion**

Building project while studying definitely helps grasping knowledge, skills and also learning other things you might have skipped. These are some of the projects I worked on while starting out with HTML and CSS. I hope building them helped you as they helped me.

Happy coding! 🌱



**Aside:** All the pens I didn't reference are mine.



                                                          Babi💞