Jasmine Web Starter Docs - Next Steps Create a New File

Starting a HTML Page

On your empty page first type an exclamation mark ! then Tab or Enter and hey presto!


    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>Document</title>
    </head>
    <body>
        
    </body>
    </html>

You now have the skeleton of a HTML page

Now use the Tab key until you are in the page <title> and the word "Document" is highlighted. You now need to type in a new title appropriate to your page and it's content, ours is shown below.


    <title>About Using Jasmine Website Starter</title>

If you remember changing the <head> contents in our "Build Steps" you may notice that we have a couple of <meta> lines missing one for page description and one for author. Plus a <link> to our style.css file.

No worries we can add them using a JWS snippet file.

To do this first go to the end of the </title> and press Enter/Return this will take you below it to a new blank line.

We will add the snippet file here by typing the word: jwshead

Note as you start to type this command you will see an option box appear you can now either select by clicking on the above snippet command or by continuing to type it in full then press either Tab or Enter.


    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>About Using Jasmine Website Starter</title>
        <meta name="description" content="Your Description Here">
        <meta name="author" content="Your Name Here">
        <link rel="stylesheet" href="../css/style.css">
    </head>

You should find yourself automatically in the content part of the "description" where you need to add your own words, this should be a short summary of the content of the page. Next use the Tab key to take you to the "author" content and add your name.

Ours now looks like this:


    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>About Using Jasmine Website Starter</title>
        <meta name="description" content="About building My First Website on GitHub using JasmineWS template and tutorial">
        <meta name="author" content="JasmineDesign.com">
        <link rel="stylesheet" href="../css/style.css">
    </head>

You are now ready to start adding the visible <body> part of your page.

Adding the Body

Use tab again to take you to line 10 inside the <body> tags where we will use another JWS snippet file to add the skeleton of the page body.

We do this by typing the word: jwspage


    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>About Using Jasmine Website Starter </title>
    </head>
    <body>
        <header>
            <h1>heading1</h1>
        </header>
        <main>
            <div class="panel_full">
                <div class="">
                </div>
            </div>
            <div class="panel_full">
                <div class="">
                </div>
            </div>
        </main>
        <footer>
            <div class="social_icons">
            </div>
            <div class="contact_panel">
            </div>
            <div class="copyrights">
            <p>Copyright &copy; <time datetime="2025">2025</time></p>
            </div>
        </footer>    
    </body>
    </html>

Inside the body you should now see a <header>, <main> & <footer> each containing div's to help you start creating your page content.

Hey! Have you staged and committed after each step already? No well lets go do it before proceeding.

Previous Page« Create New File Next PageHeader & Navigation »

Page Last Edited: 14/01/2025