So, without any further ado, here’s how to create a website from scratch in HTML and CSS.

Building the Navigation and Hero Section

Add asection to give your project a title. Link a style.css file, and add the Rubik font from Google fonts using a tag.

HTML Section:

Add asection and structure the first-fold of your website. Add a header class for the logo and navigation menu. Then, add a section-hero class for the primary heading with a little description of the site’s services.

HTML Section:

Output:

Now it’s time to style the navigation menu and hero section.

General CSS

Add the general CSS styling at the top of your style.css file. The hero section has a background image. You can access the complete code including images on GitHub, or use your own image.

Styling the Navigation Bar

Use CSS flexbox to adjust the logo and navigation menus in a row. Set background-color to transparent and give a border-radius of 9px to the Call-To-Action (CTA) button.

Output:

Styling the Hero Section

Set a max-width on the hero class nesting the primary heading and description. Otherwise, it’ll extend out to the end instead of staying on the left side. Set the font-size and padding according to your requirement.

Hero Section CSS

Output:

Building the Services Section

The site provides four services: full grooming, self serve dog wash, wash & blow dry, and body and paw massage.

Services Section HTML

Create a parent class=”grid services” and add all four services using

. Add the image, service name, and a little description of it.

Services Section CSS

Create a grid with two equal columns and set the gap to 4rem. Adjust all the grid-items at the center and set the image width to 80% of the original size.

Output:

Building the About Section

The About section will have an image and a text box with some brief information about the team.

About Section HTML

About Section CSS

Style the image and text-box using CSS Grid and add a drop-shadow to make it more attractive. Use a negative margin to set the text box above the image.

Output:

A website’s footer leaves a lasting impression in visitors’ minds, so make sure that it’s clean and well-organized.

Add a primary heading saying thanks to the visitors. © is an HTML entity for the © symbol.

Style the footer by giving it a different background-color and setting appropriate padding.

Output:

You can view the final Pawfect website by following this link.

Publish Your Website

Congratulations, you created a complete website from scratch using HTML and CSS! It’s time to publish your website and get feedback from the community. We hope you enjoyed the process of making the site. If you’re new to hosting, take a look at how to host a website for free using GitHub Pages.