Comprehensive Guide to HTML and CSS: From Basics to Advanced Techniques

hey how's it going everybody in this series I'm going to show you everything you need to know to get started working

with HTML then a little bit later on we'll cover CSS so why don't you go ahead and sit back relax and enjoy the

show hey if you enjoy my videos please be sure to subscribe because subscribing is free just like how this video is free

help me out yes I'm guilt tripping you that is all why should you learn HTML in today's age people spend way too much

time on the internet myself included unfortunately knowing how to create or otherwise manage a website isn't a bad

thing to know heck add it to your resume it really can hurt even if you're not interested in web development as a

career almost every business has some sort of online presence knowing how to manage that online presence could

convince a potential employer to hire you over somebody else so why not HTML is an acronym for hypertext markup

language the general idea is that certain types of tags also known as markup is used to convey to a web

browser how some content should be displayed usually tags are in pairs with some content sandwiched between them

header tags are typically used for titles P tags are used for paragraphs of text a tags are used for hyperlinks HTML

add structure to a web page if we were building a house you could say that HTML is the foundation the skeletal structure

to support all content on website then there's CSS CSS means cascading stylesheets it's a language that adds

style to a web page in our house analogy CSS would be equivalent to the decorations design and colors of the

Interior to begin working with HTML and CSS you'll need a modern web browser you can use Google Chrome Firefox Microsoft

Edge Safari those are all fine you'll also need a text editor as well such as vs code it's free softare W that

functions as a workbench for us to write code in this next part I'll show you how we can download and install VSS code to

download vs code head to this website code dovisual studio.com look for whatever operating system

you're using and download that version I'm running Windows I will download the windows version then I will open it when

it's done accept the agreement yes I did read it that fast next next I'll create a

desktop icon next install launch Visual Studio code and finish we need a folder to hold all of

the documents related to our website go to Open folder I'll place this folder on my desktop new folder I'll name this

folder website select folder there we go we are now within our website folder I'm going to create a new file I will name

this file index.html whatever your homepage is going to be I would recommend naming it

index.html most servers return the index file as the homepage so it would be good practice for us to name the homepage

index now what we're going to do is install the live server extension go to extensions look up live

server and install basically what this does is that when you update your HTML file if you have a web browser open it's

going to update automatically it'll save you some time all right everybody now what we're going to do is fill in our

HTML file at the top what we'll do is add a set of angle brackets then type this exclamation point doc type HTML

this is a declaration that this document is an HTML 5 document which is the most recent version then we'll create a pair

of HTML tags we'll need an opening HTML tag and an ending HTML tag you can tell that

this is an ending tag because it has a forward slash most tags are in groups of pairs that's if there's typically

content between them this pair of HTML tags represents the root element of an HTML page between these two tags we will

add a pair of head tags the head element contains information about your web page such as

a title let's add a title to our web page title add a closing tag let's set the

title of our web page to be my first website now what we'll do right click on your HTML file then open with live

server here's our web page the title says my first website just to make this easier on us I'm going to place our web

page side by side with VSS code when we save any changes we can see that update automatically the head element

contains information about your web page whereas in the body let's add a pair of body tags after the pair of head

tags the body element contains visible content in your web page between our body tags let's add a pair of H1 header

tags H1 defines a large heading I'll add some text this is an H1 heading I'm going to

save that should update my HTML document automatically this is an H1 heading let's try

H2 add a pair of H2 header tags this is an H2 heading let's do

H3 H3 this is an H3 heading

H4 this is an H4 heading then we have H5 this is an H5 heading typically header tags are used for titles or other

large text let's discuss paragraph tags if you have a paragraph of text you can place that within a pair of P

tags some text goes here if you need some sample text to work with if you're using vs code you can type lauram then

tab this will create some garbage text for you I think it's supposed to resemble Latin if I were to copy

everything within the set of paragraph tags then save it paragraphs are separated with a line

break otherwise if you do need a line break you can type BR meaning line break so this is a self-closing tag pairs of

tags usually have some sort of content between them with the line break that's a self-closing tag we don't need a

closing tag so add as many line breaks as you need wherever you need them so that's a line break there's also

horizontal rule which is HR think Human Resources HR that would add a horizontal line across your page that might look

pretty good after a title paragraph tags don't care about any spaces or new lines I'm going to put all follow this on

separate lines just so it's more legible so when I save nothing appears to happen even if I were to add some

line breaks between these sentences nothing appears to change you could always change your paragraph takes

to P meaning pre-formatted as in pre-formatted

text that would retain any line breaks or spaces Within These tags it's up to you if you prefer the P tags or the pre

tags now the last thing I'm going to discuss are comments comments aren't displayed as output they're usually used

as notes for yourself or for other developers you would type a left angle bracket exclamation point two dashes

wherever your comment ends you would type two dashes right angle bracket this is a comment so when I save nothing

appears to happen comments are used for yourself or for other developers that are looking over this document

all right everybody well at this time let's go over an exercise just so that we have a solid foundation and really

remember everything it'd be good practice for us we're going to create a separate HTML file that displays the

lyrics of a song you like so let's create a new HTML file let's name this file

lyrics. HTML again we'll need to add this declaration doc type HTML that's a

decaration that this document is an HTML 5 document then we'll need a pair of HTML

tags we'll need a head element and body let's add a title to the head of

our document title let's set the title to be my song

lyrics then we will open this HTML file with live server my song lyrics pick a song that you

like within our body tags let's add an H1 element this will be the title copy the name of your song place it within

this pair of tags so that's the title add song by the name of the band or artist I'll use H3

header tags that's slightly smaller than H1 you know maybe H4 I think that' be

better I'll add a horizontal rule that's HR I'll add a pair of P tags take all of these lyrics copy them

and paste them within the pair of P tags I'd like to retain the spacing let's change the P tags to P tags for or

pre-formatted text that's much better let's add one line break after our horizontal rule one

last thing I'm going to do within the pre- tags I'm going to add some blank lines between some of these

verses there we go that's pretty cool I think we have the hang of basic HTML now in the next topic we'll discuss

hyperlinks hey if you're enjoying this series so far please be sure to support me by Smashing that like button leave a

random comment down below and subscribe if you'd like to become a fellow bro hey everybody in today's topic I'm

going to show you how we can create hyperlinks a hyperlink is a digital reference to data that a user can follow

by clicking or tapping a button or link to create a hyperlink we will need a pair of a tags a means anchor then we'll

sandwich some text between these two tags such as click me we're missing one thing what we'll need

within the opening a tag is an attribute an hre attribute an attribute is typically a

name value pair that modifies the behavior of an element href means hypertext reference we're referencing

something within the set of quotes we can list a web page or a file to link to let's begin by linking an external

website like Google let's paste the URL Within the href attribute save then when I click on

this link it takes me to Google or some other website of you're choosing based on what's within the set of quotes there

are more attributes you can add as well they're optional another is Target Target equals if you set Target to beore

blank this link will open this URL in either a new tab or a new window depending on your settings Google has

opened in a new tab for me another attribute is title the title attribute displays additional information about

the element as a tool tip I'll add a message goes to Google when I hover over this link we have a tool tip that states

goes to Google that's an additional option too this URL is an absolute URL you can also list a relative URL So

based on the last video we have an HTML file of song lyrics within our index file we will link to our lyrics file so

let's create another hyperlink we'll need a pair of a tags meaning anchor we'll need some text song lyrics is good

then we'll need an href attribute href equals these two files are right next to each other for a relative file path all

we need is the file name lyrics. HTML I'm going to add a line break real quick BR meaning line break then when I

click on this link it takes me to my other HTML file you could add these additional

attributes if you would like one last link I'll create a line break we'll create a link that begins the process of

emailing someone we'll need a pair of a tags the text will be email

me a t attribute will be set to now to send an email type mail to colon then an email address I'll make up one test at

fake.com when I click on this link we begin the process of sending an email to this email address however I'm not

signed in so this is as far as it'll take me currently okay now for an exercise let's go to our lyrics HTML

file open with live server let me zoom out based on the last project you should have a web page with some song lyrics

that you like we'll create a hyperlink to the original video Let's do that after the artist that would be right

here but before the horizontal rule we'll create a pair of a tags I'll add some text original video

then you'll need to find the url for the original video for your song all right I will set the href

attribute to be that URL the URL for a YouTube video so when I click on the link

it now takes me to YouTube all right everybody that's a hyperlink it's a digital reference to

data that user can follow by clicking or tapping a button or link and those are hyperlinks in

HTML hey everybody in today's topic I'm going to show you how we can add images to a web page using HTML so sit back

relax and enjoy the show all right everybody here's how to add an image to a web page but you'll

need an image to work with I have a picture of a dog I'll add that to my website folder next to my index file I

have a picture of a dog to add an image we'll use a self-closing image tag then set the source equal to be the name of

your image including the extension mine is dog and this is a PNG file so this picture is fairly large you

can change the dimensions with the height or width attributes I'll set the height to be 200 200 pixels now the

width will adjust automatically however you could change that too if you wanted if I need this image to be a perfect

square I will also set the width to be 200 however this does compress the image depending on the dimensions of your

original picture you may need to change the height and or width I'll set the height to be 200 though then keep the

width the same it'll adjust automatically now for some reason if your image isn't

displaying let's say that I get the file extension wrong I'll say that this is a JPEG well the image won't display you

can add alternative text with the alt attribute the alternative text you could say

anything this is a picture of a dog if this image doesn't display you at least display the alternative text now

the nice thing about the AL attribute is that if somebody is visually impaired and they're using a screen reader the

screen reader will read this alt description just to test my screen reader I'm going to add some text before

and after this image as well let's add an H1 header tag this is a cute dog then I'll add some text after I'll

use an H3 header tag woof woof I'll use my screen reader this is an

extension on Chrome you can download my first website this is a cute dog this is a picture of a dog woof woof

the screen reader read the alternative text for this image so it is good practice if you include an image to

write a brief description of the image another cool thing you can do with images is that you can't turn them into

hyperlinks I will surround our image element with a pair of a a tags a meaning

anchor then I will set the hre attribute equal to a URL I'll find the Wikipedia page for

dogs all right I'll copy this URL then I will set the href attribute to be this URL when I click on this image it takes

me to the Wikipedia page for dogs so yeah you can turn an image into a hyperlink another cool thing you can do

too is that you can include gifts in your web page this is my gift that I'll include I'll add that to my website

folder I'll include a self-closing image tag set the source equal to be the name of my

image then be sure to get the file extension right this is a gif I'll set the height attribute to be

maybe 200 as well height equals 200 then I'll add some alternative text alt attribute will

be smiling dog GIF now with a website you may have all

of your images within a separate folder like this I'll go to new folder I'll create a folder named images then I will

move my images to the images folder so my images are no longer being displayed we have our alternative text

this is a picture of a dog and smiling dog GIF with your Source attribute we're using a relative file path we need to

navigate to the images folder then find the appropriate image files I'm going to preedee these images with the name of

the folder they are found within the images folder you may also need another forward

slash for me either work let's move on to an exercise in the last few videos we were working on a web page for song

lyrics Let's include some album art for my song that I picked I have a picture of the original album art that

this song is found from I will move that to my website folder then I will move it to the images folder within my website

folder I need a self-closing image tag set the source equal to B we need to navigate to the images folder I will

list that first it Images slash the name of the file for me it's

album cover. jpeg then I'll change the dimensions I

will set the height equal to be 200 I'll add some alternative text alt

equals album art cover then a line break maybe two

then I'll turn this into a hyperlink as well I will surround our image with a pair of a

tags I will set the href attribute to be the original YouTube video where you can find this song So href equals the

YouTube video that I linked before so this should take me to YouTube there we

are all right everybody well that's how to include an image on a web page using HTML hey how's it going everybody in

today's video I'm going to show you how we can include audio in a web page using HTML you'll need some audio files to

work with one place you can download some MP3 files is the YouTube audio library find some songs that you like

and then you can download them let's download three for this lesson once you have your three songs let's move them to

our website folder all right we you're ready to begin so to include some audio we need a

pair of audio tags then between the AUD tags let's include a source element with the source

element there is a source attribute we will set the source attribute to equal the name of an MP3 file or other audio

file so let me copy the name be sure to get the file extension and then I I will paste that

file the file name nothing appears to happen because we don't have any controls and the song doesn't play right

away too so to add some controls within the opening audio tag type controls and that's it so we can now play our

[Music] song or you can mute it fast forward it rewind it set the playback speed

whatever you can set your audio file to auto play but people find that [Music]

annoying so you should probably not do that if we do want our song to autoplay we should at least mute it using the

muted attribute so our song is playing but it's muted until we unmute [Music]

it we can even have our song Loop by using the loop attribute so let me play this turn up

the volume a little bit fast forward to near the end and let's see if it loops and it does cool now in case your

web browser doesn't support a certain audio type you can add fallbacks so let's say that we also have a wave

version of our audio file I can include that as a fallback right underneath but we should also specify the type just to

let the web browser know that this is an MP3 file and that this is a wave file I'll include the type attribute I will

type Audi slmp I will also let the web browser know that this is a wave file audio

/wave so just in case our web browser doesn't support MP3 files I'm pretty sure that they all do nowadays we will

resort to our wave file if we have a backup of the same audio file in wave format let's include our two other audio

files so again we need a pair of audio tags within the pair of audio tags we will

need a source tag a source element and I will set the source to equal the name of an audio file so let's copy the name of

our second audio file including the extension add some controls and there's our second song Let

Me pause the first one [Music] let's add the last

one so here's the name of my last song be sure to get the file extension we have our

controls and here's my third [Music] song Hey for fun let's add the name of

each of these songs right before the controls I'll use a pair of paragraph tags

then I will copy the name of the song and sandwich the name between the paragraph tags so that's the name of my

first song let's do this again with the second song and the

third so here are my three songs just to make everything a little more organized I'm going to create a music folder

within my website folder to hold all of my audio files I will create a new folder I will name this

music I'll place all of my audio files within the music folder so we no longer know where the

location of those audio files are because we're using a relative file path I'm going to set the source attribute to

be music slash the name of the file we can locate those files now so that's our first song our second

song and our third song that's how to include audio files in a web page using HTML hey if you're

enjoying the series let me know by Smashing that like button leave a random comment down below and subscribe if

you'd like to become a fellow bro hey what's going on everybody today I'm going to show you how we conclude a

video in your web page using HTML all right let's get started everybody in this example you'll need a video file of

one of a few formats you can use either an mp4 file webm or vorbis OG I just so happen to have an mp4 file of me playing

that new Zelda game Zelda tears of the Kingdom this is just some sample footage once you have your video file

you're going to take it and place it right next to your index file within your website folder to include a video

you'll need a pair of video tags within the opening video tag we can set a source attribute to be either the

relative file path or the absolute file path of that video These two files are right next to each other I only need the

file name my file is Zelda MP4 and there's my video but it's humongous we can change the height and

or the width let's change the width to be 500 pixels that's a good size the height will adjust accordingly or

vice versa if I were to change the height to be 500 then the width is going to adjust accordingly but let's keep it

as 500 here's our video but there's no way to play it we'll need to add a set of

controls with the controls attribute now we can play the video to have this video autoplay when

the page loads you can set the autoplay property it should play automatically but if it is set to autoplay you should

at least mute it because people can find it annoying especially if this video is loud let's add the muted attribute so

now it autop plays and it's muted to have this video Loop when it's done let me fast forward to the

end I can add the loop attribute now it should Loop when it reaches the end right about here

yeah and it's back to the beginning again just in case somebody's web browser doesn't support this video file

you can add backups I also happen to have a webm version of the same video I'll place it within my website

folder then within the pair of video tags we will add a source element take our source attribute cut it

then paste it within the source element you can keep all the attributes within the opening video tag you should

also tell the web browser what type of video file this is video/ MP4 now to include a backup we just need

to use the source element again as a backup in case a web browser can't play my mp4 file we'll instead use the webm

version Zelda do webm the type is

webm all right so let me delete the MP4 version to test it let's save and reload everything and

now my webm version is playing you can't really tell the difference you also have the capability of turning this video

into a hyperlink I will surround my video element with a pair of a tags then I will set the href attribute to

some URL I'll set it to be the Wikipedia page for Zelda feel free to pick any page of

your choosing with the HF attribute I will paste that

URL now when I click on this video it should bring me to the Legend of Zelda Wikipedia page to open this link I get

it link it's Legend of Zelda anyways to open this link in a new tab I can set the target attribute to be underscore

blank then it should open in a new tab which it does all right everybody so that's how to include a video in your

web page using HTML hey everybody today I'm going to show you how we can create a fabcon for

your web page to create a fabcon you'll need an image to work with here's mine I would recommend an image that's at least

96x 96 pixels in width and height once you have your image we'll save the image to our website folder I'll rightclick

save image as find my website folder let's rename this image favicon for a favicon most modern web

browsers accept Ico PNG GIF JPEG and SVG image files so let's save our image my image is now within my website

folder if you do need to make any graphical changes to your image you can always use a program like paint this is

a built-in program with most Windows operating systems I'm pretty sure Mac and Linux have something like it too if

I do need to change the dimensions on my image I can open it let's find that image it's within my website

folder and here it is if you do need to change the size of your image you can go to

resize you can either resize or skew your image my image is at least 96 pixels it's 176 for both the width and

the height then you'll want to save your image afterwards to that website folder once you have your image we're

going to create a link tag the link is self closing the link tag specifies the relationship between this document and

an external Source the relationship attribute will be

icon because well we're adding an icon to our web page the type will equal image

slash the type of your file so I have a jpig I'll list jpg then we need an href attribute that

will be the relative file location my image is within my website folder I just have to list the file

name fabac con.jpg let's take a look refresh everything and here is my

favicon typically with a web page I like to place all of my images within one folder within my website folder I'll

create a new folder named images and I'll place my favicon within my images folder so we no longer can locate that

fabicon I need to change the relative file path of the favicon because it's now within a separate folder preceding

the name of my file I will list the folder that it's in images SL favicon and there it is again all right

everybody that's how to create a favicon for your web page using HTML hey everybody today I will explain

text formatting in html text formatting gives text special emphasis we can create Boldt text italic text underline

text so on and so forth let's begin let's create a pair of paragraph tags and between this first set of

paragraph tags let's type this is normal text let's copy this line of markup and then paste it like 10

times okay I lost count whatever text you would like to add emphasis to you surround that with a pair of tags but

there's different pairs of tags that have different effects for a bold effect we use a pair of B tags let's round

normal in the second line with B then change normal to the word bold this is bold

text I is for italic so let's surround the next line with

I this is italic text then underlined is youu this is underlined

text deleted text we would type deel this is deleted text big

big this is big text so this text is a little bit bigger than the other text surrounding

it then they're small this is small text

subscript type sub this is subscript text I misspelled that there the subscript text is smaller

and it's just underneath the other text surrounding it then their superscript type Su like you're saying

Su like what's up this is superscript text then you have

monospaced which is TT this is monospaced text oops oops I forgot to close it this

is a good example of why you should add closing tags because the markup will Cascade through the rest of your

document so be sure to close any opening tags all right then the last one is Mark Mark creates a highlight effect

kind of like you're taking a highlighter and highlighting some text you can use CSS to change the color too I haven't

really discussed CSS yet but to add a little bit of inline CSS within the opening mark tag take the style

attribute set that equal to take the background Das color colon then we can pick a color how about light green I

think that would look good and our highlight effect is now light green or pick some other color if you're choosing

we'll discuss colors more when we reach CSS all right everybody so that is text formatting text formatting gives text

special emphasis you can create text that is bold italic underline deleted big small subscript superscript model

space and highlighted text and well that is text formatting in HTML hey how's it going everybody today

I need to explain the span and div tags in HTML the span tag is an inline container to group elements for styling

purposes the div tag it's very similar except it's a block container to group elements for styling purposes here's an

example let's create two H1 titles this is a span title then close it let's copy this line

of markup then paste it the second line will be this is a div title I'm going to enclose my first sentence with a pair of

span tags so we need an opening span tag and a closing span tag somewhere

all right with this set of span tags we are enclosing this text within a container it's an inline container we

can apply some CSS styling to the sentence whatever is sandwiched between the pair of span tags let's change the

background color of the title I will set the style attribute to equal

background- color then pick a color how about red then a semicolon there so the

background of my title is red but you know what that red is a little bright let's do

tomato I think that's a better color whatever is enclosed with a pair of span tags we can apply some inline CSS

styling too now with div this creates a block level container so I will surround this sentence with a pair of div tags

div meaning division let's apply that same styling I'll copy my style

attribute paste it let's change the color to be maybe cyan all right here we are this is a

title using span this is a title using div span is an inline container div is a block level container it takes the

entire width of my document you can see that this is all blue let's create a pair of paragraph

tags this is a a span sentence then close it let's copy this paragraph paste it

again then change the second sentence to div all right let's enclose our first sentence with a pair of span

tags all right I will set the style to be red well tomato tomato color technically it's kind of like we're

highlighting the text much like the mark tags in the last topic let's copy this tag change span to

div then the color how about cyan and then we need to close the div tag there we

are all right now let's create two large paragraphs we need a pair of paragraph tags

in vs code to generate some sample text you can type lauram then tab so I will copy this

line paste it again let's say after the first sentence I would like to add a background

color so right here I will add a span tag an opening span tag then where would I like to close it let's do so before

the closing paragraph tag then I will change the background color all right we have highlighted the

second sentence let's do this with div tags now with our next paragraph let's create an opening div tag then we'll

need to close it somewhere let's close it before the closing paragraph

tag and then I will change the background color within the opening div tag I will set

the background color to be cyan what we have done is created a block level element for the second

sentence within our paragraph basically speaking we can use the span and div tags to group together HTML for styling

purposes span is an inline container div is a block level container we'll be using these more when we reach CSS and

well everybody those are the span and div tags in HTML hey everybody today I'm going to

explain how we can create different lists in HTML there's three different types of lists that we'll discuss today

unordered ordered and description lists for an unordered list think of maybe a grocery list the order of items doesn't

matter to create an unordered list you need a pair of UL tags UL meaning unordered list then

between the pair of UL tags you need to list items Li means a list item so we have a little bullet point let's

create a grocery shopping list maybe we need to buy milk let's create another list item we need another pair of list

item tags let's buy eggs what else can we buy uh milk eggs

bread and what about coffee there we are here's our unordered list each list item is bulleted hey

let's add a title to this list preceding the pair of UL tags let's use maybe an H4 header

tag let's say groceries here are the groceries I want to buy the order doesn't matter so we're

using an unordered list now you can create nested lists too let's change coffee to Coffee

supplies then after this list item we'll create another unordered list then we need more list items so for

coffee supplies of course we would need coffee or maybe coffee beans now we have a hollow bullet

point maybe you need some creamer for your coffee and or sugar so that's how to create a nested

list within a list within your list you can create another list now let's go over order lists to create an ordered

list you need a pair of of O tags meaning ordered list then you need some list

items what about a to-do list so we need to list item so number one that's first in our list we need to eat

breakfast I'm going to add a title too so let's use a pair of H4 header tags this will be my two do list one we

need to eat breakfast to go to school or go to class so that's number

two number three after class you have to walk your dog then four maybe you have to go to

work all right that is an ordered list use a pair of O tags then lastly we have description list this one's a little

more tricky a description list is made of key value pairs you have a term and a definition to create a description list

you need a pair of DL tags meaning description list we need some terms to create a term

you type DT then close it so I play a lot of Dungeons and Dragons let's create some definitions for some mythological

creatures like a dragon so that's my term let's create a few other terms Dragon

Phoenix vampire and werewolf so these are the terms

underneath each term we can add a definition we'll need a pair of DD tags for description definition I'm going to

Google each of these creatures then just paste the definition that I find so for a dragon I'm just going to

copy this definition then paste it within the DD tags here's my term and here's my

definition of that term Dragon a mythical monster resembling a giant reptile sometimes shown as having wings

let's do this with our other definition terms as well next we have Phoenix Phoenix definition an immortal

bird associated with Greek mythology we'll need a pair of DD tags add your definition

then close it here's my second description definition then we need vampire and

werewolf vampire creature definition let's copy this create another pair of DD

tags then paste that definition here's the definition for vampire then lastly werewolf

werewolf creature definition an individual that can shape shift into a

wolf so DD close it add that definition there's our definition for werewolf so that's a description list in

a way it's made of key value pairs you have a term which is represented with description term then a description with

DD description definition I forgot to add a title to this list let's do that I'll use a pair of H4 header

tags let's make the title mythical creatures not bad let's add a background color because well we can I'll add a

background color to the opening DL tag so style equals background-

color what's a good color for this what about light green I haven't discussed borders yet but to

add a border you can type border colon then a size maybe two pixels then there's different borders but let's go

with solid for now here's a border around my list all right everybody so that's how to create different lists in

HTML we have unordered lists ordered lists and description lists you can style your lists as well but we haven't

really discussed much CSS yet but yeah those are different lists in HTML hey everybody today I'm going to

show you how we can create a table using HTML let's create a table of store hours for a fictional business I'll create a

title using H3 header tags the title will be store hours what are the hours of operation for our store to create a

table we need a pair of table tags for the first row we need a pair of TR tags meaning table

row so the first row is going to be filled with table headers how many columns do we have well if we have a

table of store hours they're seven days in a week we will need seven pairs of table header tags so let's copy and

paste these tags six additional times for a total of seven 1 2 3 4 5 6 7 all right now for the first column the

header will be Sunday we have Sunday then Monday

Tuesday Wednesday Thursday

Friday Saturday so here's my first row the first row is your table

headers add one header for each column in your table for another row we need another

pair of TR tags meaning table row so for my second row I'll include table

data we need T dags so we'll need a total of seven on Sunday our fictional store is

going to be closed I'll type closed as we you can see that this data is underneath this header for the second

row Monday the hours will be 9 to 5 let's apply that for the other days besides

Saturday Monday through Friday the store is open between 9 to 5 Saturday will be reduced hours 10 to 2 all right not too

bad to align the table data what you're going to do is within the table row take the Align attribute set this to

Center or otherwise if you would like to WR justify it you would type WR but let's stick with

Center let's align the first row as well we can also add a border within the opening table tag set border equal to

zero that's for no border then increase the number depending on the thickness that you want

so one will give us a border that is this thick two and

three let's stick with one let me move this a little these table cells aren't exactly the same size

the word Wednesday has a lot of characters within each of these header tags I will set the width to be maybe

100 this column is a little bit larger now let's copy the width and make each header have a width of

100 okay this table is All Uniform now but if we were to shrink this window the cells would be

compressed okay let's change the background color let's begin with the table I will set the style attribute to

be a CSS property let's set the background Das color to be black the whole table is black now so

let's change the color for the headers and I'm just going to copy this style

attribute let's change the first row to have a color of light blue we can at least see the text

now and then for the second row let's pick a different color I think this color would be good

Alice blue yeah that's not too bad if you need additional rows for your table use

another set of TR tags meaning table row then you can add another set of data all right everybody that is how to create a

table using HTML hello again everybody today I'm going to show you how we can create a

button using HTML and a little CSS to create a button we need a pair of button tags and here's our button it's really

small and it doesn't do anything let's add some text between the button tags let's add some text like click

me so here's our button but it's fairly small we can change the size of this button by changing the font size we will

need to access the style attribute then set the font size property to a larger font size so font Das size 25 pixels is

good the size of our button will adjust accordingly let's change the background color

separate each of these CSS properties with a semicolon let's change the background Das color to be

gray so that's how to change the background color to change the font color type color colon then some color

like light blue you can round the corners by setting a border radius so that's

another CSS property border Das radius colon let's begin with five that will

Round the Corner slightly you can increase the amount of pixels for a more rounded

border let's try 25 that's not too bad so this button currently doesn't do anything what I'm going to do is turn

this button into a hyperlink when we click on the button it will take us to maybe Google we need to surround our

button with a pair of a tags I will set the H ref attribute equal to some URL like

Google so when I click on the button it takes me to Google or if we had another HTML file we can go there too I'll

create a new HTML file named maybe page two page 2html let's generate some HTML in VSS

code to do that type an exclamation point then tab all I'm going to add to page two is an H1 header tag with the

title of this is page number two I'll set the HF attribute to be the name of that HTML file page

2html page 2. HTML when I click on the button it brings me to my second page

I haven't discussed JavaScript yet but we can have a button execute some JavaScript code this part of the lesson

is outside the scope of what I would normally teach at this point in time but if you're interested here's a little bit

of JavaScript again it's not necessary to learn this at this level if you would like to execute some JavaScript code

using a button we need a pair of script tags for JavaScript within this pair of script

Tags I'm going to define a function function you can come up with some function name this function will do

something then you need a set of parentheses then a set of curly braces buttons have an onclick attribute

we can have the button do something if it's interacted with the onclick attribute is going to be the name of my

function do something when we click on the button execute this function what do we want to do I'll change some text on

the screen but we'll need some sample text to work with I'll create a pair of paragraph

tags let's say hello within our JavaScript function we'll change the text of whatever is between these two

paragraph tags but we need an ID there's an ID attribute I'll name this text maybe

greeting so when we click on this function I would like to change the text of my greeting

within the function we can do that with document. getet element by

ID within the set of parentheses the ID is greeting follow this with DOT inner HTML

then we can set this equal to some new value let's set the new value to be goodbye now when I click on the button

it changes our text so that's a button everybody you need a pair of button tags you can apply some CSS styling I haven't

really discussed CSS yet so we did inline CSS but if you have these many properties I would recommend a

stylesheet which we'll cover later to make your button bigger you can change the font size you could have your button

bring you to another HTML page or even execute some JavaScript code and well everybody that's how to create a button

using HTML hello again friends today I'm going to explain how we can create a form using

HTML to create a form we'll need a pair of form tags the opening form tag has a few

attributes we need to fill in first is an action attribute after submitting our form to what location do we want to send

our form to form submission is done with a backend language such as PHP you might see a file name such as index.php

or action page or something of that nature within your action attribute we're not actually going to do a form

submission but just be aware that the action attribute sends data to this location to this file the file listed

really can be anything but that's outside the scope of this lesson you'll also see a method the method attribute

specifies if this is a get request or a post request post is used for confidential information such as a

username and a password get is for insensitive data basically again this is outside the scope of HTML at this point

in time if we have a form and we're sending sensitive data we should use post now let's create some elements

within our form the first thing we'll create is a text box we need a self-closing input

tag so here's our text box by default the type is a text box but we can specify that with the type so type text

there's other different types like passwords emails telephone numbers we'll cover that pretty soon we have a

text box but if a user sees this text box they probably don't know what they should enter in let's add a label to the

text box preceding my input tag I will create a pair of label tags what do we want our label to say maybe username

we're telling the user hey we want you to enter in your username if somebody is using a screen reader if they're

visually impaired we should add a four attribute what is this for well this is for my my username another benefit of

adding the four attribute to a label when you click on the label your cursor will move to the text box but we need a

matching ID attribute within the input tag so the ID is going to be the same as the four attribute then when I click on

the label our cursor moves to the text box there are a few other attributes you might be interested in as well but

before we get to that we should create a submit button to submit our data at the end of our form we'll create an input

tag the type will be submit it's a submit button but it currently doesn't do anything we're not

using a backend language to submit form data 2 there are some useful attributes for text boxes within the input element

for our text box let's add the required attribute in order to submit this form we need to type in a password if I just

leave it blank then hit submit we have this little prompt please fill out this field I can't

submit this form until I type in something then I can submit it you could set a minimum and maximum length that's

another attribute Min length equals then some length the minimum length for a username is six

characters let's type in just three or some other number below six submit please lengthen this text to 6

characters or more I'll come up with a different username then submit and that appears to

work you also have the capability of setting a maximum length with the max length attribute let's make the max

length 15 characters so let's type in a username I'll add a bunch of characters

afterwards so I can't type in any more than 15 characters there's a maximum to reset your form there's a

reset button let's copy this input tag paste it then change type to reset so here's my reset button I'll

type in a username press reset then we can reset the data for our form but afterwards I'm just going to add a

breake line just to put the submit button on a new line with text boxes you can add a placeholder to give the user

an idea of what we want them to enter in and in what format I'm going to add a place holder

attribute what do we want our placeholder to be um I don't know SpongeBob SquarePants or maybe just

SpongeBob so the placeholder is faded it gives a hint to the user as to the format in which they should enter an

information if I were to click on this text box the hint is still there until we type in

something okay let's cover passwords to create a password we'll use an input tag the type is going to be

password we should probably add a label to let the user know that we would like a

password so I'm just going to copy the label that we have for our username the four attribute of our label should match

the ID attribute of our input tag so the ID is going to be password the four attribute of the label will be password

and then change the text too there we are I'm just going to change one thing

after my password I'm going to add a break line so I will add that here all right so with the password the

text is hidden I can type in a bunch of characters and you can't see it you could add some of these attributes as

well like a minimum length maximum length and the required attribute so I'll copy those and paste them within

the input tag for my password I can type in a username if I attempt to submit this form data without a password we

have that prompt please fill out this field that's because we have the required attribute set there's also a

minimum length and a maximum length set too I'm required to type in a password that's at least six characters long

right now this is only five anything between 6 and 15 is okay for the rest of this demonstration I'm going to get rid

of these attributes let's cover email next I'll create a label first this will be for email the text

will be email then we'll need a corresponding input tag input type equals email for the ID I will also set

that to be email I'll add a line break after then I'll add a

placeholder s SquarePants at gmail.com again the placeholder is

letting the user know the format in which they should type in their information if I were to type in some

text but we're missing that at sign hold on let me type in something real quick all right click submit we have a

prompt please include an at sign in the email address because we're looking for a valid email address format that's

input for email let's copy our label for phone the text will be phone

number again we need an input tag the type will be te for telephone we need a matching ID

that matches the four attribute phone I'll add a break element to the end we can type in a phone number

I'll add a placeholder too placeholder equals with American telephone numbers you have three digits

such as 1 2 3 Dash then another three digits like 456 Dash then four digits 7890 so Cur currently we can type in any

numbers then submit them H hold on I need a username we can limit the format in

which a user can type in some numbers for a phone number we would need a pattern attribute for the digits 0

through 9 within a set of straight brackets you would type 0-9 then how many digits do you allow

afterwards three then we'll need a dash that's required add a dash then another three digits 0 9

0-9 then another three digits Dash number 0 through 9 let me move this in a little bit then I would like four

digits so now our phone number needs to be in this format 3 digits D3 digits D4 digits 1 2 3-4 5 6-7 8 9

0 hold on I'm going to get rid of this required attribute just because it's kind of annoying right now 1 2 3-4 56-

7890 there that seems to work but if I were to type in a random amount of numbers well then we don't meet this

pattern matching this pattern is required in order to submit this data all right then we have dates like a

birth date we'll need a label this will be for a birth date for

bday input type equals date the ID should match the four

attribute of the label then I'll add a break element so with dates there's an

interactive calendar to select a date pretty simple then we have a number element a user is going to enter in a

quantity like they're buying something like how many do you want let's change the text to

quantity for quantity we need an input element the type will be

number ID equals quantity then I'll add a break so here's

our quantity we can use these arrows to go up or down however normally you can go

into negative numbers we can set a minimum and a maximum with the Min and Max attributes so the minimum will be

zero we don't want to go below zero the max I think 99 is good so we can't go below zero but we can go all the way to

99 and no further you can add a default value with the value attribute I'll set the default to be one that is for number

input it's good if you need a quantity of something all right then radio buttons radio buttons are a little

tricky with radio buttons you can only select one from a group I think a good label will be for a title are you a

mister a miss a doctor whatever like what's your title so title for title we have our title so far then

we'll need individual buttons I'll create a label for Mr Miss and Doctor

Mr Miss in the US doctor is p HD the four attribute will be Mis for

mister Miss for Miss then

PhD for PhD I'm GNA get rid of these colons so after each label we'll create

a radio button input type equals radio the ID will match the four attribute of the

label we have Mis then we'll want to add a value too when we submit this form so

Mister okay let's copy this input then apply it to miss and PhD so type Radio ID will be Miss value Miss then we have

PhD ID will be PhD value PhD so we have three radio buttons um let me just add a break

afterwards with a group of radio buttons you should only be able to select one however we can select all three that's

because we need to add all of these radio buttons to the same group we're going to add a name

attribute we'll name this attribute title whichever radio buttons you would like in the same group they need to

share the same title now we only can select one those are radio buttons okay let's create a drop- down

menu this will be for a payment like what kind of card are you paying with is it a Visa card MasterCard gift card four

payment instead of an input element we're going to be using a pair of Select tags for a select

element then add a break afterwards so we have a drop-down menu but there's no options we will add

option elements within our select element so these have opening and closing

tags let's create three options an option for Visa Mastercard then GI card for option one the value

will be Visa the text will be Visa so we have one option let's add two more

value Master Card the text will be Master Card then a gift

card value equals gift card the text will be gift card then I forgot to add an ID to the

opening select element ID equals payment there we are all right so that is a drop-down menu you need a pair of

Select tags within the select tags you can create option tags then we have a checkbox again let's create a label this

will be for a checkbox I think a good use of a checkbox will be a subscribe button the

four attribute will be subscribe the text will be subscribe we'll need an input element

input type equals checkbox the ID will match the four attribute of the

label then add a break element after I can subscribe by checking the checkbox or by clicking on the label

this one's a little tricky we're going to create a text area again we'll need a label the text next

to the text area will be comment for comment we'll create a pair of text area

tags so we have a text area the ID of the text area will match the four attribute of the label so

comment you can change the dimensions of your text box by adjusting the rows and columns I would like three rows rows

equals 3 columns that will be 25 so now we have different dimensions for our comment you

can type in anything you suck bro code that's how to create a text area for a file submission again we'll create a

label we're kind of following the same pattern file for file again we need an input tag input

type equals file the ID will match the four

attribute of the label file then I'll add a break so now we can choose a file

however by default we can accept all files to limit the type of file that you're looking for there is an accept

attribute what file types will we accept Let's do an image for a PNG that would be image SL

PNG when I choose a file we're looking for a PNG now you can add more than one file type each file type is comma

separated let's also look for any jpegs so that would be jpeg so now we're looking for a bunch of

files anything within this range now if you're sending a large amount of data there's one change we'll make to the

form we're going to change the encryption type within the opening form tag let's say we're sending an image and

the image is a large file so we will set the encryption type equal to be multi-art SL form

data in simple terms when we send our large amount of data we'll break it into multiple parts then when all of that

data is received those multiple parts will be reassembled it's a little more complicated than that but at this level

that's all you need to know so if you're sending a large file such as an image I would recommend changing the encryption

type to multipart SL form data all right everybody so that's how to create a very basic form using HTML it really doesn't

look too pretty right now you can always style it with CSS which we'll be covering very soon and well yeah that's

how to create a form using HTML hello again friends it's me again today I will show you how we can create

both a header and a footer for your web page header and footer elements are both semantic tags they describe their

meaning to both the web browser and the developer they help organize your content and CSS properties can easily be

applied to anything within these containers headers are used for introductory content at the top of your

page such as a title a subtitle a logo a navigation bar but we haven't really discussed navigation bars yet Footers

act as a container for holding concluding content at the bottom of your page such as an author a copyright or

some contact information like a phone number or email all right so let's begin to create a header within our body

we need a pair of header tags then for a footer you need a pair of footer

tags personally what I like to do between the header and footer tags I'll create a pair of main tags for all of

the main content within our web page it helps with organization we'll begin with the header though the header element is

a container for holding introductory content at the top of our page this is where you may see a title like an H1

header element for our H1 header I think welcome to pick your name or your business or organization I'll just use

my YouTube channel name a header is a good container to hold the title for your page you could include a logo or a

navigation bar navigation bars are a little tricky we do need to know a little bit more CSS for navigation bars

but let's include some hyperlinks and make like a really basic navigation bar a hre equals I won't set a location it's

not really necessary for this example we'll just have a hyperlink that goes nowhere so we have

home let's create three more hyperlinks home about

us products and contact us the header of your document it also

tends to be a good place to hold navigation links to then to make this a little more fancy I'm going to add a

horizontal rule with a self-closing HR tag okay that's not bad another use of header and footer elements is that it

makes CSS styling a little bit easier I haven't yet shown how we can apply CSS stylesheets we're going to use a little

bit of inline CSS all I'll do is change the background- color to be whatever color you want I'll pick medium purple

anything within the header I would like to change the background color to purple or you could change the font or the font

size anything else it's very helpful to put your content within a container So within my main section I'll include an

image I do have one ready feel free to follow along if you want within my main element let's begin

with the title for the main content I'm going to use a smaller heading like H4 uh what would be a good title for the

main content check out these cool moves maybe I'll use a colon I'll

include an image we need a self-closing image tag The Source will equal the name of my file including the extension

and it is good practice to add some alternative text profile pick is good so there's my image then I'll add some text

within a paragraph We need a pair of P tags I'll generate some sample text in vs code you

can type lauram then tab and here's some sample text so that is the main content of my

page lastly let's work on the footer the footer is a container for holding concluding content at the bottom of your

page I'll begin with a horizontal rule because I think that looks good let's include some information about the

author author colon type in your name I'll add a line break after so we have

author then a copyright symbol using HTML to include the copyright symbol you can type andand copy semicolon so we

have a copyright symbol I'll add the text copy WR reserved then add a break then I'll add an

email this will be a link we need an anchor tag set the HF attribute to be mail to colon then an email address I'll

make one up bro code at fake.com close the anchor tag then I need some text bro Cod fake.com feel

free to use your own email I'll make my email a little bit smaller by using a pair of small

tags so enclose our hyperlink with small there we are and I'll change the background color

too with the style attribute within the opening footer tag I will paste that style attribute I'll pick the same color

of medium purple all right everybody so those are are headers and Footers they help organize your content as well as

make applying CSS a little bit easier because you can Target everything within the header or footer elements and those

are headers and Footers in HTML hey hello again friends today I'm going to explain how we can get started

working with CSS so sit back relax and enjoy the show CSS is an acronym for cascading

stylesheets we're able to apply CSS properties to color style or otherwise decorate our HTML markup there's three

different ways in which we can apply CSS inline internal and external we'll begin with inline suppose we have an H1 header

tag with the title of this is my website let's create a few paragraphs we need a pair of paragraph

tags we need some sample text I'll type laurum then tab I'll copy this

paragraph then paste three additional paragraphs so we have a total of four to apply some CSS styling to one of these

elements for example the body of our document we'll select the opening tag set the style attribute to B we can list

one or a few CSS properties let's change the background- color of our body to be black

the background is now black let's change the font color of the H1 heading style equals color that's for the font color

let's pick white then we'll do this for the paragraphs this is an example of inline

CSS within the opening tag of one of your elements you can change the style attribute then list one of many CSS

properties another method of applying CSS is internal as in an internal stylesheet I'll undo these style

attributes to apply an internal CSS style sheet within the head of our document we need a pair of style

tags whatever elements you would like to apply CSS to you would list that within the style tags if I would like to Target

the body of my document I would type body then a set of curly braces list your properties between the

set of curly braces let's change the background- color of the body of my document to be

black let's change the H1 heading H1 curly braces then I will list some CSS properties color white then let's change

the paragraphs P curly braces we're selecting all of the paragraphs color

white so that's an internal stylesheet within the head of your document you need a pair of style tags list the

element you would like to select add a set of curly braces then list one or many CSS properties let's remove the

internal stylesheet now we'll create an external stylesheet external stylesheets are probably the most popular method

because we can make a stylesheet that's reusable to create an ex stylesheet within our website folder we're going to

create a new document I'll name this document style.css we need to link this

stylesheet to our HTML file we can do that within the opening head tag by using a link tag we need to set the

relationship attribute to be stylesheet we're letting the web browser know that we're linking a

stylesheet then we need an href attribute set to the relative file path of our stylesheet they're right next to

each other I only need the file name including the extension style.css we have now linked this

stylesheet to this HTML file using this external stylesheet we can select specific elements from our HTML file and

apply CSS properties we will select the body of our document body curly braces I would like to change the background-

color to be black let's let's change the color of the H1 header tag color colon white then the paragraphs P curly Braces

Color colon white if you do need to apply CSS properties to one specific element such as this first paragraph We

can create an ID within the opening tag ID equals think of some unique name I'll name the first paragraph P1 let's do

this with the other paragraphs the second paragraph will be P2 the third will be P3 the fourth will be

P4 I'm going to delete these lines to select an element by ID you'll use a hashtag then the ID so P1 what would I

like the color to be let's change the color to Red I'll select another ID P2 curly

braces I'll change the color to be orange P3 color will be

yellow P4 color will be green you can also apply CSS Properties

by a Class A group within each of these paragraph tags I will add the attribute of class the first paragraph will be odd

it's an odd number the second paragraph will be even the third paragraph will be

odd the fourth paragraph will be even to apply any CSS to a class you'll type dot then the name of the class any

elements within the odd class let's change the color to be red the first and the third paragraphs

are both red because they belong to the odd class we applied the color red to anything within the odd class by using

dot then the name of the class let's change any elements with than the even class to be blue if we're

selecting a class we type dot the name of the class even in this case will change the color to be

blue the second paragraph is blue along with the fourth they're both part of the even class another nice thing about

external stylesheets is that you can apply them to more than one HTML file let's create a second HTML file I'll

name the second file page 2. HTML to generate some boilerplate h HTML within vs code you can type exclamation point

then tab I'll open page two with live server this is page two uh I'm just going to copy all of this and make a few

changes paste everything within page two let's change the title to be this is page two and we have three paragraphs

this time we have our index file and page two to link an external stylesheet to page two again we need that link tag

set the relationship attribute to be stylesheet then the href attribute will be the relative file path they're right

next to each other I only need the file name style.css now when I save and refresh

the page we have applied all of our CSS from the stylesheet to page 2html external stylesheets are reusable

so they're pretty nice and convenient all right everybody so that is an introduction to CSS with CSS you can

change the font the color add decorations we'll get more into that soon you can apply CSS inline with an

internal stylesheet or external stylesheet and that is an introduction to

CSS hey everybody in today's video I'm going to show you how we can apply CSS colors to our website so sit back relax

and enjoy the show we'll need four paragraphs to begin with I'll name the first paragraph P1 the second will be P2

2 followed by P3 then P4 we can change the background color of an element or the font color let's begin with the

background color of the body of our document within our external stylesheet I will select our body element I'll

change the background color property to be now with colors we can use names we can use RGB values heximal values or hsl

values for the first example we'll use named colors there are multiple sites in which you can find named Colors Let's go

with this one slate gray background color slate gray save your changes and there you go the

background color is now slate gray let's change the font color of our P1 paragraph I will select the ID of P1 I

will change the color that's the font color to be do they have tomato yes there is for P1 let's change

the color to be tomato because I like tomatoes those are named colors another option is RGB values for paragraph 2 we

will set the color to be a set of RGB values RGB then a set of parentheses R meaning red G meaning green B meaning

blue I would recommend looking up a Color Picker for this I would like a light bluish

color so let's select uh that's good you'll find a set of three values for RGB these values range from 0 to

255 we will paste those three values within the set of parentheses and there's that blue color let's do this

with the background color too let's change the background color from a named color to RGB values RGB

parenthesis let's go with whatever color this is 41 41 41 and there's that new color then we

have heximal values for P3 we will change the color to be some hex value let's go with a green

color that's decent heximal values are a combination of numbers and letters the letters range from a to F we'll copy

this hex value then paste it hex values with CSS should start with a hashtag and there's

that green color let's change the background color again let's go with the lighter color this time 54 54

54 there we are okay lastly we have hsl values for P4 color colon now if you're using vs code

here's a little trick we can pull up a Color Picker let's type a color like black click on the box and there's a

Color Picker that's built in for hsl we can click the top bar here H meaning Hue s meaning saturation l meaning

lightness let's go with the purple color we have one value then two percentages let's change the background

color again using hsl I'll pick something a little bit darker that's good all right everybody

so in conclusion with CSS colors you can pick either color names RGB values hexadecimal values or hsl values through

the remainder of the series we'll be using hsl and well everybody that's an introduction to CSS

colors hey how's it going everybody in today's video I'm going to show you everything you need to know to get

started working with fonts and Google fonts in CSS so sit back relax and enjoy the show all right let's get started

everybody we will need an H1 element why don't you go ahead and type in your name if your full name's pretty long just use

your first name I guess and we'll need a paragraph to generate some text and VSS code you can type laurum then hit tab

that is good enough for now to change the font style we will go to our CSS stylesheet

I'll select our H1 element to change the font we can set the font family property then pick a font I would recommend a s

serif font serifs are these little projections on each character after each brushstroke s serif fonts don't have

these projections s serif fonts are easier to read on a monitor or mobile device I'm going to pick the Sans serif

font of verdana now not all fonts are universally accepted by all web browsers

for some reason if we can't display verdana it's good practice to have a fallback font one that's web safe so to

add a fallback after your primary font separate each font with a comma let's pick

aiel if a web browser can't display verdana the next available font is aiel that's why you may see two or three

fonts listed for a font family they're all fallbacks let's change our paragraph element I will set the font family to

be Luca console if the font name contains any

spaces you can just place the font name within a set of quotes for a fallback I'll use corer

new if we can't display the first font we will use the backup font now to change the font size there

is is a font size property normally it's 16 but you can adjust that number here's

18 here's 14 here's one it's really tiny you can barely even read it like it all another

unit of measurement is em think of em as the standard 1 em means 100% it's the normal size 1.1 em is

110% 1.5 is 150% 0.5 is 50% you may see either pixels or em as a

unit of measurement for the font size let's stick with 1 em you can change the font

weight normally this is normal you can change that to bold if you so choose there's also font style again it's

normally well normal you can change that to italic that's enough for basic fonts now I would like to introduce Google

fonts head to this website fonts. goole.com this website is free to use find two fonts that you like you can

also narrow down your search too for example I do not want any serif fonts because they're difficult to read on a

monitor I'll just use these two for convenience I'm going to open these in a new

tab all right we have robato and Open Sands I'm going to select one of these fonts I'll go with 400 regular I'll

press the plus sign next to this font and we'll do so with our second font I'll go with light

300 to use these fonts we need to link our HTML file with a stylesheet we can access that stylesheet by going to view

selected families be sure that this radio button is selected for link then we will copy this

link within our HTML file within the head element I will paste that link we now have access to those two

fonts my first font was robado my second font I already forgot the name of it open

Sans and there we go that's how to link to the Google fonts API now if you do prer these fonts

can be loaded from either a remote server or locally installed on a user's computer for convenience I'm going to

create a new folder within my website folder named fonts then heading back to Google fonts

view selected families I will download all once we have our file it's a zip folder I'm going to unzip it

we are looking for these ttf files they look something like this all we need to do is drag and drop these ttf files into

our fonts folder I forgot which one I used I think it was robot

light these fonts are available locally we no longer need to link to the Google fonts API we can delete that

link so now what we need to do is go to our style sheet and create a font face rule we'll begin with the first font at

the top of our stylesheet type at font-face curly braces we will set the source attribute

to be a URL then add a set of parentheses the URL is going to contain the relative file path to one of these

fonts I would like robot so I'm going to copy the file name this is within the fonts folder I'll

place that first then paste the name of that file then a semicolon at the end I'm

also going to set the font family property then I can come up with the name for this font I can keep it the

same or change it I'll keep it the same though this font shall be known as robot

light for my H1 element I will change that to be Roboto light that has appeared to work even though we're not

linked to the Google fonts API let's add another font face rule we will use our second

font fonts slash whatever the heck is listed here I'm going to rename this this font shall

be known as Open Sands so we need to change the font for our paragraph to that new

font there we are all right everybody so that's a few different ways in which you can work with fonts in

CSS hey how's it going everybody in today's video I'm going to explain borders in CSS we'll need some sample

elements to work with I recommend creating an H1 header tag type in maybe your

name and a paragraph we'll need to pair paragraph tags I'll generate some text by typing

laurum then hitting tab let's go to our CSS stylesheet let's add a border around our H1 element H1 curly braces we can

select a border Style with the Border Das style property first we have solid our border is a solid line there's

dashed we have a dash line

dotted double for a double border Groove

Ridge inset outset or none if something has a border

naturally you can remove it let's pick a solid border you can change the width of the border with the Border width proper

property border Das width by default it's one let's increase that to two or even

three four five border width is for the Border thickness I think three would be good

for this example you can change the color with the Border color property then pick a

color I'll use the built-in Color Picker and use hsl values let's go with a purple color

something like that's good you can even round the corners with the Border radius property border-radius

the higher the number in pixels the more rounded the corners are going to be that's five this is

10 15 20 okay just out of curiosity what if we do like 100 okay it seems like

there's a maximum you can only round the corner so far so it looks like the max is 20 all right there's also a shorthand

syntax in place of listing three different properties for the style width and color we can do that all at once

let's eliminate these three lines we'll use shorthand Syntax for the Border I would like three pixels solid then I'll

list a color and use the Color Picker again I would like purple I don't quite remember what we had but it was

something like that yeah that is the shorthand syntax you type border the Border width the Border style then the

Border color but border radius is still a separate property let's add a border to our paragraph now we will select the

P tag there is directional shorthand syntax if you want just one of the borders let's begin with the bottom

border Dash bottom then we can list a border width border style then a color and this would only apply to the bottom

border of our paragraph let's go with three pixels solid then red but I'm going to

pick a more specific kind of red there we go so that is border bottom we're only applying a border to the bottom of

our element then there's border top border-top let's go with three pixels solid again then a

color I'll go with yellow there we are border left three pixels let's try dotted this

time then orange that's good then border right border Das

right three pixels dotted again then I will pick Green maybe like a light green there we

are then we'll set the Border radius as well this would apply for all of the borders let's try 10 not bad all right

everybody that is how to create CSS borders hey everybody today I'm going to show you how we can create text shadows

and box Shadows we'll need some sample text to work with I'll use an H1 element type in your

name and we will need a div element we will eventually create a box I'll give this div an ID of box one good

enough I would like to give this H1 element a shadow I will select my H1 element I will set the text Shadow

property to be we need two numbers a horizontal offset and a vertical offset let's do one pixel and one pixel we have

an offset to the right of one and down by one if I were to increase the horizontal offset let's change this to

two well the shadow is moving more to the right let's try five

10 50 the first number is for the horizontal offset let's change that to three the second number is for the

vertical offset I change that to five while the text is going more downwards 50 would be this all right

let's keep that at three though you could add a third number for a blur here's a one pixel

blur two 3

4 five if this is a really large number like 100 you can't even see the shadow anymore let's stick with five that's a

decent amount you can even change the color too let's pick a red color H that's good you can add more than one

Shadow within the teex shadow property for more than one Shadow effect each Shadow is comma separated so add a comma

afterwards let's copy what we have paste it again I'm going to give the second

Shadow a negative offset so it's up and to the left I'll change the color so it's more distinct let's go with the

blue color yeah I don't like that one yeah that's fine all right now let's cover box Shadows let's select our ID of

box one I'll give this box a width of 100 and a height of 100 let's pick a color

too background-color let's go with a whitish color so it's just barely

visible something like that's fine for other elements besides text we have box Shadow and really it's the same process

as before we have a horizontal offset let's do three pixels a vertical offset let's do three pixels again a blur let's

do five pixels and a color if we so choose but I'll keep that the same now our box has

a 3D pop effect which is pretty sweet all right everybody so we have text Shadows for text and box Shadows for

other elements and well everybody those are shadows in CSS hey how's it going people today I'm