Build a Website from Scratch

In this guide, we will show you how can build a new website entirely from a blank canvas. We offer a variety of templates that can be used for your convenience, but if you prefer to start from scratch, this series is for you!

#1 - Setting up the project

In this video you get to know how to create a new project, how to enter contact information of your client, uploading files and how you can create a page without choosing a template.

#2 - Building a custom header

In this video, you will learn how to use a preset and customize it for a fully responsive header with image slider, navigation and call to action.

#3 - Building the service section

In this video, we continue building our test case. After finishing the header in the previous video we will now move on with the service section. 

You will learn how to use the about preset to create a simple section with text and headline to use as a base for this and other sections. The boxes preset lets us create responsive boxes based on flex. This allows us to switch position of all the elements easily.

#4 - Building a teaser section

In this video, we show a preset that combines large background images with content next to it. We modify it to tease two subpages in a visual way.

#5 - Building a counter section

In this video, we show you the counter preset. We can change the target numbers easily, so they will count up as soon as the visitor scrolls past a certain point of the page.

#6 - Building the About section

After finishing our service section in the previous video you will now get to see another about preset in action. This preset adds an image next to the text. The image will resize according to the height of the contents next to it.

Due to our handy drag and drop functionality, we can take other preset containers and reuse them anywhere on the page. That's why we take the counter preset, duplicate it and turn it into a content slider. In the CMS we can edit the slider. The working example is only visible on the live page though.

#7 - Building the Reference section

In this video, we will build a gallery with project references. Our presets deliver some amazing layouts for displaying images and it's all within a mouse click away.

#8 - Building a custom form

In this video, we are going to include a basic form preset and extend it by a couple functions.  

#9 - Building the Footer

To finish off our start page we are now going to build the footer at the end of the page. You might have guessed it already: presets once again save the day! 

#10 - Creating subpages

Most of this project is, in fact, a one-pager, but of course, subpages are created just as easily! Not only are they easy to create, but since we can reference already existing elements and transfer them quickly among pages, we can fill these subpages with consistent elements in a flash!

This also concludes our series Building From A Blank Page. Here you learned step by step how to create a website with Sitejet in a short amount of time. But we barely just scratched the surface of what Sitejet can do! 

Stay tuned for more in-depth tutorials and consider subscribing to not miss any of them. Thank you for watching!