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

jackcoble (55)in #howto • 8 years ago

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.

#steemit #programming #technology #tutorials

8 years ago in #howto by jackcoble (55)

$21.43

Sort:

Trending

[-]

trevor.george (67) 8 years ago

Can I add some stuff to your list?

I do this for a living, and I've found some tools that make life so much easier.

For my script editor I use NetBeans. It has soe really nice features and is really useful.
I also use Notepad++. Both are free.

You should also install Firefox web browser and the Firebug addon.
I don't know how I ever coped without this combination of tools.

This functionality is also available in other browsers, but I find Firefox with Firebug the easiest to use.

The biggest tip I can give anyone following these tutorials is - don't be afraid. You won't break anything. Just give it a go and see what happens. :-)

Good on you @jackcoble for starting this up :-)

$0.00

1 vote

[-]

jackcoble (55) 8 years ago

Thank you for that, it is definitely another choice for those of you who do not get on with the tools I use. I listed the ones I did due to the fact that I get on with them and that's the same for others :)
Thank you for those mentions though. I am sure that many others will come straight to your comment! And for those who are starting out, go and explore and have fun!

$0.00

[-]