Jasmine Web Starter Logo

Jasmine Web Starter

Jasmine Web Starter Templates


Jasmine Web Starter One Column Layout

JWS One template provides you with a preset one column layout controlled using modern CSS properties.

Get started today with JWS One

JWS One Examples:


Jasmine Web Starter Two Column Layout

JWS Two template provides you with a preset two column layout controlled using modern CSS properties.

Get started today with JWS Two

JWS Two Examples:

About the JWS Templates

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

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

Both of these templates also come with a predefined style.css file which provides you the layout control, styling and support for light and dark modes, enabling you to focus on the how to build a webpage.

The areas covered by the style.css are:

  • Core Styles - Styling for many of the commonly used HTML elements/tags JWS Core Styles
  • Layout Styles - Properties that control and style the layout of the page JWS Styles Layout
  • Style Variables - Ours offer support for light and dark mode depending on how your user has set their browsing options JWS Styles Variables

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

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

The JWS One & JWS Two templates are licensed under the MIT License

Each template contains the following files:

  • Index.html - The Homepage HTML File
  • favicon.ico - The sites Favicon shows up in the browser tab or when you bookmark the page
  • /css/style.css - This folder contains the sites CSS file which provides the website styling
  • /img/ - This folder contains your website images
    • darkforest.svg
    • facebook.svg
    • github.svg
    • instagram.svg
    • twitter.svg
  • 404.html - A page to be used to setup a custom error page
  • /.vscode/jws.code-snippets - If you are using VS Code then you will be able to use our pre defined code blocks
  • /.vscode/extensions.json - A List of extensions which we recommended for users of VS Code
  • codeswing.json - File used to tell codeswing to open the preview panel
  • License - The Templates license
  • Readme.md - This readme is shown on the GitHub repository

Key - Folder Name / File Name

How to use these templates

GitHub.dev web editor

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

You will be able to follow along using a Chromebook, Microsoft Windows or macOS machine.

We plan to release a series of extra tutorials to add more features into your website and to show you other ways to work with your Git repository.

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

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.

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

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 ! and Emmet allows you to build pages really easy.

We don't currently have any plans to cover this use in detail but parts of this will feature in the further tutorials we have planned.

If you would like to read more about Classless CSS solutions, Paul Kinlan (@Paul_Kinlan) put together a nice site listing them at https://classless-css-demo.deno.dev/.

Our styling and variables are defined in the docs section and darkmode is switched by the system settings prefers-color-scheme or you can toggle it in browser dev tools (Look for the paint brush).