JasmineDesign

Build a website today for free

About Jasmine Website Starter

Jasmine Website Starter (JasmineWS.uk) is a HTML & CSS template containing no frameworks. Which allows you to build your first webpage by updating content within the HTML file, this is Styled by the CSS to give you a modern fresh page layout.

All this can be carried out within your browser so nothing to install.

We designed it specifically for those with little or no experience of coding & website design, but it is also ideal for the more experienced who just needs to make a simply styled webpage in a hurry.

We have provided a step by step tutorial of how to transform these templates into your first website with nothing more than a Web browser and your free GitHub account (Note: You will need an internet connection whilst working with GitHub).

We are also going to release extra tutorials to add more features into your website over time and in small clear steps.

Plus lots more, take a read of our Roadmap for an idea of the extra topics.

Jasmine Website Starter Templates

These templates allow you to add your words and images into the HTML page to make it your own.

Both of these templates offer support for light and dark mode depending on how your user has set their browsing options.

With no experience necessary, we will guide you along the way to build your website.

These templates are designed to promote an event, as a great starter website to talk about yourself or product or just a home for links to other sites you use.

Maybe you can see another use, if so great build away.

How to use these templates

We have provided a step by step tutorial of how to transform these templates into your first website with nothing more than a web browser and your free GitHub account.

You will be able to follow along using a Chromebook, Microsoft Windows or macOS machines but you do need an internet connection.

We guide you through using the inbuilt GitHub Web Editor (github.dev editor) to make the changes to your file with the Addin CodeSwing to preview your website and slowly show you how to start working with GIT for version control on GitHub.

Later we show you how to use GitHub Codespaces and another Addin called Live Preview.

We also show you how to setup GitHub Pages to host your website to allow others to view your hard work.

We then cover how to make another branch in you repository and how to make a pull request to push those new features into your main branch, which will make the changes live to your hosted website.

We plan to release a series of extra tutorials to add more features into your website over time, take a read of our Roadmap for an idea of the extra topics.

I know some HTML & CSS

We have included in our templates a base CSS file that can also be used as a Classless CSS solution.

This is great if your wanting to rapid prototype or just build a few pages with a base style, though if you want a page layout you would need to add the class names, which are covered on our Styles Layout page.

To get started just download (or clone) our template CSS file and link it in then your good to go.

You can also use the CDN version:

<link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/jasminedesign/jwsone/css/style.css">

We have also shipped a snippet file for VS Code for common parts of the site. This with the addition of VS Code ! for the HTML page skeleton and Emmet allows you to build pages really easy.

Please see our templates page on JasmineWS.uk for more information.

We would welcome any feedback about using the templates and supporting files this way. Feel free to raise an issue.

Why have we used GitHub as a base for this project

Over 100 million developers from around the world are using GitHub today, committing code, contributing documentation, and building new solutions to solve problems on a global level.

Which is why for some time we have been wanting to provide Business Owners and Students a place to learn how to build or update a website, showing the steps needed and explaining which part does what.

Whilst also showing how to work with GitHub repositories. The repository is an ideal home for the project as it offers version control, a back up and you can deploy from it as well.

With the launch of GitHub Web Editor (github.dev editor) came a lower barrier of entry to getting started with the introduction to working in the browser. Simplifying the process of making changes to your files and starting to work with GIT for version control on GitHub.

Before this we would have had to cover installing software on your machine and the setup steps needed. This all changed thanks to the great workflow offered now in the browser with the release of Visual Studio Code for the web (github.dev & vscode.dev)

Which is why we think it's a great skill to learn whether you are just starting out building things or wanting to grow your knowledge base with something new.

GitHub = Repository + Editor/Preview + Hosting

How to deploy these templates

We have a step by step guide to help you setup GitHub Pages to host your website.

We are going to release tutorials for deploying onto other hosting options which allow commercial use and show you how to link your domain to your website.

All the hosting options we are going to cover will deploy from the Repository, so you can carry on editing the website in the same way that the tutorial covers and auto deploy to the hosting using a Continuous Integration Pipeline (GitHub Action).

We have an outline of the Hosting Services we are going to cover in our roadmap.

We are very interested in any feedback or questions you have Contact Us with your input.