Coding Class (HTML) - Getting Started (Lesson 1)

Hello and welcome to my first lesson of my HTML coding class. Throughout my classes, we will learn about how to code with HTML, CSS and a bit of PHP when necessary. The whole point of today, however, is to setup your machine ready for your coding adventures! So lets begin!

Installing Atom (Text Editor)

Atom is a free and amazing text-editor crafted by GitHub. It is available for Windows, Mac OS and Linux, so whatever OS you run, you should be covered. I like Atom as it is versatile and you can install packages to make your workflow more efficient. Head on over to https://www.atom.io to download it.
 
1) Go ahead and run the installer once you have downloaded it from Atom’s official website. 

2) Launch the editor and close all the tabs you do not want open, such as Welcome. 

3) On a Mac, press Cmd + , to open the package installer. On Windows, I believe this is Ctrl + , 

4) Search and install the following packages:  

  • atom-html-preview  
  • autoclose-html  
  • emmet  
  • livereload  
  • minimap  
  • set-syntax 

All of the core packages should be installed, so do not worry about them.

Setting Up A Webserver 

There are several options out there for this. We will require one as we need to be able to execute PHP code. My preferable server software is called XAMPP. You simply install it, run the server and head over to localhost in your web browser.

Web Browser

With regards to a web browser, me and other developers strongly recommend Google Chrome for many reasons. The most common one being that there is a Web Inspector. In other words, you have access to the console and developer tools. Very handy as we are developers, right? Just install Chrome and you are set to go!

Thats a wrap up!

Thank you very much for taking part in today’s lesson. Next lesson, we will actually be coding and I will be telling you how to setup your HTML document as well as what the individual lines mean. If you enjoyed, please show your support by leaving a follow, resteem and an upvote. 

H2
H3
H4
3 columns
2 columns
1 column
Join the conversation now
Logo
Center