HTML + CSS Practice Project: Website Slicing

Let’s take a break from following courses and doing online exercises: instead, let’s make a project from scratch! When you start learning frontend technologies, HTML becomes clear the fastest, followed by CSS — and JS is a big journey of its own. Here we will leave JS challenges for later, and we will focus on integrating the visual part of the frontend in a simple project.

Why you should do projects

Working on projects is a great exercise, and it allows you to practice the skills in an environment more similar to real-world work. Projects:

• are focused on results: things that you are expected to deliver;
• use technology as a tool to achieve the goal: this forces you to focus on what matters; and
• are usually much bigger than challanges you find in courses or books.

Projects allow you to apply your skills to create something meaningful. They let you gain confidence in your skills, and they are tangible things that you can show off to let others know what you can do. After getting the basics from courses, projects are a great step toward improving your skills.

What is slicing?

Slicing is turning a design into a website. You take the output of a graphic designer, most likely in the form of a PSD file or Figma design, and you make an HTML + CSS website with that look. It requires all the skills you’ve been using for tweaking the look of website elements, plus building the main structure of the website—keeping the header, footer and menus in place.

Template sources

For an exercise project, you don’t need a custom design—you just need some design. Luckily, there are websites where people share free design files you can use for your project: example 1, example 2.

Make sure to check the license of the files you use. Probably the license will require you to:

• give credit to the author of the design and
• release your work on the same license.

No matter the licenses, you can always play with the design locally, but it is good to make sure you can share your work publicly as well.

Git & GitHub

As you work on your project, you can share it on GitHub. It’s a great way of getting some visibility for your effort and getting feedback if you happen to work with a mentor. If you are not yet on GitHub, it makes sense to register there as soon as you start learning to program.

Describe your project with a README

Another great addition to your project is sharing information about its context. The standard place to do so is a README file, and you can follow this guide to make it stand out.

Deploy to GitHub pages

With GitHub, you can make your projects easily available for testing with GitHub pages. You can learn more here.

Share your project!

Do you have any HTML + CSS projects? Share in the comments so that I and other readers can take a look at it!