A Short HTML/CSS Primer

Quick reference

• 00:05 We've learned the basics of the JavaScript programming language.
• 00:08 Now we're gonna move forward and
• 00:09 start learning how to use actual JavaScript with websites, with webpages.
• 00:13 And part of what makes JavaScript so
• 00:14 popular is its ability to manipulate HTML and CSS elements on a webpage.
• 00:20 But before we jump in and start learning all that good stuff,
• 00:22 I wanted to take just a few minutes and do a short sort-of primer on HTML and CSS.
• 00:27 Just talk about it a little bit.
• 00:28 'Cause we can't really manipulate HTML and
• 00:31 CSS with JavaScript if we don't know anything at all about HTML and CSS.
• 00:35 So if you already know HTML and CSS, you can go ahead and skip this video.
• 00:39 If not, I'm just gonna give you a very brief intro on the subject.
• 00:43 And if you're interested in front end web development, I definitely highly recommend
• 00:47 that you learn HTML and CSS if you don't know them already.
• 00:49 They're very easy to learn and a lot of fun to work with.
• 00:52 So HTML is the structure of a web page.
• 00:55 All web pages are made with HTML.
• 00:57 And HTML stands for hypertext markup language.
• 01:00 And if you look at any website, in fact, we can go to Twitter, any website,
• 01:05 and if we right-click and click the view page source,
• 01:09 we can actually see all the HTML that they use in order to make that page.
• 01:13 And you see there's these divs and opening tags and closing tags.
• 01:18 We see this closing span tag here,
• 01:21 closing div tag, opening div tag, li tag.
• 01:24 All the different things and that's HTML.
• 01:27 Like I said, HTML isn't really a programming language and
• 01:30 neither is CSS for that matter, it's a markup language.
• 01:33 So that's HTML, CSS stands for cascading style sheet.
• 01:37 And it's what you use to style webpages, right?
• 01:40 So HTML is sort of the boring structure stuff.
• 01:42 And CSS is sort of the shiny paint job that goes on top.
• 01:45 Likewise, you can go to any website, and click on the view page source.
• 01:52 And just look through here to find a line that ends in .css.
• 01:57 Here we go right here.
• 01:59 And if you click on it, boom, you can see the CSS that they use.
• 02:02 Now most web pages, they minimize CSS, cram it all together to save space.
• 02:06 That's why it looks all jumbled like this so it's kinda hard to read.
• 02:09 But, you can look at it if you really want to just like that.
• 02:12 So, CSS and HTML work together mainly with divs, classes and IDs.
• 02:17 We've already seen this earlier in the course were we had a div that was class =
• 02:22 person, right?
• 02:23 We didn't have anything on there like that.
• 02:25 But it was just like that, you notice the opening and the closing tags there.
• 02:30 Now, anything between these tags, that gets affected by the tag itself.
• 02:36 So, if we change this back, this is my person div.
• 02:38 If I save this, come back here and hit reload, whoops.
• 02:41 If we put this inside of our script tag.
• 02:44 We want to put this outside of our script tag.
• 02:47 So if we save this, come back here and hit reload, this is my person div.
• 02:50 Now we can very easily write some CSS for this and
• 02:54 I'm just gonna write this CSS on the fly.
• 02:56 I'm going to stick it in our head tag here and you can see it's just .person,
• 03:02 I'm calling this class person, and I'm just gonna change the color to red.
• 03:05 So if we save this, come back here and hit reload, boom, now that becomes red.
• 03:09 So that's how HTML and CSS work together.
• 03:11 Now with JavaScript, we can manipulate all of these different things and
• 03:15 we'll start to talk about that in the next few videos.
• 03:17 Now there are a ton of things we can do to manipulate both the HTML elements and
• 03:21 the CSS elements with JavaScript.
• 03:23 So a cursory sort of understanding of HTML and CSS is definitely useful.
• 03:27 You don't have to know them at all to continue taking this course,
• 03:30 I'm gonna explain everything you need to know.
• 03:31 But like I said, if you're interested in becoming like a front end web developer,
• 03:35 you're definitely gonna wanna learn HTML and CSS.
• 03:37 We'll learn more about this stuff as we move along.
• 03:40 In the next video, I wanna talk about something called the HTML DOM.

Lesson notes are only available for subscribers.