HTML + CSS 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.

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

HTML + CSS project: website slicing

Comments

Project-based learning

Oh-My-Bill: Project Introduction

More from this blog

Changes in programming made possible with AI

Advantages of unit testing—with examples in Jasmine

Pure functions and basic tests in Jasmine

How to prepare for a job interview

How to build a demo project

Why you should do projects

What is slicing?

Template sources

Git & GitHub

Describe your project with a README

Deploy to GitHub pages

Command Palette

Comments

Project-based learning

Oh-My-Bill: Project Introduction

More from this blog

Why you should do projects

What is slicing?

Template sources

Git & GitHub

Describe your project with a README

Deploy to GitHub pages

Share your project!