Martine Dowden

A portfolio page is vital for any professional frontend web developer. In this series of liveProjects, you’ll utilize some of the modern features of CSS to create a stunning portfolio page of your very own. You’ll show off to your prospective clients with both a light and a dark theme that utilizes custom properties; use new ways to select elements when you style your contact form; deliver responsive designs that use grid, subgrid, columns, and flexbox to lay out content; and explore scroll-snap and timeline animations to alter the scroll behavior of your page.

Smooth scrolling is one of the most important features of any portfolio page! In this liveProject, you’ll utilize CSS—including animation timelines—to set up different features for when a user scrolls your page. You’ll lock your header to stay visible on screen at all times, ensure that the top of different sections snap to the top of the window as users scroll, establish a progress bar in the header to show how far you’ve scrolled, and more. When you’ve finished this final polish, your portfolio page will look great!

In the modern world, web traffic is mobile traffic. That’s why your sites need to be responsive and easily adaptable to any screen size! In this liveProject, you’ll create a responsive layout for your portfolio site so it looks good on mobile. You’ll need to constrain your profile picture, utilize column-based layouts, use grid and flex to align items, and utilize flexbox to lay out your footer.

Contact forms are one of the most important parts of almost any site—especially your web design portfolio. If your potential clients aren’t impressed with a contact form, why would they ever use it to get in touch with you? In this liveProject, you’ll use CSS to create a stunning contact form. You’ll put your own spin on text, error messages, radio buttons, button styles, and more.

Any web developer worth their salt needs an eye-catching portfolio site—and so your boss at Consultants Inc. has told you you need to make one! In this liveProject, you’ll experiment with delivering both light and dark themes for your site using CSS, custom properties, and a locally hosted variable font. Remember, web design is about self-expression—so don’t be afraid to play around with your code to help it fit you and your personality.

In this liveProject series, you’ll play the role of a frontend developer hired by Max, the owner of My Little Cookie Shop, to take his website to the next level. A competing bakery has opened across the street and Max wants to make sure his competitive edge doesn’t crumble. Using CSS, you’ll add transitions and animations to My Little Cookie Shop’s UI, making it shine while providing a more fluid experience for the user.

Max, the owner of My Little Cookie Shop, wants to take his online menu from meh to marvelous. Using CSS, you’ll style and animate the pastry pictures so that they flip around when clicked, revealing the details on the back, just like a real-world, three-dimensional card. Also, to respect all users, you’ll use media query to disable animations for users whose browser settings indicate they prefer reduced motion.

My Little Cookie Shop’s website looks pretty nice, but there’s a problem with an accordion feature on the store’s page. Instead of allowing the user to expand or collapse pastry categories, the content abruptly appears and vanishes. To make sure Max’s competitive edge doesn’t vanish, too, you’ll make the sections glide open and close, as well as fix an arrow’s rotation problems, using CSS and JavaScript. Also, to respect all users, you’ll use media query to disable animations for users whose browser settings indicate they prefer reduced motion.

Bring My Little Cookie Shop’s logo to life.The website already looks pretty nice, but Max, the owner, has hired you to sweeten it even more. Using keyframes and CSS properties within the SVG code itself, you’ll animate the logo with blinking stars and rotating text, then create the illusion of drawing a path. The logo includes two thin circles around a central design; you will make it look like those circles are being drawn and erased as the animation loops.

Help Max, the owner of My Little Cookie Shop, sharpen his competitive edge. He’s hired you to upgrade his store’s website with hovers. Using the provided design file as your guide for what each state should look like, you’ll ensure the user can easily see what’s clickable and provide a smooth transition from one state to another. You can use the provided HTML and base CSS, but you’re welcome to deviate from that if you’d like to get more creative.

Tiny CSS Projects builds your CSS skills by guiding you through 12 creative mini-projects. Each interesting challenge starts with a downloadable HTML skeleton. As you flesh it out with your own design ideas, you’ll master CSS concepts like transitions, layout, and styling forms, and explore powerful features including Flexbox and Grid. All the skills you’ll learn are easy to transfer to full-size applications. When you finish, you’ll have an exciting portfolio of designs ready to go for your next project.