How to Practice CSS (with examples)

You understand CSS, but now you need to practice. You might be wondering, what are CSS best practices? How can I see what I'm doing in the text editor on my broswer in real-time? Where's the best place to build a free website to practice HTML and CSS?

In my opinion, the best way to get good at CSS is to learn by doing. CSS isn't something you can learn out of a book or just with a few exercises. CSS is a language. Like any language, you'll learn it best through repetition in real-world scenarios.

When I first started coding, I loved playing around with Tumblr themes using HTML and CSS. More on this later... First, let's cover the basics.

What is CSS?

CSS stands for Cascading Style Sheets. To understand what CSS is and how it works, you first need to know what HTML is. HTML is a coding language used to develop websites.

HTML is the skeleton of the website. It tells the web browser what *content *to display, such as text, hyperlinks, images, videos, etc. CSS is used to add style to HTML. You can think of CSS like the clothing of the website. It adds color, layout, simple animations, and typography. CSS can also be used to make a website responsive, that way, it can display correctly on mobile devices and desktops.

Examples of CSS

What can you make with CSS? A better question might actually be, what can you design with CSS? When combined with HTML, you can design emails, websites, and various animations with CSS.

Want to see real-world examples of CSS? Take a look at buttons, menus, typography, and layouts of any website you use. Here are some examples of where you might see CSS in real life:

• Styling with typography
• Shaping buttons
• Laying out a website with Flexbox and Grid
• Making beautiful menus
• Accessibility
• Applying effects and animations

Want more? Creative Bloq has a whole list of beautiful examples of CSS.

How to Learn CSS

You can find tons of free options for learning CSS around the internet. Some classes provide an overview of CSS while others dive into specifics like Flexbox, Grid, or Tailwind.

While free resources can be useful, and we've listed a few here, taking a paid course will really take your CSS skills above and beyond. Our Frontend Developer Career Path covers HTML, CSS, JavaScript and more to prepare you completely for a Frontend Developer Career.

Here are five other helpful CSS courses from Scrimba:

• Learn CSS Variables for Free
• Learn CSS Grid for Free
• Learn Bulma CSS for Free
• Learn Tailwind CSS
• Learn CSS Animations

How to Practice CSS

We'll start with the easiest ways to practice CSS and then work our way up to intermediate and challenging methods. Giving yourself some scaffolding to ease into your practice can make the experience more fun.

Try one of these 17 games to practice CSS

For some, gameifying an experience is the best way to learn. Games are a great way to dip your toes into a new language. Here are some free games that feature CSS. Some focus on specific skills, like Flexbox or Grid, while others feature general CSS or HTML and CSS.

1. Code Pip -- home of Flexbox Froggy and Grid Garden
2. Coding Fantasy -- creators of Flexbox Adventure and Grid Attack
3. Roadmap
4. Flexbox Zombies
5. Flexbox Defense
6. CSS Battle
7. CSS Diner
8. CSS Carnival
9. Service Workies
10. Unfold
11. Knights of the Flexbox Table
12. Guess CSS
13. CSS Speed Run

Replicate your favorite website's CSS

Use Inspect (Chrome) or DevTool (Firefox) to see behind the scenes of a website. Then, try changing or adding style rules to see how elements change on your page in real-time. Recreate a website bit by bit. As you do this, you'll start to see patterns emerging that you can re-use or customize to make your own.

Modify a template with CSS

Once you've looked behind the scenes, it can help to work with a template. You can get inside a professional Frontend Developer's head through their template. Find a template that you like, then make a few sites with it. There are both free CSS templates and paid CSS templates all over the internet.

Try altering a few elements at a time. Study the template and try to understand how and why the template creator marked up the page the way they did. Just make sure whatever template you get has responsive code so that you can practice the all-important media queries!

Try an online code editor

See your code edits on screen in real time with these apps. You can paste in code from Inspect, DevTool, or a template. If you're ready, you can simply start from scratch in these tools too.

The Best Online Code Editors:

• Scrimba
• Codepen
• Brackets
• JSFiddle
• Codesandbox

Practice CSS by building projects from scratch

You've dipped your toes in by playing games, you've snuck behind the magician's curtain to see how it works, and you've ridden the bike with training wheels by modifying templates. Now, it's time for you to fly on your own!

Take the training wheels off and try building a project from scratch! Not sure what to design with CSS for practice? Scroll down in this article for beginner CSS project ideas. The world wide web is your oyster!

CSS skills that beginners should practice

Before you run around touting your amazing new CSS skills, here's a quick checklist of things you should master with CSS. These skills are essential to using CSS on the job or as a hobby so don't overlook them!

• The box model
• Display value types (block, inline-block, inline, flex, grid)
• Positioning (static, absolute, fixed, relative)
• Selectors (a, .component, .component > a)
• Pseudo-classes (:hover, :active)
• Specificity, !important
• Responsive web design (@media queries, relative units, mobile-first design)
• Default stylesheet and reset.css
• Animation basics (@keyframes)
• Frameworks
• Sass (mixins, loops, conditions, functions
• BEM methodology

The 12 Best CSS Practice Projects for Beginners (with examples)

1. User Interface Elements

A great, manageable way to dive into CSS is through user interface (UI) elements. Instead of designing an entire webpage or website, try designing just the menu, buttons, drop downs, or another UI element.

Make sure you're following usability guidelines. You can find inspiration for UI elements on the usability guidelines website or on Dribbble. Try to code each element from scratch in HTML and CSS.

2. Static Landing Page or Sales Page

A smaller project as well, the static landing page can be a manageable project for CSS beginners. Just style one page. This can be an under construction, location, pop-up event, or sales page.

Need inspiration? Checkout this landing page roundup from Hubspot.

3. One Page Website

Technically, a landing page is a one page website. But not all one page websites are landing pages. Sort of like how a square is a rectangle but a rectangle isn't a square. You can see tons of stellar one page website examples on One Page Love.

A one page website can be a powerful tool that's simple to create. Try creating a whole website on just one page for a photographer, restaurant, band, Photography site, restaurant, music store, band, or a fake product launch. Better yet, ask friends or family if you can build a webpage for them!

4. Personal Blog

Okay, let's add a more technical element for this project: a blog! Blogs used to be called "weblog." It's a web log -- an online journal or informational website which shares information in reverse chronological order and that's regularly updated. Blogs show the latest posts first, at the top of the page.

To build a blog, you'll use HTML, CSS, Grid, FlexBox, and Responsive Design. You can learn how to build a blog for free or check out blog design inspiration before you get started.

5. Portfolio

Every web developer or designer needs a portfolio, why not make it one of your first projects? If you're struggling with design at this phase, that's okay! Keep your portfolio site minimal and don't be afraid to iterate. Include a place to share more about yourself, your projects, and your skills. Don't forget to put your contact information somewhere as well!

Need ideas? We've rounded up ten minimal web developer portfolios for you. MindInventory also shared this gorgeous interactive portfolio website if you're looking for animated examples.

6. Interactive Resume

Take your portfolio one step further and add an interactive resume to your personal site! You can put your work experience in company logos, share testimonials with photos, include your portfolio, and more. Add the cherry on top of the sunday by practicing some simple animations, too!

Logan designed this simple interactive CV template that would make an awesome blueprint. Sabir built a super enthusiastic interactive resume template for Wordpress that you could take a look at too. There are even more great interactive resume ideas on Dribbble too.

7. Tumblr Theme

Remember Tumblr? Or maybe you don't need to remember Tumblr because you actually use it... The once popular blogging platform is still out there and it recieves 288 million visits per day! Plus, it has a built-in search engine which makes your blog easy to find.

One of my first coding projects was creating my own Tumblr theme. I made dozens of themes throughout my high school and college days. You can use custom HTML and CSS to make your own Tumblr blog theme! Some people even make their Tumblr into a one page website.

You can find tons of free and paid templates around, but we recommend trying to build your theme from scratch. Before you start, view themes on Tumblr's marketplace for some ideas.

8. Email Template

Designing email templates is a lucrative and marketable skill. MailChimp, Hubspot, Litmus, ActiveCampaign, SendinBlue, and other email marketing platforms all allow marketers to use custom email templates coded in HTML and CSS.

You can find hundreds of email examples over on Really Good Emails. Remember to create responsive designs. The majority of email views come from mobile devices. If you really want to sharpen your skills, try your hand at dark mode!

10. Form

Forms are essential to businesses of all sizes these days. You should definitely know how to create one if you want to be a Frontend Developer. They're not too difficult to create with HTML and CSS. Find beautiful CSS forms on UI Cookies if you need ideas.

11. Animation

Animation in CSS can be tricky, but it's completely possible to learn it. Knowing how to animate with CSS allows you to add a bit of pizazz to anything you make without needing to understand JavaScript. You can make hover interactions, create an animation to greet your users, or have your website change as users scroll.

If you're not quite sure how to get started, try using a CSS animation library first. If you think you want to dive in from scratch, check out these CSS animation examples.

12. Open Source Projects

Open source projects are the easiest way to gain real experience before you get your first job or client. If you're interested in working on a real project, try finding an open-source project to contribute to. Not sure how to go about it? Read this How to Contribute to an Open Source Project guide before you get started.

What to learn next

Now that you know CSS and you've practiced your butt off, it's time for the next step -- JavaScript! JavaScript is one of the core technologies for frontend web development. It's the most popular programming language in the world, too.

JavaScript is used to make websites interactive and dynamic. When the content on a page refreshes without you needing to refresh the whole page manually, that's JavaScript. When a carousel advances on its own like a slideshow, you're seeing JavaScript in action.

It can be used to make websites, web applications, and games. It’s fun to learn, and it’s the last piece of the programming language in the frontend developer puzzle. Find out how long it takes to learn JavaScript and how you can learn JavaScript in some of our other articles!