HTML:

    Starting with HTML

    Introduction

    We provide this guide in order to help our users get used to HTML at SourceLair and make the most out of it.

    This guide assumes that you already have

    Code your first "Hello World"

    You have already started your HTML Project and so you can see some files in your file explorer. You can either delete them (right click on them & delete) or ignore them.

    Create an html file

    As we want to create an html file it should be like "index.html". You can create it either by the relevant button or by right clicking on the file explorer.

    Create-file

    Open and Code

    All you have to do now is open your file (double click) and complete your "Hello World" code.

    HTML-Hello World

    Next step, let's check out the result of our code.

    HTML Preview

    HTML preview is an essential feature for every web developer. Practically, when you open any html file you can press the "preview file" button and you will preview the result of your HTML. Even easier you can press Ctrl+Enter.

    HTML-real-time-preview Every time you save your file, the preview window is refreshed and your changes can be seen instantly.



    Next step, let's see our whole website and how we can showcase our work with public URL.

    Public URL

    How you can use it

    There are 2 ways to see the public URL of your project:

    1. Click on "Public URL" button Photo with Public URL button

    2. Open Command Palette and write in free text "public" and press "Enter" Photo with Public URL in Command Palette

    How it works

    There is a microserver which is looking for the "index.html" of your project. If there is no "index.html" then it serves the content of your project's folder.

    Next step, how to add an image.

    Add an Image

    If you work on chrome, all you have to do is drag your picture from your desktop into the file explorer of your SourceLair project. Then you can refer to this picture from your HTML code with

    <img src="mypicture.jpg" />

    Otherwise, you can refer to an image with a URL.

    Important: You can't upload a file larger than 5 MB.



    Next step, Emmet and Bower.

    Emmet.io , Bower

    Emmet.io is enabled (by default) but you can change it from your editor settings. You can read more about emmet here .

    Bower is pre-installed to your micro-server and so you can use its commands from your fully featured terminal. You can read more about Bower in SourceLair here.



    Next step, how to install SourceLair Public Key to your server.

    Install public key to your Server

    In order to install your SourceLair public key to your server, all you have to do is run the following command on your server.

    curl https://keys.lair.io/<username>/install | bash

    Remember to replace with your username, before running the above command.

    Next step, Command Palette for HTML.

    Command Palette for HTML

    Command Palette is a free text search tool which helps you use some commands really fast. For HTML these commands are:

    • Install Bower dependencies
    • Restart HTML Server
    • Open Public URL
    • Open Shell Terminal

    You can also:

    • Use source control commands to increase your productivity.
    • Find all available Command Palette commands here.

    Propose a command you find useful at [email protected].



    Next step, deployment.

    Deployment

    We have already posted an article about deployment here. You can check it out and if it is not enough our [email protected] will be more than happy to help you.

    What's after this guide?

    Next Step

    Go to your SourceLair account and start coding in seconds your favorite web projects.

    Previous step
    Step of
    Next step