Coding

CSS – Finishing the CSS Section | Beginner’s Course | #13

  • 00:00:01 welcome to the last video of the CSS
  • 00:00:03 part in our beginners guide in this
  • 00:00:06 short video we'll have a look at the
  • 00:00:08 website we created once again and see
  • 00:00:11 what we have to adjust for example this
  • 00:00:14 contact page right here I think this
  • 00:00:16 looks kind of wrong right now and we'll
  • 00:00:19 have a look at pseudo classes
  • 00:00:24 so let's directly start right here with
  • 00:00:27 that contact page we see that home works
  • 00:00:29 fine but contact well we didn't apply
  • 00:00:32 our styles so far to this part of our
  • 00:00:34 website so let's go back to the code and
  • 00:00:37 let's simply have a look at the contact
  • 00:00:41 or the index.html file in the contact
  • 00:00:43 folder because this is the old file that
  • 00:00:46 we created in the beginning of the
  • 00:00:47 series and in the meanwhile well we
  • 00:00:50 changed a lot
  • 00:00:51 for example we added this viewport meta
  • 00:00:54 tag right here so let's also edit right
  • 00:00:56 there to this file let's also see what
  • 00:01:00 else we have our fonts that we of course
  • 00:01:02 have to add right here so let's also
  • 00:01:05 copy that to our 2nd index.html file
  • 00:01:10 right here and now we can actually
  • 00:01:13 simply copy in the content right here so
  • 00:01:17 I'm starting in the header until the nav
  • 00:01:20 because the plan is actually to just
  • 00:01:23 safety home in contacts or this
  • 00:01:25 navigation part on this contact page
  • 00:01:27 will work on the contact page later when
  • 00:01:30 we work with JavaScript throughout the
  • 00:01:32 series but for now if CSS will just keep
  • 00:01:34 it like that so I selected that and I
  • 00:01:37 will now simply paste it right here into
  • 00:01:41 the body so let's get rid of that
  • 00:01:43 initial content paste it and now
  • 00:01:45 important we need to change it right
  • 00:01:47 here because the link right here should
  • 00:01:51 now be for home because we want to be
  • 00:01:54 navigated to home right here this should
  • 00:01:58 only be a list item where it says
  • 00:02:01 contact because if we click on to that
  • 00:02:03 nothing should happen because we are
  • 00:02:05 already on the contact page then and
  • 00:02:07 important we need to change the hyper
  • 00:02:11 reference right here to dot dot
  • 00:02:14 index.html like this because you want to
  • 00:02:16 navigate from the contact folder into
  • 00:02:19 our main index.html file with that let's
  • 00:02:23 save that and I think it should be fine
  • 00:02:26 so let's go back and reload the page
  • 00:02:27 yeah and with that as you can see it
  • 00:02:31 looks different right here because I
  • 00:02:32 zoomed in a little bit let's do it the
  • 00:02:34 same way right here yeah I think now you
  • 00:02:36 can see
  • 00:02:37 the home empty contact page have the
  • 00:02:39 same general styling as I said more
  • 00:02:43 content to come on this contact page in
  • 00:02:45 the next videos when we talk about
  • 00:02:47 JavaScript and with that I'm now
  • 00:02:50 actually quite happy with the look of
  • 00:02:52 our website if we go to home we can see
  • 00:02:55 that the text looks fine I fought in the
  • 00:02:57 last video that we might have to change
  • 00:02:59 the font size of specific elements but
  • 00:03:01 actually it looks totally fine it also
  • 00:03:04 switches to the mobile view because of
  • 00:03:06 the media queries we added in the last
  • 00:03:08 video and if we have a look at a mobile
  • 00:03:11 phone it's maybe increased at a little
  • 00:03:13 bit like that so the iPhone X it looks
  • 00:03:15 fine in the portrait mode and if we
  • 00:03:18 rotate our device it also looks good in
  • 00:03:20 the landscape mode if we use a smaller
  • 00:03:23 device on iPhone 7 for example we can
  • 00:03:25 see that in both modes the well mobile
  • 00:03:28 view is displayed so this looks quite
  • 00:03:32 good actually and because of that there
  • 00:03:34 is only one less thing that I would like
  • 00:03:37 to show you or that I would like to add
  • 00:03:38 and these are pseudo classes pseudo
  • 00:03:41 classes simply allow us to show a
  • 00:03:44 specific state of an element this means
  • 00:03:47 we can add such a pseudo class to a
  • 00:03:50 selector and if the studio class added
  • 00:03:53 we can define what happens to an element
  • 00:03:55 for example if we hover the mouse over
  • 00:03:58 an image or if we click on to contact or
  • 00:04:00 home and that's exactly what I would
  • 00:04:02 like to do I would like to change the
  • 00:04:05 way our website is displayed in a way
  • 00:04:08 that if we hover over this or that image
  • 00:04:11 or over Mac's or my head that the mouse
  • 00:04:14 cursor becomes a pointer and if we click
  • 00:04:17 on to contact right here or home right
  • 00:04:19 there I would like to change the color
  • 00:04:22 of contact or home once we click onto it
  • 00:04:25 so these are two things that we can do
  • 00:04:28 with pseudo classes more information
  • 00:04:31 about pseudo classes as always can be
  • 00:04:33 found in the MDM and also as always you
  • 00:04:37 can find a link to the corresponding
  • 00:04:38 site on the MDM in the video description
  • 00:04:40 so let's start with the pseudo class
  • 00:04:42 that turns the mouse cursor into a
  • 00:04:45 pointer once we hover over an image so
  • 00:04:48 let's go back to our code to the CSS
  • 00:04:50 file
  • 00:04:51 and let's add it maybe up here as kind
  • 00:04:53 of a general rule so you write the
  • 00:04:55 selector in our case the images now a
  • 00:04:58 colon and now you're right
  • 00:05:00 hover that's one of the pseudo selectors
  • 00:05:04 available and now you're right to crawly
  • 00:05:06 braces as always and now we simply say
  • 00:05:08 that if we hover over an image then we
  • 00:05:12 want the cursor to be a pointer or to
  • 00:05:17 turn into a pointer this can of course
  • 00:05:19 be difficult on mobile devices so this
  • 00:05:21 is rather a pseudo selector you probably
  • 00:05:24 use if you want to have it on a desktop
  • 00:05:27 or on a normal computer screen for
  • 00:05:29 mobile devices probably not the best
  • 00:05:30 option nevertheless I would like to show
  • 00:05:33 you how it works so let's save this and
  • 00:05:35 let's reload the page and if we not
  • 00:05:38 hover over the image you can see that
  • 00:05:41 the mouse turns into a pointer right
  • 00:05:44 here right there and if we go over next
  • 00:05:48 image and over my image so this was the
  • 00:05:52 first pseudo class that I wanted to show
  • 00:05:54 you and the second one is the class that
  • 00:05:57 allows us to change the color once we
  • 00:05:59 click on tan element specifically I
  • 00:06:01 would like to be able to change the
  • 00:06:02 color once we click these and these are
  • 00:06:05 links so let's go back and let's also
  • 00:06:08 add a pseudo class for links so for the
  • 00:06:12 anchor tag right here and this time it's
  • 00:06:14 not hover but its active because we
  • 00:06:17 click on to it so it's active so let's
  • 00:06:20 do that and let's not change the color
  • 00:06:22 to our normal you know that already
  • 00:06:26 fa9 to 3f so our Academy and orange
  • 00:06:30 basically and if we now save that and go
  • 00:06:32 back to the page and reload it you can
  • 00:06:35 see that nothing changed but if we now
  • 00:06:37 click on to contact can you see it or on
  • 00:06:41 to home it becomes orange for the amount
  • 00:06:44 of time where it's active so basically
  • 00:06:46 whenever I click it so if I hold the
  • 00:06:48 left mouse button you can see it stays
  • 00:06:50 orange if I release the left mouse
  • 00:06:51 button then it gets back to its initial
  • 00:06:54 color the black right here well and with
  • 00:06:58 that we did it actually we finish the
  • 00:07:01 CSS part of our beginners guide
  • 00:07:04 think this was a lot of work and I'm
  • 00:07:06 totally aware of the fact that this is
  • 00:07:08 not the most complicated website
  • 00:07:10 probably but if we think back about what
  • 00:07:12 we applied so far we used a lot of
  • 00:07:15 important concepts of CSS in this rather
  • 00:07:18 simple website the thing that's missing
  • 00:07:20 right here of course is logic and if we
  • 00:07:23 need logic on our website then it's time
  • 00:07:26 for JavaScript so in the next video of
  • 00:07:29 this series we will finally have a look
  • 00:07:31 at JavaScript of course I hope to also
  • 00:07:34 see you in this video I hope that you
  • 00:07:36 enjoyed this year's s part so far and as
  • 00:07:39 always I can only say thanks a lot for
  • 00:07:41 watching hope to see you in the next
  • 00:07:43 videos and bye