Jasmine Web Starter

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 JWS style.css are:

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

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
  • x_logo.svg
• 404.html - A page to be used to setup a custom error page for when a file is not found
• /.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
• Changelog.md - To outline any changes to the template.

Key - Folder Name / File Name

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 put together a nice site listing them at 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).