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.
Where should you go after this? Check out this series from Khan Academy.
I needed this a year ago!!!
You’ve explained it better than my Lynda course did.
Also, XHTML and CSS haven’t been updated for a loooooong time at Lynda. This makes a much better introductory.
This screencast* makes a better introductory.
Sorry for the dp.
XHTML in Lynda.com just sucks! Chris, I think you could show some resources on how to learn (X)HTML/CSS , like blogs,online trainings and books.
A very good Tutorial
Unimax SYSTEMS
[email protected]
Brand new WP theme for your blog?
Thanks sooooo much that is what i want
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!
Chris, what’s your main text editor these days? TextMate or Coda?
I think TextMate is far superior text editor, but I end up just using Coda because it’s so convenient.
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 like the new layout, only weird art is all the white space at the bottom of the right banner area. It feels like the page is missing something.
http://www.scrnshots.com/users/noahhendrix/screenshots/141921
I really nedded this 6 month ago but now i need something else and it may come after 6 month.
this thing took me about 2 month and look at here it’s 34 min only
I was watching video and and i posted comment and page refreshed and now i have to wait for video- You should put Ajax on this comment system.
Meeeeeeeeeeemmmmorrriiieeesss………
No offence, but I actually liked the last theme much than this one. Probably this is still in development?
Anyways, thanks for the screencast! It will be usefull to introduce my students into CSS (I’m teaching at my school… but I’m not a teacher, just another student :P )
Hi Crish,
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.
Thank you!
Miguel
Yeah I would love to know how you have separated the items on your doc into what look like groups?
could you please let us know, cheers :)
Does anyone else know what software you use to group items on the doc?
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.
Thank you,
Rodrigo.
You have a gift for explaining basic concepts. Thanks so much!
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.
thanks, yea many posts are over my head. good tut. yea my page is done all html & would like to make improvements & have a better understanding of css
thank Chris Coyier you use mac and use TextMate or Coda
but i am use windows
i used intype ,dreamweaver whwt is the best for windows machine ?.
Try notepad++ , i use it a lot…
Try Notepad ++ its free and awesome.
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:
thank you God
I have a question, if you want to build web pages, What the best way to learn?
I’d recommend looking at Chris’ trilogy of screencasts 25, 26 and 27. I’ve just started on 25 and it goes into the details you are looking for (page design etc).
Thanks for this a great screencast!
You explain verything very nice and basic!
I think I’m gonna use this for the people I help with learning html & css!
Nout
I’m going to keep a link to this video handy and give it to everyone who asks me a basick question about html or css. Thanks Chris, good stuff. You do have a talent for explaining things.
Hey Chris can you do something like this for JavaScript? Or do you know any place I can find videos similar to this?
May be nettuts.com
You did a great job explaining for us non technical type’s. Thanks.
what can I do if my pages aren’t using my css after uploading to the server vs. designing them locally?
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
I think the center didn’t work because you didn’t save the css file after you styled the div.
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 :-)
Chris,
I agree with many above. Wish I would have seen this a year ago.
Now I really hope you will continue this video to the next and the next level up to where your first photoshop to css video picks up.
I watched those first and along with some other sites I figured it out, but I think you would do it better than the other sites.
Chris,
wow, thanks!!!
Solid. Thanks for all you do for the community, Chris.
Also, way to rock the hint of Wisconsin in your accent!
You should do a css course for lynda.com –
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.
Thanks!
MirzaLou
Thank you! I’m Alex and I like to do html and css. My mother helps me to do it. I’m 7 years old.
very helpfull!! thanks!!
I love your presentation. I would also talk about (briefly)doc types and how it affects the placement of your content and how a web page needs the declaration of ….
Oh this is great and something we will ask our students to checkout before we start our Web Site Design Course.
Thanks for this!
C
Dear Chris,
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.
CHEERS!!!
Thanks! very easy to follow.
hey!, really good job with this tutorial, I wanna know all you know, hahaha..
have a good one, cheers!
Thank you. By far the best beginner video on this subject I have come across.
Thanks for this great tutorial !
The video has to reload every time I change tabs :(
Greetings Chris,
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.
Thank YOU!
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.
Thank you!!
hey its awesome….m sorry that m nt able to find words to explain the quality that u gave in this awesome stuff…………………..
im getting life with this.. :P thanx a lot chris..
I got the inevitable question the other day from my dad, whose website I maintain. “What’s with all of those hieroglyphics in those files? That doesn’t look *anything* like what shows up.”
After several attempts to explain what was going on, I had him watch your video. He understands much better now. We both really appreciate the time you took to do this.
In fact you did a nice job to explain the CSS, the way you explain it is really a beautiful.
Thanks again.
(Shafiq TOOR)
Thank you!!!!! *)
This WAS my very first tutorial on CSS and it was great, you made it super easy to understand, thanks so much!
really cool the way you put this.
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!
Hello,
and thanks a lot for this video. I am freshly starting with HTML/CSS so I can’t wait to see the other videos. As a first introduction that was nice.
Greetings from Sofia, Bulgaria!!!
My first video intro on this, veeery helpfull, a huge TNX and peace from Greece
Very nice job. I searched all over the internet for this information. Most people that understand this either cannot explain it or do not really want to.
Hi Thankyou so much for explaining the basics. Very helpful tutorial!
hey chris,
i was wondering if there’s a text format for this tutorial? reading is a martial past time and i know i can do it almost anywhere. where as i require the internet to watch video’s etc…
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
you might wanna check out http://webdeconstructor.com/
it’s an web-app that let’s you analyse what websites are made from by deconstructing their HTML structure in a
matter of seconds
i was wondering if there’s a text format for this tutorial? reading is a martial past time and i know i can do it almost anywhere. where as i require the internet to watch video’s etc…
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!
This is foundation for any beginner in website designing and development. You laid the strong foundation of CSS and Html in me. Thanks for the video.
Hi Chris
Thanks so much – that was the very first video I have watched about web design and I learnt so much! The only thing missing for me is where should i go next?
Sophie
Great video for a first timer! Thanks!
Nice intro!
However, the last sentence leads to a Google page that is no longer there.
Where should you go after this? Check out this series from Google.
Ah, thanks for the heads up! Just replaced that link with a new one pointing to a good course at Khan Academy.