Modern Frontend Web Development: HTML, CSS, Javascript, Sass and Typescript | Christopher Dodd | Skillshare
Drawer
Search

Playback Speed


  • 0.5x
  • 1x (Normal)
  • 1.25x
  • 1.5x
  • 2x

Modern Frontend Web Development: HTML, CSS, Javascript, Sass and Typescript

teacher avatar Christopher Dodd, Web Developer / Educator

Watch this class and thousands more

Get unlimited access to every class
Taught by industry leaders & working professionals
Topics include illustration, design, photography, and more

Watch this class and thousands more

Get unlimited access to every class
Taught by industry leaders & working professionals
Topics include illustration, design, photography, and more

Lessons in This Class

    • 1.

      Introduction

      1:21

    • 2.

      Frontend vs Backend Web Development

      14:55

    • 3.

      HTML

      29:26

    • 4.

      Quick Disclaimer

      5:10

    • 5.

      CSS

      37:02

    • 6.

      Sass

      18:29

    • 7.

      Javascript

      14:43

    • 8.

      Typescript

      15:45

    • 9.

      Javascript Frameworks

      28:40

    • 10.

      Tailwind CSS

      34:21

    • 11.

      Using APIs

      24:42

    • 12.

      Class Project Setup

      15:14

    • 13.

      Conclusion

      1:04

  • --
  • Beginner level
  • Intermediate level
  • Advanced level
  • All levels

Community Generated

The level is determined by a majority opinion of students who have reviewed this class. The teacher's recommendation is shown until at least 5 student responses are collected.

1,202

Students

4

Projects

About This Class

Inside, we’re going to take a modern view of frontend web development, diving into some of the more popular tools in use today.

We’ll learn how to write web pages with HTML, style them with CSS and Sass and introduce interactivity and data fetching via Javascript and Typescript.

So if you’re interested to gain an overview of how modern frontend development really works, keep watching and I’ll see you on the inside.

Meet Your Teacher

Teacher Profile Image

Christopher Dodd

Web Developer / Educator

Top Teacher

Christopher Dodd is a self-taught web developer, YouTuber and blogger with a mission to help individuals learn the skills to freelance and make a living independently.

Chris learned web development in 2015 in order to work remotely and travel the world and has done so for the past 2 years.

Through his YouTube channel, blog and Instagram, Chris inspires and educates newbie 'digital nomads' to chase their passions and pursue a location independent career.

See full profile

Level: All Levels

Class Ratings

Expectations Met?
    Exceeded!
  • 0%
  • Yes
  • 0%
  • Somewhat
  • 0%
  • Not really
  • 0%

Why Join Skillshare?

Take award-winning Skillshare Original Classes

Each class has short lessons, hands-on projects

Your membership supports Skillshare teachers

Learn From Anywhere

Take classes on the go with the Skillshare app. Stream or download to watch on the plane, the subway, or wherever you learn best.

Transcripts

1. Introduction: Hello and welcome to my new class, modern front-end web development. I'm Christopher Dodd. I'm a top teacher here on skillshare.com who back in 2018, published his first ever Skillshare class, Understanding Web Development, which went on to become one of the most watched classes in Skillshare's web development category. While the fundamentals I shared in the class do still apply, the languages, tools, and technologies of the web continue to evolve. HTML, CSS, and JavaScript are still the essential front-end languages, but compilers like Sass and TypeScript have now emerged and gained popularity, transforming the way CSS and JavaScript is written. JavaScript frameworks have also emerged to become super popular with frameworks and libraries like React, Vue, and Angular. By the way, if some of these names aren't familiar to you, don't worry, we'll cover it in the class. Inside, we're going to take a more modern view of front-end web development, diving into some of the more popular tools in use today. We will learn how to write web pages with HTML, style them with CSS and Sass, and introduce interactivity and data fetching via JavaScript and TypeScript. If you're interested to gain an overview of how modern front-end web development really works, keep watching and I'll see you on the inside. 2. Frontend vs Backend Web Development: Probably the most important concept to understand in web development is the difference between the front-end and the back-end. We covered this in Understanding Web Development, but it's such an important concept I wanted to throw in a refresher here. Put simply, the front end is any code that is put together in your web browser, i.e, the program that you use to browse the web. The back-end code is basically everything else. If we roll back the clock a little bit to when the web first started, websites were simply pages of information. This style of website, just a static page of mainly text content with perhaps some images, was the norm. No fancy styling and minimal interactivity. Basically, the only interaction we had were hyperlinks, which were parts of the texts that were highlighted in blue with a solid underline that when clicked would direct us to another URL. How would this happen? The same way it is done today with something called hypertext markup language, better known as its acronym HTML, which is served up to the browser to provide structure to text and image-based content. Here is where we can start to see the distinction between the front-end and the back-end. When we hit that website address, we're telling a server what content to serve us, and that content comes back from the server in the form of HTML. That HTML is then read by the browser and rendered to our screens as what we see here. Using any modern browser, we can open up another panel to view the actual raw code, usually a lot of text content within these things here which are known as HTML tags. Nowadays, the front end is often much more complex. Websites are much slicker and have a lot of interactivity. In some cases, you're running an entire computer program in your browser, and that's what's known as web apps. Common examples of this include Facebook and Google Sheets. If we turn off JavaScript in our browser, you can see that these apps cease to continue working. What gives your website styling and interactivity is CSS and JavaScript respectively. CSS stands for cascading style sheets and is layered on top of HTML to completely transform the look of standard HTML. JavaScript then provides any interactivity besides a few basics within HTML. Basically, any interactivity outside of hyperlinks and form fields such as checkboxes, radio buttons, and drop downs require JavaScript to work. Just like HTML, CSS and JavaScript are run in the browser and are therefore part of the front end. To reiterate, the front end is basically anything that happens within your browser. Now let's compare that with the back-end, which can be infinitely more complex. The back-end of a website is what gets run on the server and covers any programming that happens behind the scenes in order to deliver the appropriate HTML, CSS, and JavaScript to the browser. The back-end is generally responsible for interacting with databases, determining whether the user is authorized to access certain information, and then serving that data amongst the necessary front-end code of HTML, CSS, and JavaScript to the browser. In order to demonstrate this, let's interact with one of the most commonly visited pages on the Internet, google.com. As you can see here, I've got google.com loaded up in my web browser which is Google Chrome. I prefer Google Chrome and it's what I'll be using for this class. I do recommend it for developers, really good web browser because of the developer tools that it has. But, of course, if you don't like Google, you're not going to like Google Chrome, which I totally understand. Whichever web browser you want to use for this class is fine, however, I'll be using Google Chrome throughout this class. The reason why I've got this loaded up as incognito, right here you can see, is so that I'm not automatically logged in. I just want to demonstrate to you the logged-out state and then when we start talking about back-end, I'll show you the logged-in version. Right here you can see it recognizes through session storage or cookies that are stored in our browser that I'm not currently logged in so I can click here to "Sign In," I'm just going to click "No Thanks" here. Let's start to interact with our front-end code here. Now, if you remember what I just said, the server delivers HTML, CSS, JavaScript to the browser, and the browser puts it all together. That HTML, JavaScript, and CSS is all front-end code. Because it's put together in the browser, we can actually view all of the raw code. What I'm going to do is I'm going to hit Option Command I on a Mac in order to bring up the developer tools. This right here is called the DevTools, and if I click this, I can see all the different panels within this developer tools. This right here is the JavaScript console, which we will look at later. Right here I want to click on "Elements" and I'm going to close this part down here. Up here you can see all the HTML and down here you can see all the CSS which is giving this page styling. Now because this is all happening in our browser, we can actually modify this on the fly. What I can do is I can click this thing right here and then I can hover over different elements on the page to see them in the code. Now if I click on one of them, let's click on this button, you can see that this code right here is actually what determines this button right here. As you can see the HTML tag, there's a lot of stuff going on here. Obviously, this is not a basic example, this is google.com. But what I want you to notice here is in this value field we've got Google Search, which relates to the text that comes throughout the button. What I can do here is I can actually edit it so instead of Google Search, I can just change this to Search, and you can see the button changes. Here in the CSS, I can actually remove certain attributes. If you see here, this style is applying to both of these buttons, if I hover over it, you can see it's applying to both of these buttons. I can get rid of the border-radius. I could do something like change the color of the text to chocolate like that and as you can see, the hover state is a little bit different. But when it's not hovered, at least, the color of the text is going to be chocolate. This image right here, there's two ways of doing this, I can click on this and then click on the element, or I can right-click on it and click "Inspect," which is my preferred way of doing it, you'll probably see me do that more often in the class. You will see that this img tag here, which is an image tag in HTML, is what renders this image here. As you can see here, there's an src and if I was to right-click here and "Open in New Tab," you can see we've got the actual image file from Google here. Obviously this is google.com. They've got lots of other crazy stuff here. They've got all these weird codes here that are inside the class attribute here. But what I'm trying to get across to you here is that all of the front-end code, all of the HTML, the CSS, and the JavaScript. The JavaScript is harder to interact with. But if I go into the head here, I can actually search here and then I can put.js, which represents a JavaScript file and then maybe there's a lot of code here. Maybe I can find an external JavaScript file, not really showing up. But here you can see inside of these script tags, which is what we use to insert some JavaScript code, there is some JavaScript code right here, which we can actually copy or simply look at to see what's happening on the page. But the JavaScript example is much harder with HTML and CSS. It's much easier to determine what's going on because you've got this panel here, which shows all of the styles that are applying to this image tag and you can actually dial in on the actual image tag. If I click over here to compute it, then you can start to see some of the computed styles and if we click here, we can see where that set, so the font of Ariel is actually set on the entire body of the document, which is basically the entire document. If I click this off, you can see all of the fonts change to default, which I believe is Times New Roman or something like that. Or we can change the default body color to something else. But it's not going to override places where we've been specific to specific elements. It's not going to override these colors or these colors. But that's about CSS specificity at a more advanced concept. The point I'm getting across to you is that when we went to google.com, we got served the front-end code to our browser and our browser is putting together this right here. All the interactivity now that happens after the page has loaded is on the front-end. It's the HTML that gives the page structure and actually puts the elements on the page. It's the CSS right here that determines the look and feel, the layout and it's the JavaScript that will provide us any functionality. Let's actually see if we can. If I click on this, there's a panel that opens up here. It is possible that is CSS only, but most likely that is coming through from JavaScript. If I click here, "Search By Image, " you can see a panel is opening up here and then I can click here, "Upload A File, " from my file system that interactivity is happening on the front-end without us reloading the page. Now one thing you'll notice is when I refresh the page, those changes were gone. Which is interesting, but obviously it makes sense. I can go back here and change this to just simply search again. But of course, Google is not going to allow us to change their website for everyone. Anytime you're getting code from a server to your browser, you can modify it. But of course, this is not going to be saved to the actual Google server and changed for everyone. This is only happening in your version which you pulled from the server at the time you visited the address. If I refresh again here, it's going to pull from the server again and now you can see it's suddenly going into dark mode and it's also determined that I am recording this in Australia. That's some extra wizardry from Google there. But now what I'm going to do is open up Google in a new window, a non incognito window. Here you can see we've got a similar experience, but the difference is, you can see that I'm currently logged in. You can see my name, my email, which is hidden for privacy. It's my standard email. You can contact me on my work email of course, but not on my personal, please respect that. But here you can see my name and my photo here and where's that coming from? Obviously, that's coming from a database and that data is specifically for me. Because I'm logged in, In other words, I'm authorized to access that data, I now have my profile photo, name, and email on this page now. That's coming from the back-end and all of those operations and stuff I can look at and mess with in the browser. Stuff like authorization, grabbing data, figuring out what data to serve, that is all back-end stuff. Because if it was done on the front end to start with, it would be a big privacy nightmare. You don't want me being able to access your Google account or somebody else's Google account. Everyone's Google account needs to be separate. As you can see, this is coming through from the back-end and the back-end is where the actual permanent change happens for an app like this. The point is, we've got our front-end code. We can go in here. We can modify it as much as we want. I could even change my profile photo here to some other image. As you can see here, I can actually go directly to the image open in new tab. I can actually go directly to the image. I could just replace this URL right here in the HTML with some other image, and that would update the image. I can change my name. Let's see. If I go into here. This is going to show me all of my accounts. If I drag this over so you can see it's quite nested in. I could even change my name to Michael Jackson, for instance. Then if I click over here, I'm now Michael Jackson. I can modify all this front-end code, but of course it's not going to modify the back end. The back end is what's serving us the HTML, CSS, and JavaScript. Every time we make a request to the server, refreshing over here, and I click over here, I'm back to being Christopher Dodd because it's retrieving that data from the logged in user from the Google back end and it's then putting it with the HTML, the CSS, JavaScript, to create the front-end experience, which is then put together in your browser. Hopefully, through this example you can see this working in the real-world, the distinction between front-end and back end. I like to use this example because I think it really demonstrates the distinction between the two. As we can see here, there is none of the back end code here. I can't directly access the database. Of course, that would be a huge security nightmare. The back end is all of that stuff, all of my account details, more complex operations. The only thing that comes through on the front-end is the structure of the page, the styling of the page, and any interactivity that needs to happen without reloading the page. You can see here I can open up this panel and some of the styles here are modified JavaScript is actually doing that for us because we're not actually reloading the page. We're getting some front-end interactivity. I can open up this and get my apps. I'm going to leave it there, guys. In the next video, we're actually going to write some HTML and then we're going to build on top of that with CSS, JavaScript and then some of the pre-processor tools that sit on top of those languages. I'll see you in the next video. 3. HTML: As we learned in the last video, HTML is the standard markup language for the web. Markup language according to the Britannica encyclopedia, meaning standard text encoding system, consisting of a set of symbols inserted in a text document to control its structure, formatting or the relationship between its parts. The markup symbols can be interpreted by a device, computer, printer, browser, etc., to control how a document should look when printed or displayed on a monitor. A marked-up document thus contains two types of text. Text to be displayed and the markup language on how to display it. I think this is a pretty good description. In HTML, like other markup languages, we've got tags and then we've got the tag's content in between them. This tag right here with the less than sign and the more than sign represents a standard HTML tag. In most cases, however, there will be some texts that comes after it. Then this, the standard HTML tag with a slash after the less than sign, indicates that this is the end of the content for this particular HTML element. We can also nest elements within other elements and you'll see this all the time within HTML. It's a system where elements are designed to be placed into other elements to create a tree-like structure aptly named the document tree. We can view any HTML structure as a tree by using a tool like this Live DOM Viewer. But instead of diving deeper into any theory here, let's actually write some HTML and see it working in action. The code editor I'm going to use for today's class is called Visual Studio Code. It's super popular because it has basically all the functionality of a paid code editor coming completely free from Microsoft. A lot of people are using it, including myself. I can't see any reason to go with a different code editor. But of course if for whatever reason you want to do this class in a different code editor, you can do that. Some of the instructions will be a little bit different, but for the most part you can use any code editor you want to follow along. If we don't have Visual Studio Code installed yet, just Google it. Visual Studio Code, as you can see, is developed by Microsoft, initial release date 2015. It's been around for a while, but it's been in the last, I'd say 3-5 years that has gotten really popular. Here you can see it detected that I'm using a Mac, so I can just click here to download whichever version is appropriate for my operating system. What I'm going to do is, I'm going to switch back over to Visual Studio Code. Actually I'm going to switch over to my finder window here and I'm going to create a new project for today's class. I'm just going to call it Modern Web Development. Then from here what I can do is, as it says here, open a file or folder using this shortcut. So I'm just going to use the shortcut and then navigate into that code folder and open up that folder. Now we've got our empty project. I'm going to update Visual Studio code later. And here I can either click this or I can right click click "New File" and I'm going to create an index.html. There is a reason why I called it index.html. Index generally means that this is the homepage or root file of an address and then the extension.html is to indicate what file it is. Why this is important is because when we run a server, it's going to look for the index file when we're on the root route or root URL. Let me demonstrate that really quick. Let me just type in some HTML just to get us started and then we'll come back to it. We'll just do hello world in between some h1 tags. I'll hit "Save" on that. The recommended way I'd load it in your browser to start with is, if we just go to Google Chrome and then I open up Finder, we can literally just drag this HTML file into Google Chrome and it will load it. There we go, we've got our heading saying hello world. In this case it doesn't matter what we name our file. I could rename it to page.html. If I click this, it's going to error because the path has changed, but if I change it up here to page.html, it'll be fine. But if we were to do something like run a server, which down here we've got this button to click to run a live server. This is an extension. If we go over here to extensions, you can see the extensions I have installed. It's called Live Server by Ritwick Dey. If you want to install that, we will probably use that later in the class. If we did that and we clicked "Go Live", then we still get page.html. But if we went to the root, this address, you'll see that it doesn't load. If we want the page to load on the root of our address, we need to make sure it's called index. If I hit "Save" on that, refresh over here, you can see there is no specification of what the page is called because, with index.html, it's going to load on the root of the address. Because we're running a server here, we've got an IP address and a port. I don't want to get too deep into this stuff right here. I don't want to bog you down in theory. Let's actually jump into some HTML. I'm going to just dispose of that server. Let's get back to what we had before, which was running it from the file system. As you can see here, it says here, you're viewing a local or shared file and here we've got our HTML document. What I'm going to do is, I'm going to close this down. Let's try and put both on the same screen, like such. Then let's actually get rid of this, save, refresh over here and you can see we've got nothing now. Let's get started with some HTML. I'm going to close down the Explorer here, increase the sizing here, so it's easier to see. We can actually get some boilerplate content HTML by just typing in HTML in Visual Studio Code and then I can get this boilerplate code, what's called boilerplate code. If I zoom out, you can see. Let's not do that to start with because we're learning HTML at the moment. What we're going to need is two things. We're going to need a head tag and a body tag. Both of these tags, we're going to need a closing tag for because we're going to nest stuff within them. Let's open up a head tag. You can see Visual Studio Code helps us with handy autocomplete and giving us the reference from MDM. Here we go. If I press this, it actually automatically creates the closing tag for me, which as we discussed earlier, is the exact same, but it has this slash before the word. I'll go inside that and press "Enter" and that will open up nicely formatted with indenting here. That's just formatting, so that the code is easier to read. Then I'll go down and create the body and I get the same thing. If I hit "Enter" it will provide some nice indenting for us here. If we want something to show up on the page, we've got to put it in our body tags. If I put back what we had before. Let's do it without the h1. I'll just say hello world, just some basic text content, refresh over here, you'll see that it comes up. What the header is responsible for is, everything that is more meta to the document. We're talking about the title of the document, references to CSS files that we might bring in, SEO information, stuff like that. Stuff that doesn't show up on the page, but is still important to the HTML file. The most common example here is title. I can create this title tag and in-between the opening and closing title tag, let's put in a title. You can call this whatever you want, my first web page. If I hit "Save" on that, I want you to notice, see on the tab here is just the filename. Well, now if we refresh, you'll see it's going to come up as my first web page. So this is for the user, but also for Google search engines. Anything that's inserting or embedding the page on another website. Like if you were to share this page on Facebook for instance, you are now telling the document and telling the web what the name of the page is. For now, that's all I'll do for the head tag. Let's get down to the body here. As you saw before, I created a H1. A H1 is a section heading, so let's just run that and then I will click "Refresh" over here, and as you can see, we get some styling out of the box. What a H1 is, is a top level heading, so it goes all the way up to H6, I believe. Yeah, here you can see all the way up to H6. If we haven't set it in our CSS, we're going to get some default styling with the H1 being the biggest, and then if we were to have a H6 and set, let's just call this a sixth level heading. Refresh over here. You can see it's probably even smaller than if we were to type in regular text. Yeah, it's even smaller than regular texts, which is a bit weird, but you get the point. There's all the way from H2, second level heading, as you can see, and out of the box, it comes with basic styling. But it's important to note here that you want to use the right headings, even outside of styling because that is just a sign of good formatting to Google. Google will actually scan a web page and determine whether it's structured correctly, so you always want to use these heading tags correctly. if you're writing a document, you've got your top heading and if you wanted to create a heading under that, it would be Heading 2, and if you wanted to create a heading under that, it'd be Heading 3. Still use the right heading, even if you're working with different styles. H1-H6 is a very common tag. I'm going to get rid of this H6 right here. Instead of regular text, I'm going to show you another popular tag called the paragraph tag. In Visual Studio Code, I can just type Lorem, hit "Tab" and it will insert Lorem ipsum. If I hit "Save" on that, refresh over here, you'll see we get this paragraph. Now, what's important in HTML to understand is, unless we change it, we're getting styling out of the box with HTML. Let me just open this up and then I can show you in the DevTools. If I hit "Option Command I" on a Mac. Now we can see the output code over here. It's the exact same of what we've got here, but now we can see it coming through in the browser and we can actually interact with it. We can actually go in and change words like we did in the Google example and we can close and expand tags like this. But also we can see the computed styles. If we go and hover over this P tag right here, you can see orange appearing above and below the paragraph. I can't hover my cursor over at the same time as showing it. But you can see on the left there you've got P, it tells you the dimensions of it, and then it shows you some orange space above and below that is actually padding and we can verify that by going into Computed here and looking at this, what's called the box model. You can see here we've go, t it's actually not padding, I stand corrected, it's margin. Margins is a little bit different. We won't go into the box model in this particular class, but I do cover it in my HTML and CSS class here on Skillshare, so you can check that one out. But as you can see here, we've got some margin by default. If we go into the second heading, we can see we've got some margin by default as well. But we've also got some other defaults here like the font size being 50 percent bigger and the display style being block. We'll go into styles later. But I just want to indicate here that when we write HTML without any CSS, we're getting some CSS for free. We're getting some CSS by default. Up here in our H1, you can see we've got a font size which is 2em, which is a unit. Obviously, that is an extra half em on the H2. But this is all completely editable with CSS, it's just defaults within HTML. Here you can go into styles and see the user agent style sheet, which is like the standard style sheet. This could change depending on what browser you're looking at. But then you can also go into Computed here, and this button here will show you where that's coming from. I believe the font-weight is also bold and that's a difference. But just to jump ahead a little bit here, we can change this to a lower font weight. It still be a H1, but it just doesn't have that H1 default styling. So that's important to know. Let's cover some of the other common tags you're going to see in HTML. As I mentioned in the previous videos, a common one is the A tag, which is the hyperlink. It's just a simple A. We've got our closing tag here. We want to put that on the other side of the text we want a hyperlink. If I hit "Save", refresh over here, we should usually get some default styling. But I think because we don't have a href yet, so we need to actually put in, and this is going to be our first attribute. We can add attributes to the opening tag, not the closing tag, the opening tag and as you can see here, href contains the URL or the fragment that the hyperlink points to. That's what we're looking for. If I open that up, it doesn't matter what I put in here. Let's just put a hash which is the usual placeholder, and then I hit "Save", refresh over here, you'll see me now get the default styling for a hyperlink. We get our cursor changing. We get the texts coming through as blue and the underline. This is very old school. Usually, this style is overwritten by a lot of websites, but that is the classic styling of a hyperlink. I've just opened up the DevTools again here and I'm just going to put it down here. I think we can look at all three at the same time. As you can see here, as I mentioned, the color is webkit link, which is a variable, and our cursor will be pointer and we're going to give it that underline. You can see here, or if we go into Computed, usually that's the actual computed color right there and the pointer style for the cursor. Again, we can go in here, which we are going to later, and change this to something else. Cursor, we can do a crosshair for instance. When you have a link, you can change to this crosshair cursor here. We can set that to whatever we want with CSS. The point is, we've got some default styling out of the box. Now before I created this file called page.html, let's actually go back and put that one in page.html and let's get really lazy with it here. Let's just put in again Hello World without any HTML tags. But I just want to show you here we can actually link to that page here and then if I refresh over here, click on this, then you'll see it's a little bit tight. But you can see over here that that will direct us to page.html. If I extend this the whole way, let's go back to here and then maybe here we put in a link and send it back to index.html. Go home. Now if I refresh over here and I click "Go Home", it'll take us back to index.html. Now we can link between two files. I'm going to remove page.html, that was just to indicate hyperlinking. We'll just delete that. Move that to trash. This is all very basic stuff, guys, if you are too advanced for this, feel free to skip ahead. But we're going to cover some more HTML tags right now. As I mentioned leading up to this video, what we can do is we can add in an image as well and we saw that in the Google example, it was just an IMG tag and this one is a self-closing tag. We don't actually have to have a closing tag for this, because all we need to do at a bare minimum, is to give it the address of the image we want to show, and we do that through the SRC attribute and then in between these double quotation marks, we put in the link to an image. This is just a placeholder image and then I'll just close it by having the less than sign. This is the greater than sign, so you just put that on the end and you've got a well-formed HTML tag. Here we go, refresh over here and here you can see there's a little bit of loading time for the image to be loaded from that external source, is now cached so it won't do that loading again. But now you can see we've got our placeholder image here. If we inspect that, you'll see we've got, no, we haven't gotten any margins with it. Let's close down this one here. Let me structure this document a little differently. We've got, let's just put in a paragraph here of Lorem Ipsum. We'll put that there. Let me expand this. We will put the image here under the second-level heading. I'll just call this text with image. Hit "Save" on that, refresh over here. You can see now we've got this section down here. I'll throw in an extra tag here of hr, which is horizontal rule I think it stands for, and it will just create a line between the bits of content. Save, refresh over here, you'll see it creates this line. Then what I'll do is I will put in another paragraph of text here, then I will throw in something just to demonstrate a blockquote. This is just mainly a semantic tag, but putting in a quote. What I mean by semantic is there's not a lot of styling to it, so it's mainly just the naming. I can say here a quote, "Man without car don't go very far." One of my favorite quotes. As you can see here, it looks exactly the same, but just with some indenting. If I was to open up my dev tools again, scroll down, right-click over here, you can see that we've just got an attribute here called margin-block-start, which gives it this margin on the left of 40 pixels. Then you've got this 16 pixels on the top. Actually, you've got 40 pixels on the right as well, so that's what is giving it this indented functionality here or indented look, and then we'll just put another paragraph on the end of that, refresh over here and you can see. Let's create a new section here. Create another h2 here. Let's call this paragraph and list. Now, I'll show you a common HTML structure here. We can open up either ordered list or unordered list. Unordered list is typically more common, so I'm going to go ul, which stands for unordered list, open that up, and then we create a nested LI tag for all the list items within the list. First item, we'll see this on our screen in just a second, second item, and third item. If I hit "Save" here, actually we forgot to put it in a paragraph here. Again, just some more Lorem ipsum. Hit "Save" on that, refresh over here, and as you can see, we've got our list here. If I was to inspect again, which I won't do this time because I think you get the point, there's going to be some styling applied to this that gives it this dot and the indenting. Automatically, there's some styling on the UL as well. If we wanted to create an ordered list which is just to have it numbered, we can replace the u with an o. Refresh over here, and you can see if we were to add a fourth item, it automatically comes up as four. Save that, I'll move this back here now, refresh over here, and the fourth item automatically has a four in front. Finally, I'm going to show you some form fields, which is the biggest out of the box functionality you can get with HTML. Let's create, I'll just call this paragraph with form, and then I will put in some Lorem ipsum here. But then after the paragraph of Lorem ipsum, I'm going to put in a form. Now how forms work is that we can submit details that we set in here to a specific address, and we do that through the action attribute. Here if I insert inputs in-between here, and I submit that form, it will submit the data to a particular URL. That's how you usually use forms. But for now, I'm just going to show you the actual inputs themselves. The first one I'll show you is text. These are self-closing tags. We don't need to put a closing on this. I'll just put input type of text and that's enough to get it to work, basically. If I refresh over here, you can see we've got this box here which we now have some interactivity. I can put whatever I want in here, hello world. I have this box of editable text. I can also put in a value here, so when it loads, it's already got some text in it. There you go. But of course it's an input so I can change it. I could also, getting rid of this value here, change this to a number field, which is going to look basically the same if I refresh over here. But now you can see these up and down arrows. I'm currently typing characters here, it's not working. I have to type in a number. It will only accept a number, and then I can go up and down. That's a number field. Number 1 we can do is checkbox refresh over here, and you can see I can click on it to turn it on and off. Obviously, that doesn't really make a lot of sense. Usually what we do is use a label. I can create a label, put the checkbox within the label, and then write some text here. Let's just say it's like a form where you're agreeing to something. I'll just put I agree. Then if I click on the label, it will also check the checkbox. Let's move on to creating radio buttons. Now, radio buttons are a little bit more complex because we have to give them all a name so that we know that they're related. I will call this Radio 1 and let's just, what should we say here Option 1, I'll just call it Option 1. We're going to need multiple of these. I'll copy paste. Let's actually zoom out a little bit, so we can see everything here. Option 2. We want to keep this as Radio 1, so these are linked. I'll hit "Save", refresh over here. Now, with radios the difference between this and checkboxes is if I select one and then I select another one, it removes the selection from the first one. It does this because these are in the same group. If I was to create or duplicate these, and we call these two Radio 2 in the name field, then these would be linked together. If I go in this first group and I select in here, it's going to remove the selection from the other radio in the group. If I go over here, this is a separate group, so it's not going to remove from the first one, unless of course, I forgot to change this, and now we've got the same group. But then we'd have to write this Option 4. Very basic stuff, but just giving you an overview of some common components in HTML. We've also got text area, which is pretty basic. It's actually a tag where it's got a closing tag, and the placeholder content we can put in the text area is what we put in between the two tags. Let's put some Lorem ipsum in a text area. As you can see here, we can actually expand this box, which is interesting. We're going to have to do some more formatting on this usually, but here you can see we've got some Lorem ipsum in a multi-line text field basically. That's also re-sizable. We can start with a certain content, start with the Lorem ipsum, and then modify it. That's text area. Then finally the one I'm going to show you is select, which is how we create a drop-down. We've got our select and inside we wanted nest options. Again, I'm going to go Option 1, paste in a duplicate, Option 2, and Option 3 right here. The currently selected one is going to be the first one by default. If I refresh over here, you can see we've got a drop-down with the first option automatically selected. It's coming off screen. Let me just remove some of this. Let's just do up to here. Save, refresh over here. If I click on here, you can see we can select different options in this drop-down. If we want a different option selected other than the first one, we can put in an optional attribute here, just selected, that's it. Refresh and you can see Option 2 is now selected by default, but we can change it here. This is what I mean by interactivity without JavaScript, this comes standard in HTML, and this is a very Web 1.0 version of web development. Let me explain that statement a little bit more. Web 1.0 is basically the first version of the web, which was very much like this. It was just a vertical layout with just headings, paragraphs and forms and lists, all that stuff we did in this video. It was very basic. There wasn't a lot of styling. As time went on, and now there's this term, Web 2.0, which talks about the current web outside of all the blockchain stuff that's going on, which has now got this label of Web 3.0. Web 2.0, which is what we're in now, is more two-dimensional layouts with lots more interactivity provided by JavaScript. In Web 1.0, it was just websites that displayed information. All you needed was this semantic content like a top-level heading, a paragraph, and then a form for accepting some data. Very basic stuff that also came with some styling out of the box which we saw before when we inspected these, all of the styling that comes standard. This is very much early-stage web development. You don't really see, as you know, many websites that look like this now, but this is the standard look of HTML without any styling. In the next video, let's actually style our webpage, talk about CSS. Obviously CSS is a huge topic, but we'll just do a brief overview and so you can understand how we can actually style what we've created in this video, and build on top of what we've learned about HTML. I'll see you in the next video. 4. Quick Disclaimer: Hi, everyone. I just wanted to throw in an extra video here as a little disclaimer because we've just covered HTML, which is pretty basic and we've covered a lot of what you can do with HTML. There's not a lot, there's just nesting of tags within other tags, it's not too complicated. But as we start to get into CSS, JavaScript, and the other concepts, is going to get a lot more complex very fast. And a lot of these topics could be a course in and of themselves. In fact, some of them are, and I'll reference those other classes as I go throughout the rest of the class. But I just wanted to make this disclaimer here because I've been doing Skillshare classes for long enough that I know some of the criticisms I might get in the reviews. I just wanted to make sure that this is a class for all levels. At first, we get into the basics, we get into HTML, we talk about some basic CSS, but you might start to see the complexity ramp up as we start to get into Sass, Tailwind, JavaScript, especially TypeScript, and then moving on to JavaScript frameworks, including pulling in information from APIs. Just in order of how they show up, here's just a few extra details talking broadly about the topics that we're going to talk about for the rest of the class. CSS, we're going to talk about layouts because I feel like layouts are the most complex thing in CSS. If you want the color of a particular text to be red, then you can set color-red. That's not too complicated to understand hopefully, but layouts is a whole new concept. We're going to talk about Flexbox, we're going to talk about CSS grid. But just know that there's so many different styles within CSS. If you want to dive deeper into that, there is a class here on Skillshare that I've created called Web Development Fundamentals, HTML and CSS. After the CSS lesson, we're going to talk about Sass, and then we're also going to go into something called Tailwind CSS later in the class. As I've written here, you might need to build up some experience with CSS in order to understand the benefit of these extra tools. As I'll say throughout this class, HTML and CSS and JavaScript are the only front-end languages that get run in the browser, and they're the only essential ones to learn. But of course, we've got all these other tools like Sass, like Tailwind CSS, TypeScript, Vue. Those are the ones we're going to talk about in this class. They just sit on top to help developers. In order to understand the benefit of them, you might need some experience with the underlying thing that they're trying to produce. In terms of styling, it'd be CSS, in terms of functionality, it'd be JavaScript. Moving on to JavaScript, we're only going to be scratching the surface in this class and then we're going to be diving into TypeScript and Vue. It moves very fast once we get to the JavaScript part. If you want to take a pause once we get to the JavaScript lesson and dive deep into JavaScript, I have a full class on JavaScript, it's called Web Development Fundamentals JavaScript. You can check that one out. Again, in order to understand the benefit of TypeScript, which I've got down here as well, you'll need some experience with more complex front-end projects. It's actually hard to find a very basic example to use TypeScript with, because the benefit of TypeScript only becomes apparent when you start to work with more complex front-end projects. Then finally, we're going to be looking at Vue.js. Vue.js is just one example of a reactive front-end framework. You should be comfortable with DOM Navigation and Event Listeners before diving deeper into any front-end framework like Vue, React, Angular, etc. If you want to know more about those concepts, specifically, dive into Web Development Fundamentals JavaScript, my class here on Skillshare. Just a reminder here, the only essentials of the front-end are HTML, CSS, and JavaScript. All the other tools are only there to help with the development of these three. Also, any other tools, discussed or not discussed in this class, can come in and out of popularity. The landscape is changing constantly and you can utilize these tools at your own discretion. The only essentials as it's written here are HTML, CSS, and, JavaScript. So I just wanted to throw in this disclaimer video just to address any of the possible concerns that I can see coming up with how fast we move for the rest of the course. If you are ever stuck on a certain stage and want to learn more about it, you can head to another class on my Skillshare channel here and find a deep dive into many of these topics. Otherwise, you can look at other tutorials or just skip that lesson entirely. If it's not the HTML, CSS, and JavaScript lesson, then you can feel free to skip that entirely. The purpose of this class is to give you an overview of some of the popular tools in use today, so you can choose your own venture after that, like the original class, understanding web development. So I just wanted to make that clear before we move on. Without further ado, let's get into the rest of the class. 5. CSS: In this video, we're going to introduce CSS. CSS could be a course in and of itself, which is why I have a dedicated Skillshare course on HTML and CSS. For this video, we're just going to cover the basics and how it applies to HTML moving on from this example that we shared in the last video. Now I showed you two ways of loading our HTML. We can either do it through the file system like Search or through a server. I'm going to switch over to delivering it through a server in this video. One of the big benefits to doing this is instead of having to refresh every time so if I create a change here, I have to hit Save on this document, then refresh on this document. In order to see the change, we can easily eliminate that step by running our Live Server, which as I showed you in the last video, if I open up my extensions here, Live Server by Ritwick Dey. If you want to install this, all you would have to do on your version of Visual Studio Code is just type Live Server into here, search it, it'll come up, you click on it, and then you click Install. Super easy to install extensions on Visual Studio Code. I'll close down that tab and then I'll click here to go live. It's going to open it up. Here you can see it's got index.html in the end. We don't even need that, we can remove that and it'll know what the webpage is because index represents the root address on a website. Let's go and demonstrate that now. If we go into here, and I am to call this second option instead of option 2, and I hit Save. You can see we don't need to refresh over here because it's got hot reloading, really cool and handy for development. Now let's bring in a CSS file. We can actually create something called a Style Tag here and put CSS in here and it'll apply to the page which it's on. But let's do it the cleaner way, which is to put our CSS in a different file. I'm going to open up Explorer here, create a new file, and I'll call this styles.css. You can call it whatever you want as long as it's got.css on the end because that will indicate to Visual Studio Code and to the web browser that this is a CSS file. Now we want to link this CSS file to our HTML document and we can do so within the head tag. I'm going to create a link with an attribute rel with the value of stylesheet, which is going to tell the page that we're bringing in a stylesheet, and then href, which is the path to the stylesheet. Because they're both in the same directory right next to each other, all we have to do is type styles.css, the name of the file, hit Save on that. In order to test whether this is working, let's go over here and write our first style. What we can do here is do a reset. You see now we have margins and padding that automatically come from the HTML. What we can do is throw in this asterisk here, Wildcard Selectors they call it. Then we can put padding, put too many Ds there. Padding, we can set to zero and margin we can set to zero by default on all elements. As you can see here, we can definitely see that our linking of the stylesheet worked here because that is now applying. If I went into here and inspected my h1 tag, you can see that our default styling that we had over here has been overwritten by our asterisk selected here. It looks like these are all margin not padding, but if I was to click this checkbox here, I can toggle it on and off. The other thing we can do here is add in our own styles directly in the browser via the Chrome DevTools. I can go in here and let me just set everything to the color blue. This is not very practical of an example but as you can see here, we can actually change the color and test out things in our browser. Now if I refresh the page here, this doesn't save back into our document, but we can experiment with different CSS on the fly within our browser. We just need to make sure if we do like this, so let's just say we did color of everything being blue, then we will have to make sure we can just grab this copy and paste it. We will just have to make sure that we put it in our stylesheet and save it, and then it will come through to the browser. It only works one way, not the other way around. If we create changes here, it's not going to save over here. Just wanted to note that. I'm actually going to remove this and let's talk about the main concepts within CSS and HTML. Here you can see everything stacks on top of itself. You've got the h1 and there's no content after it, it's all this sort of vertical layout. But of course, we've got some exceptions here. We've got, if I was to wrap some of this in a link tag, the a tag and let's just put a hash here as a place holder, you can see that that sits what's called inline. If I inspect here to compute it, you can see the display style is inline, but everything else, the display style is by default block, there's only a few elements in HTML by default that do inline, but there's actually multiple different display types. We can do grid, we can do Flexbox. These are the more modern CSS display types, and they're what's used a lot now in modern web development. Let's talk about that. As I mentioned, Web 2.0 is more of a two-dimensional layout. What I'm going to do is remove this. Let's start with a common building block for creating layouts in HTML, which is the div tag. Here we can read that the div element has no special meaning. It just represents its children. It's a very broad tag that by default has a display style of block. I'm going to put Lorem Ipsum in my first div and again, Lorem Ipsum in my second div right here. I'll hit Save. As you can see here, it's a little bit hard to tell, but they are display block. If we look here, display block, but there's just no margin by default. But if I extend this out, you can see that one stacks on top of the other. Let's do something like go into here and set a style. I can actually target all this by simply putting div here, opening up curly brackets to put our styles in. Let's give all of our divs a border of one pixel solid so that we can see the separation of them. Here you can see we've got two divs, and by default they are display block, which means that they stack on top of each other. Now if I was to go into here and set a different display type. Let's do display inline. Now you can see that if I extend this out, they're not contained in two blocks, then now trying to sit inline with each other. Then the third common type in line is not so common. We can actually go inline-block. As you can see here, they stack on top of each other. Add a max width here of 300, Save, they will stack on top of each other unless there's enough space for them to go side-by-side. If I go back to here, inline, you can see what we have. Inline block is like block, but the blocks end up going next to each other if there's enough space. If I make this window smaller, you can see they go back to stacking on top of each other. Let's remove that and let's try and create a two-column layout. I want to have one element for the sidebar. Create a sidebar here and then one for the main content. Now if I just hit Save on this, again, display block by default, one sits on top of the other. Let's actually go in here. In order to differentiate these two divs because we want to style them separately, what we can do is either use an ID or a class. ID is reserved for a single element so if I was to go in here, I can create an ID attribute sidebar. If I do this, I can't give an ID of sidebar to any other element, otherwise, things will start to break. On here, I can do a class as an alternative and call this Main. The big difference between class and ID is that with class, I could have another div called Main. If I was to copy and paste that, I could have another div called Main and that'd be okay. Whereas I couldn't have two divs with an ID of the same. That's the difference between ID and class. When we're developing front-end experiences, most of the time we're using classes, even if we're only expecting to use it once. Class works well for most situations. I'm going to call this sidebar but actually, before I do that, I'll just show you how we target an ID in our stylesheet over here. We use the hash for an ID sidebar. Then we would put our styles in here, and that would target only the element with the ID of sidebar. For Main, what we will do because it has a class of main. We use a dot, so.main and then we're now targeting all the elements that have a class of Main. I'm just going to make these both class, so go here. Class sidebar. Let's go over here and then put a dot here because now at class, and let's get these to sit next to each other. Let me put back, I want to see those borders so we can easily see them, border one pixel solid, they can see and now what we're going to do is the sidebar, I don't want to be any bigger than, let's make it a 300 pixel width. Then here what I can do is give it a bigger width of 500 pixels, you'll see they still stack on top of each other. Let's go here and let's for both of them, make this one display inline-block, updating its default behavior of display block. Now as you can see, it's stacking on top of each other still probably because I haven't left enough space. I'll make the main area 400. Of course, it depends on how wide your browser is. If I extend it over here, you can see they do stack side-by-side, let's make this 200 and this 400 and now you can see the sidebar is on the left and the main content is on the right. Now what I want to do is have the sidebar sit flush to the corners and the reason why it's not doing that currently is if we look at, so we've got this panel here, if I put this down and look at the body tag here, look at computed, it's actually got some default margin of eight pixels. As you can see here, margin-bottom eight, margin-left eight, margin-right eight, margin-top eight. Let's actually go into here and I'll target the whole body, there's no dot or hash that goes before it because it's targeting an element and then I will just remove that default margin, so I'll just say margin zero. Then you can see the margin around the whole body, the whole document is now removed. Now here we're using pixel widths, which is not very responsive because the height or the dimensions of the viewport as in the window that we're looking at this page on, can modify. What I want is I want this sidebar to be as tall as the available space, so what I can do is, let's put in a height attribute here and, I can use a unit called viewport height, and this number before viewport height is the percentage of the viewport height that I want to use. I want to use the total available space, I'm going to hit "Save" and now as you can see, the sidebar is now full height and so it's the full height of the window that we're looking at it. If I was to close this, then increases our window size and as you can see, it goes all the way down, that's what we want from our sidebar. Then we can also do over here, it's a bit trickier with inline block, but I can actually use something called calc to do a mathematical expression. I can actually do the other unit of viewport width. I can grab the viewport width and I can remove the 200 that we need for the sidebar. Hit "Save" on that and as you can see, it doesn't exactly work. We'll need to finesse this a little bit, maybe reduce this by 250, 210 and this is where inline block gets a little bit tricky. Then if we go over here, you can see that it'll keep extending all the way to the end, it's going to be 100% viewport width minus the 250. As you can see here in main, it's doing that calculation for every screen size. Now as I mentioned, inline block is a little tricky and it's not really used in modern web development, inline-block is old school a lot of people now use Flexbox or grid, so let's take a look at how we would do this in Flexbox. Here we don't need to put display inline block on the individual elements, instead, what I'm going to do is go into index here, and I'm going to create a div, which is going to wrap around these elements to create the layout. I'm going to call this page container, we can put a dash in here to separate the words and then I'm going to cut this and paste this inside of our page container. This page container is what's going to give us the layout, so we just need to style it. We're going to go into here to page-container, you're going to put it above sidebar main and the order, and I'm going to set the display style, this is the parent of these two to flex. I'm going to hit "Save" on that. Just by putting in display flex, we automatically get the content side-by-side and flexing on our screens. If we were to remove these widths, which I'm going to do it now and hit "Save", you still see we get them side-by-side, but it doesn't know how much of the available space to use. What we can do inside of sidebar is to flex 1 and inside of main as well, I want to use flex 1. We can have a route flex 1 the more specific flex grow. This is as it says here, the grow factor. It's dependent on what other elements are in this container. But if I hit "Save" on this, you'll see now we get a two column responsive layout. If I was to move this, you can see now because grow is set to one on both of them, they're both going to be the same width and they're going to both grow to the available space, so each of them will have half. But we can change the ratio here, which I'm going to do and I want the sidebar to have three times less width, so I'm going to make the main grow by a factor of three. Then as you can see here, when I increase, the main section is going to grow three times as much as the sidebar as you can see here. But we want to give this sidebar a minimum width because we're going to have content in there, so what I'm going to do is add what's called a flex-basis and I want it to be about what did we have before, 300 pixels. I'm giving it an indicator that I want it to be 300 pixels, here you can see that it's now extending this and then I can go here to set the shrink factor, I'll tell it zero, which means that it will never shrink below 300 pixels, 300 pixels is a bit too big, so let's go 150 will go half of that. Then when I can do is summarize all those three attributes in one attributes, I can just go flex, the first one is grow, the second one is shrink, and the last one is flex basis. I can replace all three of these with that one. I'll do that. Hit "Save" on that. You see we get the same result. Now if I click over here, there should be 150, which as you can see, it's a little bit bigger than 150 and that's because the flex factor is still one. I'm going to go here and change grow to zero and that's going to ensure that it never gets bigger or smaller than 150. It's actually got 152 in here, if I go into compute it, you can see that's because we've got border of one on either side, so if we wanted it to be exactly 150, we would have to remove the border, which I guess we can do now. I'll get rid of this border around the devs, hit "Save, " and then if we look at the sidebar, it's going to be 150. Now, to differentiate the sidebar from the main section, let's give it some background color and we'll just make the background color beige. You can see we've got our sidebar, it's never going to be less or more than 150 and then the main content area is going to expand to whatever space is available. It's going to sit next to that within this page container. Hopefully, that makes sense with Flexbox. It's a really nice, responsive, flexible way for us to create two dimensional layouts. But there is in fact a newer way to do layouts in CSS and that is via the display type of grid, which a few years ago wasn't available in every browser, but if we check it nowadays. If we search, can I use in Google and click this first link, we can actually see how much adoption a feature has. We'll go grid. CSS grid layout, you can see it's widely adopted, it's been supported by Chrome since 2017, Firefox has been supported since 2017, but it looks like this, so yeah, it's well supported. If you look over here, it's supported basically by 96.25% of users worldwide, so it's ready for most use cases. With any of these modern features that come out, you might want to check that compare it to Flexbox. You got the flexible model, it's 99.05% of all browsers have adapted to this. These are some of the more newer cutting edge, but CSS grid has been out for awhile, as you can see, Chrome supported it for many years already, so you should be pretty sweet using display grid. In order to demonstrate display grid, what I'm going to do is I'm going to create another div here and I'm going to call this header, so we can put a header that sits across our sidebar and main content. Now as you can see, because I've set it inside this page container which is currently set to flex, and it's going to have them all on the same line. If I wanted to enable rapping, I can type in flex wrap wrap and then if one of them was to get too big, let's just say we wanted our target header here. Let's just say I wanted to make header the width, half the screen you can see and then let's just say we had a flex basis of half the screen here as well and a flex shrink, so it won't be any less than half the width of the screen of zero, then you can see it will be forced onto a new line, but for the most part, when we do something like this, it'll stack all in the one row. Anyway, that's Flex-box. Moving on from Flex-box, let's now change this to grid and then now we'll have a grid style, so this is going to stack on top of each other because we haven't set our grid layout up yet, so we set this on the parent. I'll get rid of these flex box attributes and I'll get rid of the height here to get rid of width 50 and now we have our three divs here. Let's format them by creating our column template, so we create our div, we can go grid template columns, and we do this via fractions. I'm going to create similar to what we had before, one column that's one fraction and then the second one that's three fractions, hit Save on that and as you can see, now we've got that same system that we had before, where the first column is three times smaller than the second column. If I click over here, you can actually see the grid, so if I click on page container, which is where display grid is, we can actually look at the lines of our grid. But the issue here is that our header section which we want to extend across the sidebar and main is in this first column, then it moves on to the next div, which goes into the next column and then the third div wraps around and goes into that same first column. We don't want this, so what we're going to do is go into here and type in grid column start and we want that to start at the first grid line. If we go back to here, the first line here when it shows up, is the first grid line, that right there is the second grid line and then on the other side over here is the third grid line. I want it to start at one and then we can go grid column end and we can get it to end on the third grid line if I hit Save on that. Now you can see that the header extends across both columns, which is what we want. We can actually tidy this up, we can combine these into one attribute called grid column and then we can do one slash three to demonstrate the same thing that just essentially summarizes the two that we had before, grid column start and grid column end, we put it in the one attribute separated here by a slash. Now we've got that same problem before or not problem, but that same situation before, where we've set the second column to be three times bigger than the first column, so that means that when we grow our window width, we're getting that sidebar content growing at a factor of three times less. For this first column, I'm going to wrap this in a min-max, which allows me to define a size range, so I'm going to do the minimum as auto and the maximum as 150 PX save that and now you can see the first column is never going to be greater than 150. Now what I can do also is put in a style here for grid gap, and that will create a gap in-between the grid items. We'll put in a column and row gap, so if we go over here, you can see now we've got this purple area which shows us the gap in-between columns and rows. Another thing we've got here is the page container is the minimum width, it can be basically, we want to make this width 100 and height 100% to cover the available space, so as you can see here, now, the page container is covering the entire space. But now you can see that the header is simply too big, so what we're going to do is put in a grid template rows instead and we're going to put for the first row, 150 for the header and then the second one. Let's do 1 fr, see how that works, I think 150 is too high up, so let's make that 50, there we go. The first row is going to be 50 and then the second one is going to be everything else and now you can see the benefit of that is now we've got the sidebar extending the hallway down the page, and just to make the header super obvious, let's give that one a background color as well. Won't be the sexiest, but let's just make it a nice background color, let's say dark gray, hit Save on that. Now you can see we've got our header in the top row, our sidebar and our main content. Now I like this grid gap between the sidebar and the main content, but I want this header to sit flush against the sidebar, so what we're going to need to do is instead of grid gap, it's column gap and now you can see that there's no gap between the rows, but there's a gap between the columns, there you can see. Using these styles, we can set up a nice little grid layout and if I was to click out of this, you can see that it responds and works no matter what size our browser window is. As you can see here, we've got our two-dimensional layout now starting to take form. Again, there's so much we could cover with CSS, we could color certain elements, we could add borders, we can add border radius, we can change the font size, font family, obviously all that obvious stuff, but the stuff that's perhaps less obvious and more web 2.0 is this layout stuff. The layout stuff is super important and fundamental to building layouts and less obvious than just simply saying, I want the text to be a certain color. Anyone can understand that to setup responsive layouts is the tricky part with HTML and CSS and that's what I've focused in on in this video. We can just Google it if we want something specific, like, make this font bold, how do we do that? It's pretty simple, but this stuff is the more complicated stuff. As you can see, this is very different to the last lesson where we just had this basic styled content that sat on top of each other in a basic information format, now we're starting to build layouts with CSS and moving more into that web 2.0 space. But speaking of modern web development, something that's really important that we do is that we make sure our website looks great on mobile, so obviously a lot of people use websites on their phone these days, so it's essential to have a good mobile layout. It's always best to make sure that our website is responsive and works well on any device by default, but there's certain times where we need to create a specific style for a specific screen width. Let me show you how to do that right now, so I didn't mean to close that down, I just want it to move that to the side. Let me move it over here. If we click this little icon right here, we can toggle device toolbar. Now we can get into different devices here. Let's do iPhone Pro 12. We can also click here to go on different screen sizes, we can do a tablet of 768 pixels wide, a large mobile, medium mobile, and a small mobile of 320 pixels wide, which I believe almost nobody has these days, anyway. Here we can see that everything is just zoomed out, so it's not the best. What I want to do here is add in a special meta tag here to our head. I'm just going to paste it in. Let's have a look at it. Actually, just notice what I did after I hit "Save". You can see that it zoomed in a bit more now and it's more suited to our mobile layouts or our mobile viewport. Basically the tag is meta with the name attribute of viewport and this content right right, width equals device dash width, initial scale 1. Now this is the standard one. I didn't type it out. I just copied and paste it because you just throw this in any HTML document and you'll get this feature. It's very basic. Don't need to go into detail about how to write this. You can just copy and paste this and it will work. We're down here now in our mobile version, and you can see we've got everything the same here. We maybe want to make the sidebar smaller on mobile, but in this case, we're going to need all the space we can get. Let's remove this sidebar completely on mobile. How we do that in CSS is by using a media query. We start off with an at symbol, type in media, and then here we need to open up brackets and specify a min width or max width. A misconception you might have here is you might think that I put in something like device and then put in iPhone and then apply this to all iPhones. But it's actually not like that. We actually have to specify a width. We have to determine at what breakpoint do we want this change to occur. Now, as you can see, we can see these different devices and what widths they have. But a common pattern is to switch the layout at tablet. At 768 is the standard tablet break point. But we can determine the break point however we want. We can even get out of responsive mode here and just reduce our window, test it out, read what's up here, and then write in some media queries. It doesn't always have to be for mobile. But here what we can do is do a max width 768 pixels, open up curly brackets, and now we put in regular CSS that will only apply when the width is 768 or below of the viewport. Let me go into here, open up a class selector for sidebar, and I'll set the display style to none. Hit "Save" on that. Now you can see that the sidebar is gone. If I was to open this up, even if I'm not in responsive mode, my screen width is less than 768 right now. If I drag this up past 768, you will see the sidebar comes back. That style is only applying to what we set it to. Now, the web these days is encouraged to do mobile-first development. We can do the opposite of what we just did here. Just depends on how you want to do it. Set the min width of 768. That means we write up here our default styling, assuming mobile, and then we write our desktop styles down here. That means by default, we don't want it to show. Then once it gets up to 768, we want it to show block. If I hit "Save" on here, we'll get the same result. If I extend this out past 768, we will get the sidebar again. That's what they call mobile-first development, where you write the CSS, assuming it's going to be viewed on a mobile, and then write your media queries for desktop. I actually prefer to do it most cases the other way around. I like to work on desktop first and then create styles for a mobile, switching it back to my preferred way. Now you can see on desktop, we have the regular styles, but then once it gets lower than 768, then these styles start to kick in. That's just a very basic example. We can also say, for instance, if we wanted something on tablet, which is going to be a different look to mobile. Let's just say that our biggest mobile that we're supporting, let's just say 425, we can actually put in another brackets here, put in end. We can say min width of 425 and max width of 768. Instead of display none on the border, actually, let me change this to 4-5. There's some overlap here, so I will do 426. If it is at 425, this will apply. But if it goes up to 426, this will apply given that it's below 768. Let's just change. What should we do with the sidebar? Let's save over here. Look at our tablet view. Let's just make the sidebar. Actually instead of sidebar, we will just go into page container, go up here and grab this. Let's make the max width of the first column. Let's say 50 on the screen size. Now you can see that's probably a bit too low. Maybe I'll make it 100. Then you can see on screen size is greater than 768, we're going to have a first column that's no greater than 150. But then once we get below 768, we're going to want it to be maximum 100. You can see here that now that shows up in our dev tools. Then if we go less than 425, so I'll scroll this down all the way to 425, there you can see that no longer applies. The sidebar, if we click into here, is now display none because this media query is now in effect. That's how we actually create separate styles for different devices. It's done through the screen widths. It doesn't matter if you're on a device or if you're on a regular browser and updating it like this, we could even do responsive queries for giant screens. Let me open up this and we can go over here to large laptop, 1440 pixels. If I go here, we can go to a 4K screen and have a look at styles on a 4K screen. Maybe we want to make the page container a max width for something. We can actually affect any range of screen widths or window widths that the web page is being viewed on. It's not just for mobile, but for mobile, that's how we would target it. We would figure out the max-width of the phones that we wish to support, and then we apply separate styling to that. I did want to throw SaaS in this video, but it looks like we've been talking about this topic for quite awhile. I'm going to separate out talking about SaaS and put that in the next lesson. SaaS is a pre-processor to CSS, so it's very relevant to what we're doing here. Just makes our lives a little easier. If you're interested in SaaS, click on the next video. Otherwise, you can skip ahead to JavaScript. 6. Sass: In this lesson, we're going to talk about Sass, which stands for syntactically awesome style sheets. It's a pre-processor scripting language that is interpreted or compiled into cascading style sheets aka CSS. Now, that probably went all over your head. Basically, Sass, what it does is, as we talked about in the previous videos, there's only three things really, reloading in the browser, or that the browser interprets its HTML, CSS, and JavaScript. Where does Sass come in? Sass actually is CSS with superpowers but in order to run it in our browser, we need to compile it to CSS, and that's where the pre-processor part comes in. What we're going to do is run through that process now and let's build out our application or our webpage a little bit more with Sass. I'm going to drag my browser across here, get this going here. Actually, I might extend this here for the installation part of this video. In VS code, we can go into our Extensions panel here and we can load something called the Live Sass compiler from Glen Marks. Again, if you don't have it currently installed, all you got to do is search in the search box up here, live Sass compiler, and then you can find it here and then you just click "Install". For me, I've already got it installed so it's saying disable or uninstall. Basically, this is the easiest way we can start compiling Sass in VS code. Just so you know, there are plenty of ways and plenty of tools that compile Sass. This is just the easiest way because we can do it without any extra setup. All we have to do is install this special extension and then what we can do is go over here. The button is not showing up yet because we actually have to create a style sheet but we can go over here and create a styles.scss. Now you can see the logo for Sass showing up there and if I hit "Enter", you can now see it's starting and now we have this button for live compilation of Sass or SCSS into CSS. This is technically SCSS and Sass is a little bit different, but SCSS is better in my opinion because CSS is backwards compatible with SCSS. What I mean by that is let me just show you that right now. I'm going to grab all of this code, cut it from styles.css, paste it in style.scss. Actually, I've misspelled that, it's supposed to be styles.scss. As you can see here, this is now empty. If we go over here, we've lost all our styles, but what we can do here is click this button for Watch Sass. Now our styles.css gets repopulated and depending on our settings within live Sass compiler, you can see that we get some extra attributes added. I think in this case it's just one extra attribute and a little reference to a source map here. You can see we've got a source map which helps us trace back code from the compiled code back to the pre-processor right here. As you can see here now we've got our CSS processed and we've got all of our styling back now. Now the last video went a bit longer than I expected. I was actually going to build out some more features into our little web app here. Let's do that and then that's re-factor with SCSS. I'll write it over here. This live Sass compiler is going to watch for any changes in here and then it's going to update. Actually, I'll turn it off for now. The buttons go on. I need to move this. Click on "Watching", get rid of it for now and then I'll delete all of this for now. I got a bit too far ahead of myself there. Let's actually build this out with CSS a little bit more. I want to in my sidebar, create a sidebar menu, so I'm going to open this up. What I'm going to do is a convention similar to what's called BEM, Block Element Modifier. Basically just a convention for how I name classes. This one, because it's inside a sidebar I can go sidebar and if you're wondering what this is, this is Emmett, so I can do dot and then the class name hit tab and it will create a div with that class name. I'll call this sidebar menu. Then you can see we got a div but let's just say we want that to be a list so I can change, put the element name in front of it here, then hit "Tab", and now we get an unordered list with the class of sidebar menu. Then we can get into here and open up some list tags. Actually, we want some links in here, so let's put in some links. I'll put in Link 1 and then just copy this out. Link 2, Link 3, rename here. Now we're going to have a sidebar menu right here and of course I don't want the standard styling of links and lists. In this instance, it might be handy inside the main content, but here we're trying to create a menu so I need to reverse that. I'm going to go into here before the media queries and I'm going to type in sidebar menu and if we look in here and inspect, we can see what styles are actually auto-generated for these elements. I will bring this up. Here we can see our sidebar menu and you can see list style type. If we were to go in here, let's test it out in that browser first, list, style, type, and then you can see here we can change these things here. We can do none. We can remove those dot points. Let me copy and paste that into here, and then also what we're getting out of the box is some padding from the left of 40 pixels. I'm going to remove that as well, padding-left: 0. There we go. I still want some level of padding so what I'm going to do is do an overall setting for padding. Just within that section, I'm going to make it 10 pixels. If we look at sidebar menu, we can see it's got 10 pixels of padding. All the content within sidebar menu is going to be 10 pixels in try like, but then we've also got some margin on the top and bottom it seems so I'll go into, I'll look at computed here. We've got some 16 pixels of margin on top and bottom. I'll remove margins by putting margin zero and there you go. Now I want to get rid of the styling of the link tag. The way I can do that in CSS is start by selecting the sidebar menu and if I put a space, I can select children within that. I'm going to select the list items within it, but then within those list items is, a tags so I can actually do two levels of nesting there. I'm going to look for the link tags within a list item tag within this sidebar menu element. Then what I'm going to do is, let's again reference what we see in a browser here, look down. Text-decoration underline, let's remove that. Text decoration. None. We definitely want the cursor to stay pointer so it indicates that it's a link, as you can see here. We want the color to be, let's just make it black for now. I'll hit "Save" on that and as you can see, they look a lot more normal now. We might want to make them look a bit more obvious that they're clickable. What we can do is add a pseudo-class here. Again, I'm throwing a bunch of new CSS at you in this video, but again, if you want to dive deeper into HTML and CSS, you can check out my other class. But this right here is what's called a pseudo-class. I put a colon here, and then I put hover and so what we can do is maybe we bring that text-decoration back, but only on hover. I'll do text-decoration underline and then now you'll see that we can see that the links or we're indicating to the user that they're links by changing the cursor and underlining it. Cool, Let's create a header menu as well. I'm going to go up here and instead of header, I'm going to do the exact same thing. I'm going to create a UL with a class of header menu, go in here, and let's copy this right here. Save that. We're going to style this one slightly differently. Under header, I'm going to create a rule set for header menu. Same thing again, remove the list style type, and what I want to do is I want it to display not on top of itself. I want it to display across the screen. What I'm going to do is display flex. There you go. Now that they are next to each other, but they're too close, so I'm going to do column gap of 10 pixels. There you go, they're separated. Then I'm going to use this other attribute within Flexbox called justify content center and that's going to put the links in the center. There you can see. Then let's format those links. Again, we can do the exact same thing as last time. header menu UL LI. Actually not the UL because we're already inside a UL. Then we'll set the text-decoration to none and what are we going to do for the color? Black again, let's just say, and maybe we do the same pseudo-class. I'll just copy that put the pseudo-class on the end for hover and then we can style our hover state, text decoration underline. Let's do that. I'll hit "Save" on that. Now we can see we've got our menu in our header and our menu in our sidebar. What we've done here is you can see we've done some nesting. We've got some colors. What we can do in Sass is transform our nesting. Live Sass compiler was turned off. I'm going to open this up. What we're going to do is I'll copy all of this. I'll head over to styles.css, paste that in here, and then we want to make sure that any changes we make here go into styles.css. Don't turn this on and so you have your CSS copied over here. Otherwise, it'll overwrite what you've written here. Then I will click "Watch Sass." It's now watching. And because CSS is backwards compatible with SCSS, it all works normally. Now, let me show you some of the benefits of using Sass. If we go over here, we're going to not look at styles.css anymore. That is just for the browser now. We're going to be working in styles.css. What we can do here is work on our nesting. Now as you can see here, we're repeating ourselves. We've got header menu three times and we've got li and a twice here. What we can do, we can grab this, cut, this, paste it within our header menu rule set here and then I'll fix the indenting here. Because we're copying across header menu, we can instead once we've nested inside, use the "and| symbol. Here we go. We can do "and". Now hit "Save" and you can see now we get in our styles.css, the same result. If I look up here at header menu li a and la i hover that down here. They're separated in our styles.css, which is what we need for our CSS but here they are together. In fact, we don't even need the end in this instance. We can just go like that and then the nesting here is implied by putting it inside the rule set. But we can take this nesting even further. You can see here that li and a is repeated itself. We can actually take this part and nest it inside of here by putting in the end. The end just takes the parent and then applies any additional selection to that. We've got header menu, and then we're going to be applying these styles to link tags within list tags within header menu so you can see how the nesting starts to play out here. That all works the same way now, and what we can do actually to take this even one more step further, is we can use the at symbol to construct a class name itself. See how we have header and header-menu. They both have header in them. What we can do is grab that, cut that, and then inside here, we can do an "and" to represent the dot-header and then we can throw in dash-menu and we get the exact same result. If we look at the CSS, you can see we get the same result as before. Header, header menu, header menu li a, header menu li a hover. It expands it out into the necessary CSS but in our code editor, we get to use this crazy nesting. Personally, I do find this handy when I'm creating class names that go deeper. For instance, we could give this a class name of header menu link. As you can see, we're doubling up each time on the words before it. I find this really handy that I can use the "and" symbol, the ampersand here to reference the earlier part and have it all semantically nested. Now all of our header styles live in this one rule set. Then of course we have all these nested rule sets. We can do the same thing for the sidebar menu. I'll do it from the outside in, I will grab this part, which is the only part that's different to this. Cut this part out, and then put an "and" for hover. Now we can just determine the hover state with the other styles for the standard state. And then of course, the difference between this selector and this selector is the li a. So we can actually just grab that, nest that in here, and then the final step, we can grab the part that's different from here to here, which is the dash menu. Grab that, go in here add the "and". Get rid of that. Now, if we hit Save, look at our result. We get the exact same result. I'd say for me, the biggest benefit of Sass is this nesting feature. Now we've got all the header code in one rule set. We've got all of our sidebar code in one rule set. It can get confusing when you're trying to search the code base. There is some downsides. For instance, if I click on this and I'm coming into a new project and I want to find this right here then I go into the Sass file to change it. I can't search it like that, whereas I could in CSS. I'm going to have to find sidebar menu. where is it? It's not here either. This is where it starts to get a bit more tricky when it comes to searching but otherwise, I really like this nesting approach. The other feature that we can use in SCSS is variables. I can go over here and define variables. Let's just say header color and then what do we have for header color? Dark gray, and then we'll do a sidebar color. Obviously, if we're only using it in one place, It's not that handy, but maybe it's like we can store branding colors here. Stuff like button colors and stuff like that. Components that we're going to use on a regular basis. We do beige here. And then instead of dark gray, we would put the variable and so any color that's stored in header color would apply here. Any color that's stored in sidebar color, would just go through here. If I hit "Save" on that, you'll see we get the same result. And we're always getting standard CSS in our CSS file here. If you look here, there's no variables, there is no nesting that we have in SCSS. That is SCSS code only. It makes it easier for us to work with CSS gives us extra features. But it's super important to note here that the compiled CSS, the part that's actually read by the browser is not going to be Sass. There's some other features within SCSS. We can create functions and custom media queries and all this sort of stuff but I don't want to go too complex in this video and in this class. If you do want to go deeper into Sass, I do have a class on Sass here on Skillshare. Click on to that if you're interested in learning more. The main thing I wanted to get across here is what Sass does. The idea behind a pre-processor, we can create our own language that compiles into one of the three languages that the front end the browser responds to and we can also set up our development environment with a tool like live Sass compiler to compile this custom code, this code that makes our lives easier as a developer into CSS. With that out of the way, let's move on from styling for the time being and talk about interactivity. Let's talk about JavaScript. 7. Javascript: In this video, we're going to talk about JavaScript. Javascript is what gives our web pages interactivity on the front end. I have talked about JavaScript on this skillshare channel in the past. The biggest criticism that I've gotten from my previous trainings on JavaScript is that they're not practical enough, so in this video, I'm going to choose an example that is quite practical and real-world. I'm going to add a sidebar drawer to this webpage, and we're going to have a button to open the drawer and a button to close the drawer. That's a pretty common real-world example and a pretty simple one as well. It shouldn't take too long to code up. What I'm going to do is go into index.html. Here, I've already closed down the SCSS file for now, and I can close down this. It doesn't mean that it's not running anymore. As you can see here, it's still watching, but it's just not going to be in our way as much. I might keep this expanded for just a little bit. Here in main content, we've obviously filled out the header section and the sidebar section, but we haven't put anything in the main content, so let's do that now. Let's give our page a heading, and I'll just say top level. Actually, I'll call this Page title. Then underneath here, I'll put it in the paragraph just to make this look realistic. Then you can see, we've got a page title with some paragraph text underneath it. Then here, I'm going to put a button. In this button, I'm going to write Open drawer. As you can see, we've got our default button styling out of the gate. If I hover over it, you can see the colors change. This is a default button element from HTML. Now, we're going to have two buttons on our webpage. In order to differentiate them and to make sure our targeting is quite specific, I'm going to give this an ID of open-drawer-button. Now, our drawer doesn't exist yet, so we're going to have to create it. I'm going to go into here, let me drag this out again, and I will create a new div with the class of drawer. Inside the drawer, I'm going to create another button and I'm going to give this an ID of close-drawer-button. This button will close the drawer. Then inside the opening and closing button tags, I'm going to put in the text for it, which is just Close drawer. Then if you look closely, you can see that we've got a div falling into our grid now because it's inside the page container. We don't want this, so we're going to move that outside of the page container, and you can now see that it still sits at the bottom because we haven't given it any styling yet. The first thing we want to do, I'll do this within our dev tools, so you can see this happening on the fly. If I press this button here, it's going to set up a selection for that class. Right here, what I'm going to do is write position: absolute. What this is going to do is allow us to position this outside of the regular layout and over the top of the content, which is what we want for our drawer. I'm now going to explicitly position this. I'll make it zero pixels from the top and zero pixels from the right. Then we want to give it a width of half the viewport width. Currently, we can't see it because there's no different background color. Let's just give it a black background color. We also want it to extend the whole height of the page. I'm going to create a height of 100 percent viewport height. Now, you can start to see our drawer forming. I'll put some padding in here so the button does not flush against the side there. Then make sure you do not refresh the page because this hasn't been saved to our document yet, so I'm going to copy those styles that we just set up. Go into our styles.scss. Make sure not to go to styles.css if you're still running Live Sass Compiler or plan to run it in future because it'll override those changes. Then let's go down to before the media queries, copy-paste in our drawer styles right here. The indenting is a little off, but as you can see when we hit Save, it compiles, it refreshes our live server, and as you can see, we've got our drawer over the top. Now, we need to indicate whether the drawer is open or closed. What I'm going to do is go down here and let's use aria, which is a way that we can indicate the state of an element to screen readers. Screen readers are a tool that vision-impaired people use to get websites read out to them. It's good to use this attribute because it helps those people access the website. We'll set aria-hidden to true here indicating to the screen reader that this element is currently hidden. Then we just need to go into our CSS now and write a style rule that reflects that. The way we target an element with a certain attribute is via these square brackets, and then we just put the attribute with its value within those brackets. To get off to the side of the page, I'm going to right negative 100 percent. The reason why I'm moving it off-screen rather than hiding it like this with display: none is because we can't add any keyframes between on and off if we want to animate the drawer open and close. Instead of display: none, what I'm going to do is to right negative 100 percent. Therefore, we won't be able to see it on the page unless of course, the user does what I'm doing right now, which is to scroll the page horizontally. Obviously, this is not nice, so I'm going to head into our styles for the body tag and set overflow-x to hidden. This could be a problem in the future if we wanted to scroll the page horizontally for any reason, but for now, this hack will work. From this point, all we need to do in order to open this drawer is change the aria-hidden attribute to anything other than true because it's only right negative 100 percent. If the attribute is true, by default, it's going to be right 0. I also have to put in the style here for the transition, so we're going to animate the right attribute. We're going to give that a duration of half a second, and the speed curve, we're going to set to ease-in-out. Now that we have those settings in there, I can update this value via the dev tools by manually changing it. In the Elements tab, I can change it from true to false, and then you can see the drawer will animate in. If I change it back to true, it will then animate out. Now, of course, users aren't going to come into the dev tools and change this, so we need JavaScript to provide this interactivity on the front end to the end users. Let's now create our JavaScript file. I'll extend this window out here. Instead of doing side-by-side for now, let's open up our file explorer here and create a new file by the name of scripts.js. The scripts part is not essential. We can call it whatever we want, just as long as we name it with the extension of.js that's essential for JavaScript files. Then we need to link this external script file in our HTML. If we go down here, let's put it before the closing body tag. We can create a script tag. Within the script tag, we can put the JavaScript literally here, but instead of that, we're going to just link it to an external style sheet which is the one we just created. I'm just going to type in the path to that file which because it's in the same folder here, we can just write scripts.js. To verify that that is actually linking correctly, let's put in a simple console log. All this does is output a message to the console. This command right here is very handy for debugging, but for now, we're just going to output the words hello world. If I go back to my browser over here, refresh, and then we go over to Console, you can see the words hello world come through. If I refresh again, you can see after the page loads it'll then load this hello world text. That verifies that the script is in fact linked, and so here we can start to build our JavaScript. As mentioned, we're going to use our JavaScript to open the drawer, so what we need is an event listener on the button. Then that event listener is going to target this drawer and then change the right to zero through this aria-hidden. If I just go false, then it's going to open and then we're going to put another event listener on this to close the drawer. Let's go over here and let's target that first element, this Open drawer button. Refresh over here. Close the drawer. How we do that is we start with the document object. Then within the document objects we have a few options here, we can use querySelector which is a catch-all method that we can put in here a CSS selector and it'll grab the first element that matches this selector. It's the same thing as in our styles. If we were to target our sidebar, we can do it like that. In this case, we're targeting this specific button which has an ID so we could put the hash there and target it like this. Or we can use the method getElementById, and then we can put in the ID. Now we have the element selected. What we can do is add another method here called addEventListener. The first argument is what we're going to be listening for. We're going to listen for the click event. Then the second one is the function that we want to run. I'm going to do it the old-school way like this. Then inside here, just to double-check that this event listener is set up correctly, I'm just going to do a console log. Like I said, console logs are very handy for debugging and stepping through a large process. This one's a bit of a smaller process, but we can double-check the event listener is working via this console.log. Here if I click on "Open drawer", you can see in the console here, click comes up and if I continue to click it, the number next to click goes up. That's what happens when you're console logging duplicate values. That's good. We know that we're selecting the element all right and we're actually able to attach code to the click event. Now I'm going to go in here and target the drawer. For this, I'm going to use querySelector. There's another one there called querySelectorAll and that one is for creating an array of elements in the case that you want to select multiple. We just want to select the first one that matches our CSS selector and that will be drawer. Then what we want to do is run the method setAttribute and because this is a button for opening it, we're going to set the attribute aria-hidden to false, so it's not hidden. If I hit "Save" on this, go back over here, click "Open drawer," and you can see that it's opening the drawer and if we look behind the scenes at the actual drawer code, you can see here aria-hidden is true. Look at what happens to aria-hidden when I click this button. As you can see, it's updating our HTML and making this false. Cool. We just need to follow the exact same process again with the Close button. I'm going to go into here. Instead of Open button, close-drawer-button and instead of false, true, but we can recycle all the other code. Refresh over here, Open drawer, Close drawer, Open drawer, Close Drawer and it's as simple as that. Now, this is a very small project and I'm serving it locally, so it's not on the Internet. Everything is loading super fast, but in the future, if you want to put this into a production environment, it's good to wait until all the elements on the page have loaded before you start to load these event listeners because there's a chance that you could try and attach an event listener before the JavaScript is able to find that element. What I'm going to do is just for completeness sake, add in another event listener that will wrap around our whole JavaScript code. This one is placed on the document object. We're going to add an event listener for this event called DOMContentLoaded as you can see here. It doesn't actually say much, but basically, DOMContentLoaded is when as mentioned, the DOM content is loaded, so the content on the page is loaded. I'm going to grab all of this and then move that in there. That'll just ensure that all the content is loaded before we try to attach these event listeners because we will get an error if we are unable to find an element with an ID of this. To solve that timing issue, we'll put in an extra event listener here. Quite a simple example there, but quite a common one, and I hope you agree practical example of using JavaScript to create interactivity on your page while opening and closing another element on the screen and of course, we would want to put some content in here, maybe some navigation, maybe in the case of an e-commerce website, you could have your shopping card in here, anything you want really, but now we at least have the ability to open and close this drawer using JavaScript. If you want to go deeper into JavaScript, obviously I've got my other classes here on Skillshare. You can go and watch the Web Development Fundamentals JavaScript class for an in-depth class on JavaScript. Otherwise, we're going to move on now and talk about TypeScript, which similar concept to SAS is a pre-processor scripting language, except this time it's for JavaScript. We'll see that in the next video. 8. Typescript: In this video, we're going to learn or at least introduce TypeScript. TypeScript is a similar concept to SASS versus CSS. CSS obviously is what gets run in your browser. JavaScript is also what gets run in your browser, but SASS is something that we can use to compile to CSS to help us as developers, same thing with TypeScript. It is a separate script that is a superset of JavaScript. We can put JavaScript into TypeScript and it'll work just like we did with SASS, but the difference is with JavaScript, it's a programming language. It's different to CSS in the sense that CSS is simply style sheets. The features that make TypeScript worthwhile are much different to SCSS or SASS. As it mentions here, it is a strict syntactical superset of JavaScript and adds optional static typing to the language. This is very programmer E. If you're a beginner listening to this, this could go over your head. If you do want to skip this lesson, you can feel free to, but I wanted to throw this in as it is used in modern front-end web development. It's gotten very popular in the last few years and a lot of people are using it. For me even it took a while to understand the benefit of using TypeScript, but by the end of this lesson, hopefully, you understand what TypeScript is for and if you actually want to use it. Let this be your intro to TypeScript. If you don't wish to use it, it's not essential unless you work with a particular development team that uses it. If you want to learn more about TypeScript, the website is right here, the first website link that comes up on Google. Now in order to use TypeScript, you're going to need Node and NPM. If you don't know what those are, you can go to nodejs.org. Nodejs is an open-source, cross-platform JavaScript runtime environment. Essentially, all that Node is is the ability to run JavaScript, a language that was built for web browsers on your computer, on a server, so you can use that. Then NPM, which stands for Node Package Manager, which you can find at npmjs.com is a package manager essentially. We're able to install different packages that people create. You can search them here. You can think of these packages as different modules, different pre-built code that other people have made that we can install into our project and globally to our system. To verify that you have node installed, you can run node -v. Then to verify that you have NPM installed, you can run npm -v, and then you can run tsc --version to see the version of TypeScript you have. If you don't have TypeScript installed, you'll see that it says command not found: tsc. Then what you want to do is run npm install -g typescript, and that will install TypeScript globally to your computer. What you just watched was a pre-recorded video because I've already done this, make sure that you have node and NPM installed. Then if you haven't got TypeScript installed, follow the commands that I just mentioned. I'm going to close this down and I'm going to close this down. With that installed, we can actually create our first TypeScript file. Actually, before that, we need to create a tsconfig.json file here, which is just our TypeScript configuration file. Here you can see it's in this format called JSON, which is just a way of storing data. Let me just fix up the indenting here. You can see we've opened up this object. We've added this compiler options object and then we've added es5 for target, commonjs for module, and set source map to true. As you can see in these comments, I've tried to explain what each of these is doing. This first one sets the target version of JavaScript we wish to compile to. The second one sets the style of module. Then by setting source map equal to true, that is going to, at the point of when we transpire our TypeScript, it's also going to generate a map file and that file is what maps the transpiled JavaScript file to the original TypeScript file, allowing the original TypeScript code to be reconstructed while debugging. As I said, this is getting a bit technical and a bit high-level, but we will see this working pretty soon. What we can now do with our TypeScript config file here is run the TSC command, which stands for TypeScript compile, but of course, we need a TypeScript file first. What I'm going to do is just like we did with styles.css. Let's just rename this to ts and now this becomes a TypeScript file. Remember, TypeScript is a superset of JavaScript, so it's backwards compatible. We can just put pure JavaScript into a TypeScript file and it should work. Then let's open up a terminal. I'll switch over to here to do terminal and then let's simply run tsc for TypeScript compile. Now you can see that our script.js and our scripts.js.map file has been created. If I look inside here, you'll see it's exactly the same apart from maybe some whitespace being cleared out and then this comment here which maps this file to the source map, which like I said, when we were setting up the tsconfig file, allows us to map the JavaScript file to the original TypeScript file and that helps us while debugging. Don't worry too much about the map. We're going to be working with this file and then of course we're going to be right here still loading in the same output scripts.js file, which currently looks the same as our TypeScript file, but that's because we haven't actually modified this to be more TypeScript E. Now the reason why it's called TypeScript is because we can be more specific here in TypeScript by defining what objects are what types because in JavaScript is very loosely typed, so it's not often clear what type objects are. We can actually specify certain objects as certain types. Let's actually do that right now. As you can see here, I keep making reference to similar objects. I've referenced the drawer twice and then I've referenced the open drawer button and the closed drawer button. Let's move these off into their own variables. Actually, let's move them into constants. There's two ways to set a value, while there's actually the original var in JavaScript, but now we prefer to use either const or let. Let is if we expect the value to change later. But when we're targeting specific DOM elements, we're not expecting anything to change. We're just creating a reference to that element. If I can learn to spell correctly, I can just copy and paste it actually. I can grab that and then set that to open button using Pascal case there and then I can target the close button by grabbing this right here. We're just re-factoring our code here. Obviously, this code works, but we're just making it a little bit nicer. Remember TypeScript and SASS are for the developer experience, not for the end-user, and then this one is the drawer. I'll just call this the drawer. Then we've got all of our references up there. Now what I can do is re-factor this, replace where this shows up in the code with this variable name or this constant name. I'm going to go in here, I'll open button. We're going to add the event listener too. This just becomes drawer. This becomes closeButton in Pascal case, closeButton, and then the drawer again. We can just replace this with drawer. Now if we hover over openButton, you can see that it says HTMLElement. That's the type. If we hover over here, HTMLElement and then here is Element. We can get more specific and start writing some TypeScript here by saying as and getting more specific. The open drawer button is actually a HTML button element. We could go in here and type this: HTMLButtonElement. Now if we hover over here, you'll see that the type is now more specific. Instead of HTMLElement, it's now set to HTMLButtonElement. If the type hasn't been detected automatically, we can specify it here as buttonElement. Then this one is just Element. Here we can say HTMLDivElement. Now our code knows exactly what type of element this is, but this is not particularly handy just yet. It was difficult for me to figure out a really practical but simple example of using TypeScript with what we've built so far, but I've figured out a way to incorporate a function here, and I'm going to call this function toggleDrawer. Depending on the state of the drawer, it's going to open or close it and we can actually create a button if we wanted that does both open and close with this method. I'm going to create the function in a new school way and I'm going to put here a variable to specify whether we want it open or not open. IWantItOpen is what I'll call it and then I'll use the arrow syntax to create the function. Now we have a function with a single argument. Here I'll do a simple if then. I'll say, if IWantItOpen, then we're going to set the attribute of aria-hidden on the drawer to false. Otherwise, we're going to set it to true. Now if I hit Save and I hover over, you can see that after IWantItOpen, it says any. Here it says parameter IWantItOpen implicitly has an any type, but a better type may be inferred from usage. Instead of the parameter being an any type, we can specify what type we need it to be. Obviously using it as a boolean here, so I'm going to put in a colon here and say boolean. For those of you who aren't as advanced in programming, boolean means just a true or false value. Now we're making sure that when we run this method, we definitely have a boolean argument going through the method. What I'm going to do down here is on the openButton click, I'm going to run this function called toggleDrawer, and we want it open in this instance, so I'll pass through true, and we don't have any errors showing up. That's good. Then under here, I'm going to put toggleDrawer false. I've written everything fine here, so nothing is showing up wrong. If I compile the TypeScript, and you can see here it compiles to JavaScript. Then I can open and close this. We get the exact same result. Why would we use TypeScript? Well, let's just say that we weren't using TypeScript and I accidentally put in, let's just say a string here. If this was a JavaScript file, we wouldn't get these squiggly lines through here because we wouldn't have specified that the argument has to be a boolean. Let's just grab this and I will put this directly into scripts.js here. Then of course we can't write that because we're no longer in TypeScript. I'm just going to remove all of this TypeScript code and just leave the JavaScript code. I'll hit Save. We've still got this one here. We've updated our scripts.js and we've put the string value of true and the string value of false in here. That might look fine to us. If we refresh the page over here, click 'Open drawer', it'll open it, but it won't close it. Why is that? That's interesting. If we go into our console, there'll be no errors, because from JavaScript's perspective, we haven't done anything wrong. That's what I mean by loosely typed language. It's not very strict JavaScript, so you can make these bugs and there's no error, so you don't know what the issue is or how to fix it. The issue here is that we're looking for a boolean here if IfWantItOpen. The truth is that either of these are going to show up as true because they're both not empty strings. If I go in here and assuming that it's always coming up as true, then this console log should run. I'll just say, IWantItOpen is true. If I hit Save on that, go over here, and let's look at our console. If I click on 'Open drawer', IWantItOpen is true, yes, fair enough. But if we click Close drawer, it still says IWantItOpen is true. That's because of something in JavaScript called truthy values. A non-empty string is a truthy value, so therefore it's true even though the text content is false. Now of course, that is a little bug that might be hard to decipher in JavaScript, but if we were running TypeScript, you can see here that we get these red squiggly lines. It says an argument of type string is not assignable to the parameter of type boolean. It was specified that it has to be a boolean up here next to our argument, so it's only expecting a boolean and therefore we'll get an error before we even run the compile. Then if I hit tsc, you can see that it won't even let us compile because it's determined errors before we even get to the end result, before we even get to production. That's good. We rather capture our errors early in our development than see them go live and then have to figure out the bug. That's what the benefit of TypeScript is. As you can see, it won't let us compile it until we fix this issue. We just listen to the error message within TypeScript, and then we set these back to booleans. We've eliminated all the squiggly lines. Let's run tsc again. Great. There were no errors. If I run my web page again, there you can see everything's working fine again. There you go. That's TypeScript. That's as much as I'm going to go into today. TypeScript, again, it's one of these topics that you could create a four-hour course on and it's more program E, so not really for beginners, but if you do see it in use in a project, you at least know what it's doing. It really is a pot of modern frontend web development these days even if it's a little trickier to understand. I wanted to include it so that you guys can see some of the tools that we use in frontend web development in action. That right there is probably one of the more advanced lessons, probably the most advanced lesson in this class. I'm moving through very quickly here. Congratulations if you're still keeping up. I'm going to leave it there for TypeScript. Let's move on to talking about JavaScript frameworks in the next video. 9. Javascript Frameworks: In this video, let's talk about front end frameworks. I've currently got the state of JavaScript. It's an annual survey. I've got the website for that up on my screen right here, and we'll talk about some of the more popular JavaScript front-end frameworks just doing a little bit. But before we get into that, I want to take a step back and discuss jQuery. JQuery was the JavaScript library that I talked about in my first Skillshare class called Understanding Web Development, and jQuery was very popular back in those days, back in 2018 and before, because what's called a Vanilla JavaScript, which is JavaScript's without any library or frameworks, wasn't as advanced as it is today. So as you saw in the video that we just did with TypeScript and JavaScript, we were been able to do all of this without any jQuery, and we're now able to do so many of the functions that jQuery allowed us to do in the more modern versions of JavaScript. JQuery has become more and more obsolete, but that's not the only factor. There is another factor, and that is that we are getting more into this world of web apps now, where websites are becoming a lot more like programs that run in your browser and less like websites with minimal functionality. If you have any experience with jQuery or I've taken the class before, you'll know how jQuery works. It's very similar to what we did over here where we grabbed different elements. We added event listeners to them, and then if certain events were triggered, we would trigger other stuff. We can do all stuff working with the DOM, aka the Document Object Model, which is basically all the elements within our HTML document. We can modify them using jQuery, but now almost just as easily through Vanilla JS. Vanilla, again, meaning that it's not attached to any library or framework. It's just pure JavaScript. JavaScript as the language itself has caught up in terms of functionality. But for things where we're managing state, like we're bringing data onto the front end and then we're manipulating it on the front end in real time, we start to benefit from something like a front-end framework. Now, I know that sounds very conceptual and theoretical at the moment, but you'll see as I build something in Vue in this lesson, how it actually makes sense to use a front-end framework. Before we do that, let's look at some of the popular front end frameworks and libraries in use today. Here, according to the survey, you can see which ones are popular, which ones are on the decline, which ones are on the incline by the time you're watching this 2022 might not be the most recent surveys so Check back on the state of JavaScript website and you can see which frameworks are still popular, getting less popular, getting more popular. But the three main big ones are React, Vue, and Angular as written here. But as you can see, Angular has really dived in popularity, and this one called Preact, which I've never used before is more popular than Angular by looks of things. Ember was something that was popular back in the day but continues to decline. Svelte has gotten very popular. There's new ones popping up all the time. It's really crazy. There's just too many to talk about. But the ones that have been around for awhile, React, Vue, and Angular, they're still quite popular. Obviously, Vue has declined a little bit, but React has declined a little bit too, but that's because the competition has increased and there's all these new ones, but the main three ones were React, Vue, and Angular. Now, the majority of my experience is with Vue JS, I think it's easy to get started with Vue and it's the one I use the most. In this video I'm going to demonstrate what a front-end framework does in Vue, but the same concepts of using a front-end framework should apply to React, Angular or any of these other front end frameworks. Now before we build some front-end interactivity with Vue, let's actually look at an example in the real-world. Right here is an e-commerce website which I helped to create, and Vue is used in a lot of places here. If we go into a collection page, let's look at the old boots collection. If we scroll down here, you can see that we've got these filters here. We can filter by men's, women's, or kids, and that filter gets added here, and this is all without reloading the page. We've got lots of front-end interactivity here. This is actually utilizing an API and digging into the back-end data. But as you can see here, there are no products found within those price ranges, and we can filter by color, and this is providing us front-end interactivity. We've got our state here, which is the state of the collection filters, and I can update the state on the fly and the page responds to that. The same thing can be said for if we look at a particular product. You can see here the variant selection. Here, there's not a lot changing when we change the variant, but as you can see here, the Size 7, there's only one left. If we switch to 7.5, it's automatically determining the stock level and showing us a low in stock notification. Some of these have multi-variants, I think the the black one here. We can load more dynamically through here. Here we go, the Kununurra one, I think he's got multiple dimensions. You can see here, if we select some options and find a variant that doesn't exist, it will say, sorry, this is not available and hide the Add to Cart button from us. But if we do select one that is available, we have a cart here, and this cart is Vue as well. We can update the number of items in this cart, and then the subtotal here and the subtotal here is increasing, and we can even remove that line item completely all without reloading the page. You can see we've got some app functionality within our front end page. This is a big step up from Web 1.0, which is just displaying information on the page. Let's actually create a similar type functionality here. Let's refactor the drawer code and then we'll add in something else. For the Drawer, let's move that button out of the main content, and maybe let's put that in the sidebar menu. Let's see. Open drawers, closed drawer. Okay, cool and then let's replace this with a product page. Bear with me here, I'm going to create a product div and inside this product div, I'm going to have two columns, one for the product info and then one for the image, and let's make this static to start with. I'll grab a couple of images and insert them into our folder here. The product in question is going to be a shoe, so we've got white with black stripe and the second variant is going to be the opposite black with white stripe and these are both WebP images. I'm going to go back here and let's start with black with white stripe. I'll put that image in there, and then I will put in the product information for this shoe, which is a Nike shoe. This is a Nike Air Force 107. I believe the name Air Force is two words. Then I'll create a div with the class of price in here. I'll put the price of 170 underneath it. I'll put in a drop-down to select what variant we want. We did this in the video on HTML. We can put it in the option, black with white stripe. The only thing we didn't do it last time is set a value for this. The value is this going to be black with white stripe. There we go, and then the second value is going to be the opposite. White with black stripe and then here, white with black stripe. I'll hit "Save" on that. Let's have a look at what that looks like in our browser. As you can see here, the image is gigantic and there's some styling that needs to be done here. Let's go back. We're still using SAS here. Go into styles.css, and let's go before the media queries. This is not supposed to be here, that's only supposed to be on the output CSS. I'll get rid of that, and then here we can put in the styles for product, and because we're using SAS, we can use all the nesting available to us. What I'm going to do is, I won't talk too much about my thought pattern with these styles because we've already talked about CSS, but I'll just throw in some styles here to get us going because in this lesson, we're going to try to learn about Vue. I'm going to set the product to display grid and then our template columns are going to be 1FR, one, so two equally sized columns. I'm going to make the max width of this area 100%. Sometimes the image boundaries can go outside of its container, so we want to avoid that. I'm going to give this whole area some padding, 20 pixels of padding, and then a column gap between those two columns of 20 pixels as well, and then because we're using SA, I can just nest the image that's inside of the div with products and I can affect that as well. Again, we want the max width to be 100%, and I don't think we need to specify start and end. If I go over here, that's okay. That should work. I'm not sure why that is the case. Malfunctioning a little bit here. Let me load it again. There we go. Here we go. We can still open our drawer or we can look at our product page and see our image there. I think it makes more sense to have the image on the left side. I'm going to move it over. Image on the left and then product info on the right. Here you can see when we change our dropdown here, nothing happens because of course, we need to update the image, the price if required, and any other information when we update with here. Now, let's first try this in Vanilla JavaScript and see how it works. This time I'm not going to put it in the scripts here. What I'll do is I'll put it in line so we can see it on the same page. Go underneath here, underneath products, and type in the script. Before I write any event listeners for interaction on the page, I'm going to create an array of variance, so I'm going to say product_variants. I don't think we need this right now. Give us some more space. That's nice. Then I'm going to open up an array, and this is going to be an array of objects. Let's do the first attributes. So every variant is going to have an ID given an ID of one style. This is just going to be what's in this value field, so the first one's going to be black with white stripes or white stripe singular rather. Image is going to link to the image address. With the black with white stripe, we've got it there. Just copy that address, and then the price of 170. I'm going to copy this object, create the second variant based off of that. The ID is going to be two, and then instead of black with white stripe, white with black stripe. Then let's make that slightly different in price so that we can have another thing change on the page. But in reality, they're both the same price on Nike's website. Then now we can start to write our event listeners. Like I showed you before, I want to make sure that the elements on the page have loaded first, so I'm going to add an event listener for that event DOM content loaded, then open up a function here. Now this will only run when everything on the page has loaded, and so when that is the case, I'm going to target this select here. Let's give it a class, class of products, variants select. Let's just call it that. I'll go down here. Documents. Actually, let's split these. You can see it up here. There's a select right here that we're targeting. Documents, query selector, and then we can target it by that class. Remember we're putting the dot in there first to signify class, variant select. That's going to give us the select element, which is the dropdown, then we're going to add an event listener for the event of change. When that's changed, then we're going to write in here a function. I'll close down this. We actually want to grab the element where the change is happening, so we can do that by putting in an argument here and then what we can do is console, log that out. Before we get any more ahead of ourselves, let's just verify that this is working. I'm going to be able to find the event current targets, so that means the element on which the event has triggered. Let's open up our console, and then if I change this, you can see that we get the HTML for the select return back to us. What I'm going to do is chain the value here, hit "Save" refresh, and here you can see the value is white with black stripe. When I select black with white stripe, we're getting the value back. Now what we can do is I will comment that out and let's return the object from this variance now that we know which one we're trying to select. First of all, I'm going to store that value as its own constant, so I'm going to say constant selected style equals that value that comes through. Then I'm going to select the product variant by using a Find method. What we can do is target the whole array up here, and then we can find a specific item in the array by using find. This might look a little funky but inside the function here, we're able to pass through each of the variance, so I'm going to type in variant, name that. Then in here we put the condition after return of the variant object which we wish to come back. Return variant style, which is the attribute we're trying to match on with our currently selected style. Now, let's console log to see if we've got that object coming back successfully. Product variant refresh over here. Now if I switch over to here, you can see we get the whole object back now. We can use this object to update all the different things on our product page. Then it's just a simple matter of specifying everywhere we want this to change. We need to select all the different elements and manually update their attributes. Let's look at the image, so we'll go document, query selector, and then we'll do products, image. We're using a CSS selector to find it here, and then we'll update this, the SRC to the new product variant that we've selected, and we'll find the Image attribute of that. Then we're going to update the price, which I think is the only other one here until we start to add more product price, and then for that one, we just need to change the inner HTML product variant dot price to pull the price off of the object. All right, hit "Save", refresh, and now you can see when the change event is triggered, we determine the object that has all the information, and then we manually swap out the inner HTML of this element and the SRC of this element to change the image which aligns with the newly selected object. Now when a simple example like this, there's only two points where we're changing information. It's perfectly okay to use Vanilla JavaScript here. But the issue we have here, it's not really an issue, but it's something that can be improved upon is that we have to specify. This starts off with a certain SRC, with a certain image, and this starts off with a certain selected option, a certain price, and then on each selection we need to find the variant from the list here, which is fine. But then we have to manually update all the elements. There's only two here, so it's not a big deal. But when we start to have a bigger project, there's going to be a product description, maybe different variants, data that feeds off the other data, it can become unmanageable. That's why we have something like a front-end framework. We have a front-end framework for multiple reasons, but one of the big reasons is reactivity. Now, in order to understand this, we're going to have to see this in action. The way I'm going to do it now is we're going to refactor this code in Vue. Now let's talk about Vue. Vue is one of the three popular front-end frameworks that I mentioned at the start of the video. React Vue and angular, and Vue is the front end framework that I've had the most experience with, so I'm going to use Vue as the example for this video. Vue's also very easy to set up and bring into any project on the web. Whether you use the CLI to build a whole app based on Vue, or you just bring it into certain pages. Vue's pretty flexible, and therefore, I like to use it and I think it's a good choice for this video. If you want to learn more about it, you can go to Vue js.org. There's different ways you can install it, but we're going to use the CDN method. CDN, meaning Content Delivery Network. We can basically bring in the script from an external source, and then start to use it in any HTML file. I'm going to do that, I'm not going to use this one right here. I'll use, if we go back here, let's now comment this out because we're going to do this in Vue. Before the script tag, I'm going to insert our reference to whatever is the latest development version of Vue, which is what we'll get from here, https://umpkg.com/vue@next. Then what we're going to do is underneath here is create our Vue app. We need an options object, so I'm going to call this options. This is going to be an object and this is where we put in all of our settings for the Vue app, and then here I'm going to write Vue creates app. The first and only argument is going to be those options, that object that contains the options. Then I'm going to chain a dot mount method, and then we need to figure out where we're mounting this. Let's go into this main area here, and let's run the app in this div. I think we're already inside the div, so let's just move outside. Here's the full div for the main section, so I'm going to copy and paste that or cut and paste that to under. We want to keep it outside of the div that we're targeting, and let's call this Vue App. Then we can go down here, mount Hash Vue App. Inside these options we can store data, so we do that by throwing in a method, and then this method returns an object, and then this object we can put in our product variants. We can just copy these two objects and throw them in here. They're commented out at present, so I'm just going to remove those comments, and now we've got some data on our Vue instance, this product variants array, which contains the array of all the different product variants. After this array, what I want to store is the currently selected variant. I'm just going to do that via current style, and we'll set that to the default, which is black with white stripe. That's our data, the current selection, and then the two objects which make up our variants. This could very well be multiple objects, this is just a basic example. Now, all we're going to do is outside of this data method right here is insert something called computed. Open up an object inside computed, and here is where we put in computed properties. Computed properties are reactive properties, basically any data that we use within the Vue instance in order to create these. If that data gets updated, then these computed fields get updated as well. This is a perfect place to put in our current variants, which will store as a method here. With computed variants, we just want to return a single value. But a single value can be dependent on other data that we have within our Vue app. Just like we did here down where we found a variant on this product variants array, we're going to do the same thing up here, but we're going to do it in the ES6 way, so the more modern way. What we're going to do is we're going to go this, which will give us access to the Vue instance, which we can then dig into the data, and then we're going to say productvariants.find, and then the short version of what we had down here, variants where the variant style is equal to the current style, but we have to say this.currentstyle. There we go. That should be enough. Now that we've set those options, just the two variables here in our data and the computed property, we can now update our HTML within this Vue app with special Vue attributes, and this will ensure that all the data inside our HTML here is up-to-date. Here, in order to make this dynamic, I'm going to replace the src with a colon, and then in here we will put in the data from current variant. I'm going to say currentvariant.image. Here for the price, I'm going to remove that and add an attribute here called v-html, and we want to set that to the current variant price. Now down here, we don't need this class anymore, we just need to add the special Vue attribute of V model. Any values that we set here will go directly into the data stored in our Vue app, and so we're going to get the data of current style to model the selection within here. I'll hit, "Save" on that. Now let's refresh and go over to our page here, and let's see if it works. We switch over, and now you can see the price is changing and the image is changing, and that's all done dynamically. In fact, if you have Vue DevTools installed, so if I go over here, I think I need to reopen my DevTools here. You can see there's a tab for Vue. I've got Vue DevTools installed and you can see here live representation of the data in the computer. You can see here the currently selected variant is Number 2, which is consistent with the current style of white with black stripe, and you can see here the raw data for product variants. If I am just switched this, you can see the current style changes and therefore with it, the current variant. Now what we're doing is adding in variables here for the src, for the price, and that is updating when we update our current style, which is linked to now to whatever we select here. We just have to do a little bit of basic setup here, and we now get that automatic reactivity. Now you might be thinking that took about just as much code as we did down here and just as much time to set up. But when the app gets more and more complex, the reactivity becomes even more important. If we were to add, let's just say a description in each of these description, and we'll say it's a black with white stripe shoe, and then we'll change the description over here to be it's a white with black stripes shoe. Now we can easily just go in here, create a new div, put in V-html, and then grab from the current variant, the description. Throw that in here, now if we refresh over here and we change this, we're changing more data on the screen. Obviously, it's not set up perfectly, the styling isn't amazing. But as you can see, when we start to store more data, more state into our page here, the reactivity component of Vue becomes very handy. I hope you can see that obviously, the more complex the project gets, the more a project benefits from Vue. But as you can see, it's a different paradigm here. Adding in these dynamic values using these Vue attributes in our HTML compared to having to run these event listeners, and then manually update the content using Vanilla JavaScript, which we had down here. That's a look at an example of a front-end framework in the form of Vue and how the reactivity comes in handy. Again, if you don't want to use it or you don't understand it, you don't have to, this is an optional feature, but something that's really popular in front-end web development, especially when you're starting to build out super interactive websites and web apps. But of course, it's not required, you can always use Vanilla JavaScript like we did earlier in this video if you want it to do that. If you don't feel the need or don't see the benefit of this, then feel free to skip it. Trust me when I say this, if you do start to get into more complex projects with lots of interactivity, you do start to value something like a Vue or a react when you start to get into those situations. 10. Tailwind CSS: In this video, we're going to talk about Tailwind CSS which is an open source CSS framework. The main feature of this library as it says here is that unlike other CSS frameworks like Bootstrap, it does not provide a series of predefined classes for elements such as buttons and tables. We talked about Bootstrap in understanding web development. It was super popular back then and still is popular, but the thing about Bootstrap is when you use it on websites. They all seem to look the same. Tailwind is not like that by comparison. Instead of a component library, it's a set of utilities, and what these utilities allow us to do is write less CSS and use these utilities instead. You'll get what I mean in just a second. Let's have a look at the website and their website is pretty good as you can see here. You can see it happening in real time here. Instead of writing CSS, what you can do is just add in special Tailwind classes into the div and then it will update it on the fly. Here you can see we're updating the texts, we're updating the layout. It's all happening without jumping into the CSS and you can see here we can even do media queries from within the HTML as well. We can change the attributes based on the screen width from within the HTML. Now personally, I'm not a huge fan of throwing in so many classes within a single element. You can start to see the HTML starts to get a little messy when you use this, but what you can do to mitigate against that is create your own classes and then apply this in a class and then replace this right here with a single class. That's what I'm going to show you in this video as well. Here you can see more about it. Let's see what else they're talking about. Yeah, like I said, it's not particular components, it's utility classes, so you can create your own components here, but use these utility classes which have set definitions too, so you'll see that it forces us to snap to a certain Grid. Well, it doesn't force us, but encourages us to snap to certain different size increments, and that helps us to create a more consistent design as well. It's good if you don't understand design, you can just take guesses within seen. It also comes with color schemes, so I think I saw something about the color schemes down here. One of them is called Slate. This is actually a really nice front page. You can see here text-slate-500, so you can use these color schemes. One of them is called slate. You can see examples on the front page, but you have to actually go into the documentation. Here we go. We can go into docs, color schemes or Text-Decoration Color. How do we get into the color schemes if I type in slate? Sometimes the documentation is a little bit hard to search. Here we go. Under Customization you can go to Colors and you can see here we've got these color palettes here which are nice, so if we choose one color palette, we can choose to create our app in these different shades of that color. Anyway, we'll see this all in practice very shortly, so what we need to do is create a Node project for this. We can use a CDN, but it's not as easy as what we just did with Vue. You saw here that instead of installing the Vue package, we just took vue stored on somebody else's server and brought that in here. For this we're going to actually bring in the Tailwind code, and the benefit of that is that we're not relying on an external server, especially when we're running so many different things at once. If we add making too many external requests to grab libraries, then that's going to slow down our app and could result in it failing, so what we're going to do is create a node project here. The benefit of turning this into a node project is we can start to install node modules which we talked about before when we looked at npm and we can start to use them in our code. It gets installed with the directory and it's a standardized system so that we don't have to make calls to external code or the code is stored in our own project. Let's do that right now. I'm going to open up a terminal by pressing "Shift Control Backtick". I'll open up a new Terminal here and then I'm going to run npm init. Before I do that, just again we need to verify that we have npm installed. Yeah, we do. Now we can do npm init. This is working so we can write whatever we want in each of these options, but I'm just going to hit "Enter". We don't need to specify any particular information here and then what we're going to get is a package.json file. By default, the name is going to be whatever the name of the folder is. Version by default is going to be 1.0.0. Description is going to be blank and as you can see all the other defaults here. One of the benefits of having this package.json files we can set up our own scripts here which will do to manage the Tailwind build process, but the main thing that this package.json does is store the list of dependent packages that we need in order to run this particular app or web page. All right, so without further ado, let's install tailwinds. I'm going to write npm install. I'm going to put in the D flag which is going to install it as a dev dependency and then I'm going to put in tailwindcss which is the name of the package. I'm going to hit "Enter" on that, and now it's going to install, and when it installs there's two things that are going to happen. We're going to get this new folder here called node_modules, and then in our package.json file here you can see that we've got the version of 3.2.7 of tailwindcss which is probably the latest version at the time of recording. We're going to have that in our devDependencies and we're going to have all of the code that we need for tailwindcss that version stored in our node_modules folder. This folder if we go in, you can see tons and tons of different packages here, including tailwindcss, and the reason why there's all these other ones here is because there's a dependency tree, so tailwindcss might be dependent on other modules which have their own dependencies too and so all the dependencies flowing down, all the packages get installed in your node modules. If we go to the package.json file of tailwinds you can see here, look at all the devDependencies here, and so it's going to install all of these devDependencies and the devDependencies of those too, so that's what the loading time is for. Each of these packages have their own package.json, and so they can stack on top of each other, and that is essentially the npm system. When we publish our npm project to the web later in this class, I'll show you how to do it. We ignore this folder completely because this document here it records the devDependency and then anytime we open this project on a new computer, even if they don't have the node_modules folder they can easily create it by just typing in npm install and all of the devDependencies will be installed. Let's do that right now. Let's remove this node_modules folder completely, and then I'll just run npm install. I haven't removed the devDependency from the package.json, so if I run npm install, it'll just re-install all the node modules again. We don't actually need to track or pass on this set of folders to anyone. We can just pass on the package.json and anyone who runs our projects can just run npm install and get all the same modules that we have. Hopefully that hits home. It makes sense to you. Now what I'm going to do is turn off Live Sass Compiler because now we are going to be creating our css using Tailwind. I don't want to confuse you by combining Sass and trying to integrate all that. Let's just keep them separated, so we won't work with this scss file anymore and what we'll do instead, so we can go back to our terminal here. What we'll do instead is we'll create a input.css file and an output.css file here, and then we just need to add this output.css file to our index, so go in here and let's just change this from styles to output, and essentially why I've done this is because we're going to be putting all of our tailwind code in here, then running tailwind compile, it's going to go into this output.css and that is what we want to include in our HTML document. If I go over here, you'll see we lose all of our styling, but we're going to rebuild this based on tailwind, so let's do that right now. The way we can compile it is by typing in npx tailwind -i input.css. I've named these really simply so that you can clearly see what is the input file and output file, and then the -O Flag to determine the output which is just simply called output.css. If I now run that and then we look over at output.css, we don't have anything yet because I forgot to put in some directives here. I'm going to throw in tailwind base, so we'll put in a base styles, tailwind components and tailwind utilities, so that's some tailwinds code there. Let's rerun that command. I can just press app and then hit "Enter", and then if we look in output.css you can see now that we've got all of this CSS that comes through, so if we look over here, refresh and one of the things you'll notice about tailwindcss is it actually removes pretty much all of the standard HTML styling that we talked about in previous videos. It gives you a really raw set up here, so even the buttons don't look anything like buttons. The only thing that makes them a button is the Cursor pointer, but otherwise they don't look like buttons at all, so we need to style them ourselves. Now because this was a bit of a lengthy command, even though we made this super simple, I'm going to move this into a script in our package.json, so I'm going to make this one tailwind: build. Anytime we run tailwind:build, it's going to do this, but I also want to create another one here, tailwind:watch so that we don't have to run build every time we do this. What we can do is add in the same code again and then put in the watch flag here. Now in our terminal we can just run npm run, and then we can run whatever script we set up here, so tailwind:build, will build it once or tailwind:watch with the watch flag will build it and then continue to wait for any other changes. If I was to go in here and give the body a background color of red, and I hit Save on that, that's going to be processed and sent to the output file and as you can see here our body is red. We don't have to run compile every time we make a change. Anytime we make a change, it's going to be recorded and that's going to be sent directly to output.css, and because we are running live server, it gets automatically updated here. Right now our setup is almost complete. We just need one extra file in our folder here. It's going to be called tailwind.config.js and I'm just going to copy and paste a standard config in here. I'll hit Save on this and let's restart our process over here. I pressed Control X to shut it down. Let's restart it just to make sure it's using the correct config file. Switch over to here and now we should be able to use the utilities in our HTML. Let's get started rebuilding our page with tailwind. Here inside of page container, we used to use these classes and then go into our css file. We can still do that, we can go into here page container and we can rebuild this class with classes from tailwind, so we can go apply and then I can add in different tailwind classes, and you can see here what these different classes do, but for now let's not do that. Let's put this in line and then I'll move it into classes a little later. Let's go into index here, and what we need to do is we need to get that display grid back. We can just type in grid and as you can see here, it auto-completes grid, display grid and then we can give it a gap of 0.5 rem which approximates to 12 pixels. That's inside a gap-3. You can see here, if I retype this, you can see tailwind encourages us to use certain increments, so zero to quarter rem, to half rem, three-quarters rem, one rem and then it just goes up in those increments and you can see in the comment next to it, how many pixels that roughly equates to, so it's good. It reduces the choices here which makes it easier for me, a front end web developer to figure out what to put in here. We can now give that grid here and then as you can see here, display grid, the gap should be stored somewhere, maybe we need to refresh over here. Yep, so we now need to refresh unfortunately. I'm not sure why. Let's see our live server is running. Yeah, it is. That's interesting. Just needed me to refresh and then we obviously need to set up our template columns again, and unfortunately for us in our specific instance where if we go to our styles here, this is a bit too specific for a standard tailwind class, so what we need to do is use a hack within tailwind that allows us to set an arbitrary value. In order to do that, what we'll do is grid-cols and the hack is opening up square brackets, and from here the first call will set to minmax auto 150? We can set that here, auto, 150px and then we can create an underscore here for the second column which if we go back to styles was 3fr. I put a space in here. Let's see, there we go. Now you can see we've got that same style coming across, but it's in the form of a tailwind class. Then we go down to header here and I'm going to set the col-start to 1, col-end to 3. Then here is where we can start to use slate the color scheme that I talked about earlier, rather than the random colors that we set that whatever was first on the list. Here I'm going to use the hundreds shade of slate and then we'll set the background color to that. Save that, refresh over here, and then you can see now the header has a background color and it is extending the full width of the page across both columns, so that's what we want. After header-menu here, I will put in flex for display flex list-none for list style type none. I'll put in p-0 for zero padding on both the vertical and horizontal axis. Justify-center to set justify content to center, gap-3 to set the grid gap to three-quarters rem and just so you know guys all of these classes are listed in the documentation. The documentation on tailwindcss is pretty good. I encourage you to check it out. I don't expect you to remember all of these and I've actually got these noted down, so I know exactly which ones to put here. But for you guys head to tailwindcss.com, head into the docs and start to read more about it. We can go into whereas it customizations colors and you can see here the different color schemes, the exact color code for slate 50, slate 100, slate 700, etc. and a whole bunch of other information. It does take a little bit of a learning curve to figure out what class is, but of course after enough practice you start to know these things easier, so let's continue here. Let's now go to the sidebar, and for the sidebar I'm going to do bg-slate-200, so a bit of a darker shade for the sidebar menu. I'm going to do pl-3 which is the padding left. It's going to set it to 0.75 rem, then I'm going to set my flex attributes, so I'm going to set grow to set flex grow to one. I'm going to put shrink-0 to set flex shrink to zero, and then basis-24 which is roughly 100, its 96, and then that should be it. Save that, refresh over here, looking very nice. The button now has lost its styling completely. Let's go in here and give it a whole bunch of new styling px-3 which will give it padding left and right, so basically padding on the x-axis, then we'll give it padding on the vertical axis, so padding top and bottom of two. Slightly less rounded to give a border radius to the button pg-slate. We'll use the slate color palette again and we'll use a darker shade of 600. We'll also use slate for the text color. Just need to make sure there's enough contrast here, so I'm going to set it to 50, a much lighter shade and then m-1 which sets the margin to four pixels or 0.25 rem. I hit Save on that. Let's look over here, and now we've got the styling for the button. Now up here we've got this column gap. We don't want that, so let's go back here. Gap-3 we want it to be column only, so there col-gap-1. Sometimes instead of looking through the documentation, you can have a guess, so maybe we can do gap-x. There we go. Column gap, what was it three? There we go and then we don't have that gap between rows anymore, just between columns. Now let's go into the sidebar menu. Lists-none for list style none, p-0 for no padding and then we want to extend the whole width, so we'll do heights. Let's see what the options are. We can scroll through all of these, see if there's an option here for 100%, h-4. Let's try that. Save, refresh over here. Now to heights 100% cool and as you can see here, we don't actually have to update the link styles because they're already stripped from tailwind. If we wanted to bring back that hover state, we can actually do that in tailwinds by doing this class and then we can put the pseudo-class here hover:underlying should give us the text decoration, but I hit Save on that. Let's have a look, refresh. There you go, so it's working. We just need to copy that for all the other ones here, there we go. Then up here as well I'll create that hover:state. Save that. Now you can see the hover:state happening here. We don't need to create a separate class for that. We can literally just put that on the element itself, so stuff like that I really appreciate it. That's pretty cool, and just for time's sake, I'm going to remove this view up here, we're not going to be doing any more view in this class. I'm going to keep this section with the class of main. Get rid of all of this view code right here. Back to what we were doing before. Don't think we need to put any special styles on main, but for drawer what we need to do is I'm going to give it a background of 200 slate. We want to make it the full height of the screen with H screen. The position needs to be absolute and I can just do that by typing an absolute top-0 will set the top two zero pixels. Width, I want it to be half the viewport width. That's an arbitrary value. I don't believe tailwind has an option for that, so I'm going to open up square brackets here, 50 viewport width, then I'm going to do right-0 to set the right attribute to zero pixels and then I'm going to make it easier for myself and just put transition all. As you can see here, it will set multiple parameters here, but essentially that will create the transition. If we saw before in styles.css, we specified the transition to only apply to the right attribute, but we can just as easily put it to all, and then they'll cover all of them which I think makes sense and then we've got our button here which we can just copy the same classes as we have for the other button. There we go. Put that down here, fix up the spacing. Then if I hit Save on that, let's refresh over here. The drawing is showing by default, if I open this up and have a look at this. You can see the drawer is currently set to right zero. We need to give it a different set of styling if aria-hidden is true. Luckily for us in Tailwind, this is a feature where you can just go aria-hidden colon and we can set a class to only apply if aria-hidden is true. Then I can use a negative value here on right to set right, I think it's full for 100%. If I scroll down here you can see right full. Refresh over here, the drawer won't be opened by default. There it is and I can open and close it here. Actually, this needs to extend the full height. Maybe we need to set the height of the grid to 100%. We forgot to set the height of the grid to 100%. I'll go into here, just do it off the grid and then we will do h4, I think for 100%. Let's have a look. Height, 100%. Then we forgot to put in our style for the row size. Our grid template rows was 50 pixels, 1fr. That one's probably going to be a bit tricky. Grid rows and then we're going to put an arbitrary value here, 50 pixels, 1fr. Let's see if that works. Refresh over here and lo and behold it does. There you go, 50 pixels, 1fr which is what we had here. We've now got our header sidebar. Our drawer is working and it's all been recreated in Tailwind. I just want to put some content in main here, main content so we can put whatever we want in here. We've got the main content here and we might want to put some padding there as well. Maybe this will be a h1 main content, but again, tailwinds strips or these standard CSS. Just by giving it the element of h1, it doesn't necessarily mean that this is going to be any bigger. What we need to do is specify our classes here. We can do text 5xl and font bold to make it bigger and bolder and now you can see we've got a bigger title here. It doesn't come with any margins though, we've got to specify that ourselves. Here we go. Let's just do my-2 to give it some top and bottom padding and that should do us for now. Everything's working there and we've recreated our layout using Tailwind CSS. Now there's a big issue here for me, I don't know, some some like this, but we've got ridiculously long attributes for classes here. I have to scroll to the other side of the page sometimes just to view them, I prefer to write descriptive names in classes rather than just utility classes. For a while there, I didn't want to use Tailwind because of this. I was like this is too messy. I like writing nice descriptive classes like page container, header menu like we've done in the past. But there is actually a way to get the best of both worlds and I'll show you that right now. If we go into our inputs CSS, we can actually reconstruct our page container class with all the utilities that we just sit on it with Tailwind. What I'm going to do is grab all the classes that we set after page container. I'm not going to delete page container. I'll save that and I'll come over here and I can just write Apply and then put all the Tailwind classes after that. Then it will apply all of these to the page container class. If we refresh over here, you'll see the exact same result but now we don't have all that mess in our HTML. You can see here that all of those attributes have been packaged together and put in that one class, which I think is much cleaner. Let's now go through and do that for everything else. For our header here, I will grab that content and let's do header, apply, add that in. There you go. Then we'll go into header menu. Grab all of these header menu, right, apply. Same process the whole way through. I'm just taking those utility classes and applying them to the class sidebar. Super easy with the applied directive here. Let's go further down the lists, buttons. We can target all buttons, so we don't have to keep repeating ourselves here for all buttons. Instead of targeting a class target or buttons, put apply in front of this. There we go. Then I can remove these classes from that button. Let's see if there's any breakages so far apart from, I just got to make that sure that's button. No breakages, so we've got our buttons coming across now. We can grab this, put it in sidebar-menu, apply. Then this is a good one here too because this is repeating ourselves over and over again. We don't want to to that. Instead what we'll do is, let's just grab all of our a tags inside an unordered list, and then we'll apply hover underline. Now we can remove all of these. I'll use Command D on a Mac to select all of them and I can just remove all of them at the onetime. Then we can go into here for our h1. Let's use these classes on all h1's. Go into here, h1, apply. Let's go into here, for the final one, for the drawer and then I will go create the class for drawer, use apply and now refreshing over here we get the exact same result. But now you can see our HTML is way cleaner, which is how I like it. Here you can see everything is named nicely. We're not trying to decipher all of these Tailwind CSS classes that would otherwise have. If you look over here, now, all of that is just containing the input CSS and I think it's much nicer to have it in here than it is to have it in the actual HTML. That's my preference. I only started getting into Tailwind once I figured out that you could do this, you could still use classes. You can still target elements, but then you could use Tailwind classes as well. Some of the things I like that you've got these pseudo-classes. You've got it up here again for hover underline and the crazy thing is you can actually do media queries within here as well. What do we have in our styles.css here, we had not showing the sidebar on mobile in Tailwind, it's a mobile-first system. All of the media queries are going to be min-width, so it's mobile by default and then we use the media queries to affect screen sizes above certain levels. I'll show you what I mean by that right now. If we just go to the Tailwind CSS documentation and I search for responsive design and look at this page, you can see the breakpoint prefixes. It should say here that Tailwind CSS is mobile first. It's using a mobile-first breakpoint system, which is not my preference. I prefer to use a desktop first. But I did mention that a lot of modern systems are mobile-first. As you can see here, if we use the small break, it's going to affect everything above 640. Then these breakpoints go all the way up until 1536. Using this, let's actually go in here. First of all, we want to make by default, because the default is mobile, we want this to display none, so we just set hidden. But then above small, we don't want it to be hidden, so we will put in block, which will set it to display block. It's not the exact same thing as here because it's 640 and not 425, but it's close enough. If we go over here and I go to iPhone 12 pro, you can see without any media queries, we got rid of the sidebar. By default, because we're on mobile first, display is set to none. Let me go back to this way. When we go above 640, you can see, so I'll move this over. We're moved above 640. You can see this media query from Tailwind comes out but we don't actually have to write that ourselves, all we have to write in Tailwind is the class that we want to apply after this breakpoint. I love how in Tailwind if we install it correctly, we can see here the exact code that's putting through into our CSS. This is why it's important to continue to run, compile here because every time we create this, it'll create the necessary raw CSS in our output file and does all this crazy things to make sure it's optimal and only using what it needs. It's pretty awesome once you understand the power of Tailwind. But again, it's a tool like any of these other tools. Everything all comes down to HTML, CSS, and JavaScript. Again, if you don't want to use this, it's completely optional. I'm just showing you one of the popular tools that front-end web developers are using these days. If this is something that interests you, definitely dig in further and learn more about Tailwinds. I can even create a class on Tailwind for you guys if you're interested in learning more, but it's all documented in the reference here. You don't necessarily need a course if you can read all of this documentation, I'm excited to continue using Tailwind and try it on some bigger projects. I personally like it. Again, if you don't feel free, you can skip this video. You can skip using it. It's not an essential part of front-end web development, just another tool. But with that out of the way, let's talk about something that could be essential to your web development project and that's gathering data from an external API. We'll cover that in the next video. 11. Using APIs: In this video, we're going to look at APIs. Specifically, we're going to look at one example of an API to bring in some fake store data into our little app here. Remember before we had that Product page as an example. I work mainly in e-commerce, so I like to use these examples of e-commerce stores. In this video, what we're going to do is we're going to bring in data from a fake store API. It gives us a fake store data. Then we can create a list of products on the front-end with this data that comes from an API. What is an API? It just stands for application programming interface. If you look up the definition online, it might be a little confusing as to what it actually does because it can mean a bunch of different things. Essentially, in this context, an API is just a way for us to connect to a back-end to retrieve data. In my first-class, Understanding Web Development, we took a less modern approach by writing PHP, dealing with our own MySQL database, and outputting that content to the screen via PHP. But now, as the front-end has gotten more complex with front-end frameworks and such as, it's now a more common pattern to have a separate API and a separate front-end app, and connect the two. The API is basically the back-end app, which gives us the data. You can think of APIs in this instance as simply a data source that we can connect to. In order to access this data, all we need is an API endpoint, which is just an address that when we make a request to it, it will return data. Just like we have made a request to this server right here and it's returned our page content, we can make a request to a server and get back some raw data. That's what we'll do in this video. I'm going to share with you a simple example in this lesson. Let's open up fakeapi.platzi.com. This is the Platzi Fake Store API. As it says here, it is a rest API for your e-commerce or shopping website prototype. We're going to use this to generate a list of products and display them on our little web app. You'll notice here that the API is a rest API. This is the simplest form of API to understand. There's another style of API that's more modern called GraphQL, but that requires an understanding of the query language of GraphQL. With rest APIs, all we have to do is hit a certain endpoint, which is right here. We just have to hit this address and then it will return data. If I just copy that and open up another tab and paste that, you'll see that we get a whole list of data. Before you saw that it was coming up as raw text that was unformatted, and then now it's doing this. This is because I have a Chrome extension on my Chrome browser here that does this. You can see the data in JSON format coming out quite nicely. But if you don't have that extension, you will see it coming out as the raw format there. We can just put it straight into our address bar like that. That might be handy to view the data, at least the structure that's coming through from the API. But what we're going to do in our web app is use this endpoint to insert this data into our front-end and then we can interact with it. What I'm going to do is obviously we've got a list of products here, I'm going to build out a little collection page on our web app using Vue and using this API. I'm going to keep this in my clipboard, head over here, then let's switch over to our code editor. We were talking about Tailwind in a previous video. Let me close that down. Let me turn this into Vue again. What I'm going to do is give this an ID of Vue App so we can link our Vue code to that. I'm also going to need to bring back the reference to Vue via the CDN. I'll just throw that in. Let's do it right here. Scripts SRC, then the address to the latest development version, which is unpckg.com/vue@next. I've mistyped this. I've said scripts instead of script. Then I will insert another one here, and we'll just insert our Vue code right here. Again, I will just create my options object, get the scaffolding going here. Then we will create the app Vue. Create app, loading in the options, and then mounting it to that div, which we gave the ID of Vue App. We can go here, Hash Vue App. If we hit "Save" on that, refresh over here, we should see that we are running a development version of Vue. If you have the DevTools for Vue installed, if I close this down and reopen it, we'll be able to get the Vue DevTools over here. I highly recommend this. In order to install the Vue DevTools, you can go on the Chrome Extension Store and type in Vue DevTools. For some reason it's taking a long time to load. I'll just type in Vue. Here you can see the one I'm using is this one right here, Vue.js devtools by Developer Tools. Back to here, you can see we're running an app in this section here, you can see it highlighted. What I'm going to do is I'm going to write some code that I want to run when this app is mounted. We can do that via the lifecycle method mounted. If I just create a method called mounted and I put it inside the options object, anything I write inside here will be output to the screen. Let's go back and copy that API address. Make sure it's in our clipboard. Then what I'm going to do is write a simple fetch. This method right here is super simple, but super powerful. All it does is run a get request to whatever address is in this first argument. We'll then chain a.then. In this.then I'm going to put this code in, which just processes the JSON and allows us to convert it to a JavaScript object for use in our app. Then with that returned JSON, to start with, I'm just going to console log it so that when our app loads, we will get the data in our console and then we can see what it looks like. Here you can see. I'll refresh again. You can see we've got 177 objects in an array. We can look and inspect inside the array and we can see all of the different product data that we saw before by just typing in into our browser. Now we've got this in the form of JavaScript, we can load it into our Vue app. I'm going to click over to here. I'm going to add in some data. Following this format, we're going to return an object. Don't forget, we got to put in our comma here and I'm going to put in an array called products, which at first is going to be an empty array. Then over here, what I'm going to do is because the JSON object that's returning is an array. If we look back to here, we can just insert this array into this array within our app. We just need to start by referencing this, which is the app that we're currently looking at, that's the way we grab the data, and then we're just going to assign that returned JSON to this.products, not product There we go. If I hit "Save" on this and refresh over here, you'll see there's nothing in the console because we've removed that console log, but if we were to look at it in our DevTools, you can see that that array of objects has now been loaded into here. Now, we can interact with this in our Vue app. I'll go over here and let's actually utilize this data. I'm going to type in here collection of products, whatever we want. Actually, I'm just going to skip the heading altogether and I'll create a div here with the class of collection, and inside of here, I will start a for loop with Vue. I will create a product card. This will be a div for each product that comes through, and I want this to run for as many products as there are in the array. We can use a v-for loop here, and then I can just write product in products. We can call this one whatever we want, it's just going to pull off an individual item from this array which matches down here. I'm going to click to exit out of that. Then inside here, we want a image tag, let me call that product-image, and then the src, we're going to pull from the returned product object. If we look back here, go into one of these objects, you can see that three images are returned, so we get an array of images. We need to make a choice here. Let's just choose the first one in the array, which is going to be at Position 0. Then we'll just go product.images, and to select the first one in the array at Position 0, we just type in zero there. Then here, let's put in the product title. Then I'm going to use v-html to insert some inner HTML based off of a variable. I'm going to go with product.title. If we go back to the object, you can see we get a value for title coming up here, and then I'll hit "Save" on that. Let's refresh over here. As you can see, as we load the page, we're then making a request to that external API and we're bringing in the images and the text. Let me refresh again. It's going to be running pretty fast because it's a pretty basic app, but as you can see here, the page loads first. We've got the header and the sidebar that loads first, then you can see the names coming up, then you can see the images. What's happening is, if we look closely, actually it's happening too fast for even the Vue app to detect, but initially, this product array is empty, and then once the API request is finished, it's being populated with the 177 different products. If I go over here, we can see the products object is initially empty and then it's not until this has run that those products go into the products array. One thing I want to do before I run this is just make sure that the products array is not empty before I start trying to output all of this. What I want to do to make this a little nicer is when I refresh over here, you can see that there's a period where it's blank. I want to put a bit of a loading indicator in there, so what I'm going to do is keeping in mind that Vue is reactive, and if the data changes, the page will change, we can put in a simple if statement here to check the length of the array. As you can see here, I've put a template tag in here. This is a special Vue tag that we can put logic into, but that won't actually render on the page. I will put in an if statement here and we'll go if products.length is greater than zero, i.e., it's not empty, then we will run this, but if it is empty, so the alternative of that, I'm just going to put in a v-else. If it is empty, which is what it will be at page load, I'm just going to put in a super basic loading indicator here, loading... Now, if we refresh, you can see that for a split second there it says loading before it brings in all the product data. The other thing I want to do the clean this up obviously, we've got 177 products coming through, it's a bit too much. I'm going to limit that amount. What I can do is move this v-for up here, and then I can grab the index as well as the actual object in this loop, and then what I can do in here is only show a product card if the index is let's say less than four. Only the first four items are going to show up now. I hit "Save" on that, refresh over here, and you'll see we have the first four items showing up. Ideally, we'd want to cut down on the load time by restricting the API to only send us the amount that we need. This 177 is overkill. It's still running super-fast, but if we go through our documentation here, maybe there's a way to limit, so products. Here we go. Get a single product, create a product. This is what's called an API specification. We can go through here to learn how to use the API. We can have a look pagination. Here we go. We can put in a limit. Let's do that. We'll go down to here, and then on the end, we'll put?limit=4. We could put the limit at the API level. Refreshing. Still getting 177. Let's have a look. Maybe we have to put the offset as well, so yeah offset to zero and limit to 10. We can separate these parameters with the ampersand symbol. I'll Refresh our web app over here. As you can see, we're only getting four back from the API now, which is nicer because we're not making a request that's longer than it needs to be. With this in mind, we can even just remove this if statement and we'll still get the same back, but we can put the limit on the front end and on the backend. I want this to show up a little bit more styled, so I'm going to copy and paste some CSS. Right now we should still be using Tailwind, so I'll put it in my input file here, hit "Save" on that. Refresh over here, and you can see now it's showing up in more of a grid format. All right, so now if I keep refreshing and you say loading, and then we get new data each time from the API, and we get our nice four cards. But let's actually build on top of this and incorporate some interactivity. If we actually look at each of these objects, you can see each of them has an ID. We can use that to identify each of them. What I'm going to do is I'm going to build another section here so that we can click on one of these and dive deeper into its data. I'm going to go back to our app here, and in my data under Products, I'm going to put in a new field for selected product ID. Then let's just set that to null to start with. Then what I'm going to do similar to how we did it with the variance, I'm going to create a computed field and that'll just be selected product, which all it will do is just determine the selected product object via the selected product ID. It'll look through the products' objects, look up the selected product ID, and then return that object. I'm going to return this.products using the find method again here, we're going to look for the product where the product ID matches the selected product ID in our data. Then we need a method now to set the selected product ID. I'm going to go in here and create a method's object. Inside of here, we can create a method called set selected product, and we'll just take the argument of ID. This will be a very simple method. All this will do is take the ID that's passed in and assign it to this.selected product ID. Very simple. Now in order to select the product, I'm going to put an event listener on each of these product cards. The way we do that in Vue is super easy. All we need to do is put an attribute on here. It will start with the at symbol, and the attribute is going to be the name of the event. It's going to be a simple click event. Then so we're basically saying onclick the method we want to run is set selected products. Then of course we need to send through the ID that we want to set that product. I'll expand this out here. That'll simply be the ID of the product that we're currently looping through. If I hit "Save" on that, we still need to build out this section here, but let's just check that everything's working in the Vue DevTool so far. You'll see when we first load up the project, we've got selected product ID of null, and therefore we've got an undefined value for selected product inside of computed. But if I was to click on one of these, it doesn't seem to be working. Let me refresh here. You can see for some reason it's not refreshing in the actual app here. But if I was to click on soup tomato, refresh over here, you can see the selected product ID is 38. Because we have an object in our array with that ID, of course we do because we used this as the possible options for the selected product ID, then we're able to compute the object for the selected product. If I click on this one and refresh, now we've got the selected product ID of 41, and therefore we're getting back the selected product object. Now with that in mind, all we need to do is just build out another section here based on the selected product. After this collection div here, making sure to keep this in the Vue app. Otherwise, it won't work. We're going to create a div here, and let's do a V if. We don't want to show this unless the selected product has data inside it. If it's just an empty or null object, this will return is false, so it won't show up. Then we'll give this a class of product. What do we need in here, we're going to have the image and we're going to have the product info. I'm going to start with the image here and load in the SRC dynamically, which will just be selected product.images because remember, each of them has multiple images. We'll just grab the first image in the array, then I'll create another div here called product info for the rest of the information. That'll be formatted on the right-hand side. Then I'll throw in h1, we're using Tailwind still, so we can type in some tailwinds utility classes here, text 5xl, font, bold, and margin-bottom of roughly eight pixels, and then we will set this to be the title, selected product.title. Then we'll go down and we'll set the price here, price, which will just be a div. Then inside of V, HTML, which will set the inner HTML based off of a variable, we'll then put selected product.price. Then finally, the description of the product, which I'll just put div when you put a class for this one. But I'll set the inner HTML to selected product description, which I think should match up with the API. Let's have a look. Let's just select one here. Refresh and description. Yes, it has a description. Okay, cool. I'm going to once again copy across the same some so we don't get bogged down on that. Then back into here, let's see if this is working. If I click on these, nothing's happening. If I drag this out and go into console, you can see we've got a few errors, "Cannot read properties of undefined reading images." It's important if you do run into errors that you read the error messages. We're trying to read images on something that's undefined. I've obviously made a bit of a mistake here. Let me look at the code. If I scroll down here, you can see I've misspelled this. I've put select product.images, I was supposed to type selected. That's just a typo on my part. Now if I click on this, you'll see there's no error, and you'll see I can now update the selected product and that will update this section down here. Now the price doesn't have the currency symbol in it, so I'll just fix that quickly. I'll go over here. What we can do is I can actually put single quotes in here to put in a simple string, and then I'll just put plus after that so I can combine the two and I'll hit "Save". Now when I click on these, they're going to have a dollar sign in front of them. We can bring in data from an external API, and then once it's inside our app, we have reactivity from a front-end framework like a view in order to be able to interact with that data. Obviously, this doesn't line up with the image. They're just random images, we've random texts. But you get the point here. If we know our HTML, CSS, and JavaScript on the front end and we know how to access APIs and bring it onto our front end, then we can build out a fully functioning app. Then we have everything we need. As a front-end web developer, all you need is access to a data source. You don't need to create the backend yourself, which as a front-end developer, I prefer this having to write write apps. I can just focus on the front end and making really cool user experiences. To wrap up this lesson on APIs, I just want to show you one other place that we can check that the API request is coming through. If you ever have issues with API requests, you can come into the Network tab, refresh over here, you can filter by fetch XHR because remember we're using a fetch here. This will check any external APIs that we're connecting to. If I click on this, you can see the API endpoint. If I hover over it, it should show you the total API endpoint. Then you can look in here at the parameters that are going through. Offset zero, limit four, and then we can see the response here all formatted nicely. There's a few places to look at the response. We can console log it out here, we can look inside our network tab, or if we're using something like Vue, we can look inside here and see what gets populated inside our products array if we were to capture data from an external source and put it in our Vue app. We can view it here in our network tab or we could console log it out and view it that way as well. But I just wanted to finish on that. You can see here that the data is coming across and now we can use that in our app. That's basically all we're going to run through in today's class. In the next video, I'm going to show you how to set up your class project, and then we will wrap this class up. 12. Class Project Setup: For your class project, I want you to create a simple web app with the following requirements that uses an external API to beautifully display data. To assist you here, I'm going to help you set up your development and production environment. Which is a fancy way of saying projects setup on your computer and steps to get it onto the internet. First of all, you're going to want to create a folder for your project. I'm just going to call this one Modern Web Development Project, but call it whatever you want. Inside this project, we're going to set up NPM and git here. What I'm going to do is open up Visual Studio Code. I'll expand it to the width and height of your screen. Then I'll use the shortcut Command O to open up our code folder and open up that project. Now we've got an empty folder open in Visual Studio Code. Then what I'm going to do is open up the terminal, so control back tick. Now we've got a terminal open in our application or in our project. What I'm going to do is run git init to create an empty git repository. This will help us to manage the different versions of our code and also to push our code to the Internet. We're going to use GitHub pages in this video here, but you can do it through other means if you want. GitHub Pages is just the easiest way to do it. Then I'm also going to put in an NPM init here. You can name the project whatever you want. I'm just going to hit Enter on everything just to accept all the defaults. That's going to give us a package.json. Then I'm going to create a file with the exact filename of git ignore. What this file does is it provides a list of files and folders that should be ignored when we push our repository. If you remember the lesson back when we installed NPM and created a package.json and ran NPM install. It created a node modules folder. Inside that node modules folder, it had all the different code for the different modules. That code never changes. We don't have to actually commit that code to GitHub. We can simply, wherever we push our code to, it's just going to install whatever packages are listed in the package.json file. We don't actually need the node modules folder when we send this project to somewhere else, we just need the package.json. I'm going to remove node modules for when it does show up. We don't want node modules to come through in git. Now I'll add my starting files. I'm going to create an index.html. Here, I'm going to utilize that boilerplate code that I previewed at the very start of the class, just creating a HTML5 boilerplate document here. I will tab across until it gets to document in-between those two title tags. I'll call this whatever I want. Let's say that this is a to-do app, or my first website, or something like that. You can update the title here. If you tap again, you get into the body tag. Then I'm going to create a folder for CSS. Inside this folder, create a styles.CSS file here. Then I will create a JavaScript folder. Inside the JavaScript folder, I will create a main, or app, or index.js. Doesn't really matter. I'm just going to call it Main in this instance. Then of course, we need to link these two files to our HTML file. In here I'll go link rel stylsheet. Then after this I'll put href and I'll link to the style which is now nested inside the CSS folder. I'll make sure to add that to the path. Then I will, inside our body tag, insert a script tag and an SRC attribute. Here you can see we can step through the path to the main.js file. Now that we have all of our building blocks, the CSS, the JavaScript, and the HTML, I'm going to run git add. to add everything to our first git commit, everything that is except for node modules, but we don't have node modules as of yet. I'm going to go check in here. This is all of our staged changes. We can either write our commit message and then hit Commit here, or we can do this in the command line, Git commit -m for the message, and I'll call this initial commit. Now that's all committed. We just need to create a git repository. But first I want to actually put some content on the page. Probably should have done this before I committed. But let's just say we want a h1 with my first website. Hit Save on that. You can see here in our source control panel, you can check on what changes we've made. This is very handy during development. I highly recommend it if you're comfortable, use Git. But of course, we didn't talk about Git in this course. If you just want to use it to get your website online, like I'm showing you here, then you can simply use it for that. There's no problem there. I'm going to open up a window here for GitHub, and then we can sign up for a GitHub account and create our remote repository, which is going to be how we're going to publish our website to the Internet. I'm not going to run through all the steps to create a GitHub account. I already have a GitHub account. It's pretty common with developers, pretty much every developer has a GitHub account, is just a place to store code online. Once you have your account set up, you can just go to GitHub.com slash new to create a new repository. I'm going to call this my first website, let's just say, and I'm going to make it public because we're going to publish this to the Internet. We don't need to add any of this here because we've already added it to our project. I'll click Create Repository and here you can see we've got our public repository here. All I need to do is grab this part here, which will add the remote origin to our local project. I'll copy that command. You can also see it here under the heading Push An Existing Repository For The Command Line. Then I will go through to here. I will add that remote origin. Hit Enter. If there's no errors, then it should have worked. I'm then going to commit this heading, which I didn't do last time. I'll do it through Visual Studio Code this time. I added a heading tag. I'm just going to say added a heading. I'm going to right-click, click Stage Change. Then it's going to be in the stage changes. I'll hit Commit and then I can click this button for Publish Branch. I'll Hit Publish, and now we have pushed that to our remote origin. Here you can see my first website. There's nothing here, but if I refresh now, you can see that our website code is now on GitHub. Now, in order to turn this into a website, we just need to go and enable GitHub Pages. I'm going to go into the Settings tab over here. Then I'm going to go down to pages under code and automation. Then I'm going to click "Deploy from a branch", then I'm going to select the branch which we only have one, which is the master branch. I'll hit "Save" on that, and now what we should be able to do is go to this address right here, which is your username.github.io. Open that up in a new tab and then I'll put slash followed by the name of the repository, my first website. You can see that there's not a page there yet. It's probably still loading and we can check the loading status by going into Actions here. As you can see, a workflow is building here. It was on yellow just a second ago, but now it has run. If we refresh over here, you'll see my first website. The process of deploying our website once we've made a change is simply to do what we just did when we added that heading. We just create the change. We staged the change here in our command line by running git add. Once it's added, we run git commit with dash m for the message, or we use the user interface on Visual Studio Code and then we either click this button, click Publish, or we can run the command git push origin, and then that should work, or more specifically, git push origin master. Let's add a package now to show you that in action I'm going to run clear here and let's run that same command that we had before to install Tailwind as a dev dependency. NPM install dash capital D, tailwindcss. Hit "Enter" on that. As you can see, we've now got a package dash loc.json file that's been added which records the exact versions of all of the dependencies. You don't need to worry about that. That's all just generated for us automatically, but we do want to commit it. You can see here that our package.json now has a line added or three lines added for dev dependencies and we've got Tailwind added. Then we've also got this node modules folder, but it's in gray, which indicates that it will not be committed to git and therefore won't go to GitHub. But like I said, Github will populate this folder automatically on the server given it knows what dependencies to install here, so all we need to push is the package.json. What I'll do is I'll copy and paste in that tailwind.config.js file that we had before and then I'll copy and paste across those scripts that we created. Right here tailwind colon build and tailwind colon run, and as you can see our paths are updated here. We're going to be looking for a tailwind.css file to process and that will compile down to styles.css, which is the file we've got here. Let's do that. We'll set up a new file here, call it tailwind.css and we'll grab base tailwind utilities. Then the other one was Tailwind's components, which I think goes in the middle. We'll hit "Save" on that and then we'll run npm, run Tailwind build. We'll run it one time, that will now update our styles.css before the Tailwind's code based on what we've written here and what we've included in our config file. Then if we click Go Live to start up a local version of this, we should start to see our default HTML styles fall apart and be replaced by Tailwind, which hasn't happened. Let's just go into our index.html here and check that our tag is correct. I have missed out an e there, stylesheet. If I hit Save on that refresh over here, you can see that the default styling for H1 has now been removed because we're now using Tailwind and you can see here all the Tailwind stuff coming through. What we'll do is we'll give this some styling again via Tailwind, just like we did before, text 5xl, font, bold, and give it a margin-bottom of approximately eight pixels. I'll hit "Save" on that. It's already affecting the element right there and so now we have our project with Tailwind installed. Now let's run through the deployment process again. We've made quite a few changes here. You can see here that we fixed up the CSS tag there. We added in some Tailwind utility classes. Package/loc.json has been added. We've updated our package.json file. We've added the Tailwind config file and then all the CSS stuff. We can grab all of this and right-click "Stage Changes", or the other way which is agnostic to whatever code editor you're using, we can just run git add dot to add them all as stage changes. There you go. It will update over here, and then we can write a git commit with the message of added Tailwind that's now committed. As you can see here, we can click here to synchronize that with GitHub. Now, if we swap over here, so that's our local version. That's another local version. I'll close that one down and then we go over here. You can see in our workflows, it's currently deploying our app, so we'll just wait for that to finish. This is going to happen automatically every time we push to GitHub because we've set up the pages setting in the settings right here, and as you can see, it's almost there. There we go. After one minute, it has now built and if we go back to the address where our website is hosted right here, refresh, you get the changes coming across that we made just a moment ago on our local version. Like I mentioned, when we go over here and go into code here, you can see that the node modules folder is not in our GitHub and that's because when GitHub deploys our website, it's automatically installing the correct node modules based off of our package.json file here, which tells the server that we're deploying it on to install that dev dependency and any dev dependencies that rely on that dependency. That is an example workflow for you guys to run through, to create your class project or any projects in future. Create a git repository, turn your project into an NPM project, create your files, do your work, push to GitHub, and then you can see your result here. When you're done and want to share with the class, you can do so in the class projects section. That's it. In the next video, we'll conclude the class and I'll show you how you can dive deeper into some of the concepts that we talked about in today's class. Make sure to click on to the next video and let's wrap this class up. 13. Conclusion: Congratulations, you've reached the end of this class on modern front-end web development. I know that we covered a range of tools and languages in this class, but let me assure you that you don't need to be an expert at all of these to get started with front end web development. The intention for this class was to provide an overview of the tools and languages used to build front-end experiences on the web. In this short class, we've covered a full suite of front end web development concepts that to learn properly would take many more hours of learning and practice. I hope that through this class, you've gained an overview of where each piece of technology fits into the front end web development process. If you'd like to dive deeper, you can check out my full range of courses at christhefreelancer.com/courses. As always, if you have any questions or concerns on what we covered in today's class, leave a comment in the discussion box below, and I'll do my best to point you in the right direction. As always, thanks for watching and I hope to see you again on some of my other classes.