HTML, CSS, JavaScript

In our last video, we learned that 0:00 front-end web developers use code to create the content seen and 0:03 interacted with by users on websites and web applications. 0:08 We also learned that developers combine three languages to do so. 0:13 HTML, CSS, and JavaScript. 0:16 But what are these three languages? 0:20 And how are they different from one another? 0:23 Let's take a look. 0:25 Each webpage is made up of three different layers that work together 0:27 to deliver an experience to the user. 0:31 There's a content layer, a presentation layer, and a behavior layer. 0:34 The content layer is HTML, short for Hypertext Markup Language. 0:40 HTML provides the structural foundation of a webpage. 0:46 Content like headings, paragraphs, bulleted lists, 0:51 links, and images are defined by our HTML. Front-end developers 0:55 use HTML tags to turn web content into HTML elements. 1:01 For example, if we want the browser to display the phrase “Hello World”, 1:07 we need to surround that phrase with HTML tags 1:12 telling the browser what type of content it is. 1:15 Is it a heading? Or maybe a paragraph? 1:19 The presentation layer is CSS, short for Cascading Style Sheets. 1:22 CSS controls the appearance of our HTML. 1:27 We use our style sheets to style the HTML with colors, 1:31 font sizes, backgrounds, layouts, and much more. 1:36 CSS also allows us to adapt our content to various devices, 1:42 screen sizes, and resolutions. Front-end developers 1:47 write CSS code to change the appearance of HTML elements. 1:51 Since our phrase “Hello world” is a paragraph, we can write code 1:57 that changes that text from the default black color to red, or to blue. 2:02 The behavior layer is normally handled by JavaScript, 2:07 which provides real-time user interaction. 2:11 Front-end developers use JavaScript to respond to user input and 2:14 to dynamically update web content. 2:19 JavaScript is also used by back-end developers in 2:21 communicating with databases. As a result, JavaScript 2:25 can definitely get quite a bit more complex than HTML and 2:31 CSS, so we won't be covering it just yet. 2:35 Our goal for this workshop is to write enough HTML and 2:39 CSS to create a simple webpage. 2:43 We'll get set up to do that in our next video. 2:46

You need to sign up for Treehouse in order to set up Workspace

Sign up