The Best HTML and CSS Projects for Beginners

By: Neely Kartha

Category: Blog, HTML & CSS

If you’re a beginner to code and just started learning HTML and CSS, you may be wondering what HTML and CSS projects you can do to build your portfolio and hone your skills. You might even ask whether or not you can actually do anything with just HTML and CSS knowledge! The good news is that there are many types of HTML and CSS projects out there that beginners can use to practice coding, build up skills, keep learning, level up your knowledge, and even start earning money.

The first website I built — the final project of a video lesson series on an online learning platform — was made purely with HTML and CSS. Even though it was a basic static web page for a fake bakery that would never be seen or hosted anywhere, I was thrilled. I had created something that wasn’t there before, using code. As an English major, using language in this tangible way was new to me, and HTML and CSS made it possible. The experience motivated me to continue learning — I’m still learning today, even after years of working as a software engineer.

woman in glasses with hand on face, thinking

Is Tech Right For you? Take Our 3-Minute Quiz!

You Will Learn: If a career in tech is right for you What tech careers fit your strengths What skills you need to reach your goals

Take The Quiz!

In this article we’ll go over how you can also use HTML and CSS to build projects and explore the tech industry, even if you’re just starting your journey into the tech space.

Table of Contents

  1. What can I build with HTML & CSS?
  2. 7 Best HTML & CSS Projects for Beginners
  3. Where else can I practice?
  4. Can I make money with just HTML & CSS?
  5. What should I learn next?

What can I build with HTML and CSS?

HTML and CSS are the foundation of websites in that they provide structure and styling to a web page. With HTML, you can add non-interactive elements such as text and images, and include interactive elements such as links, buttons, and videos.

With CSS, you can style web pages. You can also make websites responsive using CSS. This is possible with media queries, which were introduced in CSS3.

(HTML is on its fifth iteration, so you’ll see it referred to as HTML5, why CSS is on its third — aka CSS3.)

media screen with body width styled

A CSS example of a media query.

Since the addition of media queries, it’s possible to check the width and height of the current device, as well as the orientation (landscape or portrait). That means you can make a site mobile responsive using just HTML and CSS.

It’s possible to create animations using CSS by gradually changing an element’s properties. And you can even create flashy scrolling effects (known as “parallax“) with CSS.

While working on HTML and CSS projects can help you build beautiful websites, for more complex sites, you would most likely want to use JavaScript. With JavaScript, you can fetch data from a database, handle different states of an application, and easily add interactive elements like a slider.

That said, there’s still a LOT you can do with HTML and CSS alone. Let’s take a look at some great project ideas to try out.

(Back to top.)

7 Best HTML and CSS Projects for Beginners

If you’re looking to learn HTML and CSS and start making money, here are some great HTML and CSS projects to help you refine your skills and even get paid to use them.

1. Build a Portfolio or Simple Personal Website

Use your skills to show off your skills! A simple website is useful for showcasing your projects to potential employers and as practice writing markup and creating stylesheets. A website builder like WordPress or Squarespace could help you get started — you can even add custom CSS to personalize it and challenge your CSS skills.

You can keep the design simple if you want to focus on diving into the markup and styling.

Neely's landing page

An image of the landing page of my first portfolio website.

2. Make your resume interactive

This is for your own brand as well as to sharpen your skills. In the same vein of building your own personal website, building an interactive resume is one way to show you know your foundational skills while also making your resume fun. This article on dev.to by Alvaro Montoro walks you through how to do this from start to finish.

Alvaro Montaro interactive resume page

An image from Alvaro Montaro’s guide to building an interactive resume with HTML and CSS.

3. Create an Email Newsletter

There are job opportunities focused on email building that require HTML and CSS knowledge. You can use an email newsletter service like MailChimp and customize the designs.

Here are some ideas on what emails to create for practice:

  • Build an email newsletter to share your journey into tech with lessons you’ve learned and projects you’ve built with friends and family
  • Launch an email newsletter of upcoming events in the area or your favorite local spots

Here are some roles and freelance email-related jobs to look for:

  • Email designer
  • Email developer
  • HTML developer

4. Make a static responsive website

Users come to websites from various devices. This means they’re viewing the content on different screen sizes. A responsive website has content formatted according to screen size using CSS media queries and HTML. It is important to know how to do this, so take that personal website, portfolio, or mock site and make it work across all different viewport sizes.

Here are some ideas of what websites to make for practice:

  • A web page for a make-believe restaurant
  • A biographical page about your favorite author
  • A simple marketing landing page for a friend or family member’s business or to display his or her personal work

Here are some ideas of what freelance opportunities to look for to create a static responsive website:

  • Find a project where you customize a WordPress or Squarespace site
  • Offer your services to a restaurant looking to have an online presence with a static website and menu pages

This is also an opportunity to learn Flexbox to build a grid system that easily collapses based on the screen size.

5. Build a form

Knowing how to put interactive controls together to build a form is extremely useful in web development. You use buttons, inputs, forms, and HTML elements to allow for user input. This is also a chance to show your UX and UI skills by making the form accessible, making decisions about placeholder helper text, and creating labels for form fields.

6. Create an animation

An animation? With just HTML and CSS? Yep, it’s possible! You can put your CSS skills to the test by creating shapes and animations to break down data or to make your website feel more interactive. For example, you can use an animation when a user hovers over an element.

Here are some ideas for animations to create:

  • Hover interactions for your personal site to let the user know where they are
  • An animation to greet your users

7. Contribute to an open source project

Even with just HTML and CSS skills, you can contribute to an open source project. Open source work is a great way to get real world experience while honing your skills. For ideas on how to get started, learn more here: What is Open Source? How to Contribute to Your First Open Source Project

You can find open source projects on hosting sites like GitHub.

(Back to top.)

woman in glasses with hand on face, thinking

Is Tech Right For you? Take Our 3-Minute Quiz!

You Will Learn: If a career in tech is right for you What tech careers fit your strengths What skills you need to reach your goals

Take The Quiz!

Where else can I practice?

  • Skillcrush (that’s us!) offers a free coding camp ⛺️ that introduces HTML and CSS. You can get started immediately, and write your first HTML within minutes.
  • freeCodeCamp is great because they provide project-oriented work that is essential for building a portfolio or personal site.
  • Udemy has this free HTML and CSS course on their online learning platform.
  • The Odin Project provides a primarily self-directed free course. The activities are sourced from YouTube videos, freeCodeCamp tutorials, and other blogs.

There are plenty of places to learn to code online for free. Once you’ve gotten your feet wet, check out Skillcrush’s comprehensive and personalized Break Into Tech program . It’s a zero-to-job curriculum designed for total beginners in tech looking to start a new career, with fast tracks in front end development and design.

(Back to top.)

Can I make money with just HTML and CSS?

Let’s look at the next question that might be on your mind — is it possible to actually start making money with only these two fundamental skills? Is HTML and CSS knowledge really valuable in a tech scene where everyone seems to know how to use them?

Yes! You may not find an extensive list of job titles, but it is possible to find work that matches your HTML and CSS skills. In fact, these skills, along with your other skills like design or marketing, can be the entryway to your career in technology, especially with a few HTML and CSS projects already under your belt, and you can learn more languages as you go.

Find Work Building Emails

One way to earn money using just HTML and CSS is to work on emails. Not writing emails — formatting them, designing them, and coding up those designs.

Individuals and organizations use email newsletters and campaigns to communicate with their readers and/or users. These emails can be formatted to be in line with a larger brand or design system. They also usually need to be responsive, meaning the content works and is nicely formatted on all devices, including: mobile phones, desktops, and tablets of all sizes.

With your knowledge of HTML and CSS, you may be qualified to apply for HTML Email Developer or Email Marketing Specialist jobs. A good eye for design and web design skills are also helpful for these roles.

Look for Website Maintenance Jobs

Teams also need people with HTML and CSS skills to keep websites updated and operating smoothly. If you know HTML and CSS, there are opportunities to create content for the web, aid in web project management, and provide support for a website’s smooth operation.

Here is a list of website-related job titles where HTML and CSS knowledge (and experience with the HTML and CSS projects above) comes in handy:

  • Website Content & Support Specialist
  • Website Project Manager
  • Webmaster
  • WordPress developer
  • Website editor

Apply for Entry-Level Front End Developer Jobs

Having HTML and CSS skills gives you opportunities to get your foot in the door to learn more about the tech space and grow your skill set on the job, including access to entry level front end jobs or junior web developer jobs.

In these positions, you would learn a lot more than HTML and CSS. You would be expected to learn programming languages (such as JavaScript, for example) and be able to make a larger contribution to the website and app creation and operation process.

(Back to top.)

What skills should I learn next?

Learning is an integral part of working in tech, whether it’s expanding or diving deeper into your current skills. With that in mind, there are a lot of different paths you can take after getting used to working with HTML and CSS (and making some HTML and CSS projects!).

One of the more uniquely named frameworks out there — Sass — may be a good way to level-up your CSS skills. Sass is an extension language of CSS that allows you to write properties and use CSS rules while also allowing for variables and reusable CSS blocks. This is a great way to work off of your current knowledge and learn some basic programming concepts, such as using variables.

If you really enjoyed picking the colors, fonts, and visual layout for web pages while writing markup and creating stylesheets, you may want to dive deeper into User Interface (UI) design.

As a UI designer, you would determine how a website, app, or product would be formatted and styled as well as have an impact on how it works for the end user. Learning how to lay out a web page in programs like Adobe Photoshop and making icons in Illustrator would be a good starting point in your design journey.

User Experience, or UX design may also be of interest to you. User Experience is the segment of design that focuses on how a user actually uses a product and how he or she feels about it. There are several different types of roles in the UX space.

If you’ve found yourself enjoying looking through lines of code and writing code while learning HTML and CSS, learning a programming language JavaScript or Python may be your next step. JavaScript is dynamic and expansive in its utility, and adding it to your tech chops makes you a stronger candidate for more development roles. Python is a great language to learn if you’re interested in building web apps or curious about data science and machine learning.

There are definitely a lot of different paths to gaining tech skills. With HTML and CSS in your tech toolbelt (as well as HTML and CSS projects in your portfolio), you’re well on your way to a career in tech.

(Back to top.)

woman in glasses with hand on face, thinking

Is Tech Right For you? Take Our 3-Minute Quiz!

You Will Learn: If a career in tech is right for you What tech careers fit your strengths What skills you need to reach your goals

Take The Quiz!

Neely Kartha

Neely Kartha brings her passion for languages to her career as a software engineer and writer. She has seven years of experience in the technology industry with the last five being a software engineer. When she’s not coding or writing, she’s binge watching shows years after everyone else has watched them and exploring NYC one coffeeshop at a time.