These Are The Best HTML And CSS Projects For Beginners - Skillcrush

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

The first website I built — the final project of a video lesson series on an online coding 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 these languages made it possible. The experience motivated me to continue going — I’m still studying 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?

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

What can I build with HTML and CSS?

HTML (HyperText Markup Language) and CSS (Cascading Style Sheets) 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.

CSS enables you to style a web page and make websites responsive. 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, while CSS is on its third.)

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 these two languages.

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

While working on HTML and CSS practice 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.

However, there’s still a LOT you can do. Let’s take a look at some great project ideas to try out.

(Back to top.)

7 Best HTML CSS Projects for Beginners

If you want to learn HTML and CSS skills and start making money, here are some great practice projects to help you get started.

1. Build a Portfolio or Simple Personal Website

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 abilities. 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 — building an interactive resume from scratch is one way to show you know your foundational knowledge 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 knowledge of HTML and CSS. 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

People visit websites from various devices, which 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 or homepage, 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 knowledge 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 these two languages, you can contribute to an open source project, which is a great way to get real world experience while honing your skills. For ideas on how to get started, learn more here: How to Contribute to Your First Open Source Project

You can find projects to contribute to on hosting sites like GitHub.

(Back to top.)

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

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 course on their online 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 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?

📌 Related: There are actually quite a few jobs you can get, even if you only know HTML & 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 this 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 skill level. 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 practice projects already under your belt, and you can learn more languages as you go.

Find Work Building Emails

One way to earn money is to work on emails. Not writing emails — formatting them, designing them, and coding up your work.

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. 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, you may be qualified to apply for HTML Email Developer or Email Marketing Specialist jobs. A good eye for web design is also helpful for these roles.

Look for Website Maintenance Jobs

Teams also need people who know HTML and CSS to keep websites updated and operating smoothly. If you know these two languages, 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 knowledge of these two languages (and experience with the practice 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

Knowing these two languages 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. 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.

📌 Related: Not sure where you can find entry level jobs in tech? Look no further!

(Back to top.)

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

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 abilities. 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 projects!).

One of the more uniquely named frameworks out there — Sass — may be a good way to level-up your CSS. Sass is an extension language that allows you to write properties and use CSS rules while also allowing for variables and reusable 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 determine the format and style of a website, app, or product as well as have an impact on how that project works for the end user. Learning how to lay out a web page in programs like Adobe Photoshop and making icons in Illustrator is 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.

While learning HTML and CSS, If you discover that you enjoy looking through lines of code and writing code then learning a programming language like 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’s definitely many different paths to acquiring tech abilities. Having HTML and CSS in your tech toolbelt (as well as HTML and CSS practice projects in your portfolio), you’re well on your way to a career in tech.

📌 Related: Ready to keep learning? Check out our guides to becoming a front end developer and web designer.

(Back to top.)

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