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 to make it stand out. this guide 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! Also published . here

The code in this story is for educational purposes. The readers are solely responsible for whatever they build with it.

Figma

HTML + CSS Practice Project: Website Slicing

About Author

Comments

TOPICS

THIS ARTICLE WAS FEATURED IN

Related Stories

3 Steps to Adding End-to-end Tests to Your Project

10 Ways Stand Out as a Java Developer and Land that Dream Job

10 Fantastic JavaScript Projects for Beginners

11 Great Tips From A Guy Who Leveled Up From Intern To Dev

125 Stories To Learn How To Do X

3 Free Python Courses For Beginners: 2020 Edition

3 Steps to Adding End-to-end Tests to Your Project

10 Ways Stand Out as a Java Developer and Land that Dream Job

10 Fantastic JavaScript Projects for Beginners

11 Great Tips From A Guy Who Leveled Up From Intern To Dev

125 Stories To Learn How To Do X

3 Free Python Courses For Beginners: 2020 Edition

Light-Mode

Classic

Newspaper

Minty

Dark-Mode

Neon Noir

Minty

HN StartUps