The Best HTML and CSS Projects for Beginners
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.
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
- What can I build with HTML & CSS?
- 7 Best HTML & CSS Projects for Beginners
- Where else can I practice?
- Can I make money with just HTML & CSS?
- 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.)
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.
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.
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.
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.
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.
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.
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
- 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.
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.
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.