#58: HTML & CSS – The VERY Basics

This video is the VERY basics of what HTML and CSS is, for the absolute beginner. HTML and CSS files are, quite literally, just text files. You don't need any special software to create them, although a nice code editor is helpful. You can create these files on any computer and use your web browser to preview them during development. You can think of HTML as the content of your website: a bunch of text and references to images wrapped in tags. CSS is the design of your website. It targets the tags you wrote in your HTML and applies the style. Keeping these two things separate is key to quality web design.

Thanks. I’ve been struggling for 2 years to understand just what a div was vs a span. All the explanations I was given didn’t really do the trick. Watching this video was worth the time even for this small nougat of info. The rest was icing on the cake!

I totally agree I think Textmate is much better in terms of features, but FTP and codesense in Coda make it much nicer. Another thing Coda needs better support is snippets the default ones are no where near as useful as Textmates

I assume you know there are much more efficient ways to write HTML in TextMate than what you’re showing here… The fact that you’re manually writing your opening and closing tags is just for the beginners, right? There are some screencasts on the TextMate site that demonstrate how to efficiently write HTML (as well as other languages, shortcuts, and tricks): http://macromates.com/screencasts

I agree with the people, you have a kind of gift to explain the things in a simple way. I learn from you the last year a big amount of things thank you!!.

I have a doubt, in the video you have a Dock scenario to work in design.
Two questions:
1) Is possible to set up a different “Dock” scenario for each desktop?, with spaces you can control a desktop but not the dock, with “you control desktop” you can do the same but not control the dock.
2) Can you list the aplications in the dock fron left to right.

Gosh Chris! This one was pretty amazing for beginners; I suppose I’m sort of one but have been following the past screencast and twitter posts! lol

I was thinking you should do a beginner feature every couple of screencasts so that beginners get a grasp of things and get on doing your other wonderful stuff. Its amazing how you explain things; I love it! Perhaps you should do one showing us around Coda and how it works.

This is really helpfull chris , thank you so much , I hope you ‘ll find the time to record an entire serie of css for beginners , this could help a lot of people including myself….
I’m stuck with lynda.com stuff , but it’s not that intuitive , hope to see more of this css stuff…
thanks.

There is a quicktext extension for Notepad++. You just have to sit for 2 hours to manually write your frequently used codes into the quicktext extension’s configuration file. It will save a heck a lot of time in your future.

I just type

fl and ctrl+enter to type float:left;
bgimg and ctrl+enter to type background-image: url(/images/(it also places the cursor right here for you));

also
html1strict and ctrl+enter to type the whole doctype thing :whistling:

Just watched this video. This is exactly what a beginner wants. May be there could be continuation of this, like how folder structures work, how to make a header, a basic nav bar and content part. This will really help beginners soon excel to intermediate. Theres no image tag shown, which beginners must be desperate to know.

And don’t teach them about cross browser compatibility That will make me jobless :D

Thanks Chris! Been delving into WP recently and this is the perfect place I need to start, and anyone else starting out should also. Am now going through the trilogy vids you have issued on installation of WP and editing ‘Starkers’.

As mentioned previously you have a very clear, concise, easy to follow flow to the tuts, and it beats reading books hands down for learning the fundamental aspects of WP & css. Hopefully we’ll make a web designer of me yet :-)

Hi Chris and thank you for your time invested in these tutorials. Awesome work. I’ve recently installed Thesis as my WP theme and I’m having a little trouble understanding even though they say you don’t need to know coding. Plus, it didn’t help that I’m new to WordPress, too.

I still think I need to know some basics about coding or CSS etc. to help me when using Thesis.

So, being new to ALL of this I feel overwhelmed and confused. I want to learn more and needed to start from the beginning. I just didn’t know where the beginning was. Thanks to this screencast, now I do.

The main reason for my comment was that Sathish suggested you doing a continuation regarding: folder structures, how to make a header, a basic navigation bar and a few other things to get beginners off on the right foot, so to speak.

Well…could you? I mean, I know you could but would you?

I’m also looking at your screencast #25, 26 & 27 for WordPress which I think will also be very helpful. I saw #25 already and now I’m off to watch #26 & 27.

I’ve been trying to understand this stuff for 2 months, and coming up still in the dark. It is obvious you are well versed in this subject matter. You’ve made the light bulbs finally come on. And, the style of the presentation is perfect. It is actually better to see what you do when something doesn’t work right. Many thanks for this, and your work on JQuery too.

I as many persons am grateful for your wisdom, i have been trying to get this css think for a while & i even have a lynda subscription & creativeedge none has presented this information in such a brilliant way as you have.

Thanks so much Chris,
This was my first screen cast vid on basic HTML CSS stuff, and I learnt from it.
Funny how one can be a programmer in many other fields for many many years and still can learn more about programming.

This video you put together is just what I needed to give me a little helping direction in creating and modifying web pages.

This is wonderful! I have a little boy and am trying to learn html and css to give him some basics since they don’t learn this at school.
I like that you didn’t go too fast for me, a complete beginner, but didn’t take your “students” for idiots either!
Perfect speed.

Thanks a lot for this screencast. I can only repeat what others already said, you really explain things in an easy and fun to watch way :) thanks for the time you took to make this video! It helped a lot in getting me started in HTML and CSS today!

Chris, Thank you very much for this, as someone who is just trying to get a start in WebDesign you have a way of making tough topics look less daunting, can’t wait to go through the rest of the content, Cheers, John

I LOVE this video. You are clear, concise and I REALLY like that you didn’t edit out when you hit a bump but simply paused, ferreted out the issue and explained afterwards what was happening and why. That’s far better than any book out there could do!

Your repetition and paging back and forth a few times when you were trying to compare pages was exactly what my hands were thinking of doing just before you did it! Extremely effective teaching skills. THANK YOU!!

I’m hoping to find more beginner tutorials from you on here. Maybe you could let people know on this thread if you have a second? And if they don’t yet exist, can I add my request that you consider them? You’re a fantastic teacher and that’s incredibly hard to find!

Submit a Comment

Posting Code

You may write comments in Markdown. This makes code easy to post, as you can write inline code like `<div>this</div>` or multiline blocks of code in triple backtick fences (```) with double new lines before and after.

Code of Conduct

Absolutely anyone is welcome to submit a comment here. But not all comments will be posted. Think of it like writing a letter to the editor. All submitted comments will be read, but not all published. Published comments will be on-topic, helpful, and further the discussion or debate.

Want to tell us something privately?

Feel free to use our contact form. That's a great place to let us know about typos or anything off-topic.