How to learn HTML and CSS

How to learn HTML and CSS

by Doogie Kirkhofer -
Number of replies: 36

I have been looking at websites lately and I am wondering if anyone knows of a good link to learn HTML and or CSS. I am trying to start a website for my teacher and anything you could suggest would help.


Thanksbig grin

Average of ratings: -
In reply to Doogie Kirkhofer

Re: How to learn HTML and CSS

by Visvanath Ratnaweera -
Picture of Particularly helpful Moodlers Picture of Translators
Doesn't your school/college have a library? Then pay a visit to the public library of your town.

Keep in mind that web-mastering is not a hard science like maths or physics. It is verbose and there are various schools of thinking. As a result you need to collect your own experience and that takes time.
In reply to Visvanath Ratnaweera

Re: How to learn HTML and CSS

by Doogie Kirkhofer -

While it is true that you can learn it from a book I have tried to look at books and learn from them on this subject and I have found it jumps around and skips ahead really fast. Thank you for helping though.

In reply to Doogie Kirkhofer

Re: How to learn HTML and CSS

by dawn alderson -

Doogie, hi

found this for ya-not sure what it is like-but looks like a playful, have-a-go way of doing.

http://www.codecademy.com/learn

Ignore those clever types here (except Sam of course-whahaha!)...they are just playing around!

Hope helpful

Dawn


In reply to dawn alderson

Re: How to learn HTML and CSS

by Sam Thing -

<feigned indignation>The implication being that I'm not clever? </feigned indignation>

<span id="suggestion>

One suggestion is to practice it everywhere. You can do it right here of course.

Click on the Show more buttons button:

And then the HTML button:

And then write your posts in html and CSS.

<a href="http://someurl.com">Stop using the buttons to make links and write them in full for fun</a>

<p align="right">I find it's the repetion that makes it stick in my head</p>

<p style="border: 1 solid #aaa; border-radius: 5px;">And there's no way I'd have got my head around CSS if I hadn't repeatedly styled everything to within an inch of it's life.</p>

<div class="it'll_irritate_some_but_so_does_learning_to_play_a_trumpet">But even playing a trumpet takes constant repetition <b>you just have to be bold</b></div>

</span>

You say you want to make web pages/a web site. I'd suggest figuring out your layout first with a pencil and paper and then trying to replicate it once using HTML tables and once again with CSS divs. Forget fonts and colours and making it pretty for this exercise. That's probably still quite a lot of work and a lot to learn but if you can pull that off you will probably also learn HTML & CSS syntax, nesting, the CSS box model and plenty more along the way.

Once you can do layout in both, forget the tables, they are depreciated for layout but the exercise should have given you a nice gounding.

Hope that helps.

Average of ratings: Very cool (2)
In reply to Sam Thing

Re: How to learn HTML and CSS

by dawn alderson -

awwwww Sam, this is cool, I think you will find that you are missing a set of quotation marks after the word suggestion...maybe smile

I look forward to hearing about Java and curly  brackets next oh and JQuery....or maybe I will add that here for the next lesson (sorry Friday hysteria....giggling a bit too much!) ha ha.

What I like about that free interactive codeacademy link is that you can progress by having a go and reading back the code to yourself....reading the code is what I enjoy most at the mo.....and then fixing my errors......the scaffolding in that link codeacademy is spot on by the way....

Anyway.....weekend is here ta ra for now!

Dawn 


In reply to dawn alderson

Re: How to learn HTML and CSS

by Matt Bury -
Picture of Plugin developers

Hi Doogle,

This isn't a tutorial but my favourite HTML + CSS reference is: https://developer.mozilla.org/en-US/docs/Web It does have some tutorials but I haven't used them.

Perhaps a good way to learn about HTML + CSS layout and design is to play with a few themes in Wordpress. You can install Wordpress on your computer with this: https://bitnami.com/stack/wordpress/installer and Wordpress.org has some tutorials on how to develop themes: https://codex.wordpress.org/Theme_Development

A good integrated development environment (IDE) is also helpful. My favourite "code only" IDE for PHP and HTML5 + CSS is: https://netbeans.org/ The best "What you see is what you get" (WYSIWYG) IDE I've used (Adobe Dreamweaver) is proprietary, closed source, and not cheap: http://www.adobe.com/products/dreamweaver.html If anyone can recommend good IDEs to get started on please let us know!

The reason I think getting started is easier with existing projects, e.g. Wordpress, is that you can see other people's well-written, well-designed, "good practices" code and learn from it, just like reading makes you a better writer. Choose a Wordpress theme that you like, look at its main CSS file "style.css", and experiment by changing the settings and characteristics and viewing how it looks in a web browser. Then, when you read/watch HTML+CSS tutorials, you'll have a better understanding of what they're referring to and what they mean, plus you can explore what you've learned to consolidate and deepen your understanding.

@Dawn - Java is an entirely different language to Javascript (JQuery is Javascript). Your confused and confusing comments don't help.

Average of ratings: Very cool (2)
In reply to Matt Bury

Re: How to learn HTML and CSS

by dawn alderson -

Sorry Matt, you are quite right.

D

In reply to dawn alderson

Re: How to learn HTML and CSS

by dawn alderson -

Some more thoughts...Doogie, when you say:

I am trying to start a website for my teacher and anything you could suggest would help.

Then, I hope you find all suggestions helpful in some way. Even from those who have not coded for decades...but will have a go...and don't need to be told they are confused!

My understanding then-as it was but more coherent for the computer science snooty-types here:

HTML and CSS= webpage creation ( I suggested code academy tutorials are excellent, no spoon-feeding, but just enough guidance to engage instinctive action-those snooty types might use the old adage: intuitive-one more time!)

For interactive website then you can include Javascript (now this is just stepping further with codeacademy...)

ALTHOUGH bear in mind:

Java and JavaScript

They are both similar and quite different depending on how you look at them. I see them as similar MATT-but probably you are right....may have sounded confused earlier in my brief post and lack of accurate language usage...so important to highlight the differences, of which I shall do here Matt as that was omitted earlier eh.

First their lineage:

Java is an Object Oriented Programming (OOP) language created by James Gosling of Sun Microsystems. JavaScript is a scripting language that was created by the fine people at Netscape and was originally known as LiveScript. JavaScript is a (very) distant cousin of Java in that it is also an OOP language. Many of their programming structures are similar. However, JavaScript contains a much smaller and simpler set of commands than does Java. It is easier for the average weekend warrior to understand. 

Both include curly brackets!!!!  smile

For the record JQuery is a Javascript library and Java's equivalent is the class lib JCL......both provide facilities like container classes etc respectively....but it is the Javascript code <script src=jquery whatever></script> that is included in HTML for website building for interactivity.....and runs on browser only.

So, Doogie if you are seeking interactivity, then again, codeacademy outlines all this very well. If not my apologies for assuming it to be a good idea.

Stylish?

Dawn

Average of ratings: Not very cool (1)
In reply to dawn alderson

Re: How to learn HTML and CSS

by Sam Thing -

Poor.

How does this post help anyone (ANYONE) wanting an introduction to HTML or CSS?

Please keep on topic.

In reply to Sam Thing

Re: How to learn HTML and CSS

by Matt Bury -
Picture of Plugin developers

Hi Sam,

Dreamweaver is a common entry level tool for web design (you can design pages in the WYSIWYG editor and then look at the HTML + CSS code it generates), while Netbeans is a code-only free and open source alternative (You can view your designs in a web browser). The Bitnami Wordpress module installs a safe web server on your computer with Wordpress set up and ready to go; no technical expertise is necessary. You can also view and directly edit all the web pages and files directly on your computer since there's no need to upload files to a remote server.

These are easier and quicker than MS Office to install and get started with. There's also lots of high quality resources and support for all of them. Adobe's documentation and tutorials are particularly good for beginners and certainly better than Code Academy. Netbeans has code hinting and code highlighting for HTML5 and CSS3 - That means immediate feedback while you type, like having MS Word check your spelling and grammar for you while you write.

It's good to have good tools to get started with smile

Average of ratings: Cool (1)
In reply to Sam Thing

Re: How to learn HTML and CSS

by Sam Thing -

Note to self:

Avoid criticising people in a public forum on a friday night after a drink.

*facepalm*

Average of ratings: Coolest thing ever! (3)
In reply to Sam Thing

Re: How to learn HTML and CSS

by Visvanath Ratnaweera -
Picture of Particularly helpful Moodlers Picture of Translators
I disagree. Criticising is an advanced way of learning any language, not only HTML and CSS. Yes, the drink, one can argue on that. If is on a Friday night, there's a good chance that the others are in the same mood.
smile
Average of ratings: Very cool (1)
In reply to Sam Thing

Re: How to learn HTML and CSS

by dawn alderson -

well, criticism is one thing, how it is received is another smile

looking at the variables here:

'Avoid criticising people in a public forum on a friday night after a drink'.

Try  a Saturday night instead (LOL!)

D

In reply to dawn alderson

Re: How to learn HTML and CSS

by Matt Bury -
Picture of Plugin developers

Hi Dawn,

In response to your post:

For the record JQuery is a (very) distant cousin of Java in that is include curly brackets!!!!  smile

For the record JQuery whatever></scripting language usage...so important cousin of Java is an Object Oriented Programming it to be a go...and don't need to be a go...and runs on browser only.

So, Doogie, when you could suggested confused earlier eh.

For to understanding you are similar. However, JavaScript. JavaScripting interactive website building, but just enough guidance to engage instinctive-one more then you say:

I am trying to start a website that was omitted earlier eh.

First their lineage:

HTML and CSS= webpage weekend warrior to understant cousin of JavaScript. JavaScript is a (very) distant cousin of JavaScript src=jquery well. If not code academy outlineage:

Then, I hope you cousin of Java in that was created by the fine people at Netscape and warrior the record JQuery whatever></scripting language. Many of Java and JavaScript contains a much smaller set of commands than does Java. It is easier for interactive-one more contains a much smaller and simpler set of computer science snooty-types here:

HTML for the computer science snooty types might.....and don't need to be a go...and don't need to be a go...and runs on browser only.

So, Doogies for assuming interactivity....may have not my apologies for assuming it to be a go...and runs on browser only.

HTML and JavaScript src=jquery well. If not my apologies for assuming it to unded confused earlier eh.

First their lineage:

HTML and CSS= webpage usage...so important to highlight them. I see then you could suggest would help.

Then, I hope you can include curly brackets!!!!  smile

For the confused!

My understand.

Both include Javascript. JavaScript is easier for my tutorials are excellent, no spoon-feeding for decades...both similar. However></script
They are similar. However, JavaScript is easier for the record JQuery is the fine people at Netscape and lack of Sun Microsystems. JavaScript src=jquery well. If not my teacher and Java. It is a script is easier for to understand.

Both include Javascript (now this is just enough guidance to engage instinctive website for my teacher and quite different for my teacher and anything you cousin of Java and anything you say:

I am trying to be told they are confused!

My understanding to start a website the old adage: interactive website for the average weekend warrior to engage instinctive action-th

I hope that makes sense.

Average of ratings: Very cool (1)
In reply to Matt Bury

Re: How to learn HTML and CSS

by dawn alderson -

listening to the Doors, oh go on I shall play then Matt....

 when you put it like that Matt it sounds strange....very strange....like a joke with no punchline....oh dear!

What do you call a joke with no punchline?

Anti Joke

What are Antijokes? Anti Jokes (or Anti Humor) is a type of comedy in which there is a set up to expect a typical joke however the joke ends with such anticlimax that it becomes funny in its own right. The lack of punchline is the punchline. I got you Matt....the lack of punchline-see I figured that out...so am not so strange smile


In reply to dawn alderson

Re: How to learn HTML and CSS

by Matt Bury -
Picture of Plugin developers

@Dawn:

Mmm... not so strange....

What are Anti Jokes or Anti Jokes (or Anti Jokes (or Anti Humor) is a type of comedy in its own right. The lack of punchline. I got you put it sounds strange I shall play then Matt....the lack of punchline-see I figured that
out...so am not so strange....like that
out....

 when you put it like that it becomes funny in which
there is a typical joke however the joke

 when you put it sounds strange....like a
joke ends with such
anticlimax that it becomes funny

In reply to Matt Bury

Jokes and Anti Jokes (in HTML and CSS)

by Visvanath Ratnaweera -
Picture of Particularly helpful Moodlers Picture of Translators
Matt

Did you get the anti joke in the video? For me it is the lip singing.

@all
Now we have a couple of jokes in HTML, how about some CSS jokes?
In reply to Visvanath Ratnaweera

Re: Jokes and Anti Jokes (in HTML and CSS)

by Guillermo Madero -

<style> .poster .noisy { display: none !important; } </style>

 

Not CSS, but funny anyway:

the power of sudo

Average of ratings: Very cool (1)
In reply to Matt Bury

Re: How to learn HTML and CSS

by Sam Thing -

He's asking about HTML and CSS.

Wordpress, netbeans, dreamweaver, IDE's?

Take a step back Matt, I think you're running too far ahead.
In reply to Matt Bury

Re: How to learn HTML and CSS

by Sam Thing -

I'm not sure this helps the original poster.

In reply to Sam Thing

Re: How to learn HTML and CSS

by dawn alderson -

Alas! I find myself in the bowels of purgatory,again, and with the same old same olds!

Never mind. 

Now, NVC= so I get a badge right? And, not to be picky, but I think with all due respect, there is a go-slow, tools-down if you like with the certificates for being mod-ed...I am due a handful and am still waiting. :D

Cheers,

Dawn

In reply to Sam Thing

Re: How to learn HTML and CSS

by Guillermo Madero -

Don't be <b>bold</b>, better yet, be <strong>strong</strong> tongueout But of course, if you want to be <span style="font-weight: bold;">bold then do it with style</span> smile

Average of ratings: Very cool (2)
In reply to Doogie Kirkhofer

Re: How to learn HTML and CSS

by Visvanath Ratnaweera -
Picture of Particularly helpful Moodlers Picture of Translators
Doogie

Then you must have found the wrong book.

I only hope that the helping folk here not "jumps around and skips ahead really fast" too!
In reply to Visvanath Ratnaweera

Re: How to learn HTML and CSS

by Tiffany tia -

Try to make a free blog at blogger or wordpress, you can learn CSS and HTML by yourself..

In reply to Doogie Kirkhofer

Re: How to learn HTML and CSS

by Sumrah Khalid -
Hello there.

 There is a free course on Udemy : https://www.udemy.com/html-workshop/

Such courses help you step by step.

Hope that helps smile

In reply to Sumrah Khalid

回复: Re: How to learn HTML and CSS

by cai yu -

good posts, guys

In reply to cai yu

Re: 回复: Re: How to learn HTML and CSS

by Gareth J Barnard -
Picture of Core developers Picture of Particularly helpful Moodlers Picture of Plugin developers
When I want to learn something new, I often buy a book, to choose one I go to my favourite book seller (online), search and look at the reviews / number of sales etc.  Even better if there are sample pages.


Another good new place is YouTube, there are lots of educational videos out there, some good and some bad.  But you can look at the metrics and try some out to see if you like the way the presenter presents.  For example, I like landscape photography, so wanted to learn new thing beyond my beginner status, so found some channels I liked and learned a lot of new things.

Integrated Development Environments (IDE's as mentioned before) such as Netbeans and Eclipse can help with useful code completion, structure (you can write messy structure and have the IDE tidy it up) and hints.

For now don't worry about JavaScirpt (not to be confused with the totally different Java) as that will be the next step after you have mastered HTML and CSS.

Average of ratings: Very cool (2)
In reply to Doogie Kirkhofer

Re: How to learn HTML and CSS

by john Simpson -

First of all the beginners way. WYSWYG Use kompozer (FREEoss) http://www.kompozer.net/download.php

Second way. Use your preferred text editor and learn html and css There are plenty of good tutorials on youtube.

In reply to john Simpson

Re: How to learn HTML and CSS

by Frankie Kam -
Picture of Plugin developers

Hi Doogie

I knew of a website developer who coded using Notepad and only Notepad. But that was like 20 years ago, LOL. Anyway a book that I used back in my college days was Elisabeth Castro's "HTML and CSS: Visual Quickstart Guide". Why? Because it's very visual with WYSIWYG diagrams and illustrations. 

http://goo.gl/kSj7Tc

Of course there are so many good books out there. Whichever book you choose, all the best! If you don't have the budget, what you should say to your head of finance is "Sudo, give me money to buy the books". 

  1. sudo is a very useful command when working in Command Line Interface. Some Linux distros have you login as a user instead of an administrator. So, to do something admin-wise, you have to proceed the command with sudo (Super-User DO), which tells the system "you will do this, because I said so.”Nov 18, 2013 (from http://goo.gl/Zrbrqq)

Cheers, Frankie.