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.
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 :-)
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!
Totally digging the html howto and the tools. I have been using raw html browser on here and I should probably use the atom.io or notepad++
THANKS!!!!!
Got atom and xampp installed. And, got the firebug addon. For the record, I do have some HTML experience.
Nice! Get coding!
This is great. seems like the class will be moving at the perfect pace. You seem like you will be a great addition to the Steemit community!
Thank you very much!
Ya man, can't wait for the next installment. Don't keep us waiting too long!
I won't be! Next lesson will be out in a day or two!
As you requested. I got it out:
https://steemit.com/howto/@jackcoble/coding-class-html-creating-our-site-lesson-2
Enjoy! :D
I shared your first one on Facebook! It's a great way to learn a computer language: "personal" tutor, a new lesson every few days! Thanks, man.
Thanks man! Greatly appreciated! ;D