Learning html

#1
Hi all

I am teaching myself html (very slowly) and I wondered if any of you could recommend a free site - something other than the instructional site eg codeacademy or Lynda - where I could practice building a website using html?
 

Tennyo

︽✵︽
AKA
Rose Tyler
#2
Other than YouTube videos, I don't know what else there is other than Code Academy as far as free options go.

There this site: https://www.khanacademy.org/

I only heard about it just a few days ago and haven't had a chance to look into it much myself.
 

Vixenish

Rinoa ACF/FFOF
AKA
Rinoa
#5
The site that will work best for you will vary based on your use case. Do you have a particular type of website that you're looking to build, or are you just trying to learn how to pull it all together?

Also, what else do you currently know? Have you done any CSS work yet? Javascript? PHP? Ruby?
 

Vixenish

Rinoa ACF/FFOF
AKA
Rinoa
#7
Sounds like you're just trying to figure out the basics of how hosting works then.

How have you been coding up HTML so far? Where are you currently putting your files?
 
#8
I have tinkered around with some lessons on Codeacademy and Coursera but I haven't been saving the files anywhere. I don't have time to do this right now but I have a load of empty time in the summer.
 

Kionae

Pro Adventurer
AKA
Desha
#9
If it's just HTML, you don't need anything special. You can just save your files in a folder on your desktop and load them locally in the browser.

But if you're looking for a host for more advanced stuff like PHP/mySQL or whatever (and don't want to set up a local dev environment, which really isn't all that hard if you use something like WAMP), I'd go with https://www.000webhost.com/. That's where I plan on moving my site once my current term with Hostgator is up.

Also, if you don't want to pay for a domain for a practice site, http://www.dot.tk will give you a .tk domain for free.
 

Vixenish

Rinoa ACF/FFOF
AKA
Rinoa
#10
That's exactly where I thought you were. Agreed with Kionae, start by using files on your computer the way she outlined. However when you decide to put it online I recommend setting up a github account and using that to host your code. Reason being that if you intend to do this as any sort of living you're going to have to know how to use git.

So there's a bunch of background stuff that a lot of the free/piecemeal html tutorial sites forget to tell you, so here's a quick run down of the issues I see most people run into when they try to learn it this way:

Your computer should have some sort of basic text editor(not word, think note pad on windows) Create a folder on your desktop, and save the files in it. Use the file extension .html for your html files, and .css for all of your CSS files in that folder.

You should be able to open that file in the browser by "right clicking" on the html file and opening with the browser. The URL bar will show your file structure instead of the standard https style domain.

When you save the file you should follow the standard naming schema. EG, index.html is the home page of your site. main.css is the primary CSS file for your site. It's not necessary on your desktop, just a good habit to get into because there is functionality on servers/in browsers based around that naming schema.

For your html document make sure that you get the headers right and open and close the major structures properly. Meaning that all of your documents should open with a doc type tag, then html open, then header open and close, body open and close, html close.

It's also a good idea to bookmark this website: https://validator.w3.org/ The point of that is that it will automatically review your files and let you know if you've messed up the html stuff. HTML is not a strict coding language, so it can be hard to tell if you've done something improperly because a lot of bad ideas won't actually break your page until much much later, and when you learn it through piecemeal tutorials it's really easy to not know things like using the h4 tag for the title of your page instead of the h1 is a bad plan because SEO and editability 2 years from now.

When you study HTML you also need to study CSS. A scripting language in addition to that is good, but no modern webpage is done purely in HTML any more. HTML is the way you set up the content and the structure. CSS is how you should do the formatting. The reason for this is that the HTML formatting is done over and over in every file every time you need a style, but the CSS formatting is done once in the CSS file and referenced in every html file.

Example: Say you want to change the formatting on your links from the standard blue underline to a red font with no styling and then decide you want it to actually be yellow. If you did your styling in HTML you will have to go find that styling on every single link on your site and edit each line. This is often hundreds or even thousands of edits. If you did it in CSS you go into your CSS file and change a single line and it will apply against every single link on your page.

Also, if you are going to learn anything more complex than HTML and CSS understanding the way CSS works, and structuring your pages around that will mean that you already have a ton of good habits that carry over to the more complicated forms of web dev.

That's it off the top of my head. Let me know if you have any questions, I'm happy to help! :)
 
#11
Thanks so much, Kionae and Vixenish! You've been really helpful. When you start learning something new, you don't know what you don't know, so this advice has really helped point me in the right direction.
 

Tennyo

︽✵︽
AKA
Rose Tyler
#16
Sorry I misunderstood your question. I thought you were looking for an education site.

I highly recommend Webstorm. It is an amazing tool that even at times can guess your code and give you suggestions on what is next and you just click and it inserts for you. It's a really great asset and allows you to keep things organized and easy to read. It'll color code everything for you. :)
 

Cthulhu

Administrator
AKA
Yop
#18
What might also be a neat workflow (locally, not dependent on a 3rd party website which are often a bit slow) is to use VS Code with this plugin https://marketplace.visualstudio.com/items?itemName=hdg.live-html-previewer which allows you to see your results straight away. I think there might be some more, too.

Alternatively, open it in the browser and use something like LiveReload to instantly see results. instantly-ish anyway. I think that one's paid, but, should be others.

Off course, that might be a few steps too far still, :monster:. Do yourself a favor though, don't use Notepad for editing.
 
AKA
The Engineer
#19
If you are hand-coding HTML, get Notepad++ which helps a ton with organizing stuff (it's open source). It has way better control over tabs and color-coding stuff etc.

It also does things like saving both a .txt and .html file at the same time, open files in browsers from the menu, auto-completing html ending tags, etc. Basically, it completely replaces Notepad.
 
AKA
The Engineer
#21
^That was why I learned how to hand-code HTML/CSS... Granted, that was a few years back, but it felt like I was spending as much time correcting/optimizing the generated code as I would have spent writing it from scratch...
 
Top Bottom