Learning a new skill is exciting, especially when it’s coding

Avic Ndugu
Jul 15 · 4 min read

You forget most — and sometimes all — of what you learn without practice. That’s where projects come in. They are a great way to practice what you’ve learned. You can even use projects to showcase your work.

Woman working on a project using a computer

As a newbie, choosing projects that match your current knowledge level can be daunting. You may choose a project and later realize it’s too advanced for your current know-how. At least, that was my experience on this learning journey.

I’ve curated a list of projects that are appropriate even if your knowledge is limited to HTML and CSS only. These projects are available on popular learning websites and contain additional information on what you’ll tackle.

7 Projects to Try Only Knowing HTML and CSS

1. Tribute page

Tribute page screenshot

Write a tribute to someone you admire and publish it as a webpage. This project requires HTML knowledge will include adding an image, links, lists, and paragraphs. However, you can use CSS to make it look better.

2. Survey form

Forms are useful to collect data online. This project will test your skills in all sorts of inputs, and your knowledge of forms and structuring the webpage. The form is not required to send any data.

Its a build-up from the tribute page. This project will require knowledge of HTML/HTML5 to create.

3. Product landing page

Product landing page — Author’s project

This will test your knowledge of both HTML and CSS. You will be required to practice creating columns and aligning items within the columns. In addition, you will also need to do basic editing of images (e.g., cropping and resizing to make perfect images for your web page).

4. Technical documentation page

Project documentation page

This project requires some knowledge of HTML, CSS, and bootstrap or JavaScript. The basic idea is when you click on any topic on the left, it loads that content on the right.

I am currently attempting this project and will post the final project once it's complete.

5. Personal portfolio webpage

Portfolio showcasing projects you have worked on.

This project combines all the skills you have learned in HTML and CSS. Also, this project requires knowing how to crop and resize images. If you don’t have options use Gimp — it’s free, open-source, and available on Windows and Linux.

If you’re in a hurry, read Brian’s article on making an online portfolio using a ready-made theme/template.

6. Google.com page

Screenshot of google.com

Yes, you have seen it many times but can you replicate it. You can make a look-alike of the google.com page with icons, Google’s logo, a text box, and two buttons. In this project you are making the page look like google.com but not function like google.com. You’ll need to know both HTML and CSS.

7. google.com search result page

Screenshot of Google search result page

You will create a page with the format of a Google search result. Your page should have the normal ten results and the navigation to next pages at the bottom.

Although this is an upgrade from the google.com page above, you’ll be able to reuse some of the code on this project.

Did you create a basic project while learning HTML and CSS? If so, share below and help other learners find simple but challenging ideas to try out.

Better Programming

Advice for programmers.

Avic Ndugu

Written by

Web developer, graphic designer and tech enthusiast. I also enjoy reading & writing informative articles. Contributor of tunapanda.org medium publication.

Better Programming

Advice for programmers.

Welcome to a place where words matter. On Medium, smart voices and original ideas take center stage - with no ads in sight. Watch
Follow all the topics you care about, and we’ll deliver the best stories for you to your homepage and inbox. Explore
Get unlimited access to the best stories on Medium — and support writers while you’re at it. Just $5/month. Upgrade