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.
Christopher Dodd, Web Developer / Educator
