Locked lesson.
About this lesson
How do HTML, CSS, and Javascript work together to make up front-end web development
Exercise files
Download this lesson’s exercise file.
HTML, CSS, and Javascript Working Together.docx59 KB
Quick reference
HTML, CSS, and Javascript Working Together
HTML, CSS, and Javascript work toghether to make up front-end web development.
When to use
Whenever you want to build web sites, you will use HTML, CSS, and Javascript.
Instructions
You've got a great foundation of CSS already, now it's time to learn the next thing.
HTML and Javascript are the logical next step to master front-end web development.
Hints & tips
- HTML, CSS, and Javascript work together to create killer web sites
- Javascript is a computer programming language, but it's not too hard to learn!
- 00:05 Okay, so we're pretty much done, we've gone all through the basics of CSS.
- 00:09 You learned about colors, backgrounds, borders, outlines, floats and
- 00:12 clears, inline blocks, all the good things.
- 00:15 We talked about intermediate CSS, all the fun things like rounded corners and
- 00:18 border images and gradients especially fun.
- 00:20 Then we talked a little bit about Responsive Mobile Design.
- 00:23 A little bit trickier, but then you found it was much easier to use Bootstrap for
- 00:27 your responsive design.
- 00:28 So that's pretty much it, I wanna spend the rest of this video talking about front
- 00:32 end and back end development.
- 00:33 And specifically, I wanna talk about HTML, CSS and JavaScript, and
- 00:37 how they all tie together.
- 00:39 So we've learned in this course, we've done a lot of CSS stuff.
- 00:42 We've mostly focused, obviously on CSS, but
- 00:45 we've touched sort of at the edges of HTML.
- 00:47 Every time we kind of did something with a List,
- 00:51 or a Table, or here at the end with bootstrap things, we used HTML.
- 00:56 We also a little bit talked about JavaScript.
- 00:58 And in fact, when we did our nav bar,
- 01:01 when we click this drop down thing, this is done with JavaScript.
- 01:04 Of course, we didn't do any JavaScript cuz we don't know JavaScript yet,
- 01:07 but that's what this was.
- 01:09 And, in fact, if you come up here and hit View Page Source and
- 01:12 just kinda scroll down.
- 01:13 Here at the bottom we have these two references we put in here way back when.
- 01:17 And you notice this JS reference here that's JavaScript and
- 01:21 if we click on here we can see this is the JavaScript that
- 01:24 handles things like that drop down and if you look at it it's just a bunch of.
- 01:29 You can't understand it at all, when we look at HTML and
- 01:32 CSS even if you don't know HTML you can kinda look at this right?
- 01:36 And CEO this is a div and this is a button.
- 01:38 Maybe that's a button and you can kinda figure this things out.
- 01:41 But with JavaScript this is just like a foreign language.
- 01:44 But the funny things is JavaScript it may look a little crazy.
- 01:47 It's actually one of the easier programming languages to learn and
- 01:51 that's why it goes so well with HTML and CSS.
- 01:54 So if taken this course now you've learned CSS, what do you wanna do now?
- 01:58 Where to go next?
- 01:59 I would highly recommend learning either HTML or more specifically JavaScript,
- 02:03 because front end developers, that's what they focused on HTML, CSS and JavaScript.
- 02:09 In the world of front end there's really kind of two categories.
- 02:11 There's web designers and web developers.
- 02:14 And designers were like art students, right?
- 02:16 They're sorta like painters for the internet.
- 02:19 They deal with images and graphic design and sorta things like that.
- 02:24 In fact, if you look, this is Photoshop.
- 02:26 I've mentioned Photoshop a couple of times.
- 02:28 Web designers use Photoshop.
- 02:29 And we can create Images and we can draw things and do all the stuffs, so
- 02:34 that’s web design.
- 02:36 Web development focuses more on sort of coding things HTML, CSS, JavaScript.
- 02:42 And these days you really need to learn all three to be very effective just to
- 02:46 sort of put it in perspective frontend versus backend development.
- 02:50 Backend development deals with like web servers and databases.
- 02:53 Very sort of enginery computer sciencey things, very code driven.
- 02:58 Frontend is more sort of emerging of design and coding, right?
- 03:03 HTML, CSS, it's sorta like coding, but it's not.
- 03:06 But it's also sorta like design, but it's not.
- 03:08 You're not using Photoshop and you're not writing computer code.
- 03:10 You're doing this sort of merging of the two.
- 03:12 And that's what a lot of front-end development is all about.
- 03:15 So if you're interested in learning more I definitely recommend checking out
- 03:19 JavaScript and HTML.
- 03:21 Maybe play around with Photoshop a little bit too.
- 03:23 You don't have to learn it that much.
- 03:25 But have a basic understanding of how to edit an image or something.
- 03:30 But anyway, that's the course, I hope you enjoyed yourself.
- 03:33 My name is John Elder and thanks for watching.
Lesson notes are only available for subscribers.