# tactiq.

io free youtube transcript

# HTML & CSS Full Course for free (2023)
# https://www.youtube.com/watch/HGTJBPNC-Gw

00:00:00.000 hey how’s it going everybody in this

00:00:01.920 series I’m going to show you everything
00:00:03.419 you need to know to get started working
00:00:05.100 with HTML then a little bit later on
00:00:07.319 we’ll cover CSS so why don’t you go
00:00:09.360 ahead and sit back relax and enjoy the
00:00:12.360 show
00:00:14.519 hey if you enjoy my videos please be
00:00:16.800 sure to subscribe because subscribing is
00:00:18.779 free just like how this video is free
00:00:21.060 help me out yes I’m guilt tripping you
00:00:23.640 that is all why should you learn HTML in
00:00:26.699 today’s age people spend way too much
00:00:28.859 time on the internet myself included
00:00:30.900 unfortunately knowing how to create or
00:00:33.840 otherwise manage a website isn’t a bad
00:00:36.420 thing to know heck add it to your resume
00:00:38.399 it really can’t hurt even if you’re not
00:00:40.860 interested in web development as a
00:00:42.780 career almost every business has some
00:00:45.360 sort of online presence knowing how to
00:00:47.579 manage that online presence could
00:00:49.860 convince a potential employer to hire
00:00:52.079 you over somebody else so why not HTML
00:00:55.379 is an acronym for hypertext markup
00:00:57.480 language the general idea is that
00:00:59.820 certain types of tags also known as
00:01:01.860 markup is used to convey to a web
00:01:04.379 browser how some content should be
00:01:06.659 displayed usually tags are in pairs with
00:01:09.720 some content sandwiched between them
00:01:11.939 header tags are typically used for
00:01:14.159 titles
00:01:14.939 P tags are used for paragraphs of text a
00:01:18.060 tags are used for hyperlinks HTML adds
00:01:20.880 structure to a web page if we were
00:01:22.799 building a house you could say that HTML
00:01:25.560 is the foundation the skeletal structure
00:01:28.259 to support all content on a website then
00:01:31.020 their CSS CSS means cascading style
00:01:34.320 sheets it’s a language that adds style
00:01:36.720 to a web page in our house analogy CSS
00:01:39.900 would be equivalent to the decorations
00:01:42.299 design and colors of the Interior to
00:01:45.540 begin working with HTML and CSS you’ll
00:01:48.600 need a modern web browser you can use
00:01:50.759 Google Chrome Firefox Microsoft Edge
00:01:53.159 Safari those are all fine you’ll also
00:01:55.979 need a text editor as well such as vs
00:01:58.740 code it’s free software that functions
00:02:00.899 as a workbench for us to write code in
00:02:03.360 this next part I’ll show you how we can
00:02:05.100 download and install vs code
00:02:07.259 to download vs code head to this website
00:02:09.780 code.visualstudio.com
00:02:12.900 look for whatever operating system
00:02:14.640 you’re using and download that version
00:02:16.440 I’m running Windows I will download the
00:02:18.959 windows version
00:02:20.160 then I will open it when it’s done
00:02:22.920 accept the agreement
00:02:24.780 yes I did read it that fast
00:02:27.300 next
00:02:29.120 I’ll create a desktop icon next install
00:02:34.379 launch Visual Studio code and finish
00:02:38.400 we need a folder to hold all of the
00:02:40.680 documents related to our website go to
00:02:42.959 Open folder I’ll place this folder on my
00:02:45.540 desktop
00:02:46.620 new folder I’ll name this folder website
00:02:51.420 select folder
00:02:53.099 there we go we are now within our
00:02:55.680 website folder I’m going to create a new
00:02:58.080 file
00:02:59.340 I will name this file index.html
00:03:03.840 whatever your home page is going to be I
00:03:05.819 would recommend naming it
00:03:07.580 index.html most servers return the index
00:03:10.800 file as the home page so it would be
00:03:13.260 good practice for us to name the home
00:03:14.940 page index
00:03:16.379 now what we’re going to do is install
00:03:17.819 the live server extension
00:03:20.340 go to extensions look up live server
00:03:24.480 and install
00:03:26.099 basically what this does is that when
00:03:28.080 you update your HTML file if you have a
00:03:30.599 web browser open it’s going to update
00:03:32.340 automatically it’ll save you some time
00:03:35.040 all right everybody now what we’re gonna
00:03:36.780 do is fill in our HTML file at the top
00:03:39.659 what we’ll do is add a set of angle
00:03:41.459 brackets then type this exclamation
00:03:43.920 point doc type HTML this is a
00:03:48.720 declaration that this document is an
00:03:51.180 HTML5 document which is the most recent
00:03:53.940 version then we’ll create a pair of HTML
00:03:56.819 tags we’ll need an opening HTML tag
00:04:00.120 and an ending HTML tag you can tell that
00:04:03.239 this is an ending tag because it has a
00:04:05.280 forward slash most tags are in groups of
00:04:07.920 pairs that’s if there’s typically
00:04:09.540 content between them this pair of HTML
00:04:12.299 tags represents the root element of an
00:04:15.120 HTML page between these two tags we will
00:04:18.358 add a pair of head tags
00:04:25.020 the head element contains information
00:04:26.759 about your web page such as a title
00:04:29.639 let’s add a title to our web page title
00:04:34.020 add a closing tag let’s set the title of
00:04:37.020 our web page to be
00:04:38.540 my first website
00:04:41.759 now what we’ll do right click on your
00:04:43.800 HTML file then open with live server
00:04:48.840 here’s our webpage the title says my
00:04:51.540 first website just to make this easier
00:04:53.699 on us I’m going to place our web page
00:04:55.740 side by side with vs code
00:05:03.419 when we save any changes we can see that
00:05:05.580 update automatically the head element
00:05:07.740 contains information about your web page
00:05:10.580 whereas in the body let’s add a pair of
00:05:13.680 body tags after the pair of head tags
00:05:18.060 the body element contains visible
00:05:20.280 content in your web page
00:05:22.740 between our body tags let’s add a pair
00:05:25.560 of H1 header tags
00:05:30.600 H1 defines a large heading I’ll add some
00:05:33.780 text
00:05:35.220 this is
00:05:36.960 an H1 heading I’m going to save that
00:05:41.100 should update my HTML document
00:05:42.660 automatically this is an H1 heading
00:05:45.180 let’s try H2
00:05:48.060 add a pair of H2 header tags
00:05:51.660 this is an H2 heading
00:05:55.500 let’s do H3
00:05:58.020 H3
00:05:59.759 this is an H3 heading
00:06:02.880 H4
00:06:07.320 this is an H4 heading then we have H5
00:06:12.919 this is an H5 heading typically header
00:06:16.259 tags are used for titles or other large
00:06:18.419 text
00:06:19.500 let’s discuss paragraph tags if you have
00:06:22.259 a paragraph of text you can place that
00:06:24.660 within a pair of P tags
00:06:28.319 thumb text goes here if you need some
00:06:31.860 sample text to work with if you’re using
00:06:33.660 vs code you can type lorem then tab this
00:06:37.380 will create some garbage text for you I
00:06:40.139 think it’s supposed to resemble Latin
00:06:42.300 if I were to copy everything within the
00:06:44.340 set of paragraph tags
00:06:45.900 then save it paragraphs are separated
00:06:49.020 with a line break
00:06:50.880 otherwise if you do need a line break
00:06:52.759 you can type BR meaning line break so
00:06:56.819 this is a self-closing tag
00:06:58.979 pairs of tags usually have some sort of
00:07:01.440 content between them with the line break
00:07:03.660 that’s a self-closing tag we don’t need
00:07:06.240 a closing tag
00:07:07.500 so add as many line breaks as you need
00:07:09.479 wherever you need them so that’s a line
00:07:11.880 break
00:07:13.080 there’s also a horizontal rule which is
00:07:15.720 HR think Human Resources HR that would
00:07:19.440 add a horizontal line across your page
00:07:21.419 that might look pretty good after a
00:07:23.639 title
00:07:24.780 paragraph tags don’t care about any
00:07:26.639 spaces or new lines
00:07:28.800 I’m going to put all of this on separate
00:07:30.780 lines just so it’s more legible
00:07:35.819 so when I save nothing appears to happen
00:07:38.039 even if I were to add some line breaks
00:07:40.319 between these sentences
00:07:42.360 nothing appears to change you could
00:07:44.639 always change your paragraph tags to pre
00:07:48.000 meaning pre-formatted as in
00:07:50.580 pre-formatted text
00:07:52.500 that would retain any line breaks or
00:07:54.660 spaces Within These tags it’s up to you
00:07:57.479 if you prefer the P tags or the pre-tags
00:08:00.660 now the last thing I’m going to discuss
00:08:02.280 are comments comments aren’t displayed
00:08:04.919 as output they’re usually used as notes
00:08:07.560 for yourself or for other developers you
00:08:10.199 would type a left angle bracket
00:08:12.060 exclamation point two dashes
00:08:14.759 wherever your comment ends you would
00:08:17.340 type two dashes right angle bracket this
00:08:20.580 is a comment so when I save nothing
00:08:24.180 appears to happen comments are used for
00:08:26.520 yourself or for other developers that
00:08:28.500 are looking over this document alright
00:08:30.360 everybody well at this time let’s go
00:08:31.919 over an exercise just so that we have a
00:08:33.779 solid foundation and really remember
00:08:35.458 everything it’d be good practice for us
00:08:38.219 we’re going to create a separate HTML
00:08:40.679 file that displays the lyrics of a song
00:08:43.380 you like so let’s create a new HTML file
00:08:46.260 let’s name this file lyrics dot HTML
00:08:51.959 again we’ll need to add this declaration
00:08:55.380 doc type HTML that’s a declaration that
00:09:00.600 this document is an HTML5 document then
00:09:03.540 we’ll need a pair of HTML tags
00:09:07.860 we’ll need a head element
00:09:13.019 and a body
00:09:18.200 let’s add a title to the head of our
00:09:20.459 document
00:09:22.800 title
00:09:24.720 let’s set the title to be my song lyrics
00:09:28.459 then we will open this HTML file with
00:09:31.860 live server
00:09:33.120 my song lyrics pick a song that you like
00:09:37.860 within our body tags let’s add an H1
00:09:40.560 element this will be the title copy the
00:09:43.560 name of your song
00:09:45.240 place it within this pair of tags
00:09:48.300 so that’s the title add song by the name
00:09:52.440 of the band or artist
00:09:54.000 I’ll use H3 header tags
00:09:57.959 that’s slightly smaller than H1
00:10:02.100 you know maybe H4 I think that’d be
00:10:04.080 better
00:10:06.600 I’ll add a horizontal rule that’s HR
00:10:11.279 I’ll add a pair of P tags
00:10:15.660 take all of these lyrics copy them
00:10:19.740 and paste them within the pair of P tags
00:10:23.580 I’d like to retain the spacing let’s
00:10:25.800 change the P tags to pre tags for
00:10:29.580 pre-formatted text
00:10:32.040 that’s much better let’s add one line
00:10:34.860 break
00:10:36.000 after our horizontal rule
00:10:38.580 one last thing I’m going to do within
00:10:40.320 the pre-tags I’m going to add some blank
00:10:42.480 lines between some of these verses
00:10:49.019 there we go that’s pretty cool I think
00:10:51.660 we have the hang of basic HTML now in
00:10:54.180 the next topic we’ll discuss hyperlinks
00:10:56.279 hey if you’re enjoying this series so
00:10:58.079 far please be sure to support me by
00:11:00.060 Smashing that like button leave a random
00:11:02.220 comment down below and subscribe if
00:11:03.959 you’d like to become a fellow bro
00:11:07.680 hey everybody in today’s topic I’m going
00:11:09.779 to show you how we can create hyperlinks
00:11:11.459 a hyperlink is a digital reference to
00:11:14.040 data that a user can follow by clicking
00:11:16.200 or tapping a button or link to create a
00:11:18.899 hyperlink we will need a pair of a tags
00:11:21.360 a means anchor then we’ll sandwich some
00:11:24.959 text between these two tags
00:11:26.940 such as click me
00:11:29.760 we’re missing one thing what we’ll need
00:11:31.800 within the opening a tag is an attribute
00:11:34.440 and href attribute
00:11:37.079 an attribute is typically a name value
00:11:40.079 pair that modifies the behavior of an
00:11:42.899 element href means hypertext reference
00:11:45.959 we’re referencing something within the
00:11:48.600 set of quotes we can list a web page or
00:11:51.180 a file to link to let’s begin by linking
00:11:54.180 an external website like Google
00:11:57.360 let’s paste the URL within the href
00:12:00.060 attribute save then when I click on this
00:12:03.180 link it takes me to Google or some other
00:12:06.120 website of your choosing based on what’s
00:12:07.860 within the set of quotes
00:12:09.839 there are more attributes you can add as
00:12:11.700 well they’re optional another is Target
00:12:14.240 Target equals if you set Target to be
00:12:18.120 underscore blank this link will open
00:12:21.000 this URL in either a new tab or a new
00:12:24.060 window depending on your settings Google
00:12:26.100 has opened in a new tab for me
00:12:28.560 another attribute is title
00:12:31.380 the title attribute displays additional
00:12:33.420 information about the element as a tool
00:12:35.700 tip I’ll add a message
00:12:37.620 goes to Google when I hover over this
00:12:41.279 link we have a tooltip that states goes
00:12:44.220 to Google that’s an additional option
00:12:46.320 too this URL is an absolute URL you can
00:12:50.220 also list a relative URL So based on the
00:12:52.680 last video we have an HTML file of song
00:12:55.560 lyrics within our index file we will
00:12:57.899 link to our lyrics file so let’s create
00:13:00.180 another hyperlink we’ll need a pair of a
00:13:02.519 tags meaning anchor
00:13:04.440 we’ll need some text song lyrics is good
00:13:09.120 then we’ll need an href attribute href
00:13:12.420 equals these two files are right next to
00:13:15.180 each other for a relative file path all
00:13:17.519 we need is the file name
00:13:19.560 lyrics dot HTML I’m going to add a line
00:13:22.740 break real quick
00:13:25.019 PR meaning line break
00:13:27.120 then when I click on this link it takes
00:13:29.399 me to my other HTML file
00:13:31.459 you could add these additional
00:13:33.360 attributes if you would like one last
00:13:35.399 link
00:13:36.660 I’ll create a line break we’ll create a
00:13:39.180 link that begins the process of emailing
00:13:41.279 someone
00:13:42.660 we’ll need a pair of a tags
00:13:45.360 the text will be email me
00:13:49.320 href attribute will be set to now to
00:13:52.139 send an email type mail to colon then an
00:13:55.920 email address I’ll make up one test at
00:13:59.399 fake.com
00:14:02.339 when I click on this link we begin the
00:14:04.620 process of sending an email to this
00:14:07.260 email address however I’m not signed in
00:14:09.360 so this is as far as it’ll take me
00:14:11.220 currently
00:14:12.360 okay now for an exercise let’s go to our
00:14:15.240 lyrics HTML file
00:14:17.579 open with live server let me zoom out
00:14:21.720 based on the last project you should
00:14:23.760 have a web page with some song lyrics
00:14:25.380 that you like we’ll create a hyperlink
00:14:27.360 to the original video let’s do that
00:14:29.519 after the artist that would be right
00:14:32.040 here but before the horizontal rule
00:14:33.959 we’ll create a pair of a tags
00:14:39.360 I’ll add some text or original video
00:14:43.500 then you’ll need to find the url for the
00:14:46.079 original video for your song
00:14:49.680 all right
00:14:50.880 I will set the href attribute to B
00:14:54.240 that URL the URL for a YouTube video
00:14:57.899 so when I click on the link
00:15:00.240 it now takes me to YouTube
00:15:03.660 all right everybody that’s a hyperlink
00:15:05.339 it’s a digital reference to data that a
00:15:07.680 user can follow by clicking or tapping a
00:15:10.139 button or link and those are hyperlinks
00:15:12.660 in HTML
00:15:15.720 hey everybody in today’s topic I’m going
00:15:17.519 to show you how we can add images to a
00:15:19.380 web page using HTML so sit back relax
00:15:22.560 and enjoy the show
00:15:25.500 all right everybody here’s how to add an
00:15:27.420 image to a web page but you’ll need an
00:15:29.639 image to work with I have a picture of a
00:15:31.800 dog I’ll add that to my website folder
00:15:34.920 next to my index file I have a picture
00:15:37.079 of a dog
00:15:38.639 to add an image we’ll use a self-closing
00:15:41.459 image tag
00:15:42.660 then set the source equal to B the name
00:15:45.899 of your image including the extension
00:15:48.959 mine is dog and this is a PNG file
00:15:54.480 so this picture is fairly large you can
00:15:57.360 change the dimensions with the height or
00:15:59.579 width attributes I’ll set the height to
00:16:02.519 be 200 200 pixels now the width will
00:16:06.120 adjust automatically however you could
00:16:08.519 change that too if you wanted if I need
00:16:10.680 this image to be a perfect square I will
00:16:12.779 also set the width to be 200 however
00:16:15.240 this does compress the image depending
00:16:17.940 on the dimensions of your original
00:16:19.380 picture you may need to change the
00:16:21.720 height and or width I’ll set the height
00:16:23.639 to be 200 though
00:16:25.139 then keep the width the same it’ll
00:16:27.300 adjust automatically
00:16:28.980 now for some reason if your image isn’t
00:16:31.079 displaying let’s say that I get the file
00:16:33.300 extension wrong I’ll say that this is a
00:16:35.579 JPEG while the image won’t display you
00:16:39.180 can add alternative text with the alt
00:16:42.000 attribute the alternative text you could
00:16:44.699 say anything
00:16:46.079 this is a picture of a dog
00:16:52.560 this image doesn’t display you at least
00:16:55.440 display the alternative text now the
00:16:57.959 nice thing about the alt attribute is
00:17:00.060 that if somebody is visually impaired
00:17:01.860 and they’re using a screen reader the
00:17:04.140 screen reader will read this alt
00:17:06.179 description just to test my screen
00:17:08.220 reader I’m going to add some text before
00:17:10.260 and after this image as well
00:17:12.780 let’s add an H1 header tag this
00:17:16.439 is a cute dog
00:17:21.299 then I’ll add some text after
00:17:23.760 I’ll use an H3 header tag
00:17:27.780 woof woof
00:17:30.360 I’ll use my screen reader this is an
00:17:32.580 extension on Chrome you can download
00:17:37.080 my first website
00:17:39.000 this is a cute dog this is a picture of
00:17:41.280 a dog woof woof the screen reader read
00:17:43.860 the alternative text for this image so
00:17:46.620 it is good practice if you include an
00:17:48.299 image to write a brief description of
00:17:50.640 the image
00:17:51.660 another cool thing you can do with
00:17:52.980 images is that you can’t turn them into
00:17:54.840 hyperlinks I will surround our image
00:17:57.600 element with a pair of a tags
00:18:00.120 a meaning anchor
00:18:02.640 then I will set the href attribute equal
00:18:05.640 to a URL I’ll find the Wikipedia page
00:18:09.120 for dogs
00:18:11.640 all right I’ll copy this URL
00:18:14.280 then I will set the href attribute to be
00:18:16.980 this URL
00:18:18.660 when I click on this image it takes me
00:18:21.059 to the Wikipedia page for dogs
00:18:23.640 so yeah you can turn an image into a
00:18:25.799 hyperlink another cool thing you can do
00:18:27.960 too is that you can include gifs in your
00:18:29.880 web page
00:18:30.840 this is my gift that I’ll include
00:18:34.500 I’ll add that to my website folder
00:18:37.440 I’ll include a self-closing image tag
00:18:39.900 set the source equal to be the name of
00:18:43.140 my image
00:18:45.960 then be sure to get the file extension
00:18:47.700 right this is a gif
00:18:50.520 I’ll set the height attribute to be
00:18:52.260 maybe 200 as well height equals 200.
00:18:57.360 then I’ll add some alternative text
00:19:01.380 alt attribute will be
00:19:04.640 smiling dog gif
00:19:09.059 now with a website you may have all of
00:19:11.340 your images within a separate folder
00:19:13.140 like this I’ll go to new folder I’ll
00:19:16.980 create a folder named images then I will
00:19:19.200 move my images to the images folder
00:19:23.100 so my images are no longer being
00:19:24.720 displayed we have our alternative text
00:19:27.000 this is a picture of a dog and smiling
00:19:30.000 dog gif
00:19:31.320 with your Source attribute we’re using a
00:19:34.320 relative file path
00:19:36.000 we need to navigate to the images folder
00:19:38.520 then find the appropriate image files
00:19:41.340 I’m going to precede these images with
00:19:43.860 the name of the folder they are found
00:19:45.840 within the images folder
00:19:52.100 you may also need another forward slash
00:19:54.660 for me either work let’s move on to an
00:19:57.780 exercise in the last few videos we were
00:20:00.360 working on a web page for song lyrics
00:20:02.400 Let’s include some album art
00:20:05.700 for my song that I picked I have a
00:20:08.160 picture of the original album art that
00:20:10.320 this song is found from
00:20:12.059 I will move that to my website folder
00:20:14.880 then I will move it to the images folder
00:20:17.580 within my website folder
00:20:19.740 I need a self-closing image tag set the
00:20:22.980 source equal to B we need to navigate to
00:20:25.740 the images folder I will list that first
00:20:27.960 Images slash the name of the file
00:20:33.000 for me it’s album
00:20:35.220 cover
00:20:36.600 dot jpeg
00:20:38.940 then I’ll change the dimensions I will
00:20:41.460 set the height equal to B 200.
00:20:45.360 I’ll add some alternative text
00:20:48.260 alt equals
00:20:50.880 album
00:20:52.380 art cover
00:20:55.020 then a line break
00:20:57.840 maybe two
00:21:00.480 then I’ll turn this into a hyperlink as
00:21:02.340 well I will surround our image with a
00:21:04.140 pair of a tags
00:21:08.280 I will set the href attribute to be the
00:21:11.160 original YouTube video where you can
00:21:12.660 find this song
00:21:13.919 so href equals the YouTube video that I
00:21:17.760 linked before
00:21:18.960 so this should take me to YouTube
00:21:23.520 there we are
00:21:25.620 all right everybody well that’s how to
00:21:27.600 include an image on a web page using
00:21:29.820 HTML
00:21:33.299 hey how’s it going everybody in today’s
00:21:35.220 video I’m going to show you how we can
00:21:36.600 include audio in a web page using HTML
00:21:39.240 you’ll need some audio files to work
00:21:41.340 with one place you can download some MP3
00:21:43.919 files is the YouTube audio library find
00:21:47.400 some songs that you like and then you
00:21:48.900 can download them let’s download three
00:21:51.299 for this lesson
00:21:52.740 once you have your three songs let’s
00:21:55.140 move them to our website folder
00:21:57.840 alright we are ready to begin so to
00:22:00.419 include some audio we need a pair of
00:22:02.760 audio tags
00:22:05.400 then between the audio tags let’s
00:22:07.740 include a source element
00:22:10.500 with the source element there is a
00:22:12.539 source attribute we will set the source
00:22:15.600 attribute to equal the name of an MP3
00:22:18.419 file or other audio file
00:22:21.120 so let me copy the name
00:22:24.179 be sure to get the file extension
00:22:27.900 and then I will paste that file the file
00:22:30.659 name nothing appears to happen because
00:22:32.820 we don’t have any controls and the song
00:22:35.280 doesn’t play right away too so to add
00:22:37.500 some controls within the opening audio
00:22:39.659 tag type controls and that’s it so we
00:22:43.500 can now play our song
00:22:45.010 [Music]
00:22:49.740 or you can mute it fast forward it
00:22:52.440 rewind it set the playback speed
00:22:55.020 whatever you can set your audio file to
00:22:58.200 auto play but people find that annoying
00:23:00.740 [Music]
00:23:04.020 so you should probably not do that if we
00:23:07.020 do want our song to autoplay we should
00:23:08.640 at least mute it using the muted
00:23:10.620 attribute
00:23:11.700 so our song is playing but it’s muted
00:23:14.039 until we unmute it
00:23:15.340 [Music]
00:23:16.740 yeah
00:23:18.260 [Music]
00:23:19.679 we can even have our song Loop by using
00:23:21.960 the loop attribute
00:23:24.059 so let me play this turn up the volume a
00:23:27.120 little bit fast forward to near the end
00:23:30.000 and let’s see if it loops
00:23:33.539 and it does cool
00:23:36.600 now in case your web browser doesn’t
00:23:38.400 support a certain audio type you can add
00:23:40.919 fallbacks so let’s say that we also have
00:23:43.980 a wave version of our audio file I can
00:23:47.340 include that as a fallback right
00:23:48.900 underneath
00:23:49.919 but we should also specify the type just
00:23:52.500 to let the web browser know that this is
00:23:54.299 an MP3 file and that this is a WAV file
00:23:56.700 I’ll include the type attribute I will
00:23:59.340 type audio slash MPEG
00:24:03.240 I will also let the web browser know
00:24:05.220 that this is a WAV file
00:24:07.620 audio slash wave so just in case our web
00:24:10.679 browser doesn’t support MP3 files I’m
00:24:12.840 pretty sure that they all do nowadays we
00:24:15.120 will resort to our WAV file if we have a
00:24:17.940 backup of the same audio file in wave
00:24:20.100 format let’s include our two other audio
00:24:22.260 files
00:24:23.340 so again we need a pair of audio tags
00:24:29.100 within the pair of audio tags we will
00:24:31.440 need a source tag a source element and I
00:24:34.559 will set the source to equal the name of
00:24:36.720 an audio file
00:24:38.039 so let’s copy the name of our second
00:24:40.440 audio file
00:24:41.700 including the extension
00:24:44.280 add some controls
00:24:48.480 and there’s our second song
00:24:50.400 let me pause the first one
00:24:53.080 [Music]
00:24:58.679 let’s add the last one
00:25:02.100 so here’s the name of my last song
00:25:08.520 be sure to get the file extension we
00:25:10.140 have our controls
00:25:12.419 and here’s my third song
00:25:15.140 I feel like I’m losing my mind
00:25:19.860 hey for fun let’s add the name of each
00:25:22.740 of these songs right before the controls
00:25:25.980 I’ll use a pair of paragraph tags
00:25:29.760 then I will copy the name of the song
00:25:31.620 and sandwich the name between the
00:25:33.779 paragraph tags
00:25:35.220 so that’s the name of my first song
00:25:37.860 let’s do this again with the second song
00:25:44.279 and the third
00:25:52.559 so here are my three songs
00:25:54.539 just to make everything a little more
00:25:56.340 organized I’m going to create a music
00:25:58.320 folder within my website folder to hold
00:26:00.659 all of my audio files I will create a
00:26:03.120 new folder I will name this music
00:26:06.059 I’ll place all of my audio files within
00:26:07.980 the music folder
00:26:13.440 so we no longer know where the location
00:26:15.299 of those audio files are because we’re
00:26:17.520 using a relative file path I’m going to
00:26:19.980 set the source attribute to be music
00:26:22.260 slash the name of the file
00:26:26.820 we can locate those files now
00:26:29.240 so that’s our first song
00:26:31.799 our second song
00:26:33.860 and our third song
00:26:36.200 that’s how to include audio files in a
00:26:38.880 web page using HTML if you’re enjoying
00:26:41.340 the series let me know by Smashing that
00:26:43.200 like button leave a random comment down
00:26:45.059 below and subscribe if you’d like to
00:26:46.679 become a fellow bro
00:26:49.860 hey what’s going on everybody today I’m
00:26:51.600 going to show you how we can include a
00:26:53.100 video in your web page using HTML
00:26:55.760 alright let’s get started everybody in
00:26:58.620 this example you’ll need a video file of
00:27:00.900 one of a few formats you can use either
00:27:03.059 an mp4 file webm or vorbis OGG I just so
00:27:07.919 happen to have an mp4 file of me playing
00:27:09.960 that new Zelda game Zelda tears of the
00:27:11.940 Kingdom this is just some sample footage
00:27:16.140 once you have your video file you’re
00:27:18.240 going to take it and place it right next
00:27:20.460 to your index file within your website
00:27:22.440 folder to include a video you’ll need a
00:27:25.620 pair of video tags
00:27:29.159 within the opening video tag we can set
00:27:31.919 a source attribute to B either the
00:27:35.159 relative file path or the absolute file
00:27:37.559 path of that video These two files are
00:27:40.380 right next to each other I only need the
00:27:42.299 file name
00:27:43.559 my file is zelda.mp4
00:27:47.039 and there’s my video but it’s humongous
00:27:50.400 we can change the height and or the
00:27:52.740 width let’s change the width to be 500
00:27:56.520 pixels that’s a good size
00:27:58.919 the height will adjust accordingly or
00:28:00.900 vice versa if I were to change the
00:28:03.059 height to be 500 then the width is going
00:28:05.460 to adjust accordingly
00:28:07.080 but let’s keep it as 500.
00:28:09.720 here’s our video but there’s no way to
00:28:11.760 play it we’ll need to add a set of
00:28:13.620 controls with the controls attribute
00:28:16.200 now we can play the video
00:28:19.980 to have this video autoplay when the
00:28:22.380 page loads
00:28:23.700 you can set the autoplay property
00:28:27.000 it should play automatically
00:28:29.279 but if it is set to auto play you should
00:28:31.440 at least mute it because people can find
00:28:33.240 it annoying especially if this video is
00:28:35.700 loud
00:28:37.080 let’s add the muted attribute
00:28:39.840 so now it auto plays and it’s muted
00:28:43.320 to have this video Loop when it’s done
00:28:45.480 let me fast forward to the end
00:28:49.020 I can add the loop attribute now it
00:28:52.559 should Loop when it reaches the end
00:28:55.140 right about here
00:28:59.220 yeah and it’s back to the beginning
00:29:00.419 again
00:29:01.679 just in case somebody’s web browser
00:29:03.779 doesn’t support this video file you can
00:29:06.419 add backups
00:29:07.919 I also happen to have a webm version of
00:29:10.740 the same video
00:29:12.059 I’ll place it within my website folder
00:29:16.799 then within the pair of video tags
00:29:19.860 we will add a source element
00:29:24.480 take our source attribute cut it then
00:29:28.080 paste it within the source element
00:29:31.620 you can keep all the attributes within
00:29:33.659 the opening video tag you should also
00:29:36.600 tell the web browser what type of video
00:29:38.880 file this is
00:29:40.679 video slash MP4
00:29:45.240 now to include a backup we just need to
00:29:47.940 use the source element again
00:29:50.220 as a backup in case a web browser can’t
00:29:52.620 play my mp4 file we’ll instead use the
00:29:55.980 webm version
00:29:58.820 zelda.web M the type is web m
00:30:04.200 all right so let me delete the MP4
00:30:06.600 version to test it
00:30:10.260 let’s save and reload everything and now
00:30:12.840 my webm version is playing
00:30:14.880 you can’t really tell the difference
00:30:16.919 you also have the capability of turning
00:30:18.899 this video into a hyperlink I will
00:30:21.360 surround my video element with a pair of
00:30:23.580 a tags
00:30:31.159 then I will set the href attribute to
00:30:34.679 some URL
00:30:36.419 I’ll set it to be the Wikipedia page for
00:30:39.480 Zelda feel free to pick any page of your
00:30:42.419 choosing
00:30:44.640 with the href attribute I will paste
00:30:46.980 that URL
00:30:49.279 now when I click on this video it should
00:30:52.200 bring me to the Legend of Zelda
00:30:53.940 Wikipedia page
00:30:55.440 to open this link I get it link because
00:30:58.080 it’s Legend of Zelda anyways to open
00:31:00.480 this link in a new tab I can set the
00:31:02.940 target attribute to be
00:31:05.820 underscore blank
00:31:08.039 then it should open in a new tab
00:31:10.679 which it does all right everybody so
00:31:13.740 that’s how to include a video in your
00:31:15.899 web page using HTML
00:31:20.340 hey everybody today I’m going to show
00:31:21.960 you how we can create a fabicon for your
00:31:24.179 web page to create a favicon you’ll need
00:31:26.820 an image to work with here’s mine I
00:31:29.279 would recommend an image that’s at least
00:31:31.320 96 by 96 pixels in width and height once
00:31:34.799 you have your image we’ll save the image
00:31:36.600 to our website folder I’ll right click
00:31:39.720 save image as
00:31:42.000 find my website folder
00:31:45.020 let’s rename this image favicon
00:31:49.260 for a favicon most modern web browsers
00:31:52.080 accept Ico PNG GIF JPEG and SVG image
00:31:56.760 files so let’s save our image
00:32:00.860 my image is now within my website folder
00:32:03.720 if you do need to make any graphical
00:32:05.940 changes to your image you can always use
00:32:08.159 a program like paint this is a built-in
00:32:10.500 program with most Windows operating
00:32:12.240 systems I’m pretty sure Mac and Linux
00:32:14.220 have something like it too
00:32:15.899 if I do need to change the dimensions on
00:32:18.299 my image I can open it
00:32:20.399 let’s find that image it’s within my
00:32:22.500 website folder
00:32:24.899 and here it is
00:32:26.700 if you do need to change the size of
00:32:28.740 your image you can go to resize
00:32:31.740 you can either resize or skew your image
00:32:34.200 my image is at least 96 pixels it’s 176
00:32:38.159 for both the width and the height
00:32:40.559 then you’ll want to save your image
00:32:42.059 afterwards to that website folder
00:32:46.980 once you have your image we’re going to
00:32:48.899 create a link tag the link is
00:32:51.840 self-closing
00:32:53.279 the link tag specifies the relationship
00:32:55.679 between this document and an external
00:32:57.899 source
00:32:59.580 the relationship attribute will be icon
00:33:03.840 because well we’re adding an icon to our
00:33:06.840 web page
00:33:08.520 the type will equal image slash
00:33:12.840 the type of your file so I have a JPEG
00:33:15.480 I’ll list jpg
00:33:18.539 then we need an href attribute
00:33:21.360 that will be the relative file location
00:33:23.539 my image is within my website folder I
00:33:26.640 just have to list the file name
00:33:29.760 favicon.jpg
00:33:33.600 let’s take a look refresh everything
00:33:36.240 and here is my favicon
00:33:38.460 typically with the web page I like to
00:33:40.440 place all of my images within one folder
00:33:42.720 within my website folder I’ll create a
00:33:45.419 new folder named images
00:33:48.120 and I’ll place my favicon within my
00:33:50.519 images folder
00:33:53.279 so we no longer can locate that favicon
00:33:55.620 I need to change the relative file path
00:33:58.200 of the favicon because it’s now within a
00:34:00.480 separate folder preceding the name of my
00:34:02.880 file I will list the folder that it’s in
00:34:05.820 Images slash favicon
00:34:09.500 and there it is again
00:34:11.879 all right everybody that’s how to create
00:34:13.560 a fabicon fear web page using HTML
00:34:19.080 hey everybody today I will explain text
00:34:21.359 formatting in html text formatting gifs
00:34:24.839 text special emphasis we can create bold
00:34:27.780 text italic text underline text so on
00:34:31.080 and so forth let’s begin let’s create a
00:34:34.260 pair of paragraph tags
00:34:36.899 and between this first set of paragraph
00:34:38.940 tags let’s type this is normal text
00:34:44.639 let’s copy this line of markup and then
00:34:47.580 paste it like 10 times
00:34:51.239 okay I lost count whatever text you
00:34:53.760 would like to add emphasis to you
00:34:55.500 surround that with a pair of tags but
00:34:57.660 there’s different pairs of tags that
00:34:59.099 have different effects for a bold effect
00:35:01.380 we use a pair of B tags let’s surround
00:35:04.740 normal in the second line with B then
00:35:07.740 change normal to the word bold
00:35:11.040 this is bold text
00:35:14.160 I is for italic
00:35:16.500 so let’s surround the next line with I
00:35:21.540 this is
00:35:23.099 italic text
00:35:26.700 then underlined is u
00:35:33.599 this is
00:35:35.339 underlined text
00:35:38.880 deleted text
00:35:40.680 we would type d e l
00:35:46.740 this is deleted text
00:35:50.520 big b-i-g
00:35:55.680 this is big text
00:35:58.800 so this text is a little bit bigger than
00:36:00.900 the other text surrounding it
00:36:03.300 then they’re small
00:36:11.220 this is small text
00:36:14.760 subscript
00:36:17.460 type sub
00:36:20.940 this is sub script text I misspelled
00:36:25.200 that there
00:36:26.820 the subscript text is smaller and it’s
00:36:29.339 just underneath the other text
00:36:30.900 surrounding it
00:36:32.640 then their superscript
00:36:35.160 type sup like you’re saying Sup like
00:36:38.160 what’s up
00:36:40.020 this is superscript text
00:36:45.240 then you have mono spaced
00:36:47.579 which is TT
00:36:52.859 this is monospaced text
00:36:57.300 oops I forgot to close it this is a good
00:36:59.880 example of why you should add closing
00:37:01.440 tags because the markup will Cascade
00:37:03.960 through the rest of your document so be
00:37:05.940 sure to close any opening tags
00:37:08.460 all right then the last one is Mark
00:37:13.940 creates a highlight effect
00:37:16.859 kind of like you’re taking a highlighter
00:37:18.599 and highlighting some text you can use
00:37:20.940 CSS to change the color too
00:37:23.339 I haven’t really discussed CSS yet but
00:37:25.560 to add a little bit of inline CSS within
00:37:28.140 the opening mark tag
00:37:29.940 take the style attribute set that equal
00:37:33.060 to take the background Dash color
00:37:38.160 colon then we can pick a color how about
00:37:41.040 light green I think that would look good
00:37:43.920 and our highlight effect is now light
00:37:46.320 green or pick some other color of your
00:37:48.300 choosing we’ll discuss colors more when
00:37:50.820 we reach CSS all right everybody so that
00:37:53.760 is text formatting text formatting gives
00:37:56.700 text special emphasis you can create
00:37:59.220 text that is bold italic underline
00:38:01.380 deleted big small subscript superscript
00:38:03.300 model space and highlighted text and
00:38:05.520 well that is text formatting in HTML
00:38:10.560 hey how’s it going everybody today I
00:38:12.540 need to explain the span and div tags in
00:38:15.720 HTML the span tag is an inline container
00:38:19.140 to group elements for styling purposes
00:38:21.599 the div tag it’s very similar except
00:38:24.780 it’s a block container to group elements
00:38:27.359 for styling purposes here’s an example
00:38:29.760 let’s create two H1 titles
00:38:33.560 this is a span title
00:38:39.240 then close it
00:38:40.859 let’s copy this line of markup then
00:38:43.680 paste it the second line will be this is
00:38:46.680 a div title
00:38:48.180 I’m going to enclose my first sentence
00:38:50.460 with a pair of span tags
00:38:53.339 so we need an opening span tag and a
00:38:55.920 closing span tag somewhere
00:38:59.099 all right with this set of span tags we
00:39:01.859 are enclosing this text within a
00:39:04.260 container it’s an inline container we
00:39:06.720 can apply some CSS styling to this
00:39:08.700 sentence whatever is sandwiched between
00:39:10.500 the pair of span tags let’s change the
00:39:13.500 background color of the title
00:39:15.780 I will set the style attribute to equal
00:39:19.619 background Dash color
00:39:22.500 then pick a color how about red
00:39:25.619 then a semicolon there so the background
00:39:28.440 of my title is red but you know what
00:39:30.839 that red is a little bright let’s do
00:39:33.180 tomato
00:39:34.920 I think that’s a better color whatever
00:39:37.079 is enclosed with a pair of span tags we
00:39:39.720 can apply some inline CSS styling too
00:39:42.599 now with div this creates a block level
00:39:45.300 container
00:39:46.500 so I will surround this sentence with a
00:39:49.140 pair of div tags div meaning division
00:39:55.020 let’s apply that same styling
00:39:57.240 I’ll copy my style attribute
00:40:00.359 paste it let’s change the color to B
00:40:03.480 maybe cyan
00:40:06.300 all right here we are
00:40:08.220 this is a title using span this is a
00:40:11.040 title using div span is an inline
00:40:13.619 container div is a block level container
00:40:16.920 it takes the entire width of my document
00:40:19.260 you can see that this is all blue
00:40:22.440 let’s create a pair of paragraph tags
00:40:25.859 this is a span sentence
00:40:30.780 then close it
00:40:33.720 let’s copy this paragraph paste it again
00:40:37.440 then change the second sentence to div
00:40:40.500 all right let’s enclose our first
00:40:42.119 sentence with a pair of span tags
00:40:45.900 all right I will set the style to be red
00:40:48.420 well tomato tomato color technically
00:40:53.099 it’s kind of like we’re highlighting the
00:40:54.540 text much like the mark tags in the last
00:40:57.660 topic
00:40:58.740 let’s copy this tag
00:41:01.680 change span to div
00:41:05.640 then the color how about cyan
00:41:08.760 and then we need to close the div tag
00:41:16.740 there we are
00:41:19.800 all right now let’s create two large
00:41:21.839 paragraphs
00:41:24.660 we need a pair of paragraph tags
00:41:28.020 in vs code to generate some sample text
00:41:30.300 you can type lorem then tab
00:41:33.900 so I will copy this line
00:41:36.900 paste it again
00:41:39.839 let’s say after the first sentence I
00:41:41.820 would like to add a background color
00:41:45.180 so right here I will add
00:41:47.579 a Spam tag an opening span tag then
00:41:50.339 where would I like to close it
00:41:52.260 let’s do so before the closing paragraph
00:41:54.480 tag
00:41:55.980 then I will change the background color
00:42:06.180 all right we have highlighted the second
00:42:08.099 sentence let’s do this with div tags now
00:42:10.440 with our next paragraph let’s create an
00:42:12.540 opening div tag
00:42:14.160 then we’ll need to close it somewhere
00:42:16.859 let’s close it before the closing
00:42:18.839 paragraph tag
00:42:22.140 and then I will change the background
00:42:24.000 color
00:42:27.359 within the opening div tag I will set
00:42:29.460 the background color to be cyan
00:42:32.640 what we have done is created a block
00:42:34.260 level element for the second sentence
00:42:36.660 within our paragraph basically speaking
00:42:39.000 we can use the span and div tags to
00:42:40.980 group together HTML for styling purposes
00:42:43.400 span is an inline container div is a
00:42:47.400 block level container we’ll be using
00:42:49.500 these more when we reach CSS and well
00:42:51.900 everybody those are the span and div
00:42:53.400 tags in HTML
00:42:57.000 hey everybody today I’m going to explain
00:42:58.859 how we can create different lists in
00:43:01.200 HTML there’s three different types of
00:43:03.240 lists that we’ll discuss today unordered
00:43:05.280 ordered and description lists for an
00:43:07.980 unordered list think of maybe a grocery
00:43:10.440 list the order of items doesn’t matter
00:43:12.780 to create an unordered list you need a
00:43:15.540 pair of UL tags
00:43:18.480 UL meaning unordered list then between
00:43:21.720 the pair of UL tags you need to list
00:43:24.119 items
00:43:25.200 Li means a list item
00:43:27.660 so we have a little bullet point let’s
00:43:30.000 create a grocery shopping list maybe we
00:43:33.119 need to buy milk let’s create another
00:43:36.000 list item
00:43:37.319 we need another pair of list item tags
00:43:40.619 let’s buy eggs
00:43:44.819 what else can we buy milk eggs bread
00:43:49.680 and what about coffee
00:43:54.540 there we are here’s our unordered list
00:43:56.700 each list item is bulleted hey let’s add
00:43:59.520 a title to this list preceding the pair
00:44:01.619 of UL tags let’s use maybe an H4 header
00:44:05.220 tag
00:44:06.839 let’s say groceries here are the
00:44:10.500 groceries I want to buy the order
00:44:12.359 doesn’t matter so we’re using an
00:44:14.040 unordered list now you can create nested
00:44:16.560 lists too let’s change coffee to Coffee
00:44:19.619 supplies
00:44:21.960 then after this list item we’ll create
00:44:24.420 another unordered list
00:44:27.420 then we need more list items
00:44:29.700 so for coffee supplies of course we
00:44:31.980 would need coffee or maybe coffee beans
00:44:36.359 now we have a hollow bullet point
00:44:39.540 maybe you need some creamer for your
00:44:41.460 coffee and or sugar
00:44:47.099 so that’s how to create a nested list
00:44:48.839 within a list within your list you can
00:44:51.420 create another list now let’s go over
00:44:53.819 order lists to create an ordered list
00:44:56.040 you need a pair of ol tags meaning
00:44:58.560 ordered list
00:45:00.180 then you need some list items
00:45:02.700 what about a to-do list
00:45:04.980 so we need a list item
00:45:07.140 so number one that’s first in our list
00:45:10.440 we need to eat breakfast
00:45:14.460 I’m going to add a title to so let’s use
00:45:17.160 a pair of H4 header tags
00:45:19.560 this will be my two do list
00:45:23.700 one we need to eat breakfast
00:45:28.380 two
00:45:29.760 go to school or go to class
00:45:33.599 so that’s number two
00:45:37.619 number three
00:45:39.420 after class you have to walk your dog
00:45:44.220 then four maybe you have to go to work
00:45:47.520 all right that is an ordered list use a
00:45:50.160 pair of ol tags then lastly we have a
00:45:52.980 description list this one’s a little
00:45:54.839 more tricky a description list is made
00:45:57.300 of key value pairs you have a term and a
00:46:00.060 definition to create a description list
00:46:02.400 you need a pair of DL tags meaning
00:46:05.520 description list
00:46:07.560 we need some terms to create a term you
00:46:10.380 type DT
00:46:11.819 then close it
00:46:13.680 so I play a lot of Dungeons and Dragons
00:46:15.720 let’s create some definitions for some
00:46:18.420 mythological creatures like a dragon
00:46:21.480 so that’s my term
00:46:23.880 let’s create a few other terms
00:46:27.000 dragon
00:46:28.800 v-nix
00:46:30.540 vampire
00:46:32.819 and werewolf
00:46:35.339 so these are the terms underneath each
00:46:37.800 term we can add a definition
00:46:40.440 we’ll need a pair of DD tags for
00:46:43.440 description definition I’m gonna google
00:46:45.540 each of these creatures then just paste
00:46:47.819 the definition that I find
00:46:50.099 so for a dragon I’m just gonna copy this
00:46:52.920 definition
00:46:55.440 then paste it within the DD tags
00:46:59.819 here’s my term and here’s my definition
00:47:02.220 of that term Dragon a mythical monster
00:47:04.980 resembling a giant reptile sometimes
00:47:07.140 shown as having wings let’s do this with
00:47:09.599 our other definition terms as well
00:47:11.880 next we have Phoenix
00:47:16.280 definition an immortal bird associated
00:47:19.800 with Greek mythology
00:47:22.500 we’ll need a pair of DD tags add your
00:47:25.500 definition
00:47:26.760 then close it
00:47:30.900 here’s my second description definition
00:47:32.700 then we need vampire and werewolf
00:47:39.060 vampire creature definition
00:47:42.060 let’s copy this
00:47:46.140 create another pair of DD tags
00:47:49.560 then paste that definition
00:47:52.079 here’s the definition for vampire then
00:47:54.540 lastly werewolf
00:47:58.619 werewolf creature definition
00:48:01.859 an individual that can shape shift into
00:48:03.900 a wolf
00:48:06.000 so DD close it
00:48:08.700 add that definition
00:48:13.859 and there’s our definition for werewolf
00:48:15.720 so that’s a description list in a way
00:48:18.240 it’s made of key value pairs you have a
00:48:20.579 term which is represented with
00:48:22.440 description term then a description with
00:48:24.960 DD description definition I forgot to
00:48:27.660 add a title to this list let’s do that
00:48:30.359 I’ll use a pair of H4 header tags
00:48:33.599 let’s make the title mythical creatures
00:48:38.520 not bad let’s add a background color
00:48:40.859 because well we can I’ll add a
00:48:43.260 background color to the opening DL tag
00:48:46.680 so style equals
00:48:50.040 background Dash color
00:48:53.880 what’s a good color for this what about
00:48:55.980 light green
00:48:59.520 I haven’t discussed borders yet but to
00:49:01.680 add a border you can type border colon
00:49:04.980 then a size maybe two pixels then
00:49:07.920 there’s different borders but let’s go
00:49:09.720 with solid for now
00:49:11.760 here’s a border around my list alright
00:49:14.220 everybody so that’s how to create
00:49:15.359 different lists in HTML we have
00:49:17.940 unordered lists ordered lists and
00:49:20.400 description lists you can style your
00:49:22.859 lists as well but we haven’t really
00:49:24.359 discussed much CSS yet but yeah those
00:49:27.119 are different lists in HTML
00:49:31.079 hey everybody today I’m going to show
00:49:32.880 you how we can create a table using HTML
00:49:35.700 let’s create a table of store hours for
00:49:38.099 a fictional business I’ll create a title
00:49:41.579 using H3 header tags the title will be
00:49:45.119 store hours what are the hours of
00:49:48.300 operation for our store
00:49:50.400 to create a table we need a pair of
00:49:52.079 table tags
00:49:55.260 for the first row we need a pair of TR
00:49:58.260 tags meaning table row
00:50:01.619 so the first row is going to be filled
00:50:03.900 with table headers how many columns do
00:50:06.720 we have well if we have a table of store
00:50:09.000 hours they’re seven days in a week
00:50:12.060 we will need seven pairs of table header
00:50:15.420 tags
00:50:16.500 so let’s copy and paste these tags six
00:50:19.560 additional times for a total of seven
00:50:21.960 one two three four five six seven
00:50:24.900 alright now for the First Column the
00:50:27.240 header will be Sunday we have Sunday
00:50:31.079 then Monday
00:50:35.099 Tuesday
00:50:37.859 Wednesday
00:50:41.760 Thursday
00:50:44.400 Friday
00:50:46.200 Saturday
00:50:50.400 so here’s my first row
00:50:52.559 the first row is your table headers add
00:50:56.220 one header for each column in your table
00:51:00.839 for another row we need another pair of
00:51:03.480 TR tags meaning table row
00:51:07.020 so for my second row
00:51:09.059 I’ll include table data
00:51:11.819 we need TD tags
00:51:14.640 so we’ll need a total of seven
00:51:21.480 on Sunday our fictional store is going
00:51:23.940 to be closed I’ll type closed as we can
00:51:26.940 see that this data is underneath this
00:51:29.280 header for the second row
00:51:31.920 Monday the hours will be nine to five
00:51:35.220 let’s apply that for the other days
00:51:36.780 besides Saturday
00:51:40.079 Monday through Friday the store is open
00:51:42.180 between nine to five
00:51:44.040 Saturday will be reduced hours ten to
00:51:46.800 two
00:51:47.940 alright not too bad
00:51:50.040 to align the table data what you’re
00:51:52.260 going to do is within the table row take
00:51:54.839 the Align attribute set this to Center
00:51:59.700 or otherwise if you would like to write
00:52:01.800 justify it you would type right
00:52:04.680 but let’s stick with Center
00:52:07.140 let’s align the first row as well
00:52:10.680 we can also add a border within the
00:52:13.559 opening table tag set border equal to
00:52:16.619 zero that’s for no border
00:52:20.040 then increase the number depending on
00:52:21.839 the thickness that you want
00:52:23.700 so one will give us a border that is
00:52:25.920 this thick
00:52:27.900 two
00:52:30.180 and three
00:52:32.339 let’s stick with one
00:52:36.359 let me move this a little
00:52:38.940 these table cells aren’t exactly the
00:52:41.160 same size the word Wednesday has a lot
00:52:43.859 of characters
00:52:45.059 within each of these header tags I will
00:52:47.460 set the width
00:52:48.900 to be maybe 100.
00:52:51.540 this column is a little bit larger now
00:52:53.579 let’s copy the width and make each
00:52:56.640 header have a width of 100.
00:53:02.460 okay this table is All Uniform now
00:53:05.640 but if we were to shrink this window
00:53:08.339 the cells would be compressed
00:53:10.619 okay let’s change the background color
00:53:12.900 let’s begin with the table
00:53:15.059 I will set the style attribute to be a
00:53:18.000 CSS property
00:53:19.440 let’s set the background
00:53:21.599 Dash color to be black
00:53:25.800 the whole table is black now so let’s
00:53:28.380 change the color for the headers
00:53:32.940 and I’m just going to copy this style
00:53:34.619 attribute
00:53:36.300 let’s change the first row to have a
00:53:38.760 color of
00:53:40.619 light blue
00:53:43.740 we can at least see the text now
00:53:48.059 and then for the second row let’s pick a
00:53:50.099 different color
00:53:51.900 I think this color would be good
00:53:54.119 Alice blue
00:53:56.760 yeah that’s not too bad
00:53:58.740 if you need additional rows for your
00:54:00.599 table use another set of TR tags meaning
00:54:03.660 table row then you can add another set
00:54:05.819 of data all right everybody that is how
00:54:08.280 to create a table using HTML
00:54:13.260 hello again everybody today I’m going to
00:54:15.180 show you how we can create a button
00:54:16.980 using HTML and a little CSS to create a
00:54:20.280 button we need a pair of button tags
00:54:25.260 and here’s our button it’s really small
00:54:27.480 and it doesn’t do anything let’s add
00:54:29.819 some text between the button tags let’s
00:54:32.220 add some text like click me
00:54:35.339 so here’s our button but it’s fairly
00:54:37.260 small we can change the size of this
00:54:39.359 button by changing the font size we will
00:54:42.300 need to access the style attribute then
00:54:44.760 set the font size property to a larger
00:54:46.980 font size so font Dash size
00:54:51.000 25 pixels is good
00:54:54.000 the size of our button will adjust
00:54:55.740 accordingly
00:54:57.059 let’s change the background color
00:54:59.819 separate each of these CSS properties
00:55:01.920 with a semicolon let’s change the
00:55:04.980 background Dash color to be Gray
00:55:09.480 so that’s how to change the background
00:55:11.040 color
00:55:12.059 to change the font color type color
00:55:15.020 colon then some color like light blue
00:55:19.920 you can round the corners by setting a
00:55:22.680 border radius
00:55:24.000 so that’s another CSS property
00:55:26.520 border Dash radius
00:55:29.339 colon
00:55:30.960 let’s begin with five
00:55:32.880 that will Round the Corner slightly you
00:55:35.339 can increase the amount of pixels for a
00:55:37.260 more rounded border
00:55:39.140 let’s try 25. that’s not too bad
00:55:43.859 so this button currently doesn’t do
00:55:45.720 anything what I’m going to do is turn
00:55:47.940 this button into a hyperlink when we
00:55:50.400 click on the button it will take us to
00:55:52.200 maybe Google
00:55:53.579 we need to surround our button with a
00:55:55.559 pair of a tags
00:56:00.180 I will set the href attribute equal to
00:56:03.480 some URL
00:56:04.740 like Google
00:56:09.000 so when I click on the button it takes
00:56:11.520 me to Google
00:56:12.720 or if we had another HTML file we can go
00:56:15.540 there too I’ll create a new HTML file
00:56:18.240 named maybe page two page2.html
00:56:25.260 let’s generate some HTML in vs code to
00:56:28.380 do that type an exclamation point then
00:56:30.540 tab all I’m going to add to page 2 is an
00:56:33.599 H1 header tag
00:56:35.520 with the title of this is page number
00:56:39.059 two
00:56:40.980 I’ll set the href attribute to B
00:56:43.980 the name of that HTML file page2.html
00:56:51.319 page2.html
00:56:53.040 when I click on the button it brings me
00:56:55.380 to my second page
00:56:56.940 I haven’t discussed JavaScript yet but
00:56:59.280 we can have a button execute some
00:57:01.079 JavaScript code this part of the lesson
00:57:03.480 is outside the scope of what I would
00:57:05.579 normally teach at this point in time but
00:57:07.380 if you’re interested here’s a little bit
00:57:09.300 of JavaScript again it’s not necessary
00:57:11.520 to learn this at this level if you would
00:57:13.980 like to execute some JavaScript code
00:57:15.660 using a button we need a pair of script
00:57:17.700 tags for JavaScript
00:57:21.480 within this pair of script Tags I’m
00:57:23.700 going to define a function function you
00:57:26.640 can come up with some function name
00:57:28.859 this function will do something then you
00:57:32.460 need a set of parentheses then a set of
00:57:34.200 curly braces
00:57:36.540 buttons have an on click attribute we
00:57:40.200 can have the button do something if it’s
00:57:42.000 interacted with
00:57:43.680 the on click attribute is going to be
00:57:46.079 the name of my function do something
00:57:49.500 when we click on the button execute this
00:57:52.260 function what do we want to do
00:57:55.140 I’ll change some text on the screen
00:57:57.660 but we’ll need some sample text to work
00:57:59.579 with
00:58:00.599 I’ll create a pair of paragraph tags
00:58:03.839 let’s say hello
00:58:06.119 within our JavaScript function we’ll
00:58:08.520 change the text of whatever’s between
00:58:10.980 these two paragraph tags but we need an
00:58:13.619 ID there’s an ID attribute
00:58:16.440 I’ll name this text maybe greeting
00:58:20.880 so when we click on this function I
00:58:23.280 would like to change the text of my
00:58:25.559 greeting
00:58:26.880 within the function we can do that with
00:58:28.920 document dot get element
00:58:33.839 by ID
00:58:36.359 within the set of parentheses the ID is
00:58:39.480 greeting
00:58:41.400 follow this with DOT enter
00:58:44.420 HTML then we can set the SQL to some new
00:58:47.460 value
00:58:48.480 let’s set the new value to be good bye
00:58:53.420 now when I click on the button it
00:58:56.579 changes our text
00:58:58.440 so that’s a button everybody
00:59:00.240 you need a pair of button tags you can
00:59:03.059 apply some CSS styling I haven’t really
00:59:05.819 discussed CSS yet so we did inline CSS
00:59:09.480 but if you have these many properties I
00:59:11.460 would recommend a style sheet which
00:59:13.200 we’ll cover later to make your button
00:59:15.240 bigger you can change the font size you
00:59:17.640 could have your button bring you to
00:59:18.960 another HTML page or even execute some
00:59:21.420 JavaScript code and well everybody
00:59:23.339 that’s how to create a button using HTML
00:59:28.260 hello again friends today I’m going to
00:59:30.660 explain how we can create a form using
00:59:33.000 HTML to create a form we’ll need a pair
00:59:36.000 of form tags
00:59:38.460 the opening form tag has a few
00:59:40.260 attributes we need to fill in
00:59:42.180 first is an action attribute after
00:59:44.640 submitting our form to what location do
00:59:47.220 we want to send our form to form
00:59:49.140 submission is done with the back end
00:59:50.760 language such as PHP you might see a
00:59:53.579 file name such as index.php or action
00:59:56.760 page or something of that nature within
00:59:58.859 your action attribute we’re not actually
01:00:00.599 going to do a form submission but just
01:00:02.579 be aware that the action attribute sends
01:00:04.799 data to this location to this file the
01:00:07.500 file listed really can be anything but
01:00:09.839 that’s outside the scope of this lesson
01:00:11.640 you’ll also see a method the method
01:00:14.280 attribute specifies if this is a get
01:00:16.559 request or a post request post is used
01:00:19.799 for confidential information such as a
01:00:22.319 username and a password get is for
01:00:24.720 insensitive data basically again this is
01:00:27.180 outside the scope of HTML at this point
01:00:29.280 in time if we have a form and we’re
01:00:31.380 sending sensitive data we should use
01:00:33.420 post now let’s create some elements
01:00:35.700 within our form the first thing we’ll
01:00:37.440 create is a text box we need a
01:00:39.839 self-closing input tag
01:00:42.000 so here’s our text box by default the
01:00:45.240 type is a text box but we can specify
01:00:48.000 that with the type
01:00:49.500 so type text there’s other different
01:00:52.559 types like passwords emails telephone
01:00:55.619 numbers we’ll cover that pretty soon we
01:00:58.200 have a text box but if a user sees this
01:01:00.540 text box they probably don’t know what
01:01:02.700 they should enter in let’s add a label
01:01:04.799 to the text box
01:01:06.240 preceding my input tag I will create a
01:01:09.000 pair of label tags what do we want our
01:01:11.640 label to say
01:01:12.900 maybe username we’re telling the user
01:01:15.240 hey we want you to enter in your
01:01:16.980 username
01:01:17.880 if somebody is using a screen reader if
01:01:19.799 they’re visually impaired we should add
01:01:21.660 a four attribute what is this for well
01:01:25.140 this is for my username another benefit
01:01:27.839 of adding the four attribute to a label
01:01:30.000 when you click on the label your cursor
01:01:32.400 will move to the text box but we need a
01:01:35.040 matching ID attribute within the input
01:01:37.200 tag
01:01:38.099 so the ID is going to be the same as the
01:01:41.099 four attribute then when I click on the
01:01:43.559 label our cursor moves to the text box
01:01:45.660 there are a few other attributes you
01:01:47.700 might be interested in as well but
01:01:49.500 before we get to that we should create a
01:01:51.599 submit button to submit our data at the
01:01:54.299 end of our form we’ll create an input
01:01:56.640 tag
01:01:57.740 the type will be submit
01:02:03.000 it’s a submit button but it currently
01:02:05.520 doesn’t do anything we’re not using a
01:02:07.440 back-end language to submit form data to
01:02:10.380 there are some useful attributes for
01:02:12.119 text boxes within the input element for
01:02:14.819 text box let’s add the required
01:02:17.579 attribute
01:02:18.720 in order to submit this form we need to
01:02:21.000 type in a password if I just leave it
01:02:22.920 blank then hit submit we have this
01:02:25.440 little prompt please fill out this field
01:02:28.500 I can’t submit this form until I type in
01:02:31.200 something
01:02:32.520 then I can submit it you could set a
01:02:35.819 minimum and maximum length
01:02:37.680 that’s another attribute Min length
01:02:41.299 equals then some length
01:02:44.099 the minimum length for a username is six
01:02:47.460 characters
01:02:49.020 let’s type in just three or some other
01:02:51.359 number below six submit
01:02:54.119 please lengthen this text to six
01:02:55.980 characters or more
01:02:57.960 I’ll come up with a different username
01:02:59.760 then submit and that appears to work you
01:03:02.880 also have the capability of setting a
01:03:04.799 maximum length
01:03:06.299 with the max length attribute let’s make
01:03:09.480 the max length 15 characters
01:03:12.299 so let’s type in a username
01:03:15.720 I’ll add a bunch of characters
01:03:16.980 afterwards so I can type in any more
01:03:19.380 than 15 characters there’s a maximum
01:03:23.040 to reset your form there’s a reset
01:03:25.319 button let’s copy this input tag
01:03:28.799 paste it then change type to reset
01:03:33.359 so here’s my reset button I’ll type in a
01:03:36.119 username press reset then we can reset
01:03:39.000 the data for our form but afterwards I’m
01:03:41.400 just going to add a break line just to
01:03:43.319 put the submit button on a new line with
01:03:45.660 text boxes you can add a placeholder to
01:03:48.180 give the user an idea of what we want
01:03:49.980 them to enter in and in what format I’m
01:03:52.559 going to add a place holder attribute
01:03:58.260 what do we want our placeholder to be
01:04:00.780 um I don’t know SpongeBob SquarePants or
01:04:02.700 maybe just SpongeBob so the placeholder
01:04:04.920 is faded it gives a hint to the user as
01:04:07.619 to the format in which they should enter
01:04:09.240 in information if I were to click on
01:04:11.040 this text box the hint is still there
01:04:12.839 until we type in something
01:04:15.480 okay let’s cover passwords
01:04:18.480 to create a password we’ll use an input
01:04:21.000 tag the type
01:04:23.640 is going to be a password
01:04:26.880 we should probably add a label to let
01:04:28.920 the user know that we would like a
01:04:30.359 password
01:04:31.980 so I’m just going to copy the label that
01:04:33.839 we have for our username
01:04:35.940 the four attribute of our label should
01:04:38.040 match the ID attribute of our input tag
01:04:40.440 so the ID is going to be password the
01:04:45.359 for attribute of the label will be
01:04:47.339 password and then change the text to
01:04:51.960 there we are
01:04:53.760 I’m just going to change one thing after
01:04:56.579 my password I’m going to add a break
01:04:57.960 line so I will add that here
01:05:01.380 all right so with the password the text
01:05:03.599 is hidden I can type in a bunch of
01:05:05.579 characters and you can’t see it
01:05:07.500 you could add some of these attributes
01:05:09.299 as well like a minimum length maximum
01:05:11.220 length and the required attribute
01:05:13.500 so I’ll copy those and paste them within
01:05:16.319 the input tag from my password
01:05:18.960 I can type in a username if I attempt to
01:05:21.720 submit this form data without a password
01:05:24.299 we have that prompt please fill out this
01:05:26.520 field that’s because we have the
01:05:28.079 required attribute set there’s also a
01:05:30.540 minimum length and a maximum length set
01:05:32.220 too I’m required to type in a password
01:05:34.140 that’s at least six characters long
01:05:36.480 right now this is only five anything
01:05:38.700 between 6 and 15 is okay
01:05:41.280 for the rest of this demonstration I’m
01:05:43.200 going to get rid of these attributes
01:05:45.299 let’s cover email next I’ll create a
01:05:47.640 label first
01:05:50.099 this will be for email the text will be
01:05:53.819 email
01:05:54.839 then we’ll need a corresponding input
01:05:56.819 tag
01:05:57.839 input type equals email for the ID I
01:06:02.819 will also set that to be email
01:06:05.579 I’ll add a line break after then I’ll
01:06:08.099 add a placeholder
01:06:10.319 s
01:06:11.640 Square Pants
01:06:13.559 at gmail.com
01:06:16.200 again the placeholders letting the user
01:06:18.240 know the format in which they should
01:06:20.040 type in their information
01:06:21.660 if I were to type in some text but we’re
01:06:23.819 missing that at sign
01:06:27.000 hold on let me type in something real
01:06:28.500 quick
01:06:29.700 all right click submit we have a prompt
01:06:32.400 please include an at sign in the email
01:06:34.859 address because we’re looking for a
01:06:37.079 valid email address format that’s input
01:06:39.420 for email let’s copy our label
01:06:43.079 for
01:06:44.579 phone
01:06:46.440 the text will be phone number
01:06:52.020 again we need an input tag the type will
01:06:55.500 be Tel for telephone
01:06:58.380 we need a matching ID that matches the
01:07:01.200 four attribute
01:07:03.059 phone
01:07:04.200 I’ll add a break element to the end
01:07:06.599 we can type in a phone number I’ll add a
01:07:09.059 placeholder too
01:07:12.140 placeholder equals with American
01:07:14.700 telephone numbers you have three digits
01:07:16.799 such as one two three dash then another
01:07:19.920 three digits like four five six dash
01:07:22.440 then four digits seven eight nine zero
01:07:24.960 So currently we can type in any numbers
01:07:27.960 then submit them uh hold on I need a
01:07:30.180 username
01:07:31.380 we can limit the format in which a user
01:07:34.020 can type in some numbers for a phone
01:07:35.819 number
01:07:36.599 we would need a pattern attribute
01:07:39.299 for the digits 0 through 9 within a set
01:07:42.240 of straight brackets you would type 0-9
01:07:46.200 then how many digits do you allow
01:07:47.880 afterwards
01:07:49.319 three then we’ll need a dash that’s
01:07:51.539 required add a dash
01:07:53.700 then another three digits zero through
01:07:55.619 nine zero Dash nine
01:07:58.740 then another three digits Dash
01:08:02.940 number zero through nine let me move
01:08:05.400 this in a little bit then I would like
01:08:07.740 four digits so now our phone number
01:08:09.660 needs to be in this format three digits
01:08:12.180 Dash three digits Dash four digits one
01:08:15.599 two three dash four five six seven eight
01:08:18.060 nine zero
01:08:19.738 hold on I’m going to get rid of this
01:08:21.540 required attribute just because it’s
01:08:23.100 kind of annoying right now one two
01:08:24.960 three-456-7890
01:08:28.439 there that seems to work but if I were
01:08:30.960 to type in a random amount of numbers
01:08:33.660 well then we don’t meet this pattern
01:08:35.520 matching this pattern is required in
01:08:38.520 order to submit this data
01:08:40.799 all right then we have dates like a
01:08:43.380 birth date we’ll need a label
01:08:46.380 this will be for a birth date
01:08:49.920 four b day
01:08:53.759 input type equals date
01:08:58.679 the ID should match the four attribute
01:09:01.439 of the label
01:09:04.259 then I’ll add a break element
01:09:07.259 so with dates there’s an interactive
01:09:09.120 calendar to select a date
01:09:11.279 pretty simple then we have a number
01:09:13.259 element a user is going to enter in a
01:09:16.198 quantity like they’re buying something
01:09:18.299 like how many do you want
01:09:20.339 let’s change the text to quantity
01:09:23.939 for
01:09:25.920 quantity
01:09:28.799 we need an input element
01:09:31.259 the type will be number
01:09:34.439 ID equals
01:09:37.259 quantity
01:09:39.000 then I’ll add a break
01:09:41.219 so here’s our quantity
01:09:43.198 we can use these arrows to go up or down
01:09:46.620 however normally you can go into
01:09:48.238 negative numbers we can set a minimum
01:09:51.060 and a maximum with the Min and Max
01:09:53.640 attributes so the minimum will be zero
01:09:56.340 we don’t want to go below zero the max I
01:09:59.880 think 99 is good so we can’t go below
01:10:02.640 zero but we can go all the way to 99 and
01:10:04.980 no further you can add a default value
01:10:07.380 with the value attribute I’ll set the
01:10:09.780 default to be one that is for number
01:10:12.060 input it’s good if you need a quantity
01:10:13.920 of something
01:10:15.239 all right then radio buttons radio
01:10:17.340 buttons are a little tricky with radio
01:10:19.380 buttons you can only select one from a
01:10:21.420 group I think a good label will be for a
01:10:24.000 title are you a mister a miss a doctor
01:10:26.640 whatever like what’s your title so title
01:10:30.659 for title
01:10:33.120 we have our title so far then we’ll need
01:10:35.460 individual buttons I’ll create a label
01:10:37.800 for Mr Miss and doctor
01:10:41.280 Mr
01:10:43.679 Miss
01:10:45.840 in the U.S doctor is p h d
01:10:51.420 the four attribute will be Mr for Mr
01:10:55.260 Miss for Miss
01:10:57.900 then p h d for PhD
01:11:02.040 I’m gonna get rid of these colons
01:11:04.920 so after each label we’ll create a radio
01:11:07.080 button
01:11:08.580 input type equals radio
01:11:12.600 the ID will match the four attribute of
01:11:15.659 the label we have Mr
01:11:18.179 then we’ll want to add a value to when
01:11:20.699 we submit this form so mister
01:11:24.000 okay let’s copy this input then apply it
01:11:26.640 to miss add PhD so type radio ID will be
01:11:31.500 Miss value Miss
01:11:34.260 then we have PhD
01:11:37.380 ID will be PhD value PhD
01:11:42.239 so we have three radio buttons
01:11:44.400 um let me just add a break afterwards
01:11:47.100 with a group of radio buttons you should
01:11:49.260 only be able to select one
01:11:51.239 however we can select all three that’s
01:11:54.060 because we need to add all of these
01:11:55.739 radio buttons to the same group we’re
01:11:57.960 going to add a name attribute
01:12:00.600 we’ll name this attribute title
01:12:03.000 whichever radio buttons you would like
01:12:04.679 in the same group they need to share the
01:12:06.780 same title
01:12:08.219 now we only can select one those are
01:12:10.620 radio buttons
01:12:12.540 okay let’s create a drop down menu
01:12:16.679 this will be for a payment like what
01:12:19.860 kind of card are you paying with is it a
01:12:21.659 Visa card MasterCard gift card
01:12:24.600 four
01:12:26.100 payment instead of an input element
01:12:28.500 we’re going to be using a pair of Select
01:12:31.199 tags
01:12:32.219 for a select element
01:12:35.400 then add a break afterwards
01:12:38.520 so we have a drop down menu but there’s
01:12:40.260 no options
01:12:41.580 we will add option elements within our
01:12:43.860 select element
01:12:45.800 so these have opening and closing tags
01:12:49.860 let’s create three options
01:12:52.980 an option for Visa Mastercard then gift
01:12:55.560 card for option one the value will be
01:13:00.120 Visa
01:13:01.500 the text will be Visa
01:13:05.880 so we have one option let’s add two more
01:13:09.659 value
01:13:11.699 MasterCard
01:13:13.080 the text will be
01:13:15.060 MasterCard
01:13:17.640 then a gift card
01:13:19.739 value equals
01:13:22.620 gift card the text will be gift card
01:13:26.040 then I forgot to add an ID to the
01:13:28.260 opening select element
01:13:29.940 ID equals payment
01:13:33.480 there we are all right so that is a drop
01:13:35.820 down menu you need a pair of Select tags
01:13:38.340 within the select tags you can create
01:13:40.620 option tags then we have a check box
01:13:43.100 again let’s create a label this will be
01:13:46.020 for a check box
01:13:48.179 I think a good use of a checkbox will be
01:13:50.400 a subscribe button the four attribute
01:13:52.620 will be subscribed
01:13:55.380 the text will be
01:13:57.540 subscribe
01:14:00.960 we’ll need an input element input
01:14:04.080 type
01:14:05.600 equals check box
01:14:09.239 the ID will match the four attribute of
01:14:12.000 the label
01:14:13.580 then add a break element after
01:14:17.040 I can subscribe by checking the check
01:14:18.960 box
01:14:20.100 or by clicking on the label this one’s a
01:14:22.860 little tricky we’re going to create a
01:14:24.420 text area
01:14:25.860 again we’ll need a label the text next
01:14:28.440 to the text area will be comment
01:14:31.500 for
01:14:32.880 comment
01:14:35.280 we’ll create a pair of text area tags
01:14:39.659 so we have a text area
01:14:42.120 the ID of the text area will match the
01:14:44.940 four attribute of the label so comment
01:14:48.300 you can change the dimensions of your
01:14:50.400 text box by adjusting the rows and
01:14:52.620 columns I would like three rows rows
01:14:55.620 equals three
01:14:57.600 columns that will be 25. so now we have
01:15:01.380 different dimensions for our comment you
01:15:03.900 can type in anything you suck bro code
01:15:08.340 that’s how to create a text area for a
01:15:10.980 file submission again we’ll create a
01:15:13.020 label we’re kind of following the same
01:15:14.280 pattern
01:15:15.500 file
01:15:17.159 for file
01:15:20.940 again we need an input tag
01:15:23.040 input type equals file
01:15:28.159 the ID will match the for attribute of
01:15:31.800 the label
01:15:33.000 file
01:15:35.580 then I’ll add a break
01:15:37.860 so now we can choose a file however by
01:15:40.620 default we can accept all files
01:15:43.320 to limit the type of file that you’re
01:15:45.060 looking for there is an accept attribute
01:15:49.140 what file types will we accept Let’s do
01:15:52.140 an image for a PNG that would be image
01:15:55.140 slash PNG
01:15:57.840 when I choose a file we’re looking for a
01:16:00.480 PNG now
01:16:01.739 you can add more than one file type
01:16:04.560 each file type is comma separated let’s
01:16:07.320 also look for any jpegs
01:16:10.739 so that would be jpeg
01:16:15.000 so now we’re looking for a bunch of
01:16:16.800 files anything within this range
01:16:19.500 now if you’re sending a large amount of
01:16:21.239 data there’s one change we’ll make to
01:16:23.040 the form
01:16:24.060 we’re going to change the encryption
01:16:25.739 type within the opening form tag let’s
01:16:28.380 say we’re sending an image and the image
01:16:30.480 is a large file
01:16:31.800 so we will set the encryption type
01:16:34.679 equal to B multi
01:16:38.040 part slash form data
01:16:42.420 in simple terms when we send our large
01:16:44.820 amount of data we’ll break it into
01:16:46.860 multiple parts then when all of that
01:16:49.080 data is received those multiple parts
01:16:51.360 will be reassembled it’s a little more
01:16:53.699 complicated than that but at this level
01:16:55.620 that’s all you need to know so if you’re
01:16:57.780 sending a large file such as an image I
01:17:01.440 would recommend changing the encryption
01:17:03.000 type to multi-part slash form data all
01:17:05.940 right everybody so that’s how to create
01:17:07.860 a very basic form using HTML it really
01:17:11.219 doesn’t look too pretty right now you
01:17:13.080 can always style it with CSS which we’ll
01:17:15.480 be covering very soon and well yeah
01:17:17.760 that’s how to create a form using HTML
01:17:22.860 hello again friends it’s me again today
01:17:25.260 I will show you how we can create both a
01:17:27.360 header and a footer for your web page
01:17:29.040 header and footer elements are both
01:17:31.199 semantic tags they describe their
01:17:33.659 meaning to both the web browser and the
01:17:35.760 developer they help organize your
01:17:37.800 content and CSS properties can easily be
01:17:41.040 applied to anything within these
01:17:43.020 containers headers are used for
01:17:44.820 introductory content at the top of your
01:17:46.920 page such as a title a subtitle a logo a
01:17:51.719 navigation bar but we haven’t really
01:17:53.219 discussed navigation bars yet Footers
01:17:55.500 act as a container for holding
01:17:57.600 concluding content at the bottom of your
01:17:59.760 page such as an author a copyright or
01:18:03.239 some contact information like a phone
01:18:04.860 number or email alright so let’s begin
01:18:09.239 to create a header within our body we
01:18:12.000 need a pair of header tags
01:18:14.840 then for a footer you need a pair of
01:18:17.640 footer tags
01:18:20.340 personally what I like to do between the
01:18:22.440 header and footer tags I’ll create a
01:18:24.960 pair of main tags for all of the main
01:18:27.540 content within our web page it helps
01:18:29.699 with organization we’ll begin with the
01:18:31.739 header though the header element is a
01:18:33.900 container for holding introductory
01:18:35.880 content at the top of our page this is
01:18:38.159 where you may see a title
01:18:39.960 like an H1 header element for our H1
01:18:43.260 header I think welcome to pick your name
01:18:47.580 or your business or organization I’ll
01:18:50.520 just use my YouTube channel name a
01:18:52.560 header is a good container to hold the
01:18:54.179 title for your web page you could
01:18:55.980 include a logo or a navigation bar
01:18:58.199 navigation bars are a little tricky we
01:19:00.540 do need to know a little bit more CSS
01:19:02.219 for navigation bars but let’s include
01:19:04.440 some hyperlinks and make like a really
01:19:06.600 basic navigation bar okay
01:19:09.620 href equals I won’t set a location it’s
01:19:13.440 not really necessary for this example
01:19:15.179 we’ll just have a hyperlink that goes
01:19:17.040 nowhere so we have home
01:19:19.860 let’s create three more hyperlinks
01:19:22.860 home
01:19:25.260 about us
01:19:27.719 products
01:19:29.520 and contact us
01:19:32.280 the header of your document it also
01:19:34.440 tends to be a good place to hold
01:19:35.880 navigation links to then to make this a
01:19:38.580 little more fancy I’m going to add a
01:19:40.500 horizontal rule with a self-closing HR
01:19:43.440 tag
01:19:44.760 okay that’s not bad another use of
01:19:47.520 header and footer elements is that it
01:19:49.320 makes CSS styling a little bit easier I
01:19:51.900 haven’t yet shown how we can apply CSS
01:19:54.060 style sheets we’re going to use a little
01:19:56.100 bit of inline CSS all I’ll do is change
01:19:59.760 the background Dash color to be whatever
01:20:03.179 color you want I’ll pick medium
01:20:06.540 purple anything within the header I
01:20:09.239 would like to change the background
01:20:10.380 color to purple or you could change the
01:20:13.020 font or the font size anything else it’s
01:20:16.020 very helpful to put your content within
01:20:17.880 a container
01:20:19.020 So within my main section I’ll include
01:20:21.600 an image I do have one ready feel free
01:20:24.179 to follow along if you want
01:20:26.460 within my main element let’s begin with
01:20:29.280 the title for the main content I’m going
01:20:31.560 to use a smaller heading like H4 what
01:20:34.800 would be a good title for the main
01:20:36.120 content
01:20:38.340 check out these cool moves
01:20:42.420 maybe I’ll use a colon I’ll include an
01:20:45.060 image
01:20:46.199 we need a self-closing image tag
01:20:48.780 The Source will equal the name of my
01:20:51.840 file including the extension
01:20:55.380 and it is good practice to add some
01:20:57.420 alternative text
01:20:59.120 profile pic is good
01:21:01.980 so there’s my image then I’ll add some
01:21:05.280 text within a paragraph
01:21:07.980 we need a pair of P tags I’ll generate
01:21:10.800 some sample text in vs code you can type
01:21:13.020 lorem then tab
01:21:15.179 and here are some sample text
01:21:17.659 so that is the main content of my page
01:21:20.960 lastly let’s work on the footer the
01:21:23.760 footer is a container for holding
01:21:25.560 concluding content at the bottom of your
01:21:27.659 page I’ll begin with a horizontal rule
01:21:30.300 because I think that looks good let’s
01:21:32.340 include some information about the
01:21:33.960 author
01:21:36.659 author colon type in your name
01:21:40.800 I’ll add a line break after
01:21:43.140 so we have author
01:21:45.600 then a copyright symbol using HTML to
01:21:48.420 include the copyright symbol you can
01:21:50.040 Type ampersand copy semicolon so we have
01:21:54.000 a copyright symbol I’ll add the text
01:21:56.840 copy right
01:21:59.300 reserved then add a break
01:22:04.080 then I’ll add an email
01:22:06.239 this will be a link we need an anchor
01:22:08.640 tag
01:22:09.480 set the href attribute to be
01:22:12.600 mail to colon then an email address I’ll
01:22:16.440 make one up bro code at fake.com
01:22:21.360 close the anchor tag then I need some
01:22:23.699 text
01:22:24.960 bro code at fake.com feel free to use
01:22:28.080 your own email I’ll make my email a
01:22:30.480 little bit smaller by using a pair of
01:22:32.040 small tags
01:22:33.840 so I enclose our hyperlink with small
01:22:39.300 there we are
01:22:41.760 and I’ll change the background color to
01:22:44.040 with the style attribute within the
01:22:46.500 opening footer tag I will paste that
01:22:48.780 style attribute I’ll pick the same color
01:22:51.060 of medium purple
01:22:52.679 alright everybody so those are headers
01:22:55.140 and Footers they help organize your
01:22:57.600 content as well as make applying CSS a
01:23:00.239 little bit easier because you can Target
01:23:02.159 everything within the header or footer
01:23:04.140 elements and those are headers and
01:23:06.360 Footers in HTML
01:23:10.260 hey hello again friends today I’m going
01:23:12.420 to explain how we can get started
01:23:13.800 working with CSS so sit back relax and
01:23:17.460 enjoy the show
01:23:20.460 CSS is an acronym for cascading style
01:23:23.159 sheets we’re able to apply CSS
01:23:25.739 properties to color style or otherwise
01:23:28.860 decorate our HTML markup there’s three
01:23:31.620 different ways in which we can apply CSS
01:23:33.679 inline internal and external we’ll begin
01:23:37.500 with inline suppose we have an H1 header
01:23:40.140 tag
01:23:41.520 with the title of this is my website
01:23:46.679 let’s create a few paragraphs
01:23:49.320 we need a pair of paragraph tags
01:23:51.780 we need some sample text I’ll type lorem
01:23:53.940 then tab
01:23:55.980 I’ll copy this paragraph
01:23:59.159 then paste three additional paragraphs
01:24:01.920 so we have a total of four
01:24:03.780 to apply some CSS styling to one of
01:24:06.179 these elements for example the body of
01:24:08.640 our document we’ll select the opening
01:24:11.040 tag
01:24:12.300 set the style attribute to B we can list
01:24:15.540 one or a few CSS properties let’s change
01:24:18.659 the background Dash color of our body to
01:24:22.380 be black
01:24:25.320 the background is now black
01:24:27.300 let’s change the font color of the H1
01:24:29.880 heading
01:24:31.140 style equals color that’s for the font
01:24:34.860 color let’s pick White
01:24:37.500 then we’ll do this for the paragraphs
01:24:46.320 this is an example of inline CSS within
01:24:49.920 the opening tag of one of your elements
01:24:51.780 you can change the style attribute then
01:24:54.239 list one of many CSS properties another
01:24:57.060 method of applying CSS is internal as in
01:25:00.300 an internal style sheet I’ll undo these
01:25:03.179 style attributes
01:25:08.280 to apply an internal CSS style sheet
01:25:11.100 within the head of our document we need
01:25:14.340 a pair of style tags
01:25:20.580 whatever elements you would like to
01:25:22.020 apply CSS to you would list that within
01:25:24.719 the style tags if I would like to Target
01:25:27.239 the body of my document I would type
01:25:29.159 body then a set of curly braces
01:25:32.280 list your properties between the set of
01:25:34.140 curly braces
01:25:35.640 let’s change the background Dash color
01:25:38.540 of the body of my document to be black
01:25:42.960 let’s change the H1 heading H1 curly
01:25:46.500 braces then I will list some CSS
01:25:49.140 properties color white
01:25:52.260 then let’s change the paragraphs
01:25:54.360 P curly braces we’re selecting all of
01:25:57.000 the paragraphs
01:25:58.560 color white
01:26:01.139 so that’s an internal style sheet within
01:26:03.840 the head of your document you need a
01:26:05.400 pair of style tags list the element you
01:26:07.920 would like to select add a set of curly
01:26:09.900 braces then list one or many CSS
01:26:12.300 properties
01:26:13.440 let’s remove the internal style sheet
01:26:15.780 now we’ll create an external style sheet
01:26:18.120 external style sheets are probably the
01:26:20.159 most popular method because we can make
01:26:22.020 a style sheet that’s reusable to create
01:26:24.000 an external style sheet within our
01:26:25.620 website folder we’re going to create a
01:26:27.120 new document I’ll name this document
01:26:29.040 style dot CSS
01:26:32.880 we need to link this style sheet to our
01:26:35.880 HTML file we can do that within the
01:26:38.520 opening head tag by using a link tag we
01:26:42.719 need to set the relationship attribute
01:26:44.460 to b style sheet we’re letting the web
01:26:47.280 browser know that we’re linking a style
01:26:49.380 sheet
01:26:50.520 then we need an href attribute set to
01:26:53.100 the relative file path of our style
01:26:55.199 sheet that are right next to each other
01:26:56.940 I only need the file name including the
01:26:59.159 extension
01:27:00.239 style dot CSS
01:27:02.520 we have now linked this style sheet to
01:27:05.100 this HTML file using this external style
01:27:08.100 sheet we can select specific elements
01:27:10.440 from our HTML file and apply CSS
01:27:12.960 properties
01:27:14.159 we will select the body of our document
01:27:16.320 body curly braces I would like to change
01:27:19.560 the background Dash color to be black
01:27:23.880 let’s change the color of the H1 header
01:27:26.820 tag
01:27:27.840 color colon White
01:27:31.320 then the paragraphs
01:27:33.120 P curly Braces Color colon White
01:27:37.679 if you do need to apply CSS properties
01:27:39.960 to one specific element such as this
01:27:43.080 first paragraph We can create an ID
01:27:45.480 within the opening tag
01:27:47.520 ID equals think of some unique name I’ll
01:27:51.540 name the first paragraph P1
01:27:53.820 let’s do this with the other paragraphs
01:27:55.500 the second paragraph will be P2
01:27:58.380 the third will be P3 the fourth will be
01:28:01.560 P4
01:28:03.900 I’m going to delete these lines to
01:28:06.540 select an element by ID you’ll use a
01:28:09.000 hashtag then the ID so P1
01:28:12.120 what would I like the color to be let’s
01:28:14.159 change the color to red
01:28:17.639 I’ll select another ID
01:28:19.620 P2 curly braces I’ll change the color to
01:28:23.040 be orange
01:28:25.260 P3
01:28:27.179 color will be yellow
01:28:31.739 P4
01:28:33.179 color will be green
01:28:36.600 you can also apply CSS Properties by a
01:28:39.540 Class A group
01:28:41.219 within each of these paragraph tags I
01:28:43.080 will add the attribute of class
01:28:45.420 the first paragraph will be odd it’s an
01:28:48.000 odd number
01:28:49.320 the second paragraph will be even
01:28:52.679 the third paragraph will be odd
01:28:56.100 the fourth paragraph will be even
01:28:58.920 to apply any CSS to a class
01:29:02.040 Guild type dot then the name of the
01:29:04.260 class
01:29:05.460 any elements within the odd class let’s
01:29:07.920 change the color to be red
01:29:10.560 the first and the third paragraphs are
01:29:12.659 both red because they belong to the odd
01:29:14.699 class
01:29:15.780 we apply to the color red to anything
01:29:17.880 within the odd class by using dot then
01:29:20.760 the name of the class
01:29:22.679 let’s change any elements within the
01:29:24.420 even class to be blue
01:29:26.460 if we’re selecting a class we type dot
01:29:28.620 the name of the class even in this case
01:29:30.540 we’ll change the color to be blue
01:29:34.500 the second paragraph is blue along with
01:29:36.960 the fourth they’re both part of the even
01:29:39.120 class
01:29:40.440 another nice thing about external style
01:29:42.179 sheets is that you can apply them to
01:29:44.040 more than one HTML file let’s create a
01:29:46.620 second HTML file
01:29:48.480 I’ll name the second file page2.html
01:29:52.380 to generate some boilerplate HTML within
01:29:55.020 vs code you can type exclamation point
01:29:56.940 then tab
01:29:58.380 I’ll open page 2 with live server this
01:30:01.199 is page two
01:30:02.580 I’m just going to copy all of this and
01:30:04.739 make a few changes paste everything
01:30:07.020 within page two
01:30:09.360 let’s change the title to be this is
01:30:12.900 page two and we have three paragraphs
01:30:16.139 this time
01:30:17.400 we have our index file and page two
01:30:20.639 to link an external style sheet to page
01:30:22.679 two again we need that link tag set the
01:30:26.280 relationship attribute to B
01:30:28.679 style sheet
01:30:30.179 then the href attribute will be the
01:30:32.699 relative file path they’re right next to
01:30:34.860 each other I only need the file name
01:30:36.980 style.css now when I save and refresh
01:30:40.500 the page
01:30:41.520 we have applied all of our CSS from the
01:30:44.040 style sheet to page2.html
01:30:46.800 external style sheets are reusable so
01:30:49.020 they’re pretty nice and convenient
01:30:50.219 alright everybody so that is an
01:30:52.500 introduction to CSS with CSS you can
01:30:55.139 change the font the color add
01:30:57.060 decorations we’ll get more into that
01:30:59.159 soon you can apply CSS inline with an
01:31:02.580 internal style sheet or external style
01:31:04.560 sheet and that is an introduction to CSS
01:31:08.400 foreign
01:31:13.280 CSS colors to our website so sit back
01:31:16.739 relax and enjoy the show we’ll need four
01:31:19.560 paragraphs to begin with I’ll name the
01:31:21.540 first paragraph P1 the second will be P2
01:31:24.060 followed by P3 then P4
01:31:27.659 we can change the background color of an
01:31:29.820 element or the font color let’s begin
01:31:32.100 with the background color of the body of
01:31:34.560 our document within our external style
01:31:36.960 sheet I will select our body element
01:31:39.440 I’ll change the background color
01:31:42.540 property to be
01:31:44.400 now with colors we can use names we can
01:31:47.580 use RGB values hexadecimal values or hsl
01:31:51.780 values for the first example we’ll use
01:31:54.239 named colors there are multiple sites in
01:31:56.940 which you can find named colors
01:31:59.100 let’s go with this one slate gray
01:32:03.060 background color slate gray save your
01:32:05.940 changes and there you go the background
01:32:09.000 color is now slate gray let’s change the
01:32:12.480 font color of our P1 paragraph
01:32:15.179 I will select the ID of P1 I will change
01:32:19.320 the color that’s the font color to be do
01:32:23.460 they have tomato
01:32:26.159 yes there is
01:32:28.080 for P1 let’s change the color to be
01:32:30.840 tomato because I like tomatoes
01:32:33.719 those are named colors another option is
01:32:37.080 RGB values
01:32:39.000 for paragraph two we will set the color
01:32:42.000 to be a set of RGB values RGB then a set
01:32:47.219 of parentheses
01:32:48.540 R meaning red G meaning green B meaning
01:32:51.179 blue
01:32:52.080 I would recommend looking up a Color
01:32:54.120 Picker for this
01:32:55.800 I would like a light bluish color
01:32:59.880 so let’s select uh that’s good
01:33:03.420 you’ll find a set of three values for
01:33:05.280 RGB
01:33:06.420 these values range from 0 to 255.
01:33:10.920 we will paste those three values within
01:33:13.320 the set of parentheses and there’s that
01:33:15.780 blue color let’s do this with the
01:33:17.880 background color too let’s change the
01:33:19.920 background color from a named color to
01:33:21.900 RGB values RGB parentheses
01:33:25.739 let’s go with whatever color this is 41
01:33:30.060 41 41.
01:33:33.659 and there’s that new color then we have
01:33:36.420 hexadecimal values
01:33:38.280 for P3 we will change the color to B
01:33:42.659 some hex value let’s go with a green
01:33:45.420 color
01:33:48.300 that’s decent hexadecimal values are a
01:33:51.060 combination of numbers and letters the
01:33:53.280 letters range from a to F we’ll copy
01:33:55.800 this hex value
01:33:58.139 then paste it
01:34:00.060 hex values with CSS should start with a
01:34:02.940 hashtag and there’s that green color
01:34:05.820 let’s change the background color again
01:34:08.040 let’s go with the lighter color this
01:34:09.840 time
01:34:10.679 54 54 54.
01:34:16.440 there we are okay lastly we have hsl
01:34:19.620 values
01:34:21.000 or P4
01:34:23.699 color colon now if you’re using vs code
01:34:26.699 here’s a little trick we can pull up a
01:34:28.920 Color Picker
01:34:30.060 let’s type a color like black
01:34:33.239 click on the box and there’s a Color
01:34:35.520 Picker that’s built in
01:34:37.320 for hsl we can click the top bar here
01:34:41.340 H meaning Hue s meaning saturation l
01:34:44.159 meaning lightness
01:34:46.080 let’s go with the purple color
01:34:52.020 we have one value then two percentages
01:34:54.800 let’s change the background color again
01:34:56.940 using hsl
01:34:58.620 I’ll pick something a little bit darker
01:35:03.239 that’s good all right everybody so in
01:35:05.280 conclusion with CSS colors you can pick
01:35:07.920 either color names RGB values
01:35:10.500 hexadecimal values or hsl values through
01:35:13.920 the remainder of the series we’ll be
01:35:15.540 using hsl and well everybody that’s an
01:35:18.179 introduction to CSS colors
01:35:22.620 hey how’s it going everybody in today’s
01:35:24.540 video I’m going to show you everything
01:35:26.159 you need to know to get started working
01:35:27.600 with fonts and Google fonts in CSS so
01:35:31.199 sit back relax and enjoy the show
01:35:33.239 alright let’s get started everybody we
01:35:35.460 will need an H1 element why don’t you go
01:35:37.860 ahead and type in your name if your full
01:35:39.960 name is pretty long just use your first
01:35:41.400 name I guess and we’ll need a paragraph
01:35:43.920 to generate some text and vs code you
01:35:46.139 can type lorem then hit tab
01:35:48.360 that is good enough for now
01:35:50.400 to change the font style we will go to
01:35:52.560 our CSS style sheet I’ll select our H1
01:35:55.920 element
01:35:57.120 to change the font we can set the font
01:35:59.520 family property then pick a font I would
01:36:03.120 recommend a Sans serif font serifs are
01:36:06.420 these little projections on each
01:36:08.400 character after each brush stroke Sans
01:36:11.100 serif fonts don’t have these projections
01:36:12.840 Sans serif fonts are easier to read on a
01:36:15.780 monitor or mobile device
01:36:17.699 I’m going to pick the Sans serif font of
01:36:20.760 verdana
01:36:23.100 now not all fonts are universally
01:36:25.679 accepted by all web browsers for some
01:36:28.380 reason if we can’t display verdana it’s
01:36:31.260 good practice to have a fallback font
01:36:33.300 one that’s web safe
01:36:35.280 so to add a fallback after your primary
01:36:37.679 font separate each font with a comma
01:36:40.800 let’s pick Ariel
01:36:43.199 if a web browser can’t display verdana
01:36:46.260 the next available font is Ariel that’s
01:36:49.560 why you may see two or three fonts
01:36:51.360 listed for a font family they’re all
01:36:53.639 fallbacks let’s change our paragraph
01:36:56.340 element I will set the font family to be
01:37:01.199 lucida
01:37:03.360 console
01:37:05.460 if the font name contains any spaces you
01:37:07.860 can just place the font name within a
01:37:09.360 set of quotes
01:37:11.280 for a fallback I’ll use Courier new
01:37:16.800 if we can’t display the first font we
01:37:18.840 will use the backup font
01:37:21.420 now to change the font size there is a
01:37:24.060 font size property
01:37:26.520 normally it’s 16.
01:37:28.560 but you can adjust that number here’s
01:37:30.659 18.
01:37:31.920 here’s 14.
01:37:34.380 here’s one it’s really tiny you can
01:37:36.360 barely even read it like at all another
01:37:39.179 unit of measurement is em
01:37:41.940 think of em as the standard one em means
01:37:45.960 one hundred percent it’s the normal size
01:37:48.500 1.1 em is 110
01:37:51.679 1.5 is 150 percent
01:37:55.380 0.5 is 50 percent
01:37:58.199 you may see either pixels or em as a
01:38:01.020 unit of measurement for the font size
01:38:02.520 let’s stick with one em
01:38:04.980 you can change the font weight
01:38:08.040 normally this is normal
01:38:10.560 you can change that to bold if you so
01:38:12.480 choose
01:38:13.800 there’s also font style
01:38:16.440 again it’s normally well normal
01:38:19.739 you can change that to italic
01:38:22.560 that’s enough for basic fonts now I
01:38:25.020 would like to introduce Google fonts
01:38:26.520 head to this website fonts.google.com
01:38:29.400 this website is free to use find two
01:38:32.699 fonts that you like
01:38:34.139 you can also narrow down your search too
01:38:36.000 for example I do not want any serif
01:38:38.760 fonts because they’re difficult to read
01:38:40.560 on a monitor
01:38:41.880 I’ll just use these two for convenience
01:38:45.060 I’m going to open these in a new tab
01:38:48.360 all right we have Roboto and open Sans
01:38:51.960 I’m going to select one of these fonts
01:38:55.260 I’ll go with 400 regular I’ll press the
01:38:58.139 plus sign next to this font
01:39:00.900 and we’ll do so with our second font
01:39:04.199 I’ll go with light 300.
01:39:06.920 to use these fonts we need to link our
01:39:09.719 HTML file with the style sheet we can
01:39:12.120 access that style sheet by going to view
01:39:14.219 selected families
01:39:15.900 be sure that this radio button is
01:39:17.520 selected for link then we will copy this
01:39:20.340 link
01:39:22.260 within our HTML file within the head
01:39:24.840 element I will paste that link
01:39:28.199 we now have access to those two fonts
01:39:31.139 my first font was Roboto
01:39:36.900 my second font I already forgot the name
01:39:38.699 of it
01:39:39.719 open Sans
01:39:47.280 and there we go
01:39:49.500 that’s how to link to the Google fonts
01:39:51.300 API now if you do prefer these fonts can
01:39:55.020 be loaded from either a remote server or
01:39:57.540 locally installed on a user’s computer
01:39:59.100 for convenience I’m going to create a
01:40:01.679 new folder within my website folder
01:40:03.480 named fonts
01:40:06.540 then heading back to Google fonts view
01:40:09.540 selected families I will download all
01:40:16.739 once we have our file
01:40:18.960 it’s a zip folder I’m going to unzip it
01:40:25.440 we are looking for these ttf files they
01:40:28.440 look something like this
01:40:30.540 all we need to do is drag and drop these
01:40:33.360 ttf files into our fonts folder
01:40:40.380 I forgot which one I used I think it was
01:40:43.020 a Roboto light
01:40:49.739 these fonts are available locally we no
01:40:52.500 longer need to link to the Google fonts
01:40:54.420 API we can delete that link
01:40:58.920 so now what we need to do is go to our
01:41:01.139 style sheet and create a font face rule
01:41:05.219 we’ll begin with the first font at the
01:41:07.620 top of our style sheet type at font Dash
01:41:11.699 face curly braces
01:41:14.699 we will set the source attribute to be a
01:41:18.540 URL then add a set of parentheses
01:41:21.360 the URL is going to contain the relative
01:41:24.060 file path to one of these fonts
01:41:27.659 I would like Roboto
01:41:30.480 so I’m going to copy the file name
01:41:33.480 this is within the fonts folder
01:41:36.000 I’ll place that first
01:41:38.159 then paste the name of that file
01:41:40.980 then a semicolon at the end
01:41:43.440 I’m also going to set the font family
01:41:46.440 property
01:41:48.119 then I can come up with the name for
01:41:49.679 this font I can keep it the same or
01:41:51.360 change it
01:41:53.639 I’ll keep it the same though this font
01:41:55.679 shall be known as Roboto light
01:41:59.340 for my H1 element
01:42:01.500 I will change that to B Roboto light
01:42:05.040 that has appeared to work even though
01:42:06.659 we’re not linked to the Google fonts API
01:42:09.600 let’s add another font face rule
01:42:12.480 we will use our second font
01:42:16.800 fonts slash
01:42:19.020 whatever the heck is listed here
01:42:21.179 I’m going to rename this
01:42:23.040 this font shall be known as open
01:42:27.540 Sans
01:42:28.980 so we need to change the font for our
01:42:31.920 paragraph to that new font
01:42:34.199 there we are all right everybody so
01:42:36.719 that’s a few different ways in which you
01:42:38.219 can work with fonts in CSS
01:42:42.840 hey how’s it going everybody in today’s
01:42:45.239 video I’m going to explain borders in
01:42:47.699 CSS we’ll need some sample elements to
01:42:50.159 work with I recommend creating an H1
01:42:52.440 header tag type in maybe your name
01:42:56.639 and a paragraph
01:42:58.800 we’ll need to pair paragraph tags I’ll
01:43:00.840 generate some text by typing lorem then
01:43:03.239 hitting tab let’s go to our CSS style
01:43:06.060 sheet let’s add a border around our H1
01:43:09.000 element H1 curly braces we can select a
01:43:13.260 border Style with the Border Dash style
01:43:16.020 property
01:43:17.280 first we have solid
01:43:19.139 our border is a solid line there is
01:43:22.380 dashed
01:43:24.060 we have a dashed line
01:43:26.400 dotted
01:43:28.760 double for a double border
01:43:32.880 Groove
01:43:35.219 Ridge
01:43:38.520 inset
01:43:40.280 out set
01:43:42.600 or none if something has a border
01:43:45.000 naturally you can remove it
01:43:47.100 let’s pick a solid border you can change
01:43:50.460 the width of the border with the Border
01:43:52.800 width property border Dash width by
01:43:56.040 default it’s one let’s increase that to
01:43:58.380 two
01:43:59.239 or even three
01:44:01.860 four
01:44:03.540 five border width is for the Border
01:44:06.360 thickness I think three would be good
01:44:08.760 for this example you can change the
01:44:10.920 color with the Border color property
01:44:13.100 then pick a color
01:44:16.199 I’ll use the built-in Color Picker and
01:44:19.199 use hsl values let’s go with a purple
01:44:22.679 color
01:44:23.820 something like that’s good you can even
01:44:26.460 round the corners with the Border radius
01:44:28.800 property
01:44:29.880 border Dash radius
01:44:31.880 the higher the number in pixels the more
01:44:34.920 rounded the corners are going to be
01:44:36.300 that’s five this is ten
01:44:40.020 fifteen
01:44:42.659 20. okay just out of curiosity what if
01:44:45.540 we do like 100
01:44:47.520 okay it seems like there’s a maximum you
01:44:49.800 can only round at the corner so far so
01:44:51.960 it looks like the max is 20. all right
01:44:53.940 there’s also a shorthand syntax in place
01:44:56.940 of listing three different properties
01:44:58.380 for the style width and color we can do
01:45:00.780 that all at once let’s eliminate these
01:45:03.360 three lines we’ll use shorthand syntax
01:45:06.480 for the Border I would like three pixels
01:45:10.440 solid then I’ll list a color and use the
01:45:13.739 Color Picker
01:45:15.239 again I would like purple I don’t quite
01:45:17.280 remember what we had but it was
01:45:18.840 something like that
01:45:20.100 yeah that is the shorthand syntax
01:45:22.739 you type border the Border width the
01:45:25.380 Border style then the Border color but
01:45:28.020 border radius is still a separate
01:45:29.639 property
01:45:30.540 let’s add a border to our paragraph now
01:45:32.639 we will select the P tag
01:45:35.460 there is directional shorthand syntax if
01:45:38.639 you want just one of the borders let’s
01:45:40.619 begin with the bottom border Dash bottom
01:45:44.940 then we can list a border with border
01:45:47.159 style then a color and this would only
01:45:49.260 apply to the bottom border of our
01:45:51.179 paragraph let’s go with three pixels
01:45:55.460 solid then red
01:45:58.199 but I’m going to pick a more specific
01:45:59.760 kind of red
01:46:01.080 there we go so that is border bottom
01:46:03.659 we’re only applying a border to the
01:46:06.000 bottom of our element then there’s
01:46:08.219 border top
01:46:10.139 border Dash top let’s go with three
01:46:13.440 pixels
01:46:14.880 solid again then a color
01:46:17.639 I’ll go with yellow
01:46:22.920 there we are
01:46:24.420 border left
01:46:27.659 three pixels let’s try dotted this time
01:46:32.580 then orange
01:46:36.960 that’s good
01:46:39.719 then border right border Dash right
01:46:44.219 three pixels dotted again then I will
01:46:47.940 pick Green
01:46:50.699 maybe like a light green
01:46:52.679 there we are
01:46:53.940 then we’ll set the Border radius as well
01:46:57.540 this would apply for all of the borders
01:47:00.600 let’s try 10.
01:47:02.400 not bad alright everybody that is how to
01:47:05.100 create CSS borders
01:47:09.179 hey everybody today I’m going to show
01:47:10.800 you how we can create text shadows and
01:47:13.080 box Shadows we’ll need some sample text
01:47:15.659 to work with I’ll use an H1 element type
01:47:18.540 in your name
01:47:20.219 and we will need a div element
01:47:24.239 we will eventually create a box I’ll
01:47:26.520 give this div an ID of box one
01:47:30.840 good enough I would like to give this H1
01:47:33.540 element a shadow I will select my H1
01:47:36.360 element I will set the text Shadow
01:47:39.900 property to be we need two numbers a
01:47:43.560 horizontal offset and a vertical offset
01:47:46.380 let’s do one pixel and one pixel
01:47:49.860 we have an offset to the right of one
01:47:51.719 and down by one
01:47:53.880 if I were to increase the horizontal
01:47:55.980 offset let’s change this to 2
01:47:59.340 while the shadow is moving more to the
01:48:01.199 right let’s try five
01:48:03.719 10
01:48:06.420 50. the first number is for the
01:48:09.300 horizontal offset let’s change that to
01:48:12.480 three
01:48:13.800 the second number is for the vertical
01:48:15.420 offset
01:48:16.560 if I change that to five well the text
01:48:19.199 is going more downwards
01:48:22.139 50 would be this
01:48:24.540 all right let’s keep that at three
01:48:25.980 though
01:48:27.179 you could add a third number for a blur
01:48:31.199 here’s a one pixel blur
01:48:33.900 two
01:48:35.699 three
01:48:37.679 four
01:48:39.540 five if this is a really large number
01:48:41.940 like 100 you can’t even see the shadow
01:48:43.739 anymore let’s stick with five that’s a
01:48:46.199 decent amount
01:48:47.400 you can even change the color too let’s
01:48:49.619 pick a red color
01:48:53.820 that’s good you can add more than one
01:48:56.520 Shadow within the text Shadow property
01:48:58.980 for more than one Shadow effect each
01:49:01.260 Shadow is comma separated so add a comma
01:49:03.960 afterwards
01:49:05.159 let’s copy what we have paste it again
01:49:09.119 I’m gonna give the second Shadow a
01:49:11.100 negative offset so it’s up and to the
01:49:13.139 left
01:49:14.159 I’ll change the color so it’s more
01:49:15.780 distinct let’s go with the blue color
01:49:19.080 yeah I don’t like that one
01:49:20.940 yeah that’s fine
01:49:22.739 all right now let’s cover box Shadows
01:49:24.900 let’s select our ID of box one
01:49:29.340 I’ll give this box a width of 100
01:49:33.119 and a height of 100
01:49:37.199 let’s pick a color too
01:49:39.840 background Dash color
01:49:43.739 let’s go with a whitish color so it’s
01:49:46.199 just barely visible
01:49:48.780 something like that’s fine
01:49:50.400 for other elements besides text we have
01:49:52.800 box shadow
01:49:55.380 and really it’s the same process as
01:49:57.119 before we have a horizontal offset
01:50:00.179 let’s do three pixels
01:50:02.520 a vertical offset let’s do three pixels
01:50:04.560 again
01:50:05.580 a blur
01:50:06.840 let’s do five pixels
01:50:09.480 and a color if we so choose but I’ll
01:50:11.400 keep that the same now our box has a 3D
01:50:14.460 pop effect which is pretty sweet all
01:50:16.860 right everybody so we have text Shadows
01:50:19.020 for text and box Shadows for other
01:50:21.480 elements and well everybody those are
01:50:23.820 shadows in CSS
01:50:27.659 hey how’s it going people today I’m
01:50:29.520 going to explain margins in CSS margins
01:50:33.000 are the space around an element I’ll
01:50:35.400 create an H1 element type in your name
01:50:38.760 or something that’s kind of short and
01:50:41.219 we’ll need a paragraph I’ll generate
01:50:43.380 some text by typing lorem then hitting
01:50:45.300 tab let me just zoom in a little bit to
01:50:48.420 give you a diagram of margins I’m going
01:50:50.580 to right click our H1 element and go to
01:50:53.040 inspect at the bottom of my elements
01:50:55.860 window we have this diagram it kind of
01:50:58.199 resembles an onion because it has layers
01:51:00.000 we have the element itself and its
01:51:02.219 Dimensions padding border then margins
01:51:06.020 padding is between the element itself
01:51:08.520 and any borders margins are the area
01:51:11.940 outside of any borders today we’ll be
01:51:14.340 working with margins the area outside of
01:51:16.619 any elements let’s close this window
01:51:19.500 naturally there’s a few pixels of margin
01:51:22.380 around our body the letters in our H1
01:51:24.600 element and our paragraph aren’t
01:51:26.520 directly next to the border of our
01:51:28.560 window
01:51:29.460 so we can eliminate that
01:51:31.560 we will select the body element within
01:51:33.960 our CSS style sheet we will set the
01:51:36.659 margin to be zero pixels
01:51:39.480 so now the letters are directly next to
01:51:42.060 the edge of the web browser
01:51:44.219 and if I were to expand this you can
01:51:46.020 kind of see that
01:51:47.340 so that’s all that margin is it’s the
01:51:49.619 area outside of an element to give you
01:51:52.080 another example let’s delete our H1
01:51:54.420 element along with our paragraph we’ll
01:51:56.820 create two div boxes
01:51:59.340 we need two pairs of developments
01:52:05.820 I’ll create a class for each of these
01:52:07.380 divs class
01:52:09.179 box
01:52:11.940 then they will each have a unique id id
01:52:14.840 equals box one the ID for the second box
01:52:19.020 will be box two
01:52:21.659 and then I’ll give each of these some
01:52:23.760 text
01:52:25.080 box one
01:52:27.600 box two
01:52:30.360 all right now let’s style these boxes
01:52:33.420 so after our body element let’s select
01:52:36.540 the Box class anything that’s a box
01:52:40.380 let’s add a border
01:52:43.500 5 pixel solid is fine
01:52:47.280 I’ll change the font size to be
01:52:51.480 5 em
01:52:54.719 with
01:52:56.000 250 pixels
01:52:59.400 height
01:53:00.600 250 pixels and I’m just gonna zoom out a
01:53:04.739 little bit until our view is at 100 let
01:53:07.800 me color box one in box two
01:53:09.960 we are selecting the ID of box one
01:53:13.619 for the background color
01:53:15.960 let’s set that to be red
01:53:18.540 but let’s select a more custom red
01:53:20.219 because it’s cool
01:53:22.199 all right then box two will be blue
01:53:29.580 all right there are marginal directions
01:53:31.219 we can apply margin to the top of an
01:53:34.260 element the right the bottom or the left
01:53:36.780 or all sides with box one I will set the
01:53:40.199 margin top property to be 50 pixels
01:53:44.880 that’s going to add 50 pixels of margin
01:53:47.520 at the top of this element box 1.
01:53:50.880 there’s also margin bottom
01:53:54.119 now there’s 50 pixels of margin after
01:53:56.340 box one
01:53:58.159 margin left
01:54:00.659 the margins now on the left
01:54:02.699 margin right
01:54:04.980 the margins now on the right but you
01:54:06.780 can’t see that because divs are Block
01:54:08.880 Level elements they take up the entire
01:54:10.739 horizontal space
01:54:12.480 you could apply margin to L sides evenly
01:54:14.820 just with margin so margin 50 pixels
01:54:18.480 that applies 50 pixels of margin to the
01:54:20.820 top right bottom left
01:54:23.280 so if we were to apply this margin to a
01:54:25.920 class like the Box class both box 1 and
01:54:29.159 box 2 will have 50 pixels of margin
01:54:31.380 around each element
01:54:32.940 there’s also margin Auto
01:54:36.000 it is possible to set an element’s
01:54:37.860 margin to take up the entire space I can
01:54:41.159 take any of these elements such as box 1
01:54:43.199 and push it all the way to the right of
01:54:45.480 my web browser using margin left
01:54:48.540 margin Dash left then I will set it to
01:54:51.840 be Auto
01:54:53.340 the margin on the left side of box 1
01:54:55.619 will take up as much room as possible
01:54:58.320 so vox1 is going to stick to the right
01:55:00.840 hand side of the web browser
01:55:02.760 margin right won’t appear to do anything
01:55:07.380 because it’s already left Justified
01:55:09.719 now if you would like an element to stay
01:55:11.520 in the center of your web browser
01:55:13.500 you can just set margin to be Auto
01:55:16.139 so box one is going to stay in the
01:55:17.820 middle of my web page
01:55:20.580 if I were to apply this property to the
01:55:22.560 Box class that will affect Box 2 as well
01:55:25.980 so now box 1 and box 2 should stay in
01:55:28.679 the middle of my web browser alright
01:55:30.659 everybody so those are margins in simple
01:55:33.119 terms it’s the space around an element
01:55:35.159 and that is an introduction to margins
01:55:38.100 in CSS
01:55:41.340 all right let’s get started everybody so
01:55:44.040 the float property the float property
01:55:46.320 allows other elements to flow around it
01:55:49.139 this is particularly useful with images
01:55:52.080 and Block Level elements like div
01:55:54.420 sections in my example I have a box
01:55:57.239 that’s made out of a div element it
01:55:59.520 occupies the entire width of the space
01:56:02.159 in my web browser any elements
01:56:04.500 afterwards are kind of pushed underneath
01:56:06.239 it is possible utilizing the float
01:56:09.000 property to have this text wrap around
01:56:12.000 this Block Level element and we do that
01:56:14.219 with the float property here’s what
01:56:16.500 we’re going to do for this demonstration
01:56:18.780 you will need two images I have an image
01:56:21.840 of a Pokeball and another one of Pikachu
01:56:24.900 feel free to pick your own images we’re
01:56:27.420 going to insert an image an image is a
01:56:30.119 block level element I will set the
01:56:32.520 source equal to B the name or the
01:56:35.580 relative file path of that image
01:56:38.040 so mine is pokeball.png
01:56:42.840 but I’m going to change the height so
01:56:45.300 it’s a little bit smaller
01:56:47.340 height equals
01:56:49.679 let’s try 150.
01:56:51.900 I’m also going to create a few
01:56:53.820 paragraphs of text
01:56:56.040 in vs code you can type lorem then press
01:56:58.560 tab to generate some text I’m pretty
01:57:00.719 sure you know that already though
01:57:02.520 let’s create four paragraphs one two
01:57:05.580 three four
01:57:08.100 my first image is taking up the entire
01:57:10.860 width of my viewport all this text is
01:57:13.860 being pushed underneath to make this
01:57:16.320 text wrap around this image and occupy
01:57:19.020 that space
01:57:20.639 we will set the float property of the
01:57:23.219 image I’m going to give this image an ID
01:57:25.739 though ID
01:57:27.780 image one
01:57:29.400 IMG one for short
01:57:31.920 within my style sheet I will select the
01:57:34.800 ID of
01:57:36.300 image one
01:57:38.639 set the float property to either left or
01:57:41.580 right we’ll begin with left though
01:57:44.219 then save everything
01:57:47.340 all of those paragraphs are now wrapping
01:57:49.679 around the right side of my image
01:57:51.659 because we’re floating left
01:57:53.940 I’ll add a little bit of margin though
01:57:55.560 on the right hand side
01:57:58.320 margin right I think 10 pixels is fine
01:58:02.880 and that looks pretty good
01:58:04.679 you can also float an image to the right
01:58:06.719 let’s change float to be right and now
01:58:10.139 the image is on the right hand side
01:58:12.780 if I were to adjust the size of my
01:58:14.940 window the text just flows around the
01:58:17.639 image
01:58:18.780 which looks pretty nice
01:58:20.699 all right let’s change that back to left
01:58:23.699 let’s create a second image
01:58:26.940 we’ll place the image between the second
01:58:28.679 and third paragraphs
01:58:30.900 so my second image is pikachu.png
01:58:35.659 pikachu.png
01:58:37.560 the height will be the same
01:58:39.420 I’ll give this image an ID of image two
01:58:43.139 this image isn’t floating
01:58:45.780 again the text is not wrapping around
01:58:48.000 the image
01:58:49.500 let’s take image two
01:58:53.820 we will float this image to the right
01:58:59.040 I’ll add some margin to the left as well
01:59:00.960 margin Dash left
01:59:03.599 let’s do 10 pixels
01:59:06.000 yeah there we go that looks pretty good
01:59:07.820 basically speaking the float property
01:59:10.199 allows other elements to flow around it
01:59:12.480 now there is one thing I want to show
01:59:14.460 you I’ll add a border around the body of
01:59:17.520 our document
01:59:19.080 let’s select our body element
01:59:22.500 I will create a border that is three
01:59:25.380 pixel solid
01:59:28.260 now check this out
01:59:31.500 with my second image it’s overflowing
01:59:34.860 outside of the container that it’s in
01:59:36.480 the body of my document there is one
01:59:39.540 change we can make to our container our
01:59:42.000 body with our container I will set the
01:59:44.820 display property to be
01:59:47.520 low Dash root
01:59:50.219 now anything that’s floating will stay
01:59:52.679 within the container it’s not going to
01:59:54.599 overflow
01:59:56.040 Pikachu is still within the Box
01:59:58.440 alright everybody in conclusion the
02:00:00.599 float property allows other elements to
02:00:02.699 flow around it and that is the float
02:00:04.739 property in CSS
02:00:08.460 hey what’s going on everybody today I’m
02:00:10.320 going to explain the Overflow property
02:00:12.420 in CSS the Overflow property sets the
02:00:16.080 defined behavior when content does not
02:00:19.560 fit in the parent element box meaning it
02:00:22.800 overflows there’s five states visible
02:00:25.860 hidden clip scroll and Auto
02:00:28.619 here’s an example
02:00:30.420 let’s create a div element
02:00:33.599 then within this development I’ll create
02:00:36.239 a paragraph
02:00:40.199 I’ll generate some text
02:00:43.020 then going to our style sheet I’ll take
02:00:45.659 our div then give the stiff a border
02:00:50.580 of 2 pixel solid
02:00:53.580 I’ll also limit the height
02:00:56.219 height
02:00:57.360 75 pixels
02:00:59.880 now we have a problem the content of our
02:01:02.820 paragraph
02:01:04.260 is overflowing out of our div
02:01:08.040 we have a couple different ways of
02:01:09.540 handling this with the Overflow property
02:01:13.500 by default
02:01:15.119 overflow is set to visible there is
02:01:17.520 going to be no apparent change
02:01:19.199 basically we’re stating if any Inner
02:01:21.719 Elements will overflow allow it to do so
02:01:24.719 that’s why you see this text overflow
02:01:27.119 out of our box
02:01:28.739 our second state is hidden
02:01:31.739 with hidden any content that will
02:01:34.260 overflow outside of our box will be
02:01:36.300 hidden we can no longer see it however
02:01:38.880 we can still interact with it for
02:01:40.980 example if I were to copy and paste all
02:01:43.199 of this text
02:01:48.659 well we still have the full text
02:01:50.699 available
02:01:52.139 now clip clip is very similar to Hidden
02:01:55.500 there’s no apparent change
02:01:57.900 with overflow set to clip it’s used in
02:02:00.659 tandem with the Overflow clip margin
02:02:04.860 property
02:02:06.119 using this property we can set how far
02:02:09.119 this content displays or overflows
02:02:11.940 outside of the box
02:02:14.159 if I were to set overflow to be 13
02:02:16.679 pixels this content will overflow by
02:02:20.460 this amount 13 pixels then the rest is
02:02:23.520 hidden it’s very similar to Hidden but
02:02:25.920 it’s used alongside overflow clip margin
02:02:29.820 then we have scroll
02:02:32.580 with scroll our box contains a scroll
02:02:34.920 bar both vertical and horizontal we can
02:02:38.099 use the scroll bar to see the entire
02:02:39.900 length of our content if there’s not
02:02:42.420 enough content within this container for
02:02:44.699 example I’ll delete most of these words
02:02:51.840 well we still have that scroll bar
02:02:53.699 although it’s disabled
02:02:55.860 if you set overflow to auto
02:02:59.280 if you don’t need the scroll bar either
02:03:01.800 horizontal or vertical it won’t be
02:03:04.080 displayed until you do need it so let me
02:03:07.260 undo these changes
02:03:09.960 now that scroll bar is displayed
02:03:12.599 that’s the use of overflow Auto
02:03:15.119 all right everybody so that’s the
02:03:16.619 Overflow property it sets the behavior
02:03:19.080 for a parent element when the content
02:03:21.060 doesn’t quite fit you can set this
02:03:22.860 property to be visible hidden clip
02:03:24.960 scroll or Auto and that is the Overflow
02:03:27.719 property in CSS
02:03:31.619 hey what’s going on everybody today I’m
02:03:33.300 going to explain the display property in
02:03:35.400 HTML and CSS now HTML elements they have
02:03:38.940 a default display value they’re either
02:03:40.980 Block Level or inline an element that is
02:03:43.920 Block Level starts on a new line and
02:03:46.199 takes up the entire width available
02:03:48.119 inline elements do not start on a new
02:03:50.639 line the width of that element is
02:03:52.440 limited to what is needed a few examples
02:03:54.659 of Block Level elements would include
02:03:56.520 but are not limited to header elements
02:03:59.159 developments paragraph elements form
02:04:01.199 elements header elements and footer
02:04:03.239 elements inline elements include but yet
02:04:05.699 again are not limited to span elements
02:04:08.400 anchor elements and image Elements by
02:04:10.920 utilizing the display property we can
02:04:13.260 specify if and how an element is
02:04:16.199 displayed we can set an element to be a
02:04:18.599 block level inline inline block or not
02:04:22.260 displayed at all here’s a few examples
02:04:25.320 we’ll create a development
02:04:28.260 with the inner text being div
02:04:30.420 and a span element
02:04:33.119 with the inner text being span
02:04:36.960 let me zoom in a little let’s go to our
02:04:39.060 style sheet for my development I will
02:04:41.520 set the background color to be red
02:04:45.780 do
02:04:46.800 for my span element I will set the
02:04:49.679 background color to be blue
02:04:53.340 that’s good div is a block level element
02:04:55.619 it’s going to take up the entire width
02:04:57.900 available span isn’t it only takes up
02:05:00.480 the necessary space needed to display
02:05:01.980 that element even if I were to extend
02:05:03.960 the width of the browser
02:05:06.960 my div element takes up the entire width
02:05:09.300 my span element stays the same because
02:05:11.520 it’s in line we can apply a width and a
02:05:14.340 height to a block level element like
02:05:16.139 this
02:05:16.980 width will be 100
02:05:19.380 height will be 100. however for an
02:05:22.199 inline element the width and height
02:05:23.880 wouldn’t apply you can see that our span
02:05:25.980 element stays the same size by utilizing
02:05:28.920 the display property we can change the
02:05:31.380 behavior of these elements how they’re
02:05:33.119 displayed if I set my div element to be
02:05:35.820 block
02:05:37.020 well it already is a block level element
02:05:38.760 there’s no change if I set my span
02:05:41.820 element to display as a block level
02:05:44.099 element
02:05:45.119 well then we can apply a width and
02:05:46.679 height these two elements are displayed
02:05:48.719 as a block
02:05:50.099 all of this extra white space is
02:05:52.020 allocated for each of these elements
02:05:53.520 their Block Level if I were to create a
02:05:56.040 paragraph let me shrink this a little
02:05:57.900 bit
02:05:58.739 I’ll create some sample text I’ll type
02:06:01.080 lorem then hit tab these are not within
02:06:04.020 paragraph tags just so you know all of
02:06:06.540 the space is reserved for my Block Level
02:06:08.699 elements that’s important later now
02:06:11.040 let’s go back to our style sheet if I
02:06:13.139 change the display property to be in
02:06:14.940 line
02:06:15.719 guess what’s going to happen
02:06:18.659 well both of these elements are in line
02:06:20.520 now we can’t apply width or height
02:06:22.440 properties to these elements they only
02:06:24.540 take up as much room as necessary all
02:06:26.880 other content is displayed in line with
02:06:29.219 them then there’s inline block
02:06:32.219 it’s much like inline but we can also
02:06:34.980 apply a width and a height
02:06:36.900 these two elements are no longer taking
02:06:39.179 up the entire width of my viewport if I
02:06:41.880 were to increase the size of my window
02:06:44.280 we can display content in line with
02:06:47.340 these inline blocks you can see that the
02:06:49.500 text is lined up
02:06:51.599 then there’s none
02:06:53.820 will effectively erase that element
02:06:58.320 as if it’s gone
02:06:59.880 if I revert these displays to inline
02:07:02.159 block there’s also the visibility
02:07:04.080 property which is fairly similar to
02:07:06.119 display if I set visibility to be hidden
02:07:10.679 with our div element this element is
02:07:13.139 hidden but it’s still taking up space as
02:07:15.420 if it was still there it’s kind of like
02:07:17.219 it’s invisible
02:07:18.540 whereas in if display was set to none
02:07:21.000 it’s as if it no longer exists the next
02:07:23.699 element will take its place
02:07:25.800 all right everybody that is an
02:07:27.179 introduction to the display property we
02:07:29.699 can display elements as a block inline
02:07:32.460 inline block none or by utilizing the
02:07:36.239 visibility property we can hide them and
02:07:38.520 that is an introduction to the display
02:07:39.960 property in CSS
02:07:43.920 hey what’s going on everybody today I’m
02:07:45.540 going to give you an introduction to the
02:07:47.219 width and height properties in CSS all
02:07:50.040 right let’s begin everybody we will
02:07:51.480 Begin by creating two div elements and
02:07:54.480 each development will have a class
02:07:56.880 of box
02:07:58.500 within our first box let’s create an H2
02:08:01.020 header with the text of this is number
02:08:03.960 one
02:08:05.340 and we’ll create a paragraph underneath
02:08:07.159 to generate some text in vs code you can
02:08:09.960 type lorem then hit tab
02:08:11.940 all right let’s copy our div paste it
02:08:15.119 change number one to number two and
02:08:17.820 that’s where we’re at
02:08:19.260 So within our style sheet we can set a
02:08:21.780 height and a width for an element an ID
02:08:24.360 or a class so let’s take our box class
02:08:27.960 dot box I’ll add a border
02:08:31.199 border 2 pixel solid just so that it’s
02:08:33.900 easier to see
02:08:35.280 here we are okay normally with the
02:08:37.500 height
02:08:38.639 by default it’s Auto we don’t need to
02:08:41.699 explicitly state that you can see that
02:08:43.500 there’s no apparent change when I reload
02:08:45.239 the page
02:08:46.260 so the height is going to be calculated
02:08:48.239 automatically when we render our web
02:08:50.159 page but you can set an explicit height
02:08:52.619 for example 100 pixels
02:08:56.099 that’s a little too small our content is
02:08:58.260 kind of overlapping let’s change that to
02:09:00.780 200. now it’s a little too big but it is
02:09:03.599 possible to set a fixed height so let’s
02:09:06.420 set height back to auto
02:09:08.460 now we will change the width so with the
02:09:11.460 width we can set a number of pixels for
02:09:13.619 example 100
02:09:15.119 we would have two very long skinny
02:09:17.400 columns and they’re right on top of each
02:09:19.440 other that’s because divs are Block
02:09:21.659 Level elements we’ll Reserve this entire
02:09:23.880 space for each of these developments
02:09:25.800 because they’re Block Level so let’s
02:09:27.960 change the width to 200 and see what
02:09:29.940 happens now they’re more of a box shape
02:09:31.920 if I set width to be Auto the width will
02:09:35.159 be calculated automatically and like I
02:09:37.199 said that’s the default these Block
02:09:39.300 Level elements want to take up as much
02:09:41.040 width as possible kind of like your mom
02:09:43.020 if I changed width to be 50 the width of
02:09:46.739 this element will take up 50 percent the
02:09:48.960 width of our viewport but we’re still
02:09:50.699 allocating all the space for each
02:09:52.199 development because they’re Block Level
02:09:53.760 if I were to use the float property
02:09:57.260 let’s float to the left the reason that
02:10:00.420 these elements aren’t floating there’s
02:10:02.099 still not enough space to place Box 2
02:10:04.020 next to box one because we have our
02:10:06.420 border our border takes up two pixels if
02:10:09.480 I were to remove the Border they should
02:10:11.340 display back to back which they do
02:10:14.040 you do have to take in the width of the
02:10:15.960 Border when calculating the width the
02:10:18.060 same thing applies with padding
02:10:19.860 let’s apply a little bit of padding
02:10:22.440 padding 25 pixels
02:10:25.619 now we have 25 pixels worth of padding
02:10:28.739 between our content and the Border I
02:10:31.739 mean it looks nice right when
02:10:33.599 calculating the height or the width we
02:10:35.699 can disregard any padding
02:10:37.679 or any borders but we have to add this
02:10:40.020 property
02:10:41.040 we’ll add box Dash
02:10:43.739 sizing
02:10:45.420 border Dash box
02:10:49.080 when we calculate the height or the
02:10:51.119 width we’re allocating disregard any
02:10:53.400 padding or any borders the Box sizing
02:10:56.280 property will take that into
02:10:57.420 consideration we can now fit these
02:10:59.219 elements right next to each other the
02:11:00.719 width of each box is 50 and they both
02:11:03.360 have borders and padding what you also
02:11:06.000 might see with box sizing is that what
02:11:08.580 some people like to do they’ll use an
02:11:11.040 asterisk as a selector that means all
02:11:12.900 elements and then they’ll apply the Box
02:11:15.300 sizing property to all elements
02:11:18.900 because well it can be kind of annoying
02:11:20.880 to calculate width and Heights while
02:11:22.920 factoring in padding in borders as well
02:11:24.719 all right now if we were to float right
02:11:27.420 box one is on the right Box 2 is on the
02:11:30.300 left let’s undo that you can set a
02:11:33.599 minimum height and a minimum width as
02:11:35.280 well
02:11:36.119 so with our two boxes let’s get rid of
02:11:38.340 our paragraphs
02:11:44.179 I’m going to text align Center just to
02:11:48.239 Center our text this is number one this
02:11:50.760 is number two
02:11:52.139 if I were to set the max width to let’s
02:11:56.520 say 25 percent
02:11:59.639 even though we stated the width should
02:12:01.320 be 50 the max width is going to cap that
02:12:04.560 out at 25 you can see that the sizes of
02:12:07.440 this box have shrunk
02:12:09.360 or maybe if I set a minimum width
02:12:12.719 of 75 percent
02:12:17.340 we’re saying that each of these boxes
02:12:19.380 should be at least 75 percent even
02:12:22.020 though before we declared them to be 50
02:12:23.820 percent
02:12:24.840 you also have Max height and Min height
02:12:28.139 there’s really going to be no change
02:12:29.880 between the two since the height of our
02:12:31.980 web page starts at the top here and ends
02:12:33.960 right here we’re not using all the space
02:12:35.400 down below so what I propose is that
02:12:38.040 let’s place our boxes within a container
02:12:40.920 we’ll create another div
02:12:44.880 with a class
02:12:46.380 of container to contain our boxes
02:12:50.099 let’s take our two boxes
02:12:52.500 and place them within this development
02:12:55.679 so with my container
02:12:58.020 the container class
02:13:02.520 with our container let’s change the
02:13:04.679 background color
02:13:06.119 to something great just so it’s easier
02:13:08.340 to see
02:13:12.360 we can’t see our container because our
02:13:14.520 boxes are taking up all the space
02:13:16.980 with our container if we need to take up
02:13:18.840 the entire height of our web browser
02:13:21.719 we can set the height to be 100 VH
02:13:25.679 meaning viewport height
02:13:27.659 so now our container is taking up 100 of
02:13:30.659 the height available
02:13:32.699 if I were to zoom out the container is
02:13:35.400 still taking up all that space
02:13:37.260 so with our boxes let’s change the
02:13:39.659 background color because I can’t really
02:13:41.159 see them that well anymore
02:13:42.960 for the background let’s change that to
02:13:44.940 be white
02:13:46.320 I’m going to zoom out to 100
02:13:48.560 with my minimum height property I will
02:13:51.719 set the minimum height of our boxes to
02:13:54.060 be 50 percent
02:13:55.440 now they take up 50 of the space
02:13:57.659 available which is one hundred percent
02:14:00.060 our viewport height
02:14:01.980 if I were to change the minimum height
02:14:03.540 to be 100 we take up the entire space
02:14:06.000 available
02:14:07.260 or I could set the max height to be 50
02:14:09.840 percent
02:14:11.760 even though we set max height to be 50
02:14:13.739 we don’t necessarily need all this space
02:14:16.139 because there’s not enough content if I
02:14:18.960 absolutely need these boxes to take up
02:14:21.300 at least 50 percent of the height of my
02:14:23.040 window I would use minimum height
02:14:25.860 instead of maximum height so really it’s
02:14:28.619 up to you alright everybody so that is
02:14:30.780 an introduction to the height and width
02:14:32.699 properties in CSS
02:14:36.900 hey everybody so today I’m going to
02:14:38.880 explain the position property in CSS
02:14:41.639 there’s five possible values relative
02:14:44.639 fixed absolute sticky and static let’s
02:14:48.780 begin by creating a div section
02:14:51.420 I’ll give this div an ID of box one
02:14:55.739 within my style sheet we will select the
02:14:58.560 ID of box one
02:15:00.239 I’ll set the width to be 200 200 pixels
02:15:05.760 height to be 200 pixels as well
02:15:09.360 and a background color background Dash
02:15:11.820 color let’s go with the blue color we
02:15:13.980 haven’t picked blue for a while
02:15:18.659 that’s pretty good all right the
02:15:21.060 position property
02:15:22.860 with a position set to relative
02:15:27.119 relative positions and element relative
02:15:29.880 to where it normally should be
02:15:32.520 with our position property set to
02:15:34.500 relative we can move this element to the
02:15:36.960 right to the left upwards or downwards
02:15:39.719 we do have the properties of top bottom
02:15:42.119 left right to push this element down
02:15:44.639 relative to where it normally is I can
02:15:47.400 set top to some value
02:15:49.380 we can do that in pixels if I set top to
02:15:52.800 be 100 pixels this element will be
02:15:55.739 pushed downwards by 100 pixels relative
02:15:59.040 to where it normally is in the top left
02:16:01.199 corner another property is left I will
02:16:04.679 push this element to the right by 100
02:16:07.020 pixels by setting left to be 100. so now
02:16:11.460 this element is pushed to the right by
02:16:13.440 100 relative to where it normally is
02:16:16.139 it’s down and to the right by 100 pixels
02:16:19.219 negative 100 would move this element up
02:16:23.219 left set to negative 100 would move the
02:16:25.739 element to the left
02:16:28.500 it’s kind of backwards this element is
02:16:31.500 positioned relative to where it normally
02:16:33.718 should be
02:16:35.519 then we have fixed with fixed an element
02:16:38.099 is positioned relative to the viewport
02:16:40.620 meaning the web browser for this example
02:16:43.558 we’re going to need a whole lot of
02:16:45.120 paragraphs like 20 of them
02:16:47.580 I’ll type lorem hit tab to generate some
02:16:50.099 text
02:16:50.879 copy this line and paste it like 20
02:16:53.820 times
02:16:59.939 all right that’s good enough
02:17:02.340 let’s get rid of these properties I will
02:17:05.099 set the position to be fixed
02:17:08.398 this element is now fixed within the
02:17:10.920 viewport it’s stuck in the top left
02:17:12.898 corner if I were to scroll down this
02:17:15.120 element is still in the top left corner
02:17:16.978 of my web browser
02:17:18.780 this element can be fixed to the right
02:17:21.240 by setting the right property to be zero
02:17:24.780 pixels
02:17:25.920 zero works as well
02:17:28.379 so now this element is in the top right
02:17:30.780 corner
02:17:32.580 with the bottom property if I were to
02:17:35.040 set that to be zero pixels well now this
02:17:38.040 element is in the bottom right corner
02:17:39.898 this might be good for an advertisement
02:17:41.519 if you had a banner
02:17:43.439 for the bottom left corner that’s left
02:17:45.299 zero bottom zero
02:17:47.700 that is the fixed position this element
02:17:50.218 is fixed in my viewport my web browser
02:17:54.299 then we have absolute with absolute an
02:17:57.359 element is positioned relative to its
02:17:59.879 nearest ancestor
02:18:01.379 think of an ancestor as a containing
02:18:04.019 class
02:18:04.920 within box one we’ll create box two
02:18:10.558 change the ID to box two
02:18:13.200 with box one let’s set box one to be
02:18:16.019 relative then get rid of these
02:18:18.179 properties
02:18:19.740 we’ll create box two by copying box one
02:18:23.760 change the ID to box two the width will
02:18:27.058 be 100 the height will be 100 but we’ll
02:18:30.000 pick a different color something red is
02:18:31.799 good
02:18:33.000 the position for Box 2 will be absolute
02:18:38.160 since Box 2 is contained within box 1
02:18:41.398 box 1 is its nearest ancestor
02:18:45.240 if I were to move box 1 Box 2 is still
02:18:48.718 going to stay in the top left corner of
02:18:50.879 box one let me demonstrate
02:18:53.760 I’ll set the top property to be 100
02:18:56.398 pixels
02:18:59.519 then left to be 100 pixels as well
02:19:03.120 so even though we’re moving box 1 Box 2
02:19:06.240 it’s positioned absolutely it’s still
02:19:09.000 going to stay within its container let’s
02:19:10.740 try and put Box 2 right in the middle of
02:19:12.898 box one
02:19:14.519 I will set the top property to be 50
02:19:18.359 pixels
02:19:20.638 and the left property to be 50 as well
02:19:24.359 now Box 2 is right in the middle of box
02:19:26.340 one we can move box one anywhere let’s
02:19:29.340 set the position of box 1 to be fixed
02:19:33.959 so Box 2 is still going to stay right in
02:19:36.179 the middle of box one no matter where it
02:19:38.519 is
02:19:39.299 so that is the absolute position an
02:19:42.299 element is positioned relative to its
02:19:44.580 nearest ancestor
02:19:46.200 then they’re sticky a sticky element is
02:19:49.260 positioned based on the current scroll
02:19:51.180 position meaning our scroll bar so to
02:19:53.700 say
02:19:54.600 with box one box one will be sticky
02:19:58.740 let’s set top to be zero pixels what
02:20:01.920 happens now is that when I scroll down
02:20:03.740 our web browser is going to catch this
02:20:06.720 element
02:20:09.780 sticky is kind of similar to fixed with
02:20:13.380 sticky we reserve some space for the
02:20:15.300 original element
02:20:16.800 if I were to change that to fixed
02:20:19.979 this element is just basically stuck to
02:20:22.320 the top of my viewport
02:20:24.479 with sticky it’s going to be in the same
02:20:26.160 place until we scroll past it
02:20:30.300 alright then lastly their static static
02:20:33.420 is the default position for an element
02:20:36.000 in the future we will have the
02:20:37.500 capability of changing these positions
02:20:39.600 dynamically to set a position to the
02:20:42.180 default which is static you just change
02:20:43.800 it
02:20:45.240 so those are the five position types
02:20:47.520 relative fixed absolute sticky and
02:20:49.740 static we’ll have more practice with
02:20:51.899 this in the future so don’t worry this
02:20:53.819 was more or less just an introduction
02:20:55.319 and those are CSS positions
02:21:00.060 hey how’s it going everybody today I’m
02:21:01.859 going to show you how we can include a
02:21:03.300 background image using CSS so sit back
02:21:06.180 relax and enjoy the show all right let’s
02:21:08.819 get started everybody what you’ll need
02:21:10.800 to begin with is a high resolution
02:21:12.840 picture for a background I just so
02:21:15.060 happen to find a picture of Central Park
02:21:16.979 in New York City the higher the
02:21:18.720 resolution the better so place that
02:21:20.640 image within your website folder in our
02:21:22.800 HTML document let’s create a title
02:21:26.640 I’m just going to say the word hello
02:21:30.840 and we’ll need some text just as a point
02:21:33.180 of reference
02:21:34.979 I’ll generate some text by typing lorem
02:21:37.140 then hitting Tab and that’s good enough
02:21:39.420 for now so within our style sheet I will
02:21:42.720 select the body of our document we are
02:21:45.780 going to include that background image
02:21:48.000 with the background image property
02:21:50.640 then we need a URL
02:21:53.340 the URL is going to be a relative file
02:21:55.680 path or an absolute file path to where
02:21:58.200 this image is located they’re right next
02:22:00.359 to each other I just need the file name
02:22:02.819 so my image name is background and this
02:22:06.120 is a jpeg
02:22:09.060 alright so here’s my image so far it’s
02:22:11.160 gigantic it’s huge let me show you what
02:22:13.859 happens if I use a smaller version of
02:22:16.140 the same image
02:22:17.580 this image I think is like 500 pixels
02:22:20.220 for the width or so
02:22:21.720 background Dash small
02:22:25.020 so here’s my image
02:22:27.420 but it repeats itself
02:22:29.280 there is a background repeat property
02:22:32.939 So within the body of my document
02:22:35.939 I will set the background Dash repeat
02:22:38.880 property to be no
02:22:41.880 repeat now this image isn’t repeating
02:22:44.700 we’re headed in the right direction
02:22:47.220 what we’ll do now is take this image and
02:22:50.340 Center it in the middle of my viewport
02:22:54.200 take the background Dash position
02:22:58.080 property and set that to Center
02:23:03.780 it’s centered horizontally
02:23:05.939 another property we’ll need is
02:23:07.560 background attachment
02:23:12.780 background Dash attachment
02:23:16.920 I think I misspelled attachment there we
02:23:19.020 are the background attachment property
02:23:21.600 sets whether a background image scrolls
02:23:24.240 with the rest of the page or is it fixed
02:23:26.520 we will set the image to be fixed
02:23:29.600 now this image is in the middle of my
02:23:32.460 viewport
02:23:35.220 see even if I were to expand and
02:23:36.780 contract it
02:23:38.040 it’s still within the middle
02:23:40.680 lastly we need this image to take up the
02:23:43.080 entire space of the background
02:23:47.000 and there’s one last property
02:23:49.920 background Dash size we will set that to
02:23:54.180 cover
02:23:55.560 now this image is taking up the entire
02:23:57.600 space of my background which is what I
02:23:59.939 wanted I’m going to use that high
02:24:02.160 resolution picture that I used
02:24:03.720 previously
02:24:07.080 that’s much better
02:24:09.240 all right everybody so that’s how to add
02:24:11.100 a background image using CSS
02:24:15.260 hey what’s going on everybody today
02:24:17.399 we’re going to discuss combinators in
02:24:19.500 CSS combinators explain the relationship
02:24:22.500 between listed selectors there’s four
02:24:25.260 we’ll discuss today descendants which is
02:24:27.899 just a space a child which is a right
02:24:30.780 angle bracket a tilde which is a general
02:24:33.600 sibling and plus which is for adjacent
02:24:36.660 siblings you would type something like
02:24:38.399 this
02:24:39.180 you’ll have selector one
02:24:41.460 a combinator for example the child
02:24:43.979 combinator then another selector
02:24:46.920 if I said div
02:24:49.200 child combinator
02:24:50.939 then p
02:24:52.439 we’re applying CSS properties to any
02:24:55.439 paragraph elements found within the
02:24:57.720 stiff section
02:24:59.280 what we’ll do in this example is create
02:25:01.500 a div section
02:25:05.220 I will give this div an ID of container
02:25:11.100 we’ll create a few paragraphs
02:25:15.060 for paragraph one let’s say this is
02:25:18.660 number one
02:25:20.040 we’ll create another paragraph
02:25:23.700 then we’ll create an inner div section
02:25:27.060 this div section will not have an ID
02:25:30.060 but within this inner div section we’ll
02:25:32.640 have another paragraph This is number
02:25:35.160 three
02:25:36.300 outside of our div with an ID of
02:25:38.520 container we’ll create two more
02:25:40.380 paragraphs this is number four
02:25:43.200 this is number five
02:25:45.540 that’s all we’ll need for now
02:25:48.000 just to make it a little more clear that
02:25:49.800 this is a div section I’ll take our
02:25:52.380 container
02:25:54.260 then give it a border border two pixels
02:25:58.859 solid
02:26:01.140 paragraphs one two and three are within
02:26:03.180 a div section four and five are not
02:26:06.060 I would like to highlight all paragraphs
02:26:08.520 within my ID of container
02:26:11.460 I will take my ID of container
02:26:15.060 then I will use the descendant
02:26:17.280 combinator which is an empty space then
02:26:20.040 list another selector I’m going to
02:26:22.140 highlight all paragraphs within my div
02:26:24.540 section that would be my div section
02:26:27.540 space then what am I applying CSS
02:26:30.780 properties to my paragraphs
02:26:33.479 let’s take the background color and set
02:26:37.500 that to be yellow
02:26:40.560 something like that’s fine
02:26:42.720 all paragraph descendants of our
02:26:45.180 container change the background color to
02:26:47.460 Yellow
02:26:48.780 that is The Descendant combinator it’s
02:26:51.540 just an empty space
02:26:53.760 then you have children children is a
02:26:56.640 right angle bracket
02:26:59.580 highlight any paragraph children of our
02:27:02.819 container class only one and two are
02:27:05.220 highlighted
02:27:06.960 that’s because three is not technically
02:27:09.540 a child it’s a descendant
02:27:12.120 think of it like a grandchild in this
02:27:13.920 case
02:27:14.700 paragraphs one and two are direct
02:27:16.560 children of our container
02:27:18.540 but our third paragraph is One More
02:27:20.880 Level deep because it’s wrapped within
02:27:23.040 another div section it’s a descendant
02:27:25.380 but not a child all children are
02:27:28.020 descendants but not all descendants are
02:27:30.420 children that would apply to number
02:27:32.580 three that’s why only one and two are
02:27:34.740 highlighted that is the child combinator
02:27:38.399 then we have General sibling which is
02:27:41.460 represented with a tilde
02:27:44.520 take any paragraphs that are General
02:27:47.399 siblings of our container that would
02:27:50.399 highlight four and five
02:27:52.859 paragraphs four and five are both
02:27:55.200 siblings to our container
02:27:57.960 they’re both considered Children of the
02:28:00.300 body of my document therefore their
02:28:02.399 siblings like brothers and sisters
02:28:05.760 but if I were to wrap these two
02:28:07.439 paragraphs within a div section
02:28:14.640 well now they’re no longer siblings
02:28:16.920 the stiff section is now a sibling to
02:28:20.220 this first div section think of it this
02:28:22.260 way paragraphs four and five are nieces
02:28:24.660 and nephews to the First Development
02:28:28.439 all right let’s reverse that then we
02:28:30.960 have adjacent siblings
02:28:33.600 using a plus sign
02:28:35.399 we will select only adjacent siblings
02:28:39.600 four is selected but not five
02:28:42.060 the adjacent sibling is the next direct
02:28:45.000 sibling but not all siblings
02:28:48.180 that’s why four is selected and not five
02:28:50.280 but if I change their positions around
02:28:54.660 5 is now selected
02:28:57.240 alright everybody so those are
02:28:58.979 combinators they explain the
02:29:00.780 relationship between listed selectors
02:29:02.640 you have descendant child General
02:29:05.520 sibling and adjacent sibling and those
02:29:08.040 are combinators in CSS
02:29:12.120 hey how’s it going everybody today I’m
02:29:13.979 going to explain pseudo classes pseudo
02:29:16.319 classes are keywords added to a selector
02:29:18.960 they modify the behavior of an element
02:29:21.540 when they’re in a certain state for
02:29:23.520 example I have a button when I hover my
02:29:25.500 cursor over the button I set this button
02:29:28.020 to increase in font size and also change
02:29:30.479 the background color to Green
02:29:33.120 hover is an example of a pseudo class it
02:29:35.819 modifies our buttons Behavior active is
02:29:38.399 when an item is currently selected so
02:29:40.140 with my mouse I’m going to left-click
02:29:42.540 the mouse button and hold it the button
02:29:44.280 is now red basically they modify a
02:29:46.859 special state of an element so let’s
02:29:49.200 begin with a few examples let’s go to
02:29:51.540 our index file and we will create a
02:29:54.000 hyperlink
02:29:55.080 I will set the href attribute to be I
02:29:57.960 don’t know Google or something
02:29:59.600 https
02:30:01.340 colon to forward slashes google.com
02:30:06.060 be sure to close it I’ll type the word
02:30:08.700 Google here is my hyperlink to Google a
02:30:12.720 link is also a pseudo class I will
02:30:15.540 select any anchor tags that we have we
02:30:17.520 have one I’ll set the link pseudo class
02:30:20.819 to have these CSS properties so a colon
02:30:25.140 then the name of the pseudo class
02:30:27.600 instead of this text being blue let’s
02:30:29.939 set it to be like a light blue I will
02:30:33.060 set the color property to be a light
02:30:35.100 blue color let’s pick one
02:30:41.880 yeah
02:30:43.500 that’s pretty good when I hover my
02:30:45.840 cursor over this link I want the color
02:30:47.939 to change we are selecting any anchor
02:30:50.700 tags colon then we will use the hover
02:30:54.180 pseudo class
02:30:55.439 and I will change the color you know
02:30:57.840 what let’s use what we currently have
02:30:59.340 I’ll just make it a little brighter
02:31:04.140 now when I hover over this link the
02:31:06.240 color changes I’ll increase the font
02:31:08.399 size too
02:31:10.260 it’s kind of like we’re zooming in on
02:31:11.760 this element
02:31:12.899 let’s do 1.1 em
02:31:16.020 so the font size increases slightly
02:31:18.540 active kicks in when you’re holding down
02:31:20.280 the cursor over an element a colon
02:31:23.040 active
02:31:25.680 let’s change the font size to be 1.1 em
02:31:30.479 again
02:31:32.640 I will set the color to be let’s go with
02:31:35.939 the dark blue color
02:31:41.280 when I left click on the mouse and hold
02:31:43.020 it this link is now in the active state
02:31:48.300 if a link is visited by default it’s
02:31:50.880 purple let’s change that a colon visited
02:31:55.740 when our anchor element is in the
02:31:57.720 visited state I’ll change the font color
02:32:02.060 how about a gray color
02:32:07.859 there
02:32:09.060 all right so those are a few basic
02:32:11.100 pseudo classes
02:32:12.540 in this next example we’ll need a list
02:32:14.700 an unordered list
02:32:19.859 we will need 10 list item elements
02:32:26.640 this is number okay let’s copy this
02:32:30.300 paste it nine times
02:32:35.640 one two three four five six seven eight
02:32:40.319 nine
02:32:41.700 now we will select any list items and
02:32:44.700 use the hover pseudo class when I hover
02:32:47.640 over one of these list items I will
02:32:49.859 change the background color of that list
02:32:51.840 item to be a highlighter yellow color
02:32:55.500 I will change the background color to be
02:32:59.580 yellow
02:33:02.340 let’s go with that
02:33:05.340 so check this out when I hover over a
02:33:07.859 list item the background color changes
02:33:11.939 there’s also the not pseudo class
02:33:16.560 we can select anything that is not being
02:33:19.740 hovered over
02:33:22.020 not kind of does the opposite anything
02:33:24.540 that is not in this state anything
02:33:26.939 that’s not being hovered over
02:33:28.920 let’s set the color to be like a gray
02:33:31.560 color
02:33:32.700 anything that’s not currently being
02:33:34.439 hovered over is gray but when it is
02:33:37.020 hovered over it’s yellow
02:33:39.899 so that is the not pseudo class anything
02:33:42.660 that is not in this state will have
02:33:45.600 these CSS properties
02:33:48.000 then we have the nth child pseudo class
02:33:51.240 list item colon
02:33:53.700 and
02:33:54.960 child parentheses
02:33:57.840 anything that’s selected let’s set to be
02:34:00.420 yellow
02:34:06.899 depending on what value you put within
02:34:08.939 the parentheses that element will be
02:34:10.920 selected one corresponds to the first
02:34:13.319 element
02:34:14.700 two is for the second
02:34:16.500 three is for the third nine is for the
02:34:19.680 ninth element for all odd number
02:34:21.899 elements type odd for all even elements
02:34:24.840 type even
02:34:26.460 for every third element that would be 3n
02:34:30.500 369 for every fourth that would be 4N
02:34:35.220 you can add an offset too normally with
02:34:37.560 3n that’s every third
02:34:39.420 but if I want to start at the beginning
02:34:40.859 I can add plus one
02:34:43.080 four seven
02:34:45.359 or even plus two two five eight it’s
02:34:48.660 kind of like a formula this is really
02:34:50.700 handy with JavaScript because you can
02:34:52.560 place a variable within here the value
02:34:54.420 of that variable can change which is
02:34:56.040 pretty cool all right last example
02:34:59.220 let’s create a development
02:35:03.840 with an ID of greeting
02:35:09.840 the text will be hover here
02:35:13.080 within our development let’s create a
02:35:15.540 paragraph element
02:35:18.060 with some text of hello
02:35:21.479 normally I want this Hello message to be
02:35:23.760 hidden until we hover over this element
02:35:25.979 our div element
02:35:27.840 I’m going to style
02:35:30.300 our greetings
02:35:32.460 P element
02:35:35.700 I’ll set the background color to be
02:35:39.240 maybe a blue this time
02:35:42.540 like the light blue
02:35:47.760 I’ll add a little bit of padding too
02:35:49.500 maybe 10 pixels
02:35:53.460 to make this element invisible I can set
02:35:56.640 the display property to be none
02:36:01.020 what I would like to do when I hover
02:36:02.700 over the settlement I want this element
02:36:05.399 to be displayed we are selecting our
02:36:09.359 greeting
02:36:10.979 then when we hover over it
02:36:13.319 I want the P element of this div section
02:36:17.399 to have the display property of block
02:36:20.640 display it as a block level element
02:36:23.880 when we hover over this element it
02:36:26.280 displays the P element within our div
02:36:28.380 section
02:36:29.520 this will come really handy when we
02:36:31.500 create drop down menus those are pseudo
02:36:34.020 classes elements can have special States
02:36:36.359 like when they’re being hovered over or
02:36:38.580 you click on them using these pseudo
02:36:40.560 classes we can apply CSS properties to
02:36:42.960 those elements when we interact with
02:36:44.640 them and those are pseudo classes and
02:36:47.100 CSS
02:36:49.979 hey what’s going on everybody today I’m
02:36:51.899 going to explain pseudo elements in CSS
02:36:54.660 pseudo elements are keywords added after
02:36:57.359 a selector that are used to style a
02:37:00.180 specific part of an element you have a
02:37:02.340 selector for example H1 then two colons
02:37:05.640 then a pseudo element one you might see
02:37:08.100 is first Dash letter
02:37:11.100 we can add some CSS properties and style
02:37:13.800 the first letter of our H1 element
02:37:15.899 that’s the formula selector two columns
02:37:19.140 pseudo element let’s begin
02:37:21.780 in this example we will need an H1
02:37:23.939 element
02:37:25.380 why don’t you go ahead and type in the
02:37:27.240 word hello or something I really don’t
02:37:29.160 care and we will need a paragraph
02:37:33.840 to generate some text you can type lorem
02:37:36.000 then hit tab
02:37:38.399 and a list
02:37:40.260 let’s create an unordered list
02:37:44.580 with an ID of fruit
02:37:49.680 we’ll have three list items
02:37:56.220 the first list item will be apple
02:37:59.220 second will be orange third banana
02:38:03.120 let’s give each of these list items a
02:38:05.100 unique ID as well ID will be apple
02:38:11.880 Orange
02:38:13.399 then banana
02:38:16.680 all right that is good enough for now
02:38:18.479 let’s head to our style sheet
02:38:22.080 we will use the first letter pseudo
02:38:24.359 element to change the first letter in
02:38:26.580 our H1 element
02:38:28.080 we have our selector H1 two colons then
02:38:31.500 a pseudo element
02:38:33.060 first letter is one
02:38:35.399 what would we like to do with the first
02:38:37.140 letter
02:38:38.580 let’s set the font size to be 2 em
02:38:42.420 basically that’s 200 percent
02:38:45.300 the H in hello is larger now
02:38:48.180 and I will set the font style to be
02:38:51.240 italic
02:38:54.120 that is the first letter pseudo element
02:38:57.479 let’s select our paragraph paragraph two
02:39:00.359 colons
02:39:01.319 we can apply CSS properties to the first
02:39:04.020 line of some text
02:39:06.120 first dash line what would we like to do
02:39:09.479 let’s change the background color
02:39:11.300 background Dash color I’ll pick a yellow
02:39:14.280 color
02:39:16.859 something like that’s fine
02:39:20.100 all right so the first line is now a
02:39:22.319 highlighter yellow color
02:39:24.120 if I change the size of the window
02:39:26.580 the first line is still going to have
02:39:28.260 that background color
02:39:30.780 than the selection pseudo class is
02:39:32.760 anything that’s currently selected with
02:39:34.620 our Mouse
02:39:35.939 we’re selecting our paragraph element
02:39:37.800 two colons then we will use the
02:39:40.560 selection pseudo element
02:39:42.300 anything that’s selected with our Mouse
02:39:44.420 normally the text is white and the
02:39:46.800 background is blue let’s change that
02:39:49.680 let’s set the color to be white well I
02:39:52.500 guess that’s the same and the background
02:39:54.899 color
02:39:56.700 to be
02:39:58.920 let’s go with the dark grayish color
02:40:04.620 no better yet let’s make the color green
02:40:06.899 for the text
02:40:08.960 yeah that’s kind of cool
02:40:11.700 so anything that’s selected will have a
02:40:14.280 font color that’s green and a background
02:40:16.500 color that’s dark gray
02:40:18.840 now let’s go to our list
02:40:20.700 the list had an ID a fruit then I would
02:40:24.479 like to select any list items with any
02:40:27.000 list item we will use the before pseudo
02:40:29.819 element
02:40:31.859 we can add something before each list
02:40:33.899 item
02:40:34.979 I’ll add a check mark emoji we can do
02:40:37.680 that with the content property
02:40:40.260 then within a set of quotes I can select
02:40:43.439 an emoji so if you’re on Windows you can
02:40:45.960 hold the Windows button then semicolon
02:40:48.899 and there’s a prompt for an emoji
02:40:51.300 I will find a check mark that looks good
02:40:55.200 now before any list item add a check
02:40:57.960 mark
02:40:59.340 which we have
02:41:00.720 there’s also the after pseudo element we
02:41:03.720 have a list item with an ID of Apple
02:41:06.840 after after this selector
02:41:10.560 let’s add some content
02:41:13.020 I will add an emoji of an apple
02:41:16.020 Apple
02:41:17.819 there we are
02:41:19.260 let’s do this with orange and banana as
02:41:21.960 well
02:41:24.240 Apple
02:41:26.160 Orange
02:41:27.960 banana
02:41:29.460 let’s change these emojis Orange
02:41:36.000 then banana
02:41:41.160 those are the before and after pseudo
02:41:43.680 elements before or after some element we
02:41:46.680 can add or change some content
02:41:48.780 now with the list item you can change
02:41:50.520 the marker
02:41:51.720 for an unordered list the default is a
02:41:54.120 bullet point but let’s change that
02:41:56.520 with our unordered list of fruit
02:42:01.080 let’s select any list items
02:42:03.720 and use the marker pseudo element
02:42:07.200 let’s change the marker to be a check
02:42:09.300 mark
02:42:10.140 but I’ll delete what we have with the
02:42:12.060 before pseudo element
02:42:14.700 I will also change the color of this
02:42:16.560 check mark to be green
02:42:21.500 pretty cool
02:42:24.000 let’s make it a little bit bigger too
02:42:26.460 font size 1.2 em
02:42:29.880 there all right everybody so those are
02:42:32.220 pseudo elements you have a selector two
02:42:34.800 colons then a pseudo element which can
02:42:37.380 add specific CSS properties to that
02:42:39.960 selector and those are a few pseudo
02:42:42.240 elements and CSS
02:42:46.080 hey everybody today I need to explain
02:42:47.880 pagination in HTML and CSS pagination is
02:42:51.780 the method by which a document is
02:42:53.760 separated into pages and numbers are
02:42:55.800 given using pagination on a website we
02:42:58.260 can move between Pages easily it’s kind
02:43:00.300 of like you’re reading a book each page
02:43:01.979 has a number pagination might also be
02:43:04.020 useful on your web page if you need to
02:43:05.760 limit the results maybe you only want so
02:43:07.920 many results per page then you can
02:43:10.020 easily navigate between the pages
02:43:11.460 there’s many different uses so let’s
02:43:13.920 begin we’ll start with our index file I
02:43:17.280 will create an H1 element
02:43:19.140 with the title of this is page number
02:43:22.260 one
02:43:23.640 then we’ll create some sample text
02:43:28.020 within a paragraph element I’ll type
02:43:29.760 lorem then hit tab to generate some text
02:43:32.819 usually with pagination it’s found at
02:43:35.399 the bottom of a web page so that’s a
02:43:37.500 good place for it right here
02:43:39.180 there’s many different ways in which we
02:43:40.979 can create pagination but using only
02:43:43.080 what we know so far that I’ve covered in
02:43:44.939 this series here’s one way we’ll create
02:43:47.460 a development
02:43:48.780 with a class of pagination
02:43:52.560 then be sure to close it
02:43:55.680 within this development we’ll create
02:43:58.080 several hyperlinks
02:44:00.420 we’ll need an a tag I’ll set the href
02:44:03.300 attribute just to be empty for now and
02:44:05.880 then we’ll close it
02:44:07.560 for this example let’s create a total of
02:44:09.840 seven links we have one two three four
02:44:13.439 five six seven
02:44:15.540 beginning with the second link that will
02:44:17.700 be one then two three four five
02:44:22.200 for my first link I’ll use a left angle
02:44:24.540 bracket this is so we can navigate
02:44:26.280 backwards depending on what page we’re
02:44:28.140 on and with the last link I’ll use a
02:44:30.899 right angle bracket so we can navigate
02:44:32.460 forwards
02:44:34.439 we’ll revisit this page let’s head to
02:44:36.600 our style sheet
02:44:38.160 the first thing I’m going to do is
02:44:39.720 Center all of these links within my div
02:44:41.760 element
02:44:42.660 I’m selecting my class of pagination
02:44:46.380 I will use the text align property set
02:44:50.460 it to Center
02:44:53.580 then I would like to style all of these
02:44:55.500 links these hyperlinks
02:44:59.280 we’re starting with our pagination class
02:45:01.580 then I would like any a elements found
02:45:04.620 within the pagination class
02:45:07.020 let’s change the color
02:45:08.880 I will set the color to be black
02:45:13.020 let’s eliminate the text decoration that
02:45:16.080 is the underlining
02:45:18.540 text decoration none
02:45:22.140 I’ll add a little bit of padding
02:45:26.280 8 pixels by 15 pixels
02:45:29.640 I will display these elements as an
02:45:32.100 inline block
02:45:35.819 basically by setting these elements to
02:45:37.800 have a display property of inline block
02:45:39.600 we can adjust the width and height of
02:45:41.520 these elements but what we have is good
02:45:43.319 already alright so far so good
02:45:46.140 going back to our HTML file I’m going to
02:45:48.720 make one change we’re beginning with
02:45:50.760 page one
02:45:52.260 that’s our index file
02:45:54.420 with this anchor tag I will set the
02:45:56.700 class to be active
02:46:00.720 within our CSS file we’re taking our
02:46:03.660 pagination class
02:46:05.640 find all a elements within our
02:46:07.380 pagination class then find any active
02:46:11.100 classes
02:46:14.160 so it’s going to look a little strange
02:46:15.560 within the pagination class
02:46:18.120 within any anchor tags find the class
02:46:21.120 that’s active
02:46:22.859 so in this case it would be page one
02:46:26.040 I will change the background color of
02:46:28.439 that element
02:46:30.000 background color
02:46:31.920 let’s pick a greenish color
02:46:34.380 but feel free to pick any color you like
02:46:39.120 that’s pretty good
02:46:41.760 let’s try and make the font weight bold
02:46:43.859 I want to see what that looks like
02:46:46.439 okay not bad
02:46:48.300 this part’s optional but I’ll add a
02:46:50.399 border radius around this element the
02:46:52.319 one that’s currently highlighted
02:46:54.479 border radius
02:46:56.180 5 pixel seems fine yeah that looks
02:46:59.760 pretty good
02:47:00.840 all right now if any element is not
02:47:03.300 active we can style them
02:47:06.180 this part’s going to look a little
02:47:07.500 strange
02:47:09.060 select the pagination class
02:47:11.580 with any a elements we will use the
02:47:15.180 hover pseudo class
02:47:17.100 if these elements are hovered over but
02:47:19.620 they’re not active then I’d like to
02:47:21.479 highlight them we’ll use the not pseudo
02:47:24.240 class
02:47:25.680 find any elements that are not within
02:47:28.380 the active class
02:47:30.840 I will change the background color
02:47:34.439 to something maybe gray like that
02:47:40.319 then I’ll add a border radius of 5
02:47:42.120 pixels
02:47:43.920 when we hover over these inactive links
02:47:46.140 they should change in color
02:47:48.960 let me make that a little bit lighter
02:47:50.640 though
02:47:53.040 that looks pretty good
02:47:55.140 now we need some functionality for these
02:47:56.939 pages
02:48:00.720 if we click on one that should take us
02:48:02.939 to our first file which is named
02:48:05.300 index.html or it could be named
02:48:07.500 something else for you the second link
02:48:09.600 will bring us to a page named page two
02:48:12.120 which we still need to create
02:48:14.460 then page 3.html
02:48:18.240 page4.html
02:48:21.600 page five dot HTML now with these back
02:48:25.200 and forwards buttons
02:48:26.880 we can easily navigate through pages
02:48:28.680 using JavaScript but unfortunately we
02:48:31.080 really don’t know JavaScript at this
02:48:32.640 point at this point in time the easiest
02:48:34.800 way for us to move forwards or backwards
02:48:37.140 using these arrows is to list a specific
02:48:39.479 file if we’re on page one and we need to
02:48:42.000 move forwards that will bring us to page
02:48:43.979 two
02:48:45.300 for the last hyperlink I will set that
02:48:47.280 to be page 2. if we’re on page one then
02:48:50.460 we hit the backwards button while we’re
02:48:52.620 really not going to go anywhere we can
02:48:54.540 either leave this link empty or we can
02:48:57.120 refresh the page just by listing the
02:48:59.220 page that we’re currently on now we need
02:49:01.200 to create these pages
02:49:03.479 what I’m going to do is go to our
02:49:05.520 website folder I will copy this index
02:49:08.580 file paste it
02:49:11.040 then rename this copy as page2.html
02:49:17.520 let’s copy page two paste it change page
02:49:21.180 to copy to page three
02:49:25.380 we’re going to do this all the way until
02:49:26.760 we reach page five
02:49:30.660 foreign
02:49:38.340 now if we go to page two
02:49:41.040 let’s change the title to be page two
02:49:44.520 the back button will bring us to our
02:49:46.560 index file also known as page one in
02:49:48.720 this case
02:49:51.120 let’s set the class of active to be
02:49:54.120 within the anchor tag page two
02:49:58.260 then if we move forwards we want to go
02:50:00.540 to page three
02:50:02.939 so then if we go to page three
02:50:05.460 if we move backwards we’re going to page
02:50:08.100 two
02:50:10.380 set the class that’s currently active to
02:50:12.479 be on page three
02:50:17.460 then if we go forwards we’re on page
02:50:19.800 four
02:50:23.939 oh be sure to change the title to I
02:50:25.560 forgot
02:50:27.120 two three we’re good
02:50:29.939 then on page four this is Page four
02:50:33.120 if we move backwards we’re going to go
02:50:34.920 to page three
02:50:38.040 change the class to reflect page four
02:50:42.240 if we move forwards we’ll go to page
02:50:44.580 five
02:50:47.700 then lastly on page five this is page
02:50:50.700 five
02:50:52.439 if we move backwards we’re going to page
02:50:54.600 four
02:50:57.359 move the class over to page five
02:51:01.500 then we can’t really go forwards so I’m
02:51:03.720 just going to set the forward button to
02:51:06.359 be page five again just to refresh it
02:51:08.760 or you can eliminate it either way
02:51:11.580 all right let’s see if this works be
02:51:13.260 sure to save everything
02:51:15.180 so we should be able to move between the
02:51:17.040 pages by clicking on these buttons or
02:51:19.020 the arrows we’re on page one we can go
02:51:21.420 to page two three four five
02:51:25.680 we can also use the arrows
02:51:27.840 two three four five four three two one
02:51:33.660 all right everybody so that’s pagination
02:51:35.340 it’s a method by which a document is
02:51:37.680 separated into pages and that is simple
02:51:39.899 pagination in CSS
02:51:44.220 hey what’s going on everybody today
02:51:45.840 we’ll create a drop down menu only using
02:51:48.060 HTML and CSS so let’s get started the
02:51:52.140 first thing we’ll create is a div
02:51:53.580 section
02:51:55.080 I will give this div section A Class of
02:51:58.439 drop down
02:52:00.840 then within this div section I’ll create
02:52:03.420 a button
02:52:05.520 what kind of drop down menu should we
02:52:07.380 create let’s create a drop down menu for
02:52:09.840 food
02:52:11.640 then we’ll need a div section to hold
02:52:13.740 all of the different content within our
02:52:15.420 drop down menu
02:52:16.859 I will give this inner div section A
02:52:20.040 Class of content
02:52:24.720 within my content class
02:52:27.000 I’ll create a few hyperlinks
02:52:31.979 I’ll set the href attribute to B nothing
02:52:35.640 but you can put a file path or a URL in
02:52:38.520 here
02:52:39.660 I’ll create three elements for our drop
02:52:42.000 down menu
02:52:43.500 the first will be apple
02:52:46.680 Orange
02:52:48.060 then banana
02:52:50.640 this part isn’t necessary but for my
02:52:52.680 demonstration I’m going to create a
02:52:54.359 paragraph a text
02:52:56.460 I’ll type lorem then hit tab that will
02:52:58.859 generate some text alright that is all
02:53:01.439 the markup that we need for this video
02:53:03.000 Let’s head to our style sheet
02:53:05.700 the first element I’ll apply some CSS
02:53:08.040 properties to is our button with my drop
02:53:10.920 down menu class I will select any
02:53:13.200 buttons
02:53:14.640 I will change the background color
02:53:17.460 to be something else
02:53:21.240 I’ll use hsl values
02:53:25.020 I’ll go with 80 for the lightness
02:53:29.420 for the font color I’ll pick White
02:53:33.899 I’ll add a little bit of padding around
02:53:35.819 the text
02:53:37.680 padding 10 pixels by 15 pixels is good
02:53:42.779 I’ll remove the Border by setting the
02:53:44.939 Border property to be none
02:53:47.939 then I’ll change our cursor to be a
02:53:49.620 pointer when we hover over the button
02:53:51.680 cursor pointer
02:53:54.180 now when I hover over the button
02:53:56.580 my cursor changes to a pointer
02:53:59.340 the next elements that will change are
02:54:01.439 the a elements
02:54:04.319 within my drop down menu class take any
02:54:07.740 ailments then apply the CSS properties
02:54:11.580 let’s display all of these items as a
02:54:14.939 block
02:54:16.819 I will set the color to be black
02:54:20.880 I’ll remove any text decoration that’s
02:54:23.520 the underline basically
02:54:25.380 text decoration none
02:54:28.700 and I will apply a little bit of padding
02:54:33.000 10 by 15 pixels
02:54:35.939 we have one issue
02:54:37.560 all of the content within my drop down
02:54:39.600 menu is pushing all of the other content
02:54:42.479 on my web page down
02:54:44.279 eventually we’ll set the position of our
02:54:47.100 content to be absolute to take it out of
02:54:49.380 the normal flow of our web page
02:54:52.080 with our drop down menus content class
02:54:58.439 let’s change the background color first
02:55:01.620 background color I’ll use hsl values
02:55:06.060 let’s go with 95 lightness
02:55:12.600 I will set the position property to be
02:55:15.899 absolute
02:55:18.180 then I’ll set a minimum width for the
02:55:20.640 content
02:55:24.720 I’ll stick with 100 pixels
02:55:27.300 but feel free to adjust this value
02:55:30.479 then I’ll add a box shadow
02:55:33.420 box shadow
02:55:35.279 the first value is for the horizontal
02:55:37.800 positioning
02:55:39.000 the second number is for the vertical
02:55:41.580 positioning
02:55:43.260 a third value is for the level of blur
02:55:47.160 then select a color
02:55:49.680 to make the shadow a little bit lighter
02:55:51.960 if I’m using hsl values I can adjust the
02:55:55.620 position of this bar and change the
02:55:58.080 opacity
02:55:59.340 let’s go with like 80 percent
02:56:03.000 that looks pretty good
02:56:04.819 normally I don’t want this content to be
02:56:07.140 displayed unless I hover over our button
02:56:10.380 I will set the display property of our
02:56:13.319 content to be none to hide it
02:56:16.560 when I hover over our button then I’d
02:56:19.260 like to display that content
02:56:21.779 let’s take our drop down menu class
02:56:26.100 and apply the hover pseudo class
02:56:29.939 with our content
02:56:33.000 I would like to set the display property
02:56:35.520 to be a block again now when I hover my
02:56:38.880 cursor over the button it displays our
02:56:41.100 drop down menu
02:56:43.160 here’s a few extra changes I’m going to
02:56:45.540 make when I hover over the button I’ll
02:56:47.880 change the background color of the
02:56:49.140 button with our drop down menu class
02:56:52.640 I’ll apply the hoverseudo class take our
02:56:56.640 button within that class
02:56:59.160 then change the background color
02:57:02.220 I’ll set the lightness to be like 70.
02:57:05.819 the background color of the button is
02:57:07.380 changing now
02:57:09.240 then lastly when I hover over one of
02:57:11.460 these a elements I also would like the
02:57:13.500 background color to change
02:57:17.460 with my drop down menu
02:57:21.120 take any a elements
02:57:23.700 when I hover over them
02:57:25.800 change the background color
02:57:30.000 for the lightness I’ll set that to be
02:57:33.479 like 90.
02:57:35.939 that looks pretty good
02:57:37.620 all right here’s the last change that
02:57:39.180 we’re going to make
02:57:40.439 with our div section it’s a block level
02:57:42.899 element when I hover my cursor over this
02:57:45.899 area even though it’s all white space we
02:57:48.359 still display the drop down menu
02:57:50.340 the last change that I’m going to make
02:57:52.140 is set the drop down menu div section
02:57:56.460 to display as an inline block
02:58:02.100 so when I hover over this white area we
02:58:05.220 don’t display the drop down menu until I
02:58:07.560 move my cursor over the button then the
02:58:10.020 menu is displayed
02:58:11.279 all right everybody so that is a simple
02:58:13.380 drop down menu only using HTML and CSS
02:58:19.200 hey everybody in today’s video we’re
02:58:21.300 going to create a navigation bar using
02:58:23.040 HTML and CSS so let’s get started we’ll
02:58:27.060 Begin by creating an H1 title for the
02:58:29.760 title of our web page why don’t you go
02:58:32.040 ahead and type in your name or your
02:58:34.260 employer’s name or your business name
02:58:36.120 really doesn’t matter then I’m going to
02:58:38.700 use a nav element also known as a
02:58:41.279 navigation element
02:58:44.000 navigation elements are typically used
02:58:46.500 for a set of navigation links I will
02:58:49.140 give this nav element a class of navbar
02:58:52.380 then within this navigation element I’ll
02:58:55.140 create an unordered list
02:58:58.700 my unordered list will contain one list
02:59:02.340 item for each category in my navigation
02:59:04.260 bar
02:59:08.340 for the first list item let’s create a
02:59:10.979 category for home I would like to turn
02:59:13.620 this category into a hyperlink I’ll
02:59:15.479 surrounded this text with a pair of a
02:59:17.160 tags
02:59:18.680 within the opening a tag I will set the
02:59:21.720 href attribute to B I’ll just keep it
02:59:24.300 empty for now we’ll fill that in later
02:59:26.040 let’s copy our list item paste it a few
02:59:29.340 times maybe a total of four links
02:59:33.000 for the categories let’s have home
02:59:35.819 about
02:59:38.340 products
02:59:40.200 and contact
02:59:42.120 these are a few common categories you
02:59:44.160 may see for a navigation bar
02:59:46.439 all right then outside of our navigation
02:59:48.660 bar let’s use a main element for the
02:59:52.200 main content for our web page
02:59:54.899 I’ll add an H3 element for a sort of
02:59:58.080 subtitle for the main section of our
03:00:00.000 content
03:00:01.200 this is the home page
03:00:05.279 then I’ll add a paragraph a text
03:00:09.000 to generate some text in vs code you can
03:00:11.160 type lorem then hit tab
03:00:13.580 alright that is what we need for now
03:00:16.380 let’s go to our style sheet the first
03:00:18.660 thing I’m going to do is text align our
03:00:21.420 H1 element and set it to Center
03:00:24.779 text align Center
03:00:27.420 the text in our H1 element should be
03:00:29.580 right in the center
03:00:31.260 I will take our navigation bar class
03:00:34.979 select our unordered list set the list
03:00:38.520 style type to be none to remove the
03:00:42.000 bullet points and they are gone now I’ll
03:00:45.420 also change the background color
03:00:48.000 let’s pick a dark gray color
03:00:53.880 I’ll set the lightness to be 25. I’ll
03:00:57.540 remove any padding
03:01:00.779 as well as any margins
03:01:04.319 let’s style these hyperlinks within our
03:01:07.560 navigation bar class take any a elements
03:01:11.880 set the color to be white
03:01:15.660 remove the text decoration text
03:01:18.740 decoration will be none that removes the
03:01:22.260 underline
03:01:23.460 I’ll add some padding of 15 pixels
03:01:28.140 I will display these elements as a block
03:01:32.760 then text
03:01:34.380 align Center
03:01:37.319 there we are this navigation bar is a
03:01:40.260 vertical style navigation bar this is a
03:01:43.020 style you may see at the bottom of a web
03:01:44.819 page when I hover over one of these
03:01:46.979 links I want to change the background
03:01:48.600 color
03:01:49.500 we will take our navigation bar class
03:01:52.979 take any a elements then apply the hover
03:01:56.220 pseudo class
03:01:57.899 when I hover over one of these
03:01:59.520 hyperlinks I’ll change the background
03:02:01.680 color
03:02:04.740 I’ll turn down the lightness slightly
03:02:07.200 to 10 lightness
03:02:09.899 there we are
03:02:11.220 if you would like a horizontal
03:02:12.779 navigation bar here’s a change we can
03:02:14.880 make
03:02:15.840 with our navigation bar class take any
03:02:19.500 list items
03:02:21.000 then we will float left
03:02:24.899 one change will make within our
03:02:27.000 unordered list set the Overflow property
03:02:30.240 to be hidden
03:02:33.600 alright that’s pretty good so far
03:02:36.600 there is a little bit of margin around
03:02:38.399 the body of my document I am going to
03:02:41.220 set margin to be zero
03:02:43.080 with our body element set any margin to
03:02:46.680 be zero pixels
03:02:48.600 if you would like margin around the main
03:02:50.760 content of your page
03:02:52.680 we will take our main element
03:02:55.560 then set margin to be
03:02:58.500 let’s stick with 20 pixels
03:03:01.520 you also could put margin just on the
03:03:04.080 left side and the right side you know
03:03:06.120 what I’m going to set margin left to be
03:03:07.920 20. and margin right to be 20.
03:03:13.140 all right then lastly let’s fill in
03:03:15.300 these ahref attributes for the href
03:03:17.880 attributes I will set my home link to be
03:03:20.720 index.html about will be about.html
03:03:25.500 products.html
03:03:28.680 and contact.html
03:03:32.880 we’re going to go to our website folder
03:03:34.920 we’ll create a few copies of our index
03:03:37.020 file we need three more files
03:03:40.880 one two three
03:03:43.680 let’s rename one of these as about.html
03:03:50.460 then products.html
03:03:55.140 then contact.html
03:04:01.740 so let’s open about
03:04:04.140 I’ll change the header element of our
03:04:06.960 main element to B this is the about page
03:04:11.220 let’s apply that for products this is
03:04:14.220 the products page
03:04:18.000 then contact
03:04:19.800 this is the contact page
03:04:22.920 all right and that should be everything
03:04:24.359 let’s see if this works
03:04:26.640 we’re currently on the home page I can
03:04:28.380 go to the about page products contact
03:04:32.060 and home
03:04:34.319 in this example they’re all relatively
03:04:36.180 the same except for the H3 title all
03:04:39.660 right everybody and that’s how to create
03:04:40.920 a navigation bar using HTML and CSS
03:04:46.100 hey what’s going on everybody today I’m
03:04:48.479 going to show you a basic Website Layout
03:04:50.640 using HTML and CSS all right let’s begin
03:04:54.180 so we should know what semantic tags are
03:04:56.819 semantic tags they include but are not
03:04:59.340 limited to headers nav elements main
03:05:02.880 section aside articles and Footers
03:05:05.760 you’ll want to use semantic tags because
03:05:07.859 they keep your content organized they’re
03:05:10.080 better for search engine optimization
03:05:12.000 and they assist with screen readers and
03:05:14.640 other technology for accessibility so
03:05:17.160 I’ve already written some HTML markup I
03:05:19.680 just want to describe this first headers
03:05:21.720 are used for introductory content such
03:05:24.479 as a title a logo or author information
03:05:27.319 nav elements they’re used for navigation
03:05:30.359 bars or other links sometimes you may
03:05:33.600 find a set of navigation Links at the
03:05:35.399 bottom of your page but having a
03:05:37.260 navigation bar is fairly common now the
03:05:39.600 main content which is all of this it can
03:05:42.600 contain one of many sub elements such as
03:05:45.660 sections aside elements articles and
03:05:48.779 generic developments so sections which
03:05:51.720 is what I’ve created here in the middle
03:05:52.979 this is for dependent content you would
03:05:55.740 typically put anything you want within a
03:05:57.540 section it’s typically used for
03:05:59.520 dependent content if I were to take this
03:06:01.800 section out of the web page then put it
03:06:03.840 on another web page it might not
03:06:05.880 necessarily make sense like what is it
03:06:07.859 for that’s why it’s dependent and a side
03:06:10.560 element is meant for side content this
03:06:13.200 can include author information fun facts
03:06:15.840 quotes external links comments or really
03:06:18.960 any other related content that’s related
03:06:21.240 to a section now an article this
03:06:24.300 represents independent content this
03:06:26.700 could include news articles job posts or
03:06:29.640 blog posts articles are really similar
03:06:32.819 to sections with articles it’s meant for
03:06:35.279 independent content for example a news
03:06:37.620 article if I were to take this news
03:06:39.600 article cut it out and put it on a
03:06:42.060 different website it would still make
03:06:43.920 sense
03:06:44.760 it’s independent content it’s not
03:06:46.800 reliant on the context of the website
03:06:49.260 whereas in a section would be and then
03:06:51.899 lastly we have Footers a footer is for a
03:06:54.120 closing content this could include
03:06:55.740 author information copyright information
03:06:58.200 and sometimes navigational links there’s
03:07:01.260 really no one-size-fits-all approach
03:07:03.240 really the design is up to you but this
03:07:05.460 is a really common format now that we
03:07:07.979 know the basics let’s actually design
03:07:09.540 this alright so we will create our
03:07:12.240 semantic elements we have a header
03:07:15.359 a nav element
03:07:17.760 a main element
03:07:20.340 and a footer element
03:07:24.120 within our header element let’s just add
03:07:27.060 an H2 element
03:07:28.460 that says header
03:07:31.979 so let’s go to our style sheet I’ll take
03:07:34.740 our header element
03:07:36.720 let’s change the background color
03:07:39.720 background Dash color let’s pick a light
03:07:42.240 gray color
03:07:43.800 I’ll use hsl values because I like them
03:07:47.880 84 or 85 is good
03:07:51.240 then let’s text align Center
03:07:55.680 and add a little bit of padding
03:07:59.100 25 pixels
03:08:01.439 okay let’s work on our navigation bar
03:08:03.420 it’s not going to be a fully functioning
03:08:05.580 navigation bar we’ve done that in a
03:08:07.319 previous video Let’s just allocate some
03:08:09.660 space for navigation bar it is common to
03:08:12.180 have more than one navigation element
03:08:13.680 per web page if we’re creating a
03:08:16.080 navigation bar we should set the class
03:08:18.899 to be something like navbar so it’s
03:08:21.720 descriptive let’s go to our CSS style
03:08:24.479 sheet I will select our navbar class
03:08:28.800 then change the background color
03:08:32.279 let’s go with the darker color
03:08:35.640 I’ll add some height
03:08:37.680 50 pixels
03:08:41.399 and that should be good
03:08:42.960 we’re just allocating some space we’re
03:08:44.700 not creating a full navigation bar
03:08:46.439 there’s a little bit of margin around
03:08:48.600 the body of our document I’m going to
03:08:50.700 remove that by selecting our body
03:08:52.859 element
03:08:54.000 then set the margin to be 0 or 0 pixels
03:08:57.720 that should get rid of the margin
03:09:00.660 all right then we have our main element
03:09:03.240 our main element can include any
03:09:05.640 combination of
03:09:07.380 a side
03:09:09.779 sections
03:09:11.700 articles
03:09:14.460 or even just some generic developments
03:09:17.160 but we won’t be working with div in this
03:09:19.380 video really you can see any combination
03:09:21.540 of a side section article or div or
03:09:24.840 maybe even none of them it’s up to you
03:09:27.840 in this topic we’ll stick with one aside
03:09:30.120 element one section and one article
03:09:32.760 these elements are kind of like sub
03:09:35.640 elements within our main element our
03:09:37.620 main element is going to be the main
03:09:39.060 stake in potatoes of our web page
03:09:41.340 so with our side element I’ll include an
03:09:44.100 H2 element for a header
03:09:45.960 this is a side
03:09:48.540 let’s do the same thing for Section this
03:09:51.540 is a section
03:09:56.279 then this is an article
03:10:03.240 let me separate these just so that
03:10:05.160 they’re easier to see
03:10:06.600 just to take up some space I’m going to
03:10:08.460 create some sample paragraphs
03:10:11.520 our side element will have one
03:10:14.640 our section will have two paragraphs I’m
03:10:17.460 just copying and pasting
03:10:20.220 and our article will have two as well
03:10:24.840 I don’t want this top to bottom layout
03:10:26.700 we can change that with some CSS
03:10:28.439 properties so let’s work on our side
03:10:31.140 element first
03:10:32.939 with our side element I’ll set the width
03:10:35.819 to be 20 of the width of the web page
03:10:39.260 RSI element only takes up 20 percent of
03:10:42.120 the space available
03:10:43.740 the following elements can float we have
03:10:46.439 to set the float property to be left
03:10:48.840 then in this case
03:10:51.240 all right let’s copy aside change aside
03:10:54.240 to B section that’s our next element
03:10:56.939 I’ll set the width to be 40 percent
03:11:01.319 then we have article
03:11:05.399 change section to article
03:11:08.819 and the width will stay at forty percent
03:11:10.819 these three elements can all fit within
03:11:13.319 the web page the total width is under
03:11:15.660 100 we have our three elements within
03:11:18.479 our main element
03:11:19.740 so if you would like to add a little bit
03:11:21.660 of padding this is what you’re going to
03:11:23.100 do
03:11:24.479 let’s add 10 pixels of padding
03:11:29.160 to each of these elements
03:11:32.700 when we calculate the width we don’t
03:11:34.979 take into account any padding
03:11:37.439 so one change we’re going to make
03:11:39.779 is that at the top of our CSS style
03:11:42.120 sheet we can select all elements with an
03:11:45.060 asterisk then a set of curly braces
03:11:48.180 we will set the Box
03:11:51.240 sizing property to order Dash box
03:11:57.180 what we’re doing with this property is
03:11:58.979 that when we calculate the width factor
03:12:01.560 in the padding all three elements should
03:12:03.420 be lined up now
03:12:04.800 all right then lastly we have our footer
03:12:08.359 So within our footer element I’ll just
03:12:10.740 add an H2 element that says footer
03:12:14.340 then I will style it
03:12:16.680 let’s copy what we have for our header
03:12:19.880 paste it change header to be footer
03:12:24.000 now what we need to do is clear our
03:12:26.340 float because we’re still floating the
03:12:28.740 elements that come after
03:12:30.660 let’s display our footer as a block
03:12:33.720 level element
03:12:35.520 clear a float you can set clear
03:12:38.040 than both
03:12:39.899 and that should clear that
03:12:42.060 alright so here is a basic Website
03:12:44.160 Layout for a desktop
03:12:46.220 this isn’t a good format for a mobile
03:12:48.660 device though with a mobile device you
03:12:50.880 would want each of these elements to be
03:12:52.260 on top of each other so you can scroll
03:12:53.939 down
03:12:54.899 we can add an at rule
03:12:58.380 so at
03:13:00.359 media screen
03:13:03.000 and
03:13:05.100 Max width
03:13:07.920 600 pixels
03:13:10.380 so what we’re doing here is that if the
03:13:13.260 width of our screen or window is 600
03:13:16.920 pixels or below we can change some CSS
03:13:20.160 properties
03:13:21.680 with a side section and article
03:13:25.080 let’s select those aside comma section
03:13:30.060 comma article
03:13:32.520 we’ll just change the width to be 100
03:13:35.580 percent
03:13:37.560 if a user is on a mobile device and or
03:13:40.800 the width is 600 pixels or below
03:13:44.760 then we’ll switch to a mobile version of
03:13:47.220 the web page each of these elements are
03:13:50.100 a side section and article elements are
03:13:52.260 taking up 100 of the width available
03:13:54.479 then if we were to expand this web page
03:13:56.939 or we’re viewing on a desktop we switch
03:13:59.220 to the desktop version this is also
03:14:01.560 known as responsive CSS
03:14:04.140 all right everybody I know I covered a
03:14:06.000 lot today but that is a basic Website
03:14:08.520 Layout using HTML and CSS
03:14:13.800 hey what’s going on everybody today
03:14:15.300 we’re going to create an interactive
03:14:17.160 image gallery using HTML and CSS so
03:14:20.640 let’s get started before you do jump in
03:14:22.620 I would recommend downloading three
03:14:24.540 pictures of your choosing I have a
03:14:26.640 picture of a pizza a salad and soup if
03:14:30.000 you’re able to try and find images that
03:14:31.920 are roughly the same height and width
03:14:33.899 once you have your three or more images
03:14:35.819 we are ready to begin
03:14:38.160 we’ll begin with the first image I’ll
03:14:40.560 use a div element
03:14:42.960 and I will give this div element
03:14:45.720 a class of gallery because it’s well
03:14:49.260 part of our image gallery I will include
03:14:51.720 my image
03:14:53.460 image The Source attribute will be the
03:14:56.580 relative file path of the image if you
03:14:58.680 have a lot of pictures I would recommend
03:15:00.300 creating an images folder you know what
03:15:02.460 let’s actually do that it’d be good
03:15:03.840 practice new folder
03:15:06.540 images
03:15:08.340 I’ll move all of these images to my
03:15:10.260 images folder
03:15:15.000 alright
03:15:16.380 so I will list the relative file path I
03:15:18.840 need to navigate to the images folder
03:15:20.640 but of course you can use your own
03:15:22.140 pictures depending on what you’re
03:15:23.520 building exactly
03:15:25.080 images dot I think that was a JPEG
03:15:27.720 alright so this picture is massive
03:15:30.840 in case somebody is using a screen
03:15:32.399 reader it’s good practice to add an
03:15:34.740 alternative attribute then give a
03:15:36.660 description of the image
03:15:38.700 salad
03:15:39.960 I’ll turn this image into a hyperlink by
03:15:43.319 surrounding it with a pair of anchor
03:15:44.640 tags
03:15:47.760 we can open this image in a new tab by
03:15:50.100 setting the target attribute to equal
03:15:52.520 underscore blank
03:15:55.319 then I will set the hrep attribute to be
03:15:58.800 the source of my image
03:16:01.680 I’ll just copy and paste that just
03:16:04.080 temporarily I’m going to set a width for
03:16:06.180 this image width equals 200.
03:16:09.720 what we’ll do now is add a description
03:16:12.420 it’s entirely optional but I think it
03:16:14.399 would look nice I will create a new div
03:16:17.040 element
03:16:20.160 with a class of
03:16:23.340 description
03:16:25.319 I will type the word salads we’ll do
03:16:28.500 some CSS styling a little bit later
03:16:30.600 let’s copy this entire div element
03:16:33.779 paste it twice
03:16:36.960 then we just need to change the images
03:16:38.520 we’re using my second image is soup
03:16:44.939 I’ll change the alternative text as well
03:16:48.960 and the description
03:16:50.640 soups
03:16:52.500 then my last image is pizza
03:17:00.779 the description will be pizzas
03:17:04.260 all right let’s go to our style sheet
03:17:06.960 we are selecting our Gallery class
03:17:10.740 I will set the display property to be an
03:17:13.680 inline block currently these images are
03:17:16.680 Block Level elements
03:17:18.960 now they’re all lined up
03:17:21.660 I’ll add a border
03:17:23.939 border one pixel solid
03:17:27.600 let’s go with a dark gray color I’ll use
03:17:30.540 hsl values
03:17:35.220 I’ll set the lightness to 60 percent
03:17:39.600 I’ll add margin of 5 pixels
03:17:44.240 the margin is applied outside of these
03:17:46.979 developments if I were to increase this
03:17:49.140 you can see the difference
03:17:51.420 I’ll keep that as five though let’s work
03:17:53.460 on the description for each image
03:17:56.100 we are accessing our Gallery class
03:17:59.700 then within the gallery class we have
03:18:01.620 the description class
03:18:04.740 that should be
03:18:06.720 these developments
03:18:10.220 let’s add a little bit of padding 10
03:18:13.319 pixels
03:18:14.819 then text align Center
03:18:19.740 not bad when we hover over one of these
03:18:22.260 elements let’s change the Border color
03:18:26.220 we are taking our gallery
03:18:28.920 we’ll apply the hover pseudo class then
03:18:31.979 change the border and make it a little
03:18:33.600 bit darker
03:18:36.420 I’ll set the lightness to be
03:18:38.880 like 20.
03:18:40.740 there we are
03:18:42.660 now the Border changes when we hover
03:18:44.340 over one of these elements
03:18:46.920 I’m going to delete these with
03:18:48.960 attributes
03:18:53.040 foreign
03:18:56.100 then go to our style sheet we’ll access
03:18:58.680 our Gallery class
03:19:00.660 with any images
03:19:02.880 set the width
03:19:04.979 to be 100 percent
03:19:08.880 and height
03:19:10.500 will be Auto
03:19:12.960 then with the gallery class we can set
03:19:14.880 the width
03:19:16.200 200 pixels
03:19:17.880 so basically what we did is that we set
03:19:19.859 the width of each image to be 100 of the
03:19:23.460 width of our Gallery whatever this is
03:19:25.319 set to if I were to set the width to be
03:19:27.359 something larger then the size of each
03:19:29.340 element would increase
03:19:31.560 but I think 200 is fine all right now
03:19:34.260 let’s test it if we click on one of
03:19:36.000 these images we should see the full
03:19:37.979 image in a new tab that’s the salad
03:19:39.899 image soup
03:19:42.060 and pizza all right everybody so that is
03:19:45.060 a simple image gallery using HTML and
03:19:48.060 CSS
03:19:50.819 hey what’s going on everybody in this
03:19:52.620 video I’m going to show you how we can
03:19:54.180 create some font awesome icons using
03:19:56.580 HTML and CSS all right let’s get started
03:19:59.819 everybody I’m going to direct you to
03:20:02.100 this website font awesome.com this isn’t
03:20:05.700 a sponsorship or anything like that but
03:20:07.740 this is a pretty good place to get some
03:20:09.240 icons Google Icons is another good
03:20:11.460 source but I find that font awesome does
03:20:14.040 have a larger variety of icons to start
03:20:16.560 using icons from this site from the home
03:20:18.720 page we will start for free because I
03:20:21.060 don’t like to pay for things you will
03:20:23.100 need a kit you can type in your email
03:20:25.140 like fake gmail.com
03:20:28.620 then send kit code then you just have to
03:20:30.960 confirm your email
03:20:33.479 now once you log in you’ll have access
03:20:35.640 to a kit if I were to click on my kit
03:20:39.300 I have a line of JavaScript that
03:20:41.279 contains a link to my kit there’s going
03:20:43.740 to be a unique number let’s copy the
03:20:46.260 script then place it in the head of our
03:20:48.660 HTML document right here
03:20:51.660 we now have access to those icons on
03:20:54.180 font awesome
03:20:55.439 to browse for icons go to the icons tab
03:20:57.899 then we can perform a search
03:21:00.720 I would like an icon of a home or a
03:21:03.840 house
03:21:06.120 I would like this one so I’ll click on
03:21:08.220 it
03:21:10.319 you can choose a classic style or a
03:21:12.420 sharp Style with sharp corners
03:21:15.840 this is solid that’s regular this is
03:21:18.720 light I’ll stick with solid
03:21:21.180 you can select animations but I won’t
03:21:23.760 use animations for this example you can
03:21:26.160 rotate this icon
03:21:27.600 you can change the color
03:21:30.479 and you can change the default size
03:21:33.300 this is 2xs this is 2XL
03:21:37.319 to include this icon we can copy this
03:21:39.660 element it’s an eye element so let’s
03:21:42.720 copy this eye element
03:21:45.120 within the body of my document I can
03:21:47.460 paste that I element and there’s my icon
03:21:51.720 if you want to remove the color and
03:21:54.180 change it with your CSS style sheet we
03:21:56.760 can remove the style attribute
03:22:02.640 if you need something even larger than
03:22:04.500 2XL we can change this element up to 10
03:22:07.859 times the size with 10x
03:22:10.080 that’s a little too large for my liking
03:22:12.060 let’s go with 5X
03:22:14.819 let’s find three other icons we would
03:22:16.800 like
03:22:17.819 I’m going to find the Twitter logo
03:22:20.040 that’s right here
03:22:21.660 I need to copy this eye element
03:22:24.540 then I will paste it
03:22:28.500 then I’ll change the size
03:22:33.000 fa-5x
03:22:36.439 okay Twitter
03:22:39.060 YouTube would be good
03:22:43.319 copy this eye element
03:22:45.240 paste it again
03:22:47.160 I would like the 5x version fa-5x
03:22:52.380 let’s select one more icon
03:22:55.200 let’s go with tick tock
03:23:00.420 and that is all we’ll need
03:23:06.180 again I would like the 5x sized version
03:23:10.979 all right that’s a good amount of icons
03:23:13.260 I will Center all of these icons one way
03:23:16.200 in which I can do that is to place all
03:23:18.300 of these elements within a div
03:23:20.520 with the class of icons
03:23:27.239 all right let’s go to our style sheet
03:23:29.640 I will take my class of icons
03:23:32.760 then text align Center
03:23:37.439 to right justify these we can set that
03:23:39.600 to right
03:23:40.680 but I’ll keep them in the center
03:23:43.979 I’ll change the color of these icons
03:23:47.160 let’s begin with our house we’ll need to
03:23:49.500 copy this entire class
03:23:52.200 I don’t want the sharp version
03:23:54.720 I will copy this entire class
03:23:58.080 then within my style sheet I will select
03:24:00.120 that class
03:24:01.620 dot then paste the name of that class
03:24:04.160 now we can’t include spaces you can
03:24:07.260 replace the spaces with the DOT
03:24:10.380 with our house icon
03:24:12.359 let’s change the color to something Gray
03:24:20.279 let’s go with the lighter color like
03:24:21.600 that okay let’s do this with the other
03:24:24.060 icons
03:24:28.020 then we have Twitter
03:24:31.200 replace the spaces with dots
03:24:34.500 I will change the color
03:24:38.760 so let’s try and find Twitter blue
03:24:42.060 think that’s fairly close
03:24:46.380 okay then we have YouTube
03:24:56.220 color red
03:25:02.300 then tick tock
03:25:19.439 I think that’s fairly close
03:25:21.540 all right now what we’ll do is turn
03:25:23.399 these icons into hyperlinks we’ll
03:25:26.100 surround each ailment with a pair of a
03:25:28.380 tags
03:25:34.380 foreign
03:25:44.279 foreign
03:25:46.140 then within the href attribute we can
03:25:48.359 set that to some website
03:25:50.220 I won’t set the atrep attribute to our
03:25:52.200 house icon let’s do that with Twitter
03:25:54.420 Youtube and tick tock
03:25:56.279 so with Twitter I will set the ahref
03:25:58.859 attribute to be https colon to forward
03:26:02.340 slashes twitter.com
03:26:05.939 let’s do this with our YouTube icon
03:26:08.700 replace Twitter with YouTube
03:26:13.920 then tick tock
03:26:16.979 so this should work let’s click on
03:26:18.840 Twitter that works
03:26:21.060 YouTube
03:26:23.939 and tick tock
03:26:26.700 with hyperlinks there is some underlying
03:26:29.160 text decoration included let’s remove
03:26:31.200 that
03:26:33.380 let’s take our icons
03:26:36.479 then any anchor tags within our icons
03:26:38.819 class
03:26:39.960 we’ll set the text decoration
03:26:45.239 to be none
03:26:47.520 and that should remove them I’ll also
03:26:50.040 apply a little bit of margin between
03:26:51.660 each of these icons
03:26:53.580 let’s do margin
03:26:55.560 Dash right set to 20 pixels
03:27:00.180 not bad for some additional practice
03:27:02.399 when we hover our cursor over one of
03:27:04.680 these icons let’s increase the lightness
03:27:06.899 let’s begin with our house let’s copy
03:27:09.720 these CSS properties
03:27:11.819 paste them we’ll apply the hover pseudo
03:27:14.520 class
03:27:16.020 I’ll increase the lightness by 10
03:27:18.479 percent
03:27:19.859 I went from 66 to 76 percent
03:27:23.520 when we hover our cursor over our house
03:27:25.620 icon it should be a little bit lighter
03:27:29.040 okay let’s apply this for the other
03:27:30.899 icons
03:27:32.819 then we have Twitter
03:27:35.700 apply the hoverseudo class oh I’m using
03:27:38.399 RGB values let me change that to hsl
03:27:44.840 I’ll increase the lightness to 60.
03:27:49.260 let’s do this with YouTube
03:27:57.600 then tick tock
03:28:04.800 all right now when we hover our cursor
03:28:06.660 over these icons they should be a little
03:28:08.460 bit lighter
03:28:09.720 Tick Tock is still a little bit dark let
03:28:11.939 me increase it further to 30 percent
03:28:13.979 that’s much better
03:28:16.020 all right everybody so that is an
03:28:17.520 introduction to including icons in your
03:28:19.439 web page using CSS
03:28:23.340 hey what’s going on everybody in this
03:28:25.200 topic I’m going to give you an
03:28:26.460 introduction to using flexbox in CSS in
03:28:29.880 about 10 minutes or so why don’t you go
03:28:31.739 ahead and sit back relax and enjoy the
03:28:34.140 show
03:28:36.000 all right let’s jump in everybody we
03:28:37.979 have a little bit of setup to do we’ll
03:28:40.200 create a development with the class of
03:28:43.260 container
03:28:45.300 within our container class we’ll create
03:28:47.460 a few developments we’ll create four
03:28:50.520 these will be boxes
03:28:52.680 for the class I will set that to be box
03:28:55.859 the first inner development will have an
03:28:58.140 ID of box one
03:29:00.660 the inner text will be one let’s copy
03:29:03.600 our inner development paste it three
03:29:05.580 times for a total of four
03:29:07.380 change box 1 to box two for the next
03:29:09.960 element
03:29:11.040 then three
03:29:12.660 then four and that’s all we need for our
03:29:15.180 HTML file let’s go to our style sheet
03:29:18.479 we’ll style our boxes we will select the
03:29:21.180 Box class
03:29:24.000 I’ll set the width to be 150 pixels
03:29:27.840 same thing goes with the height
03:29:30.899 let’s change the background colors we’ll
03:29:33.300 begin with the ID of box one
03:29:35.760 I will set the background color to be
03:29:38.760 something red
03:29:40.319 I’ll use hsl values because I like them
03:29:44.040 let’s go with that then let’s color box
03:29:46.560 two box two let’s make that yellow
03:29:51.060 box 3 will be green
03:29:57.060 then box 4 will be blue
03:30:01.640 let’s change the font size real quick
03:30:04.859 font size 8 em
03:30:08.760 then text align Center
03:30:12.840 I’ll add a border radius just two round
03:30:14.760 of the corners border radius 15 pixels
03:30:19.439 and that is all the setup we’ll need we
03:30:21.660 are ready to begin
03:30:23.040 with our container class we can Flex all
03:30:26.100 of the elements within this container
03:30:27.600 meaning all of these inner div elements
03:30:30.359 so we’ll take our container class dot
03:30:33.540 container
03:30:34.800 then set the display property to be Flex
03:30:39.479 you can see that the positioning of
03:30:41.040 these elements has already changed by
03:30:43.500 default the flex Direction property is
03:30:47.520 set to row
03:30:49.560 you can see that there’s no apparent
03:30:51.239 change when I refresh the page
03:30:53.220 for a row but in reverse order we can
03:30:55.920 set Flex direction to be row reverse
03:30:59.460 so now one is on the right hand side
03:31:01.620 followed by two three then four
03:31:04.739 to arrange these elements within a
03:31:06.540 column we can set Flex direction to be
03:31:09.000 column
03:31:10.319 or even column reverse
03:31:13.439 then at the bottom we have one then two
03:31:15.960 three then four
03:31:18.000 so that’s Flex Direction let’s delete
03:31:20.460 the flex Direction property
03:31:22.560 then we have the justify content
03:31:25.800 property
03:31:27.479 justify content sets the alignment on
03:31:31.080 the main axis think of the x-axis by
03:31:34.200 default it’s Flex start there’s no
03:31:36.479 apparent change
03:31:37.739 flex and
03:31:39.479 would justify the content at the end
03:31:42.000 see we’re beginning with four then three
03:31:44.460 two and one when we had Flex Direction
03:31:47.220 set to row reverse it was one two three
03:31:50.640 four but in this case it’s four three
03:31:52.859 two one then there’s Center if you need
03:31:55.560 to Center align these elements on the
03:31:58.020 main axis
03:31:59.279 we can place the extra space evenly
03:32:02.160 between each of these elements by
03:32:04.080 setting justify content to space
03:32:07.140 between
03:32:09.060 and if I were to expand this page
03:32:11.700 the space between them is increasing
03:32:14.760 you also have space around
03:32:18.479 the area outside of these elements is
03:32:20.460 also included now with space around
03:32:23.840 then we have space evenly
03:32:31.200 all right and that is the Justified
03:32:32.880 content property we can justify elements
03:32:35.520 on the main axis then there’s the cross
03:32:38.160 axis think of it as the y-axis up and
03:32:41.040 down what we’ll need to do in this
03:32:42.720 example is expand our container just to
03:32:45.420 show you the size of the container I
03:32:47.040 will add a border to The Container class
03:32:49.739 border 10 pixels
03:32:52.140 solid black
03:32:54.960 here’s my current container
03:32:57.060 I will increase the height of the
03:32:58.800 container
03:33:00.120 let’s set the height to be 90 viewport
03:33:04.319 height units
03:33:06.300 so this is the total size of my
03:33:07.979 container now
03:33:09.300 ninety percent of the height of the web
03:33:11.279 page
03:33:12.600 what we’ll use now is the Align items
03:33:15.180 property which is used for the cross
03:33:16.979 access
03:33:18.899 align Dash items
03:33:22.500 the default is flex start there’s no
03:33:25.140 change
03:33:26.640 flex and we’ll place these elements at
03:33:29.520 the bottom of our container
03:33:32.520 then there’s Center align item Center
03:33:35.640 that will place them in the middle of
03:33:38.160 the Cross axis
03:33:40.800 then there’s Baseline
03:33:44.100 so with Baseline the text is going to be
03:33:46.620 aligned they’re all the same size though
03:33:48.660 we can’t really notice the difference
03:33:50.359 with box one let me change the font size
03:33:54.359 font size 1 em you can see that the
03:33:57.479 number one is aligned with the rest of
03:33:59.220 the characters
03:34:00.720 so if I were to increase the font size
03:34:02.460 you can see that they’re still aligned
03:34:06.000 but let’s eliminate that font size
03:34:07.560 property
03:34:08.819 let’s delete our aligned items property
03:34:12.479 we’ll need more elements let’s copy our
03:34:15.899 four inner developments paste them we
03:34:19.140 should have a total of eight one two
03:34:21.180 three four one two three four you can
03:34:23.520 see that these items are getting
03:34:24.479 squished now they’re all being
03:34:25.800 compressed we can set the flex wrapped
03:34:29.040 property so with our container I will
03:34:32.279 set the flex wrap property to be wrap
03:34:36.720 these elements will now wrap if there’s
03:34:39.060 not enough space if I were to expand the
03:34:41.760 size of my container
03:34:43.560 there’s now enough room but if we run
03:34:45.359 out of room they’ll be pushed down
03:34:47.220 further down the page
03:34:48.660 by default Flex wrap is no wrap
03:34:54.120 otherwise there’s rap reverse
03:34:58.680 now they’re in reverse order
03:35:03.260 let’s use flex wrap now Flex wrap is
03:35:07.200 used along with another property named
03:35:09.420 align content
03:35:11.040 align content
03:35:14.160 if I were to set align content to be
03:35:16.380 Flex
03:35:17.700 start
03:35:19.020 all of that space between the first row
03:35:20.880 and the second is now gone
03:35:26.479 then there’s Flex end
03:35:34.500 Center
03:35:42.200 space evenly
03:35:51.680 then space between
03:35:58.560 use any combination of properties that
03:36:00.540 I’ve demonstrated
03:36:01.859 let’s keep Flex wrap as wrap but I’ll
03:36:04.560 use flex start
03:36:07.979 you can also add a gap between the rows
03:36:10.319 and the columns between each of these
03:36:12.180 elements
03:36:13.500 let’s set a column Gap
03:36:16.080 column Dash Gap to be one em
03:36:21.600 that adds a gap between each of the
03:36:23.580 columns for the rows that would be row
03:36:26.520 Gap
03:36:27.479 I’ll set that to be 1em you can also use
03:36:30.180 pixels as well
03:36:32.300 so here’s 2 em
03:36:36.720 3
03:36:40.080 let’s delete our Gap properties
03:36:43.560 all right let’s also delete the extra
03:36:45.720 four boxes that we have
03:36:48.359 we’re also going to get rid of the flex
03:36:50.279 wrapped property
03:36:51.840 as well as align content
03:36:55.500 there’s also the Align self property
03:36:57.540 that can be applied to single elements
03:37:00.000 so with box one I will set a line self
03:37:04.260 to be start that’s the default
03:37:07.439 this element will be aligned at the top
03:37:10.500 of our container
03:37:11.880 if I were to change line self to be
03:37:13.680 Center this single element is aligned in
03:37:17.100 the center of my container on the cross
03:37:19.620 axis
03:37:22.140 then we have end that will align at the
03:37:24.479 bottom
03:37:25.920 the Align self property can be applied
03:37:27.660 to any of these elements let’s do that
03:37:29.580 with number two
03:37:32.399 line Dash self
03:37:34.920 at the start there’s no change
03:37:37.680 Center
03:37:39.420 end
03:37:41.640 okay let’s delete the Align self
03:37:43.439 property
03:37:45.180 we can use order to change the order of
03:37:47.399 these elements
03:37:48.960 with box one I will set the order to be
03:37:51.479 one that will place number one at the
03:37:54.000 end
03:37:55.319 negative one would be the beginning
03:37:57.840 which it normally is already
03:38:00.720 with box 2 I’ll set the order to be one
03:38:03.840 that will place two at the end but if I
03:38:06.840 set it to be negative one it’s now at
03:38:08.819 the beginning
03:38:10.080 all right everybody so that is a quick
03:38:12.300 introduction to flexbox there is a lot
03:38:14.760 to talk about and that is all the time
03:38:16.260 that I have for this topic and well
03:38:18.300 that’s an introduction to flexbox in CSS
03:38:23.279 hey what’s going on everybody today
03:38:24.960 we’re going to cover the transform
03:38:26.640 property in CSS the transform property
03:38:29.939 lets you rotate scale skew or otherwise
03:38:32.880 translate an element here’s what we’re
03:38:35.399 gonna do we’ll create a div section
03:38:38.520 I will give this div an ID of box one
03:38:43.020 then within the Box let’s say the word
03:38:46.020 hi let’s head to our style sheet within
03:38:49.620 my style sheet I will take our ID of box
03:38:52.979 one
03:38:54.000 set the width and height to be 250
03:38:56.819 pixels
03:39:01.760 then I will give this div section a
03:39:05.640 border of 5 pixel solid
03:39:08.760 let’s increase the font size
03:39:11.580 13 em is fine
03:39:14.939 then text align Center
03:39:19.859 hey let’s change the background color to
03:39:22.020 while we’re at it
03:39:23.819 I’ll pick a greenish color
03:39:29.640 that’s pretty good I’m also going to
03:39:31.800 remove some of the margin around the
03:39:33.420 body of our document
03:39:35.700 body margin zero
03:39:39.899 all right so the transform property
03:39:43.140 the First Transformation I’ll show you
03:39:44.939 is translate we can translate X on the
03:39:48.779 x-axis Translate Y on the y-axis or both
03:39:52.739 with just translate let’s begin with
03:39:55.260 translate X so after translate X add a
03:39:58.800 set of parentheses whatever value you
03:40:01.020 place within the set of parentheses we
03:40:03.060 will translate this element on the
03:40:04.979 x-axis if I were to set translate X to
03:40:08.040 be 50 pixels this element will move to
03:40:10.739 the right by 50 pixels
03:40:13.020 that’s 100
03:40:15.060 200
03:40:17.520 negative numbers will move the element
03:40:19.319 to the left
03:40:21.960 percentages are fine too if I set
03:40:24.720 translate X to be one hundred percent
03:40:27.080 this element will translate to the right
03:40:29.760 by 100 percent the width of this element
03:40:32.600 with a negative percentage that will
03:40:35.100 translate the element to the left
03:40:37.260 it could effectively hide that element
03:40:38.899 then with negative 50 we should see just
03:40:42.180 half of this element A lot of these
03:40:44.340 Transformations can be done in pixels
03:40:47.760 or percentages
03:40:50.279 there’s also Translate Y for the y-axis
03:40:52.979 if I were to translate by 50 pixels on
03:40:56.399 the y-axis that moves the element down
03:40:59.300 negative 50 would move the element up
03:41:02.819 by one hundred percent we will move this
03:41:05.460 element down by 100 percent the height
03:41:08.340 of the element that negative 100 will
03:41:11.520 effectively hide the element you can
03:41:13.859 combine both of them too with just
03:41:15.239 translate but you need two values the
03:41:18.359 translation on the x-axis then the
03:41:20.700 y-axis
03:41:22.020 if I set the first number to be 50
03:41:24.600 well 50 pixels
03:41:26.939 that’s an X translation the second value
03:41:29.700 is a y translation now we’re moving the
03:41:33.479 element to the right and down negative
03:41:36.479 values will move the element to the left
03:41:38.819 and then up
03:41:40.739 those are translations for the transform
03:41:42.779 property
03:41:43.920 then we have rotations we can rotate on
03:41:47.279 the x-axis
03:41:48.960 within rotate X we set a number of
03:41:51.840 degrees if I were to set rotate X to be
03:41:54.720 45 degrees We Begin rotating on the
03:41:57.600 x-axis that’s 45
03:42:00.660 this is 90. you can’t even see it
03:42:04.800 135
03:42:08.399 with 180 it should be kind of upside
03:42:10.680 down
03:42:11.939 that is an X rotation then we have y
03:42:16.200 rotate y we’ll start with 45 degrees
03:42:20.279 that’s 45.
03:42:23.520 90 you can’t even see it anymore
03:42:26.520 135
03:42:29.399 180.
03:42:31.560 then lastly we have Z rotation
03:42:36.120 that’s 45
03:42:38.040 this is 90.
03:42:40.680 135
03:42:43.560 180. those are different rotations
03:42:48.000 their scale
03:42:49.739 we can scale X or scale y
03:42:53.220 one corresponds to 100 percent
03:42:56.220 1.1 is 110 percent
03:42:59.939 if I were to set scale X to be 2 we’re
03:43:02.760 scaling this element on the x-axis by
03:43:05.580 200 percent
03:43:07.200 3 would be 300 percent
03:43:09.660 any value below one
03:43:11.939 would in a way compress it on the x-axis
03:43:15.779 and here is 0.25
03:43:18.899 we also have scale y
03:43:21.840 scale Y is set to 2. would scale this
03:43:24.960 element on the y-axis by 200 percent
03:43:28.380 that’s 300
03:43:30.600 here’s 0.5
03:43:33.300 and here’s 0.25
03:43:35.939 you can combine both X and Y2 with just
03:43:38.340 scale but you need two values
03:43:42.060 so by default it’s 1 1 for 100 let’s
03:43:45.660 scale on the x-axis and the y-axis by
03:43:48.420 200 percent
03:43:50.700 and here’s 300.
03:43:53.220 that is scale
03:43:54.779 then we have skew
03:43:56.520 skew X or skew y
03:43:58.859 if I were to set skew X to be 45 degrees
03:44:02.700 we are skewing this element on the
03:44:04.859 x-axis
03:44:06.420 here’s 90.
03:44:09.180 135
03:44:12.000 and 180. the same applies for y
03:44:16.920 here’s 45
03:44:19.560 90
03:44:21.420 135
03:44:23.700 180 you could combine them both with
03:44:26.460 just SKU
03:44:27.779 then again you need two values following
03:44:29.819 that same pattern
03:44:31.560 you can apply more than one
03:44:33.120 transformation at a time let’s begin
03:44:35.340 with translate X
03:44:38.040 by 100 percent
03:44:40.800 and then we will rotate on the z-axis by
03:44:44.399 90 degrees
03:44:47.939 let’s add a scale as well
03:44:51.260 I’ll shrink this image by 50 percent
03:44:55.439 so yes you can apply more than one
03:44:57.300 transformation at a time
03:44:58.920 these Transformations can also be
03:45:00.840 applied to a class
03:45:02.520 let’s create two additional boxes
03:45:05.640 box one box two box three
03:45:08.939 I’ll give each of these elements a class
03:45:12.660 of box
03:45:18.300 I’ll remove this transformation
03:45:20.819 I will select the Box class
03:45:24.180 take all of these properties cut them
03:45:26.580 besides the background color then paste
03:45:28.979 them within the Box class
03:45:31.140 then let’s color in our two other boxes
03:45:33.300 box one box two box three I’ll make box
03:45:37.140 two red
03:45:38.819 foreign
03:45:40.439 box three will be blue
03:45:44.640 all right let’s apply some
03:45:45.899 transformations to the class now I will
03:45:48.479 set the transform property let’s
03:45:50.880 translate on the x-axis translate X
03:45:54.899 by 100 pixels
03:45:58.680 then let’s rotate on the z-axis by 45
03:46:02.340 degrees
03:46:04.439 then I will shrink these with scale
03:46:08.700 set to 0.5
03:46:11.460 you also could apply these
03:46:13.080 transformations to images I just so
03:46:15.720 happen to have a picture of Shrek in my
03:46:17.399 computer I think everybody should have
03:46:19.140 at least one right that image just saved
03:46:21.300 within my website folder
03:46:23.399 let’s delete these boxes that include
03:46:25.739 that image
03:46:27.300 image source equals the relative file
03:46:30.720 path of the image
03:46:35.340 all right
03:46:38.460 let’s take our image I will apply the
03:46:41.460 transform property
03:46:44.220 let’s Translate
03:46:46.439 our image on the x-axis by 100 percent
03:46:52.140 then let’s rotate Shrek on the z-axis
03:46:55.739 by 180 degrees
03:46:58.200 let’s scale Shrek in the x-axis by 200
03:47:01.319 percent
03:47:02.819 scale X
03:47:05.040 two
03:47:06.540 all right I don’t know what the point of
03:47:08.040 that was but I thought it would be a fun
03:47:09.420 exercise all right everybody so those
03:47:11.640 are transformations it’s a CSS property
03:47:14.220 that lets you rotate scale skew or
03:47:16.739 otherwise translate an element and those
03:47:18.960 are a few basic CSS transformations
03:47:23.760 hey what’s going on everybody today
03:47:25.380 we’re going to create some animations
03:47:26.760 using CSS all right let’s get started
03:47:29.760 everybody we will create a development
03:47:32.880 with an ID of box
03:47:36.359 then within this box let’s say the word
03:47:38.580 hi
03:47:40.200 let’s go to our style sheet let’s select
03:47:43.080 our ID of box I will set the width to be
03:47:46.800 250 pixels
03:47:48.960 the height to be 250 pixels
03:47:52.979 I’ll change the background color
03:47:55.800 let’s pick something red
03:48:01.680 let’s change the font size
03:48:04.020 13 em is fine
03:48:06.540 then text align Center
03:48:10.680 to use an animation we first need to
03:48:13.020 create an animation using a keyframe
03:48:15.720 rule that can be done with typing at
03:48:18.620 keyframes then a unique animation name
03:48:21.359 let’s create an animation to slide this
03:48:23.819 element from the right to the left the
03:48:26.399 name will be slide left
03:48:29.460 then add a set of curly braces
03:48:31.800 within our keyframe there’s a few
03:48:33.840 possible values you have two
03:48:36.779 from
03:48:38.220 or a percent such as 0
03:48:41.479 50 100 really any number we’ll begin
03:48:46.140 with a left translation for our element
03:48:49.200 to end up in its resting position we
03:48:52.020 will use from
03:48:53.640 then add a set of curly braces just like
03:48:56.040 we’re adding CSS properties
03:48:57.960 within our keyframe of from we will set
03:49:01.020 the transform property to be an X
03:49:04.140 translation translate x parentheses this
03:49:09.000 can be an amount or a percent let’s
03:49:11.760 begin with 100 pixels
03:49:14.040 so now I need to set the animation name
03:49:16.200 property within our box
03:49:18.359 animation name will be slide left
03:49:23.760 but when I refresh everything nothing
03:49:25.859 appears to happen that’s because we need
03:49:28.439 to set the animation duration property
03:49:30.859 animation duration how long will this
03:49:34.620 animation take to complete let’s start
03:49:36.720 with one second that’s one s
03:49:39.899 there’s our slide animation
03:49:41.939 feel free to adjust this value
03:49:44.399 if I set this to be two seconds and
03:49:46.620 slightly slower
03:49:48.420 let’s change translate X to a different
03:49:50.399 value like 100
03:49:52.399 this element is translating on the
03:49:55.080 x-axis by 100 the width of the element
03:49:58.260 if I were to set this to a larger number
03:50:00.779 like 300
03:50:02.880 it’s going to appear off screen in my
03:50:04.800 example then slide into place but that
03:50:07.739 also depends on how far you’re zoomed in
03:50:10.020 or zoomed out and the with your web
03:50:12.479 browser
03:50:13.739 let’s create an animation to slide right
03:50:16.500 let’s copy our keyframe rule
03:50:19.439 rename slide left as slide right
03:50:23.279 we’ll use the value of 2. we’ll begin in
03:50:26.520 our original position we’re setting this
03:50:28.560 animation to end up in this position
03:50:30.779 with our element translated to the right
03:50:33.899 by 300 percent let’s change the
03:50:36.359 animation to slide right
03:50:38.399 and now we slide to the right
03:50:41.100 okay let’s slide up
03:50:44.580 keyframes slide
03:50:47.340 up
03:50:48.600 we’ll set the value to be from
03:50:51.260 then we will translate y
03:50:54.840 change the animation name to slide up
03:50:58.200 there we go
03:51:00.120 then slide down all we really need to do
03:51:02.700 is change this value
03:51:04.439 so that’s slide down change from to be
03:51:09.239 two
03:51:10.859 then change the animation name again
03:51:12.720 slide down
03:51:16.319 let’s create a rotation animation
03:51:19.620 at
03:51:20.760 keyframes rotate
03:51:24.600 so we can use from
03:51:26.760 or to or a percent let’s use percentages
03:51:30.439 at 100 percent what sort of
03:51:33.660 transformation do we want to complete
03:51:36.899 let’s use the transform property then do
03:51:40.140 an X rotation rotate X
03:51:43.319 buy 360 Degrees that’s one full rotation
03:51:46.500 okay let’s change the animation name to
03:51:49.500 rotate
03:51:51.000 now we should rotate once on the x-axis
03:51:54.300 let’s rotate on the y-axis rotate y
03:51:59.520 then rotate on the z-axis rotate Z
03:52:03.380 so those are a few rotations now check
03:52:06.840 this out if I were to set the keyframe
03:52:08.939 value to be 50 we will complete this
03:52:11.700 animation at the 50 Mark then from 50 to
03:52:16.260 100 in a way we undo the animation we’ll
03:52:19.739 rotate once and then revert back
03:52:22.040 complete the animation at fifty percent
03:52:24.960 of the length of the duration then with
03:52:27.779 the other fifty percent of the time
03:52:29.160 remaining return that element to where
03:52:31.560 it was previously if I were to mess with
03:52:33.600 these values let’s say 25 percent will
03:52:36.060 complete the animation in half a second
03:52:37.979 then with the other 1.5 seconds we
03:52:40.859 return to normal that’s why the
03:52:42.720 animation goes fast
03:52:44.340 then when it’s undone
03:52:46.620 it goes fairly slow you can mess with
03:52:49.319 these values depending on what you’re
03:52:50.460 looking for exactly yeah you can use
03:52:52.620 from two or a percent okay let’s create
03:52:55.920 an animation to grow this element we’ll
03:52:58.319 scale both the width and the height at
03:53:01.460 keyframes grow
03:53:04.020 at the 100 mark
03:53:06.660 let’s set the transform property to be
03:53:10.979 scale
03:53:12.660 then we can use two values two means two
03:53:15.540 hundred percent
03:53:16.859 for the width scale that up by 200
03:53:18.960 percent same with the height 200 percent
03:53:21.239 let’s change the animation to be grow
03:53:23.819 then this should grow then when the
03:53:26.700 animation is complete it snaps back into
03:53:28.979 place but if I were to set this value to
03:53:31.680 be 50 percent
03:53:33.300 it’s going to grow then shrink back into
03:53:35.939 place in one smooth motion
03:53:38.279 let’s create an animation to shrink at
03:53:41.819 keyframes
03:53:43.500 shrink
03:53:46.560 the 50 mark
03:53:49.080 let’s use the transform property
03:53:52.920 then scale by 0.5 comma 0.5 that will be
03:53:58.500 50 for the width and the height let’s
03:54:01.140 change the animation name to be shrink
03:54:03.420 and now we’ll shrink this element then
03:54:06.540 it reverts back into place
03:54:08.819 okay let’s change the opacity
03:54:11.340 at keyframes this animation name will be
03:54:15.300 fade
03:54:16.439 at the 50 mark
03:54:18.899 let’s change the opacity we’re not using
03:54:21.060 the transform property this time let’s
03:54:23.340 set the opacity to be zero
03:54:27.000 then change the animation name to be
03:54:28.800 fade now we’ll Fade Out then back in
03:54:31.380 again
03:54:32.520 if I were to set this value to be 100
03:54:35.460 this element will fade
03:54:37.859 then when the animation is normal it
03:54:40.199 reverts not smoothly though let’s set
03:54:43.140 that to 50.
03:54:46.020 now if you want a fade in effect what we
03:54:48.359 can do is with our box
03:54:50.399 originally we can set the opacity to be
03:54:52.920 zero
03:54:55.380 then at the 100 keyframe the opacity
03:54:59.340 will then be one
03:55:00.720 so this is fade in let’s say
03:55:05.279 so the element is originally hidden then
03:55:07.620 it fades in
03:55:09.420 let’s get rid of the opacity
03:55:12.899 let’s change the color of our element
03:55:16.140 at
03:55:17.340 keyframes
03:55:18.840 color change
03:55:20.939 so at zero percent
03:55:24.060 let’s have the background color be red
03:55:27.120 I’ll copy the current background color
03:55:33.239 I’ll change the animation name too
03:55:35.819 color change
03:55:38.160 then at 20 percent
03:55:40.500 let’s set the background color to be
03:55:42.600 orange
03:55:47.460 so we’re going from red to orange
03:55:50.160 then at 40 let’s pick yellow
03:55:59.699 60 will be green
03:56:07.100 80 will be blue
03:56:16.500 then 100 will be purple
03:56:24.899 there
03:56:26.100 you can take the Liberty to pick
03:56:28.140 whatever values you would like
03:56:30.359 let’s create a glow effect around our
03:56:32.640 element
03:56:34.560 at keyframes glow
03:56:37.800 this animation will complete at the 50
03:56:40.199 mark
03:56:41.760 we’ll add a box shadow
03:56:44.880 the first value is for the horizontal
03:56:47.760 offset we’ll set that to be zero
03:56:50.760 the next value is for the vertical
03:56:52.859 offset which will also be zero then the
03:56:55.800 blur radius
03:56:57.239 I’ll set that to be 50 pixels
03:57:00.720 then a color let’s go with the yellowish
03:57:03.239 color
03:57:06.899 all right then we need to change the
03:57:08.460 animation name
03:57:09.779 glow
03:57:11.520 then our element glows it’s a little
03:57:13.680 difficult to see though with the white
03:57:15.000 background let me change the background
03:57:16.859 color so with the body of our document I
03:57:19.800 will set the background color to be a
03:57:23.399 dark color
03:57:28.319 there’s our glow effect
03:57:30.600 you can start animations with the pseudo
03:57:33.239 class for example I want this glow
03:57:35.520 animation to occur when I hover my
03:57:38.040 cursor over the element
03:57:40.380 I am selecting my box ID then applying
03:57:43.620 the pseudo class of hover
03:57:48.000 I’ll take the animation name and the
03:57:50.040 duration then place it within the Huber
03:57:52.800 pseudo class for our box
03:57:54.779 then this animation only begins when I
03:57:57.899 hover my cursor over the Box
03:58:00.540 pretty cool right
03:58:02.279 if I were to use the active pseudo class
03:58:05.640 this animation only occurs when I left
03:58:08.640 click and hold the element which I am
03:58:11.220 doing right now
03:58:13.319 let’s place these properties back
03:58:18.840 to change the iteration count for an
03:58:20.819 animation to have it occur more than
03:58:22.680 once we can set the animation
03:58:25.140 iteration count property
03:58:27.779 to be some other value besides one if I
03:58:30.660 set this value to be 2
03:58:32.760 we will perform this animation twice
03:58:36.540 to have it perform infinitely set that
03:58:39.239 to be infinite
03:58:43.439 I would not recommend setting an
03:58:45.060 animation to be infinite just because a
03:58:47.100 viewer can find it annoying unless
03:58:49.140 that’s the goal to annoy the viewer
03:58:50.760 alright there’s also animation Direction
03:58:54.180 animation
03:58:56.040 Direction
03:58:59.279 normally this is well normal
03:59:03.000 we can change the direction of the
03:59:04.800 animation by setting normal to be
03:59:06.600 reverse
03:59:07.800 now we’re sliding to the right
03:59:12.000 to alternate set the value to be
03:59:14.160 alternate
03:59:15.720 we’re sliding left
03:59:17.580 then sliding right
03:59:19.620 then sliding left again
03:59:22.800 there’s also alternate reverse
03:59:25.380 We Begin by sliding to the right then to
03:59:28.140 the left
03:59:29.640 and then to the right again
03:59:31.979 let’s set that to be normal
03:59:34.800 to pause the animation we can set the
03:59:37.020 animation
03:59:38.819 Place state to be paused
03:59:43.080 now the animation is paused
03:59:46.140 to run it again
03:59:47.819 set this value to be running
03:59:50.760 this would be useful in conjunction with
03:59:53.100 the programming language such as
03:59:54.420 JavaScript because we can toggle this
03:59:56.580 animation on and off
03:59:58.920 there’s also the animation timing
04:00:02.760 function
04:00:04.439 normally with this animation it
04:00:06.840 accelerates then slows down it
04:00:08.939 decelerates
04:00:10.319 the default value is is in out
04:00:17.640 it speeds up then slows down before it
04:00:19.859 reaches its destination
04:00:22.699 for a constant speed we can change that
04:00:25.439 to be linear
04:00:28.020 through the entire animation duration it
04:00:30.720 stays the same speed
04:00:33.540 there’s also steps for a sort of stop
04:00:36.180 motion effect
04:00:38.520 within this function if I place the
04:00:40.439 value 5
04:00:43.439 there’s five steps
04:00:45.960 if this was 10 there’s 10 steps to
04:00:48.600 complete the animation it creates a
04:00:50.699 stop-motion effect let’s change that
04:00:53.100 back to ease and out
04:00:57.000 let’s set the iteration count to be one
04:00:59.180 the next timing function is for cubic
04:01:01.979 bezier let’s right click on our box
04:01:04.140 inspect
04:01:05.699 underneath our Styles tab look for
04:01:08.520 animation timing function
04:01:10.500 if we were to click on this purple box
04:01:12.680 we can change the timing function
04:01:14.880 currently it’s ease and out
04:01:17.160 and there’s a little sample animation at
04:01:18.960 the top
04:01:19.920 this is fast out linear in
04:01:22.920 ease out or by dragging and dropping
04:01:25.859 this line we can make something custom
04:01:28.319 like I don’t know what this does
04:01:31.080 to use this animation copy this line of
04:01:34.260 text for cubic bezier replace the
04:01:37.439 animation timing function
04:01:39.540 with that line of text
04:01:42.720 so now we have that custom animation
04:01:45.600 I don’t really know what to name this
04:01:46.979 animation let’s name it the Electric
04:01:48.779 Slide
04:01:50.040 for a final exercise let’s apply an
04:01:52.380 animation to an image
04:01:54.180 I just so happen to have an image of
04:01:56.220 Shrek let’s have Shrek perform our
04:01:58.920 electric slide animation
04:02:02.100 let’s replace our box with an image
04:02:05.040 element
04:02:06.120 set the source to equal the relative
04:02:08.580 file path
04:02:10.439 so Shrek is right next to my index file
04:02:13.760 shrek.png
04:02:15.479 let’s copy all of these animation
04:02:17.279 properties
04:02:19.620 cut them
04:02:22.500 we’ll select our image
04:02:25.560 then paste those animation properties
04:02:28.979 now Shrek will perform that Electric
04:02:30.720 Slide animation
04:02:32.939 pretty cool right
04:02:34.859 all right everybody that is an
04:02:36.720 introduction to animations using CSS
04:02:40.260 foreign