Introduction to coding with Sublime Text for level 2 Dida classs with the aim to prepare them for the web design exam. Very short tutorial for LDD learners.

Text editor Sublime text

  1. Create a folder named Site on your Desktop. 

    Introduction to Coding with Sublime Text,

  2. Open Sublime Text 

    Introduction to Coding with Sublime Text,

  3. In Sublime Text, drag your site folder in the untitled window  the left navigation will now open with your folder

    Introduction to Coding with Sublime Text,

  4. Right click “New file” then Ctrl + S (or cmd + S) and save your html doc
  5. Introduction to Coding with Sublime Text,
  6. Right click “New file” then Ctrl + S (or cmd + S) and save your css doc

    Introduction to Coding with Sublime Text,

  7. Remember the russian doll logic; in web design your tags follow the Russian Doll system

    Introduction to Coding with Sublime Text,

  8. Go and download free pack of icons from https://nucleoapp.com/premium-icons/, and unzip in an images folder in your site folder

    Introduction to Coding with Sublime Text,

    Introduction to Coding with Sublime Text,

    Introduction to Coding with Sublime Text,

  9. Now you have to make sure the SVG folder is dropped into the images folder, and chage the img source to image/SVG/title of image.svg <html>
    <head>
    <meta charset=”utf-8″>
    <title>Anna Gabali Multimedia Production </title>
    </head>
    <body>
    <h1>About Anna Gabali</h1>
    <p>Graphic design and multimedia </p>

    <h2>Holistic</h2>
    <p>An holistic approach working with people, <strong>very fast</strong> app</p>
    <img src=”images/SVG/briefcase.svg” alt=”picture description”>

    <h2>Cost effective services</h2>
    <p>AMy services are <strong>cost effective</strong> app</p>
    <img src=”images/SVG/diamond.svg” alt=”picture description”>

    </body>
    </html>
    </html>