Full Course Web Development [22 Hours] | Learn Full Stack Web Development From Scratch

0:00hey everyone welcome to the front end boot camp 2022 singular youtube video where we will discuss

0:07about everything that should be relevant as a front-end developer in 2022 and beyond that

0:13includes starting from absolutely scratch with no prior knowledge to actual front-end developer and

0:20this boot camp will be discussing about html css javascript react tailwind react query and github

0:30ci and cd now these topics are extremely important as a front-end developer because they form

0:36the complete backbone of your application from developing to building to deploying everything

0:44is covered in this video if you like this make sure you check out the full stack learning path

0:49on code dam to learn more about how to become a great full stack developer by building practicing

0:56and doing stuff right inside your browser let's go if you're new here make sure you leave a like

1:01subscribe to the channel and hit the bell icon this is free of course and helps the channel grow

1:11hello everyone and welcome to the very first video and the very first course of full stack

1:17web development html and css fundamentals course now this course this video you might see in and

1:24when i'm navigation the website that the content already exists sometimes but this is a recreation

1:30a reshoot of the content to make it more embedded with the hands-on exercises which you will be

1:36doing along the way so if you are watching this updated content congrats you're seeing probably

1:41the best course you can ever find on html and css on the internet and it's completely free so

1:48just to give you a brief idea of what this learning path what this course will be about

1:52we will be starting with html and css from bare bones from xero you need not have any

1:59programming experience any programming knowledge beforehand and make sure you're coming from

2:04the internet fundamentals or whatever courses whatever small courses are before this inside

2:10of our full stack web development learning path or front-end web development learning

2:14path or as a matter of fact any learning path which you have picked on code down

2:19so this is a codem.com exclusive course hopefully you will learn a lot of new things and will have a

2:24lot of fun practicing in the in browser exercises along the way and building projects as you go

2:31i'm super excited to start this course with you and hopefully you are too

2:40hello everyone and welcome back to another video in which i want to quickly go through how you

2:45should use codedam.com the website in order to actually learn effectively so we're going to be

2:51exploring that how we can start with coding and stuff very soon but before that i would

2:57just quickly like to point you towards one thing first of all create an account if you already

3:02haven't and once you do that from a computer what you can do is go ahead and go to your dashboard

3:09and right here you're going to see something known as playgrounds click on the playgrounds

3:13part and start an html on css playground when you start a playground like this you will get a url

3:21which will actually set up a development environment within your browser window

3:28now this is something which we will not just be using exclusively obviously you will be using your

3:34local editor as well but this is something which will be super helpful for you when

3:38you are learning this course why because i would recommend keeping a playground tab open in one tab

3:45and the second tab should consist of these videos or these learning paths or whatever

3:49why because although we will have embedded exercises along the way where you can experiment

3:54this is just a free flow where you can do whatever you want right and i'll be using

3:59this as a place where we can also learn about html and experiment with them without actually

4:06just firing up all the things although we will see that how that works as well

4:11so when you create a playground like this you will get a url which automatically updates and

4:16if you refresh this page your code stays that means you can just practice here whatever you

4:21want and come back at any later time and this url will still work and this is a private url

4:27so it's only with you therefore you are free feel free to just just use it however you want

4:34so that is all for this video from the next video onwards let's get into the programming parts

4:38a little bit setting up your text editor what does that mean and yeah super excited to start

4:50hey everyone welcome back and in this video i'm gonna show you how to set up

4:54vs code on your system and why this is required in the first place because vs code visual studio code

5:01is the name of an editor which you can use offline to do the same thing which you will do here

5:07but on your local system right so first things first we are learning about web

5:12development right that means creating web pages that means visiting urls like these and writing

5:18the source code which you probably see you know something like this for example so you'll

5:23be writing this html don't be afraid of the minified syntax but you will be writing this

5:28sort of code and you need some text editor to do that which provides you with all these colors and

5:34auto completions and stuff like this because as programmers we want to automate our job as

5:38much as we can that's why we develop all this nice colors and syntax and

5:43things which tells us if there are any errors and so on so what you need to do first of all

5:48is go to google and write vs code and once you write vs code you're going to see that you get to

5:54visual studio code website which you can download and pick up any vs code version according to your

6:01system right in my case i will go with mac os but if you are running windows you will select

6:05this if you are running linux you probably have vs code already or some sort of text editor but

6:11once you do that once you have vs code or any any sort of text editor you can launch it and the way

6:17you launch it is first one is either you just go ahead for example on mac you can write code

6:23and it will appear like this on windows you can go to start and search for code or from the terminal

6:29as well so once you have installed for example on linux and mac at least that's what i know

6:34go to your command line whatever it is for your terminal whether you call it terminal your shell

6:40and write code and hit a space and a dot now what does this mean that means that open the

6:46current directory inside of vs code and you should know a little bit about this

6:51from if you don't know you can check out the linux clr fundamental scores which is again

6:56a course which will be there but don't really worry about the syntax right now once you do that

7:01something like this should open and obviously not in your case this folder would be blank

7:05so once you open this you'll see that this looks very similar to what we have right here in our in

7:13our you know in our online editor so you have the vs code which gives you an editor all these tabs

7:20and stuff and you get similar things right here inside your code damage data as well the benefit

7:26of this is you have these temporary playgrounds which you don't necessarily need to care about

7:30and you can create all these files and folders and just go ahead and use them and when you do

7:36you actually just get the updated output so you can write your your name is xyz and this will

7:43automatically reflect we handle the heavy lifting for you plus these urls automatically update so

7:48you don't necessarily need to worry about you know your work getting lost for example so it's your

7:54wish you can choose to continue this course on vs code which is also fine or you can choose to stick

8:00to a code damn editor which will allow you to just focus on the important parts that is setting

8:06up your html document correctly but if you wish to do your code if you wish to your course like

8:12this what you have to do is let me just go ahead and actually don't worry about this command which

8:17i wrote right here but let me just go ahead and actually tell you how you can set up a

8:22development server here as well so what you have to do you have to create an index.html file here

8:28you have to write whatever we will be writing for example let's just write hello world for example

8:34and what you have to do is go to this extensions tab here and search for live server right

8:44hit that click on the first result this should be the icon install this live server in your vs code

8:51and once you do that what you'll see is that okay it's ready right the next thing you need to do

9:01is right click on this file and click on open with live server

9:06right and that's it once you do that you will see that you have a browser window opened and now if

9:12you do hello worlds like this you will see well it does not it does not automatically reload because

9:19you can see a small notice library load is not possible without body or hit tag so we'll learn

9:25about body and head don't worry about that yet but just make sure you write all your code inside body

9:30for example so once you do that and now if i hit anything you'll see it automatically refreshes but

9:37i mean you know just to start i would say rather stick to this because this is much more simple

9:42in terms of the changes which are reflected you don't necessarily need to set up anything

9:46right here but that's how you can and you should set up vs code on your systems it will be super

9:52important as a developer when you're working on your own projects and make sure you have that

10:02hey everyone welcome back and in this video let's just go ahead and actually write our first

10:07ever html document now first things first well we already have written one

10:13but let me just go ahead and walk you real quick what exactly is happening here because this

10:18whatever happening whatever is happening here this is very close to how real world things

10:23actually work as well there is no abstraction here there is no magic work going on so let me tell you

10:28so the first thing is you see right here we have a terminal environment with us and it gives you

10:34something something where you can actually write stuff so what is the difference between this and

10:39this file well you see this computer right here this is this is an actual computer which is

10:44connected to a computer running in the cloud now you know from your internet fundamentals course

10:51that you need a server to deliver a web page to a client right whenever you write google.com for

10:58example there is a server owned by google.com which sends you the html so whenever you go

11:04to google.com this html this nice page which you are seeing is actually this html code which your

11:11which your browser is getting and how does this html code arrives at your browser that is because

11:16some computer some server somewhere in the world somehow figured out that hey this guy or this girl

11:23needs uh needs to see google.com and i need to send him or her this page right so that's how

11:29it works but what is that computer where is that computer i mean as a user you don't care but when

11:35you're creating a website when you're creating something you need to care because that computer

11:40is the one which will deliver the content so what is happening here is that we have a computer here

11:47which is a remote computer and that is connected to this file system so what that what do i mean

11:53by that for example let's say i create a new file this is so cool dot txt hit enter and go ahead and

12:02write ls here which is list files you see i get this is so cool.txt file here if i write hello

12:09world in this file for example what is happening here is that we have actually modified this file

12:15on the server so we can see that from this is so cool.txt right so you see we get hello world

12:22so that's fine this file system is synchronized to this remote computer and this is our window

12:28of actually running any command on that computer but how do we serve this file then how does that

12:34appear here the reason we do that is because we run a server now you don't necessarily need to

12:40worry about this command but whenever you refresh this page whenever you do anything this command

12:45automatically runs and what this means is that we are serving this file at this page for you

12:52so whatever you write here if you open this in a new tab and if i go to index.html and write hello

12:58whatever you write here that will automatically be fetched right here just like your vs code live

13:04server extension right so you don't necessarily need to worry about any of these details

13:09don't necessarily need to go any in any of these details i just wanted to give you a picture

13:14of just just telling you what exactly is going on so that you don't necessarily feel lost when

13:20you're into this interface but you will be using this interface in your exercises as well which you

13:26will see along the way and this will be super fun because this is a real environment when you are

13:32working on a local system that's exactly what you will be doing as well the live server which you

13:37use runs exactly this this thing somehow more or less but abstracts away this terminal thing so you

13:44can just you know for here as well you can just minimize that if that bothers you just keep on

13:49working here so technically a hello world document in html is just a hello world and your browser

13:55will be able to actually show you hello world here so you have written hello world technically

14:01speaking right and we don't necessarily need anything else i'm also going to delete this file

14:07so that's it once you write an index.html file once you create that and if you're on codem.com

14:13that's how you're going to write it if you are on vs code for example if i go back to vs code

14:20and if i write hello world hello world like this hits hit save and if i click

14:26on open with live server you can see i get the same output right pretty much the same thing

14:31which you get here now i have shown you on both the places but i'm going to be continuing working

14:37with the code down playground you can copy all of the things which you do right here run it run

14:42it with a live server and it will be exactly the same thing so you can continue wherever you want

14:49so yeah that's pretty much it for this video hopefully you were able to write your first

14:54hello world into web development this is the seed of something big this is the seed of your web

14:59development tree which will form i'm pretty sure all the best for your journey and this journey

15:06will take time it's not easy it's not something you can learn overnight but it will surely

15:12and definitely happen if you keep on working on these practice exercises these labs which

15:17you see on code dam these videos which you complete and you will definitely get there

15:27hey everyone welcome back and in this video let's just go ahead and discuss about comments in html

15:33and quickly go over through why you would ever need them as well so you see although we don't

15:39have a perfect html structure html document here because if you go to sites like google for example

15:45and view page source for them you will see they actually include some cryptic

15:50you know doctype html and then i don't know exactly what that is but you see that there

15:56there is actually code here but we haven't written any sort of code right it's just hello world as

16:01an english word so that's fine we'll get into that but before that you could see whatever

16:08i'm writing here that's actually appearing on the page and as developers what we do a lot of times

16:14is we just leave comments at different places commence is just a fancy word of saying that hey

16:20i want to write some english sentence or something but that necessarily is not a code right and i

16:26don't want it to be parsed as a code so what we can do is we can go ahead and use this syntax

16:33which is if you look close enough is a angular bracket an exclamation mark and two dashes

16:40and you need these two dashes and everything in order because syntax highlighting here

16:45would also help you you see that syntax highlighting is not necessarily working here

16:49and sometimes you know you will see that it is you know it's still working kind of because html is a

16:55really bad programming language if you say like that because it is very forgiving but the way

17:01comments start is like this where you have an angular bracket exclamation mark and two dashes

17:07and whatever you write inside of this whatever i mean you can write anything and everything

17:13it will just be not rendered by browser at all right and the way you close the comment

17:20is two dashes again and a square bra and an angular bracket so you see if i write something

17:26outside this that appears just fine but nothing inside this comment block so that is pretty cool

17:33also if you go ahead and take a look inside this pages source code you will see google chrome

17:39actually turns this into green and the screen block is usually means that this is a comment

17:45so that's it that's how you write a comment so what you can do now is just under hello

17:51world you can write something like hey i did my first html program error you know and you can

18:02include any sort of emoji any anything you want basically like i said nothing escapes the comment

18:08block it's like a black hole for html whatever you write here it does not get out on the page

18:20hey everyone and welcome back to another video in which we'll be learning about

18:24tags in html and tags is super important the fundamental building block of an html document

18:32and my document i just mean this html file so i'm gonna remove this and we're gonna head over

18:37to google again and if you take a look at google's source code which i did by right clicking here and

18:43clicking on this view page source what we see is that this document let's just ignore the doctype

18:50html for now this document consists of these purple things these purple stuff right html

18:56is purple script is purple if we go a little down and i believe let's just enable line wrap as well

19:03so if you go a little more down you will see i mean this is google is

19:08basically garbage let's not take example of google let's go to example.com instead oops

19:15and not the inspect but right click and view source ra this is this is good so you can see

19:21example.com consists of multiple purple tags and what these things are these things are actually

19:28called html tags now what does that mean well you see that the only information your browser

19:36is getting from that remote server that remote computer is a text document right it's a text file

19:44but it has to construct a ui a user interface a beautiful user interface out of it

19:50which might have a favicon here like this fancy icon which might have text here in the browser

19:55which might have animations which might have layouts which might have colors and all that

20:01stuff so we need to deliver a lot of information like what is animation what are the colors what is

20:09the content what's the font size what's the font family that means what's the font type which thing

20:16is a link which link should point where and all this stuff we have so much information to tell the

20:22browser that it's simply not possible if you're if you start writing it in english or something right

20:28i mean it's possible but you don't get the idea that you you know the browser will be confused

20:34what to do so what we developed is actually called html which is hypertext markup language and this

20:40language consists of a lot of tags these tags tell the browser how to behave on a certain feature

20:48for example this title tag right here which you see example domain is responsible for showing this

20:54example domain in the title if i for example go ahead and use the same thing in my playground here

21:02example domain one two three four five like this and open this in a new tab you can see we get an

21:08example domain one two three four five like this in the browser right so this title tag is one of

21:14the many examples one of the many tags which we will use but that's how the thing works and

21:20you can see that we although we are writing only title it still works in our case right so why the

21:26hell has this person whatever the developer was doing here has written all of this stuff what's

21:33the point and we'll get to that we'll get to that in the next video but to understand what our tags

21:40tags are simple well fundamental building blocks of html documents which tell the web page somehow

21:49how the content should appear or how the content should work or even how the page should behave

21:54in this case just setting up the title so we have a lot of tags for example a p tag

21:59which stands for paragraph can display just a paragraph a div tag for division and so on

22:05we'll discuss that won't want to rush into that right now but don't worry we'll discuss that

22:12so yeah that's pretty much it for how the tags work tags 101 we'll get into more information

22:18about an html document tags attributes and so on really soon from the next video

22:29hey everyone and welcome back to another video on tags in html and css we're going to stick

22:35with this for a long time and we're going to be discovering a lot of tags along the way but

22:40i want what i want to go ahead inside of tags is is styling with simple html tags now although we

22:47discussed like what could be the behavior the behavior could be colors the behavior could

22:52be ui the behavior could be style sheets which will eventually get into but the simplest one

22:58is headings right h1 h2 h3 h4 h5 h6 this goes up to h6 and you can say i am h1 tag like this

23:09so what's happening here let's take a look inside of html the first thing you have to realize there

23:14are two kinds of tags the first kind of tag is where you open something you open a tag like

23:21this and then you close a tag so if you look close enough you will see that i'm closing it with the

23:27forward slash like this right and then i'm writing the same tag name basically so that means whenever

23:34you open a tag you have to close a tag not necessarily with some tags which you will get into

23:40but it is necessary in this case right so let's say you know we have already seen title tag how

23:48it works so a title lag is also a opening and a closing tag so it's not a self closing tag

23:54p tag is a paragraph tag you can see it's also opening and closing tag so all these stacks of

23:59heading you will see i am h2 tag you also have to close them right that is the concept in html

24:06you open a tag you write whatever you want and then you close something if you nest tags for

24:12example let's just go ahead and see what nesting means so i opened and closed a div tag this is

24:17a this is a block tag which just means that hey you're trying to create some division on the page

24:24this does not necessarily do anything on its own that means if you just write content inside it

24:28it'll just appear plain just like p tag but it's just for you know web developers love to use div

24:34tags everywhere so what do i mean by that let's say if i open an h1 tag now i have to close this

24:42h1 tag in order that means you can see what's the hierarchy div opens h1 opens h1 closes and then

24:50div closes so it's not like div opens h1 opens div closes and then h1 closes you will see that it

24:57still works in the html but let me tell you html is a bad programming language don't consider html

25:06to be a good programming language because html is super forgiving right html will allow this code

25:13html allows any sort of code i mean you can never really crash an html document as such because the

25:19browser will try to make sense of anything and everything you throw at it that's why our just

25:24our hello world also works whatever we write also works without any tags but technically you need

25:30tags your browser needs stacks to understand so the one important thing is always try to make sure

25:38that your tags are closing in order that means div h1 h1 div it should always happen in this way

25:46if it does not then your html will be considered as broken your browser still might be able to

25:52make sense of it somehow but it could lead to problems so that is one important thing

25:57which you should definitely keep in mind the next thing is super simple i mean if you just

26:02keep on doing this you will soon realize that let's say if i duplicate this for h4

26:10and h5 you would see that after h6 i mean you will see a couple of things first of all

26:19you see this is the h6 although you know the text is wrong but you can see it by the size

26:24so it's 6 h5 h4 h3h2 h1 but there is no h7 so you see h7 also does not get the syntax highlighting

26:32so that's a little bit of hint from our code damn website as well as the editor

26:36that hey this stack probably does not exist right so you can see whatever you write an unknown tag

26:42in html it still is not gonna complain to you but you can see that you lose that syntax highlighting

26:49and it also appears just like regular text right so you don't necessarily need to use this

26:55so yeah i mean this is a very basic tutorial about tags again you need to spend a little bit

26:59more time with tags we'll be working a lot with a lot more tags eventually but this is a start

27:11hey everyone and welcome back to another video and in this one we'll be reviewing a super important

27:17thing a super important concept which is around attributes in html now let's just go ahead and

27:25first of all see what i'm talking about so i want to create i want to create a link which takes me

27:34to codedam.com fair enough i have written that in english but it does not work there is no link here

27:41so how do you create a link well you guessed it right you have to create another html tag

27:47right but a link is a very generic thing right so you cannot really just have a tag for example for

27:55go to google right that wouldn't make a lot of sense because now let's say if i want to go to

28:01google.com a what would i do there is no way for me to just create those many infinite tags so

28:10what html allows you to do is that for these generic purposes where you can supply more

28:17information to your tag this is by the way this stands for anchor tag a tag and it's used to link

28:22pages different pages that's like you know the og tag of the internet because internet

28:28literally the web literally means a web of interlinked pages so a tag allows you

28:35to link one page one page to another and so on so what this a tag allows you to do and a

28:41lot of other tags as well is it allows you to set a certain attribute an attribute is

28:46just some additional information to that tag which may or may not be required for that

28:53tag to work properly so what do i mean by that in this case in the a case the anchor tag

29:00the important attribute is to tell where do you want to go otherwise it cannot work right

29:06so what we use for that is an attribute called href and the way we give an attribute is a space

29:12after the tag name and that attribute name and an equal to sign with the value inside quotes now

29:21you would see some people just writing quotes without value wins without code and it works but

29:26this is not recommended this is not recommended because if your value has spaces then this will

29:31break so always always try to put your values inside double quotes single quotes also work but

29:37i prefer double quotes so yeah that's it so now we can go ahead and do give it a link https codem.com

29:46and you can see it turns it into a different color because this is like the default browser style

29:51now if i open this in new tab because it won't allow me to just go into

29:55i mean we'll talk about iframes later but it will not work if i click it right here

30:00if i go here and if i click on this you can see my browser window got redirected to codedam.com

30:07right so if i click on this again you can see it works just fine and you can see by default when

30:12i'm clicking on this you also see that turns into red and all of this behavior is browser's default

30:18things which are customizable you have that power to customize them how we'll look into that but

30:24just know that you can customize all this behavior so this tutorial was meant to do two things first

30:30thing is introduce you to anchor tag and second thing is to introduce you to attributes and

30:35href is just one of many many attributes which are there doesn't mean you need to learn them

30:41all but that does mean that hey you need to be aware about what attributes fundamentally mean

30:48they mean that you can supply additional information to the tags on the page right

31:01hey everyone welcome back and let's just go ahead and quickly discuss about paragraph tag and also

31:07an important concept in this video so first of all if you can observe what's exactly happening

31:14here is that you will see that everything in in is in its new line right so h1 imh1 tag is

31:22newline h2 is newline s3's newline and so on so what is happening here exactly so what i want to

31:29discuss in this is paragraph tag and a couple of other tags but i also want to discuss the

31:34concept which is so important that you should be just just make sure that you understand this

31:41because this will be a very important thing which you will also discuss in the css tutorials there

31:46are two kinds of tags in html roughly speaking and majorly speaking actually the first kind of

31:54tag is a tag which is called a block tag now what this block tag means these are the tags which take

32:02up a complete block of row on your html document so you can think of these tags as you know just

32:10just completely taking up the space so this h1 tag does not take the tag where the content ends it

32:17actually takes the full tag right and i can help you with that if you just excuse me for using css

32:23here right just excuse me for using css this is just for demonstration purposes don't worry about

32:29the syntax we'll discuss this when we start css but if i go ahead and give an h1 of background

32:38oops background red you will see oops what the hell am i even doing h1 of background red you

32:48will see that this tag right here you can see it takes up the full full space it does not end here

32:54so h1 is a block tag similarly h2 is a block tag similarly h3 is a block tag

33:00h4 is a block tag h5 is a block tag and so on how do we how do you know that h1286 is a block tag

33:09well you don't this is just this is just something which is there right you have to

33:14you will eventually know which tags are blocked which tags are inline the second tag

33:19but yeah right now whenever you come across a certain tag just try to put it a background if it

33:23is trying to span the whole row then it's probably a block tag now second kind of tag is called an

33:30inline tag let's just change the selector from h6 to a and you can see now the anchor tag which you

33:38have at the bottom is slightly different you see it does not take the full width so what's

33:43happening well the thing which is happening here is that a or the anchor tag is actually an inline

33:50tag so what's the difference the difference is that if you have a sentence let's say if i have

33:59a div tag for example right and if i am if i am writing a sentence and if suddenly a block

34:11tag comes in then it gets its new line wait block tag says hey dude i'm not gonna continue

34:17in your own line i'm gonna get my own new one and that's it and that happens again and again

34:24but if i am writing a sentence like this and then an inline tag appears you can see it just

34:32continues in that right so this means i can just link to something in a paragraph and if you think

34:41about it it makes sense i mean the creators of html people who actually designed these block

34:47and inline tags they thought about this that most of the people when they will be writing content

34:52on the web they would probably be putting links inside paragraphs right so the paragraphs need

34:57to just continue as if nothing happened they don't necessarily want everything on a single new line

35:03but for heading i mean it makes sense you would not necessarily just be writing something in a

35:07paragraph and then suddenly the text become bold and four times larger and you know just

35:13continued working like that so what we came across is the notion of these two things the first thing

35:20is an inline tag an inline tag is nothing but something which just takes as much width as it

35:26wants and does not spawn a new line basically and the block tag which is something which

35:32takes the complete width of the screen of the container i should rather say not the screen

35:38and yeah just does not let anyone else occupy any any sort of space

35:44so paragraph tag again here is an example of a block tag so if i do this is a paragraph

35:52and this is some text so you see by default if you are writing this text this is just inline right

35:58because you don't have necessarily any text so of course you wouldn't expect every single character

36:03to get its own line right so that means everything is in line here so this is in line but if i switch

36:09to a new tag called span you would see that this is actually inline right paragraph tag is block

36:18because it gets its own new line and does not allow entering this line above but if you switch

36:24it to span again you get you know it's it's fine spam says hey it's fine just share a line with me

36:30so yeah this was an introduction to paragraph tags span tag block tags and inline tags and don't

36:38worry about them like i said you will eventually learn about a lot of these tags and what their

36:43behavior is if you would have guessed div tags if you would have guessed by now diff tags are

36:48actually block tags right so div tags just create a division that means if you're writing this thing

36:55it will not be just continuing with the div itself right div says that hey this whole block is mine

37:02go ahead and continue from the bottom right and it makes sense it does not make sense for your

37:08inline tag to contain a block tag right because the point of an inline tag is to actually be just

37:14limited in width and if your inline tag has a nested block tag that does not make

37:19a lot of sense but don't worry about that yet just understand that paragraph tag is

37:24nothing but a block tag which just creates a full container with area for your content inside

37:32right that's it this is all a paragraph tag is similarly div is also all that else right they've

37:40also just you know just creates a space the only difference subtle difference you can say that

37:46browser actually styles the paragraph tag a little bit different you can see browser by default gives

37:51us a little bit of margin at the bottom which is this white space which you see if i switch

37:56to div for example here instead of paragraph what you will see is that that white space is

38:00gone right so although it still is a paragraph tag uh although still it's a block tag but that white

38:06space is gone basically so you don't have to worry about that but yeah i won't necessarily say worry

38:11about these details yet but just understand that's how the things more or less work in the html space

38:24hey everyone welcome back and in this video let's just quickly review and in a couple of further

38:29videos as well just quickly review some common html tags right so i'm going to get rid of the

38:34style tag which we'll get to when we start css but the next tag which i have in mind is a button tag

38:41so a button tag basically like the name says it creates a button i am a button on the screen

38:49now you can go ahead and click on this you know and pretty much that's it that's that's all this

38:55button do but what i want to touch into this video is that why do we have i mean like i said we can

39:03pretty much customize almost every single aspect of these stacks through css when we start css

39:10i can make the h6 tag as big as h1 and h1 tag as small as x6 so i can reverse this

39:17behavior right away when we start with css right when we are working with css

39:23i could create a div as a button i could create a button as a div and you might have

39:28just guessed that button is also a inline element at this moment right because the text continues

39:35now the reason then why do we have these names all over why don't we just have divs

39:42and you know title for example some certain tags which have special meaning

39:46and then all of the tags should be div why don't we have that that is because html as a programming

39:53language as a markup language was built to have a semantic some sort of semantics why because okay

40:02it's fine i mean visually i can tell that this is the largest heading this is the smallest heading

40:08but your code should also be able to tell that without actually being parsed into the web page

40:16why is that important that is important because of accessibility reasons for example if you have

40:21an h1 on the page that usually means that hey this thing is important this heading is important why

40:27because your browser knows your accessibility readers on people who are disabled know that hey

40:34this is an important heading that's why it is h1 similarly if you have a button your accessibility

40:40reader knows that this is a button which could be clicked most likely your browser would be able to

40:46tell that to your reader right whatever it is so the reason for you know first of all if we

40:51just used divs all along it will become super boring real quick so that's one of the reasons

40:55and the second reasons is to actually give your code meaning that's why we have all these names

41:01to these stacks right but yeah just to discuss a button that's how you create a button that's

41:06pretty much it we can customize this behavior and we can add a lot of interactivity with it

41:11once we learn javascript then we can attach event handlers that when i click on this let's

41:16say this h1 tag should turn red or this h2 tag should disappear or this h3 tag should change to

41:24you know a bigger text font size whatever so we can do all that fun stuff once we

41:29learn about javascript but let's not get our you know expectations real high right away

41:34there's a there's a bunch of work that still needs to be done um so yeah that's pretty much it for

41:39this video i hope you understood about button tag but more importantly why button tag is right

41:51hey everyone welcome back and in this video let's just go ahead and take a look at

41:56image tag in html now image tag is of course really important because images are an integral

42:03part of our communication and how we perceive the world so html allows us to embed images directly

42:10with the ease of a single html tag so what i'm going to do is i'm going to create a new tag

42:16right here after creating some space for me and i'm going to say img and one thing you should

42:22note here is that i hope you remember our talk about the block not exactly the block sorry the

42:30self-closing tags and the tags where you have to close it again right so so far whatever tags we

42:37have seen they have to be closed for image tag that's not the case that means if an image tag

42:45is there then it need not to be closed right you would not write an img like this this is not

42:52valid html and you can see your editor is also reflecting that because it does not have a syntax

42:58highlighting so image tag is a tag which is an inline number one inline tag and number two it's

43:06a self-closing tag that means you do not need to close the stack and it seems like a fine decision

43:14to me why because once you have an image i mean you could technically think that hey

43:20i will specify the url or something here but that's not how it works you just specify a url

43:25as an attribute and that's it you're done then the image appears and then you customize the width and

43:30height of the image also through the attributes so that means it does not need any content that

43:35should go in between right so that means it does not need a closing tag so therefore therefore you

43:40don't need to include a closing tag and as a rule you should not include a closing tag so i just

43:48have an image tag but i cannot see anything so what the hell is happening well nothing

43:52is happening the reason for that is because you haven't specified all the relevant bits and pieces

43:58the first bit which is the most important thing is that you have to specify src the source of

44:03the image and this should be a url right just like every single page on the internet has a url your

44:11images also have a url so if i go to google for example and if i let's see if i right click oops

44:18i think google has some game or something so let's just go to images section and right here you would

44:28be able to see i have this image for example if i right click on this and open image in new tab

44:33you will see this is a url which i have right and if i copy this and if i go to my web page again

44:40and paste this right here you will see i have an image with me so this image is embedded directly

44:46from this url you can see into my web page now whenever somebody visits my website like this they

44:52could see a nice big image right so that's cool but let's say i want to customize the width and

44:58height for this now you could technically go ahead and specify a width and a height attribute here

45:06so 200 and height is 400 300 but don't do this trust me don't do this there are better ways

45:13to do this with css and this is also deprecated that means it will work for legacy reasons because

45:20you know the older web used to use the syntax but the way we do it now is we do it with css

45:26right so what does that mean that means we will be using the css programming language to customize

45:33the dimensions of this image for now it's fine i mean for testing purposes it's fine but whenever

45:39you're writing applications make sure you customize the images with css and not with

45:43these width and height attributes with html let me just quickly tell you one more thing the thing is

45:49you might find some tags which work right but are deprecated so what are these tags these tags are

45:57usually some tags which have been upgraded to some modern alternatives either in html itself

46:04or with some css rules for example a deprecated tag i can think of is a center i mean it's so

46:12deprecated that the highlighting has also stopped working um this is some text in center right

46:21so you can see although our text got in center because browsers apparently still support it

46:26but this tag is deprecated right this stack should not be working you should not be using this

46:31instead again you should be using css for this which we'll see eventually but these

46:36are some of the examples of deprecated tags and deprecated information and you should be very

46:41careful whenever you are learning from outside resources i mean at goddamn i can guarantee you

46:47that as long as you are on code damn you will we will not be teaching you any deprecated or

46:52older practices but just just keep that in mind because with web development with html

46:57html has been around for 20 years right and a lot of modern syntax has just been developed

47:02in the last four five years so you don't necessarily want to learn bad practices so

47:07that's one of the examples plus again like i said there are better ways to do this on image

47:11tag again which we'll take a look at when we start css but that does the job for now

47:22hey everyone welcome back and in this video what i want to do is actually go

47:27ahead and explore a new tag in html5 which although has been there since 10 years but

47:34still it's a new standard in html and that is how you can embed videos so if you go a little

47:41back in time just to share a quick story with you the support of videos was actually very very bad

47:48in terms of how the browsers could play i mean images were fine text was fine but videos had to

47:53you just have to install adobe flash player download codecs do all sorts of fun stuff to

47:59actually get something working and this is i'm talking about 2005 2006 time since then a lot

48:07has improved since then what has happened is that of course there have been new standards of video

48:14that allows us to transfer videos more efficiently but the support of the browsers have also majorly

48:20improved and that means browsers now allow you to embed videos natively that means just like

48:27an image an image can you can just have a raw jpeg image for example this imagenzin.jpg so i'm

48:33assuming this is jpeg you have this raw image with you and you can embed this on your page similarly

48:40you can do the same thing with videos right and if i go ahead and copy this example video with me

48:47what i can do is make some space for myself first of all and write a video tag like this and unlike

48:54image tag although you might think that video tags should technically be also self closing

49:00because well it sounds like you know fun because you cannot really have anything inside of video

49:06as well but video tags are actually not self closing right so you have to close a video tag

49:12so what this video tag does is that it takes up a source as another tag and this source would only

49:18work and sources like you see you can see source is not a uh you know a tag which needs a closing

49:26tag so a source what it does it it embeds or it tells this parent video tag that hey what is the

49:37place where you should be embedding or where we should be looking for the embedded video

49:42and we tell that hey the source is this video right here and you can see it it kind of gets

49:48embedded right but you can see i'm not able to do anything it almost seems like this is an image

49:53and that is because we do not have controls over this video right i cannot see a play pause button

49:58anything like that so how do you add controls you just write an attribute and that's it you

50:04don't necessarily need to give it a value as long as this attribute in itself is present

50:09that is also fine i mean this syntax is also fine you can just leave attributes like this if you

50:13did not know this before so now you can see once i add this we have controls now right here and now i

50:19can play this video and this video plays which is pretty cool now one important thing which you have

50:25to notice here is that i'm using a raw src video link you know this video is ending in dot mp4

50:34dot mp4 actual mp4 this is an actual video which you can just download and play into your vlc media

50:40player a lot of people might confuse this with a youtube video for example so if you go ahead on

50:46youtube the youtube video starts playing and you might just copy that youtube link and paste it

50:51here that will not work because what you're trying to do is you're trying to paste a video you're

50:57trying to give this source a video but you're actually giving it a web page right it's just like

51:03saying that hey i'm just going ahead and pasting it like this this will not work because this is

51:08not a video it cannot play it right this is a web page so what you need to do instead of this is

51:14actually make sure that you have a valid legit video from somewhere and you can just use this

51:21w3schools example if you want but this will not be useful in case of youtube youtube for example

51:29how you would actually be able to embed a youtube video is when you click on the share you will get

51:34this url but this is not what you want you want to click on this embed somewhere and you see

51:38this you get this weird html string right you can copy this and you can go ahead inside your editor

51:46and you can paste this iframe thing the whole thing and if you go down you can now see it's

51:51it's pretty cool right that you're able to embed a video directly right here and that's me by the way

51:58so um you're able to do that but what is this iframe thing and why this is not a video well

52:05first things first we'll discuss about iframe later the thing iframe does is it actually

52:09allows you to embed full web pages inside and that is required because youtube is clever

52:15youtube does not give you the raw video and why do they not give you raw video because then they

52:20will lose this player this awesome controls and the branding that the fact that this video is

52:26actually on youtube because you know youtube wants to say that hey

52:30whenever you are embedding this video on somewhere we want to advertise ourselves as well that you

52:34are embedding this from youtube so that is why instead of giving you a raw video link

52:39youtube actually gives you an iframe that is it gives you a web page to embed

52:45so that's that but there are multiple use cases of iframe which we'll discuss but other than

52:50that what you need to realize is that video tag is only meant for videos which are raw right they are

52:56not web pages these are actual videos which are present right so you have to be careful on that

53:08hey everyone welcome back and in this video let's just learn about tables and why do you

53:13need them well tables is something which i believe everyone would be able to relate to

53:18it's just the organization of data in a proper way and you would be surprised to know that

53:23a lot of html layouts the complete layouts of the website were actually done with table tags

53:29so i'm gonna just start a real quick with table because it's just gonna make so much sense to you

53:33in terms of how the html tag names are so of course table has an open and a closing tag

53:40which defines a table it does nothing on its own it needs more data so the first thing you have

53:45is a t head which is a table heading right again has an opening and a closing tag

53:50and what you can do is you can start a table row like this so what does this mean this means just a

53:58single row of information and a table row needs a table data right so i can have a column one

54:05i can have a column two i can have a column three right that's it now

54:12the next thing is well i have the table head with me and you can also i think make this th

54:20to give it a feeling of table heading right so it just bolts your text nothing fancy

54:28then what you can do is use a t body which is the table body text

54:32and again the body will consist of multiple rows so i can say this is you know call one value

54:42and this should not be th it should be td which is stable data and call to value table data and so on

54:50call 3 value for example right and you can see even though i'm not organizing it explicitly

54:56in any sort of layouts or anything it just falls into layout properly automatically right and you

55:01can see i can just create multiple such things and although there is no borders on anything

55:06which we can also add but you can see it still we still get a nice table look right with this

55:13actually let me just go ahead and quickly give it a s a border so that we are able to

55:19see what the actual table is and again i'm gonna cheat here by using css so i'm gonna say trth

55:27td basically giving everything a border of one pixel solid black

55:33right so you don't necessarily need to worry about anything right now don't worry about this thing

55:39we'll discuss that but now it just looks a little bit nicer right in terms of what the boundaries

55:43are now the fun part in table is that you can actually spawn certain cells to have multiple rows

55:51or columns right so what you can do is you can say this this element right here this call one value

55:59should have a call span of two that means it takes two columns instead of one and then we

56:06can just throw away the third value right so you see now it looks kind of like you know

56:12just having two values i mean depending on your data it might make sense sometimes it might not

56:18similarly you can give this table data a row span of two right so now what you can say is you can

56:25remove the third value from the next row because you don't need that so you can see now you have a

56:31table data with a call span of 2 which looks like this with a row span of 2 which looks like this

56:36so you can have all sorts of fun stuff and you can imagine if you scale it up to the whole page size

56:42you can create some pretty awesome layouts right with a sidebar with a

56:46um you know a sidebar and a content area header and everything but the problem here

56:53with this this sort of designing a web page is that it is ridiculously hard to make it responsive

56:58what do i mean by responsive a responsive is a web page which just adjusts its layout

57:03automatically with the screen size right so it works properly on desktops and it works properly

57:08on the mobile phones that is something which is extremely hard to achieve with table based

57:13layouts right so therefore we will only use you should only use stable for actual tape tabular

57:20data representation never for layouts right that those days are gone those days are long gone

57:27but yeah you should be aware about tables and how to create simple data visualization because

57:32sometimes you know if you're connecting a back end and you're getting some data

57:36which you want to display in a table that's that's something you should know out of the

57:40box right you don't necessarily need to just reinvent tables in css all the time

57:50hey everyone welcome back and in this video let's just quickly go ahead and take a look at what

57:55forms are in html and forms basically allow you to take input from user to your backend servers

58:05or to your web application and what does that mean that means if let's say you have seen sites like

58:12facebook or google which allow you to log in sign in create accounts and do all sorts of stuff but

58:18when you sign into these websites what happens is that you have to enter your username and password

58:23right so these are input fields where you have to enter this enter the stuff now you accept those

58:30input fields data with certain html tags again which are special tags they are not like p or diff

58:37um but form is a parent container of those stacks which just holds all these tags together which are

58:45required to take the input from the user without any more talking let's just actually create a form

58:51tag right so what this form tag does on its own is nothing you have to specify some input tag

58:59inside this so let's say i specify just just this input and again like i said for image and video

59:06tags input tag is also self closing that means you do not need to have an input tag like this right

59:15because all it does is that that is just creates a space on the page for the user to type some stuff

59:21now you can actually type some stuff right here now this input tag however is super interesting

59:28because you can give it multiple types what kind of input do you expect from the user

59:34so what you can say is input type and now you can see there are so many types right here which

59:39you can i actually encourage you to play around with but i'll just stick with some common ones

59:44so i'm going to start with the text one which is something which the browsers

59:50use by default if you don't specify or what the browsers fall back to if you just enter any

59:56gibberish value right so that does not exist you can see input type text is something

1:00:01which pretty much accepts well text right so it accepts every and any sort of text

1:00:06that's it nothing multi-line nothing as such but just you know single line text

1:00:13well let's just take a look at something like input type password for example so the password

1:00:19field you can see immediately my password manager also kicked in i used lastpass but you can see my

1:00:25password manager kicked in and what i can see is my text which was i was able to enter earlier is

1:00:32now all dotted right so you cannot really see what i'm writing that is important again if

1:00:39you are trying to create a login form you want to have a password field but that's how you do it the

1:00:43only difference between password and text fields apart from the accessibility and all this cool

1:00:48stuff which happens that your password manager is able to stick to it is that it hides the password

1:00:54it hides the text which is entering all right moving on to the next tag let us see um

1:01:01we have number right so the number field only allows you to enter numbers and it also gives

1:01:06you a small slider if you have to use that if you try to enter text it will not work right it will

1:01:11just not take your input now this in no me no way means that the user cannot technically input text

1:01:18on the back end so you should not ever rely on the front end input of the user always but it's just

1:01:24a nice validation where you can just restrict a person to only enter number on the front end

1:01:29then there are things like input type file for example which give you this button where you can

1:01:36prompt the user to upload something right then we have some special things like input type email for

1:01:42example right and what i can say right here is that well it still looks like pretty much what a

1:01:50regular text field would look like right so what's the difference why does this type email exist

1:01:55well you see what we also have is an input type of summit right and what i can say is

1:02:04that this email field is required so now if i try to write something and click on summit

1:02:10you can see that the browser actually gives you an error message by default it says please

1:02:15include and add the rate in the email address this email address is missing and add the rate right so

1:02:20browser till certain extent is able to figure out that an email address needs an ad symbol

1:02:26and you know still not not right because browser says that hey you're still missing some

1:02:31information and if you write something complete and then submit it then it kind of works and the

1:02:36reason it refreshes is because when you click an input type summit something interesting happens

1:02:43which is now we are discussing which is with forms so what a form tag does is it majorly takes

1:02:50two inputs the first one is a method where you specify a get and a post so let's say if i write

1:02:57get here and an action an action is a url where the input of this form should be redirected so

1:03:07just just stick with me here so let's say i have an action of summit right and let me just go ahead

1:03:14and open this in a new tab so pay close attention to the url the url right here is whatever this is

1:03:20and nothing after that right so now if i go ahead and it hit like mayhole at the rate codedown.com

1:03:28go damn.com because that's that's what it'll accept as an email and click on summit you can

1:03:34see well we get summit and basically a question mark and nothing so where did that form data

1:03:40go well technically speaking when you have a method of get it should actually write all that

1:03:47information in the url itself but the reason that did not happen here is because we are missing a

1:03:54couple of attributes the first attribute which you are missing is a name so a name is like my user

1:04:03user's email for example if this is something i give and this is required and let's just go

1:04:08ahead and try this again what will happen is if i write maehol at the rate codedown.com and hit

1:04:14summit you will see inside this url if i copy this url and paste it here you can see this is where i

1:04:21got redirected summit question mark then my user's email is equal to maywell at the redcoatdom.com

1:04:30so this is pretty much something which we probably are getting ahead of ourselves right now we'll

1:04:35discuss this more when we start with javascript but what's happening here is that we are sending

1:04:42the details of this form inside of the url so whenever you use a get it redirects the form

1:04:49with the wherever the route you have specified and all of the data is combined inside of the

1:04:54url right now you can have multiple such things now you are now we are talking right now you can

1:04:59say something like register and have an input type text name username for example and then

1:05:10required for example right so now you have a couple of fields which you have to enter

1:05:15and if i go ahead and refresh oops if i go back and refresh this you can say mahul mohan

1:05:24and if i hit summit you will see i have a username of mihul mohan and my users of this thing right so

1:05:30this information is something which appears right so this is one way right where we are actually

1:05:39the con of this is we are actually exposing this data inside of the url which sometimes

1:05:45is fine sometimes it's not fine so that's one way another way is we actually change this to

1:05:50post but now that's something different that's that's something we would actually take a look at

1:05:55when we are learning about servers and javascript maybe or something how to extract that information

1:06:00out but forget i think it's pretty simple and it's pretty visual as well how it works so that

1:06:06is how you actually communicate your data from front-end to back-end as well so maybe this

1:06:12url is running a back-end script which just takes out these parameters and extract out these values

1:06:18with the key names as well right so that's how you communicate your data from front-end to back-end

1:06:23in a very simple way but yeah in general that's how a form works mostly and that's how you create

1:06:31these things as well now you can pretty much if you want to you can just throw them inside a div

1:06:38and say like your name and throw this inside a div as well and say

1:06:46like your email and you might have guessed like from the earlier uh version of this that the

1:06:53input fields are actually in line in line elements that means they just stack against

1:06:58each other that's why i just threw them into a div tag so that they appear differently

1:07:03and that's it you have a simple small form with you but yeah we're going to be discussing

1:07:09more about forms when we start javascript because that's where the fun really happens where you just

1:07:16stop the form from submitting and use javascript to submit the form in the background why do we

1:07:22do that because we don't want this weird page reload right or maybe you just want some custom

1:07:28validation logic as well so you see this page reload or whatever happens that would not happen

1:07:34if you are using just a regular um javascript thing but yeah that's that's something different

1:07:41but overall i believe this video helped you understand how to work with forms

1:07:50hey everyone welcome back and in this video i want to only focus on a valid html structure which you

1:07:57need to follow whenever you are creating an html page so far we have been doing some ridiculous

1:08:03work with html just throwing tags anywhere and everywhere we like but that is not how you have

1:08:09to create your html documents what do i mean by that first of all let's just go and look at

1:08:16any decent website like goddamn for example and if you go to the view source you will see that

1:08:22there is a certain structure which is followed and even for code dam i think it's pretty compressed

1:08:27so let's just go to example.com and go to this page source and you can see that it does not just

1:08:33start with example domain as h1 and p tags and all that stuff there's a proper structure to that

1:08:38and why is that well this is because browsers need certain parts of the website

1:08:45in certain place certain tags sure if you start with just this diff tag i mean if that is all

1:08:50we had on the page it would not be a problem it will still display the content but this is not

1:08:56the complete html markup right like i said html is very forgiving in the sense it will not tell

1:09:03you that you are doing it wrong but you are doing it wrong so what's the catch what you have to do

1:09:10well the minimum you have to create in order to be actually a valid html document as follows

1:09:16so you have to write a doctype html the stock type html you can see it's not technically a tag

1:09:21because just like comments it also starts with a tag and then an exclamation mark but this

1:09:28just tells that hey your website is using html5 html5 syntax is the recent the most latest

1:09:36supported browser supported syntax this is not exactly you know a make or break thing for your

1:09:42website but you should have this right then once you have that then you need to have an html tag

1:09:49this html tag by itself does nothing right it's just a root container for everything then

1:09:56inside of head tag this is where our styles and javascript would ideally go the javascript can

1:10:02also go in the body tag and so could styles i mean that there's no exactly fixed rule for

1:10:08anything here but technically all your meta tags for search engines your scripts your style sheets

1:10:20should technically go inside of the head of the document and by convention your title tag also

1:10:26goes inside head document so my title so head is like something which does not which is not content

1:10:34which does not appear in the ui but modifies your ui somehow in one way or another or modifies your

1:10:41meta tags or searching and stuff like this now the body tag is the actual tag which actually

1:10:46consists of the real content on your website right so whatever you're writing h1 hello world

1:10:52stuff like this this is what appears on the page for the user right so all of your stuff all of the

1:10:58good stuff actually goes inside the body tag and yep that's pretty much it i mean you need to throw

1:11:04a couple of metacare set utf-8 things this is mandatory because otherwise your page would

1:11:11actually break and let me show you a fun way of actually breaking a page like that i'll tell you

1:11:16why this meta cards at udf8 is important and we actually have a lab on this i believe in in the

1:11:22other code in the other course but let's say i copied this emoji and if i pasted it right here

1:11:28you can see it does not parse properly why why is that because the browser does not know that what

1:11:38these characters are because technically speaking every single thing is a character right in memory

1:11:46this is a string this is some sort of string but your browser does not know what the hell is this

1:11:50this is not a custom font this is just an emoji right and your browser although can represent

1:11:55this but it still needs a character set of what this page is right and the most popular

1:12:02character set is utf-8 right the only thing you need to know about this at this point is that udf8

1:12:09supports emojis right so what you say is that hey the character set of this page is going to

1:12:15be utf-8 and the moment you do this ta-da it turns into you know regular emojis and we have

1:12:22this in as a lab as well in the further courses i know but you can see that the udf8 udf-8 and

1:12:29capitalization doesn't really matter however it could not be just you know udf and stuff it has to

1:12:34be utf-8 it's a character set name but yeah anyway that's it once you have this simple structure

1:12:42now this is a valid document right now this is a valid html complete valid html document so yeah

1:12:50you should always write complete code whenever you are shipping it to your users just don't you

1:12:55know just don't write like this because it it will just create all sorts of problems right so do this

1:13:06hey everyone welcome back and in this video real quick i'm just gonna go ahead and complete a small

1:13:11challenge for you which you should also see most likely until and unless we haven't just replaced

1:13:17it or replaced it with something different inside your exercises as well so you would be attempting

1:13:22this right but if you want to identify you can just mark this video as complete or done and

1:13:27just move to that challenge otherwise i'll just quickly go ahead and tell you how to complete this

1:13:33challenge so first things first what i'm going to do is i'm going to start by creating our html

1:13:39document structure like we discussed i'm going to create a head tag just for the clarity i'm going

1:13:45to create a body tag just for the clarity and then i'm going to finally start working on this so the

1:13:51first challenge says that my tribute page should have an element with the corresponding id as

1:13:56main now although i know that we haven't discussed idn classes that much because that

1:14:02makes a lot of sense when we start with css but just understand that id and classes are

1:14:07just two attributes which you can use with pretty much all the html tags right and also let's just

1:14:14go ahead and throw a doctype html while we are added so let's just say i have a div id main right

1:14:21here and a closing div right all right so that is done now let's just move ahead and see i should

1:14:28see an element with the corresponding id title which contains a string okay so i need to have

1:14:36an h1 you know pretty much you can have anything but i'm just making my best choice here h1id title

1:14:42which is let's say i'm creating an attribute page on my own right which is which is dedicated on me

1:14:48but you can write elon mask let's let's do it for garyvee why not right and let's move ahead

1:14:55i should see either a figure or a div element with the corresponding id img div let's go with a div

1:15:02tag there we go within the img div i should see an img element with the corresponding id image img id

1:15:12image right within the img diff tag i should see either a fake caption or a div element with

1:15:20the corresponding id img caption that contains textual content describing the image shown in img

1:15:27okay so i can say img caption and i can say a photo of gary wayne or chuck

1:15:36and inside of this image let's search for gary vaynerchuk let's just take his photo

1:15:43and this one this one's good

1:15:47and just copy this and stick it right not as an id but as an src right here right and although i

1:15:57do know that this is not something i recommended but for now until unless we start with css we can

1:16:03just stick with the width and height attribute but we should have better ways of doing that

1:16:09okay i should see an element with corresponding id attribute info which

1:16:15contains textual content describing the subject of the tribute page all right so we have a div

1:16:22and then we have an id of tribute info right at this point we can also use some of the more uh

1:16:31html tags instead of just keeping on using div you can also use section for example section is

1:16:36another html tag these tags these are something which we discuss in further courses but yeah you

1:16:42can explore a little bit on that but okay let's find this is the let's stick with the html thing

1:16:49so we have the tribute info with us which contains the textual represent describing the subject of

1:16:54the tribute page so this is a tribute page to gary wayner chuck who is an awesome guy right

1:17:07okay i should see an anchor tag anchor element with a corresponding id

1:17:11tribute link which links to an outside site that contains additional information about this page

1:17:19yeah i mean you can choose to follow that or you can just probably link it back to goddamn.com

1:17:27right and i'm just gonna give it an id as well of tribute link like said go to gary's

1:17:35favorite website why not right and it also says you must give your element an attribute

1:17:42of target and set it to blank so the only thing this target blank is actually doing

1:17:46if you even google it you will see that whenever you open this in a new page when you click on this

1:17:53it opens it in a new tab instead of just you know replacing the original tab so whenever you want

1:17:59to open a link in a new tab you just give it a target of blank that's it the img element should

1:18:05responsibly resize relative to the width of its parent element without exceeding exceeding its

1:18:09original size now this is something i which will involve a little bit of css so excuse me if this

1:18:15exercise actually includes a little bit of css you can just skip these two tests if you want or

1:18:21what you can do is just go to the css file right here and make sure you link the css file as well

1:18:29but don't worry if you don't understand about this yet we will discuss this what we can do is

1:18:39right here i can say the image the image id should have a maximum width of 100 percent don't worry

1:18:47about this if you don't understand it it's fine we can discuss that later an image element should

1:18:51be centered within its parent element so if i go to image div and say text align center you

1:19:01can see our image is now centered awesome so now if i click on run test let's see how many we pass

1:19:11okay looks like we just failed this one the image element should responsibly resize

1:19:17relative to the width of its parent element without excusing exceeding its original size

1:19:22okay and one last thing is that we can just get rid of the width and height attribute right here

1:19:26and the final change which we will also make is a height of auto and what this height of auto

1:19:32means is that just adjust your height according to the width of the image right so like you can

1:19:37see if i resize this now the height is fine if i give it a height of a fixed height for example

1:19:44then at some point your image would look fine but otherwise it will just stretch right we don't want

1:19:49that we want it to replace we want the height to automatically work hence we can just specify

1:19:55a height of auto so the moment we do that and run the test this should hopefully pass it now

1:20:02and and also through a display block in here let's see and now you can see that we completely

1:20:07pass the challenge which is fine i mean we can definitely work on this challenge it should not

1:20:12have required a display block or anything but yeah it's fine so yeah that's pretty much it

1:20:17a very small tribute page to garyvee a very very small tribute page rather but

1:20:24i recommend you adding more information more images more text more links for your tribute page

1:20:31and eventually styling it with css as well as and when we learn in the next section

1:20:41hello everyone and welcome back to another video in which i just want to say you that you

1:20:46have successfully completed the first section of this course which is on html basics and you have

1:20:52completed the basics of html well does that mean you are just good to go and start earning from

1:20:57millions of dollars by freelancing and getting placed in google well not yet but you are getting

1:21:05there you have completed some of the fundamental concepts of html tags attributes how to work

1:21:12with most common html tags and understand how web pages work now like i always say programming and

1:21:18web development is not a single pass thing it's a multi-pass learning where you would be learning

1:21:24about these things more and more again and again when you are working with them again and again

1:21:29that means you cannot learn about html 100 once and then move on to css and then learn css 100

1:21:35and move on to javascript that does not happen in programming world especially in web development

1:21:40you will be now mixing your knowledge of html with css then playing with both of these technologies

1:21:47together then you will be introducing javascript to the mix playing with them all of these three

1:21:53together and then moving on to different different technologies and whenever you mix a new technology

1:21:59you would actually realize you understand a lot more things about the previous one

1:22:03because the previous one only made sense to discuss whenever that new technology is introduced

1:22:08right so for example one of the things is a class attribute so all the ht most of the html tags

1:22:15support a class attribute but this class attribute makes no sense until and unless we introduce

1:22:20at least css in the mix right so yeah it's time to start with css because we have done html basics

1:22:29that does not mean we are stopping with html that only means we are introducing a new player

1:22:34which should unlock more of the html things while we are learning about that as well so yeah that's

1:22:40pretty much it for this video hopefully you had an exciting and practical learning of html basics

1:22:46and if you did make sure you rate this course um through the rating button somewhere you could see

1:22:57hey everyone welcome back and in this video i would go ahead and show you how you can start

1:23:04working with css and before we actually get into that let's just actually understand what css is

1:23:09and why that is needed so if you take a look on any other regular website on any website

1:23:15basically in today's time you will see you have all sorts of layouts you have all sorts

1:23:19of colors you have all sorts of effects going on and even sometimes a little bit of animation and

1:23:26that is all because of css or at least some part of css css stands for cascading style sheet that's

1:23:34probably the first and the last time you need to know the full form of css because

1:23:39the only thing you need to know is how to work with it as an effective developer

1:23:44now whatever you create with html you see you can provide some sort of structure to your document

1:23:52that this should be a heading this should be a paragraph this should be a section

1:23:56and so on and so forth but the problem here is that you can only provide that structure

1:24:03which you know the tags give we don't have a tag which says um a container where the header is

1:24:12200 pixels in the height right or 200 some unit in the height because that will be just too much

1:24:20tags right if you have a header 200 tag for example which creates a 200 pixel length of header

1:24:27then let's say i want to have a background tag then maybe we have a bg black

1:24:32something like this and then a color white red or color blue or yellow so you see it will be

1:24:38it will quickly go into tag hill now to avoid this what we came up with was that we said okay let's

1:24:46just go ahead and separate the html that will be the actual structure the actual document of

1:24:51the page and create another programming language called css which the only responsibility of css is

1:24:59to style the layout to style the elements to make sure we are able to customize a lot of parts of

1:25:05the website and so far it has played out very well css is a very awesome language if you are able to

1:25:11understand it properly and that is what we're gonna do in this section in this course make

1:25:16sure you're attempting all the exercises because we'll be doing a lot of layout stuff a lot of

1:25:21amazing stuff with css and it's super important that you are practicing as well as you're doing

1:25:26and that is the the most important part of learning on code damn that you're able to practice

1:25:31as you go ahead so make sure you're completing the exercises the small projects in between as well

1:25:37and we will have a lot of big projects as well later down the line

1:25:45hey everyone welcome back and in this video let us just go ahead and take a look at what are all

1:25:51the ways you can include css in your document now first things first let's take a look at the

1:25:58easiest way now the easiest way is you actually go to the element which you want to style for

1:26:03example in our case is this element let's say and add an attribute called style right now the style

1:26:11attribute exists pretty much on all these stacks body h1p is valid on all these tags on html as

1:26:17well um because these this attribute right here allows you to write css right inside of the html

1:26:27document as a value so it's basically you know it looks like just another attribute but by browser

1:26:33it will be parsed as a css string so if i did something like background yellow don't worry about

1:26:39this we'll discuss what this means but you can see that it turns the background to yellow so that is

1:26:46how you can do it in one way but you if you think about it you will soon realize that let's say if

1:26:52i have another tag hello world again and if i want to use background yellow again then i have to copy

1:26:58paste this and let's say i have a thousand such tags and i wanted to change the color from yellow

1:27:04to blue i would manually have to go ahead and do for every single one of them so this does not seem

1:27:09very friendly right this is why we have the second approach the second approach is where we do not

1:27:17give these tags a style name but actually we point it with the help of the selector which we have so

1:27:28what do i mean by that first things first we'll create another tag called style and don't worry

1:27:33about them again because we will be discussing all of them in detail so the style tag whatever

1:27:39you write between the style tag would be passed as css right and in css the first

1:27:45thing is that you have to select a selector and what do i mean by selecting a selector

1:27:50just like we wrote style right here and it made sense for the browser to understand that hey

1:27:56this style attribute is for this element right because that's that's the property which is

1:28:01written inside the stack similarly the moment you do a selector in css your browser knows that

1:28:08hey this selector the styles which you will be writing in the selector are targeted for

1:28:13these these elements which are matching them right in this case it's just h1 it will not

1:28:18match for p because this is not the selector so let's say i give the same background as yellow

1:28:24and you can see now instead of me going to both of these style tags and you know h1 tags and giving

1:28:31them a style attribute i can just pretty much change it from here right and that's that's easy

1:28:37but this method also has a problem where let's say my website has multiple pages multiple html pages

1:28:44i still have to copy paste all these styles to different different html documents

1:28:49right so the third way which is the best way out of all these three is to actually maintain

1:28:57css in a complete completely different file itself right so what you can do is you can create a file

1:29:04any file which ends with a dot css extension and copy paste these styles directly here and you

1:29:11need not have to just wrap that into style tag because this is not an html document this is a

1:29:16css document so it's understood that browser will automatically understand what this is

1:29:22now well that's fine but how do you link this file to this right because now you might have multiple

1:29:29html pages but you also need to make sure your browser understands that this html page is linked

1:29:35with all of these html pages are linked with the style sheet well you do it from the html document

1:29:40obviously because your browser only receives the html document at this point right it does not

1:29:45know about the existence of this file so what you do is you use something known as link link

1:29:52rel style sheet which just means that we have got a link the relationship of this link to this page

1:29:59is that it's a style sheet and we give it an href of style.css in our case because you know it's in

1:30:07the same directory we can just give it like this so uh not exactly in the same directory but you

1:30:13know because if you open this in the url you'll see that your stylesheet is actually present at

1:30:18the root right it's basically the same file so that's why you can see it gets applied as well

1:30:26and if you change it to yellow for example you'll see it just works fine so that is how you're gonna

1:30:33start working with css this is also kind of like a hello world for you for css we will also discuss

1:30:40in depth what these selectors are what these properties are so don't worry about them yet

1:30:50hey everyone welcome back and in this video we're going to be taking a look at

1:30:54css tag based selector now what does that mean so first of all let's just realize that css needs a

1:31:03selector in any case in order to style an element a selector is a fancy word of saying which element

1:31:10do you want to pick on the page the last time we saw you can just inject a style tag inside the

1:31:16tag itself which works fine but the other way is you actually write a css file or you know inside

1:31:22the style tag and use a selector we have multiple types of selectors in css one of the selectors is

1:31:30the tag selector now a tag selector is pretty much a selector which is the name of the tag itself

1:31:37right so let's say we use another let's say in any html5 like tag for example i know a side

1:31:43is a tag in html which is pretty much like div but it's just it just is semantically equal into

1:31:50a sidebar kind of thing right so let's say i just wrote hello world inside a side right and

1:31:58if i have for example the same thing but for a div right so what i can do now is go back to my

1:32:07style sheet and just directly target aside and i can say as color as green and background as black

1:32:16right so you can see this turns green and black but nothing else

1:32:20right so this means what i can do is i can take any tag on the page and target its selector

1:32:27right away so for example if i take body for example and i give it a background of let's say

1:32:34pink you're gonna see that it just turns pink right so that's that's it that's how you work

1:32:41with things in css on the first level that is you just take up the tag and just

1:32:47start styling it so in fact even now whether when we have not really learned about a lot of css

1:32:53properties just color and background you can see you can create some fun funky looking pages right

1:33:00so yeah i mean we'll be learning more about css properties and what we can do but this is

1:33:05one way of actually starting to style css and you can see css follows a specific syntax the

1:33:12first syntax is you write a selector you have an opening curly brace you have a closing curly brace

1:33:18and you have a property column value semicolon you can see i'm not using quotes here

1:33:25i'm not writing these values in quotes you don't have to write them it will not work otherwise some

1:33:31values need to be written in quotes we'll learn about them eventually as we are going ahead right

1:33:36but most of the values you can just use without goats as well so that is one thing and yeah i mean

1:33:44in the next video we'll discuss really briefly we will discuss something super important with css

1:33:49which will help you in order to debug your code as well but we'll take a look at that in the next one

1:34:01hey everyone welcome back and in this video let's just go ahead and take a look at quickly

1:34:06take a look at one of the things which i think is important that you know although we will discuss

1:34:10it in much more depth in our using dev tools course on the full stack learning path the

1:34:16front end learning path whatever it is but we will be briefly taking a look at dev tools in

1:34:22this one video what do i mean by dev tools well if you're using a browser like chrome or even firefox

1:34:28when you right click on anywhere on the page you will see this inspect option right here at the end

1:34:34right and when you click on this you'll see a window opens on the right maybe for you it is at

1:34:40the bottom like this for me it is at the right you can switch it by clicking these three dots

1:34:45and selecting a layout which you prefer anyway this window right here you could see it pretty

1:34:52much looks like the html you wrote here but it's not quite that and we'll take a look at that in

1:34:59some other video in some other course but for now you can just consider that this is the same html

1:35:05what you wrote inside of your html document but what i wanted to discuss in this video

1:35:10real quick is sometimes it might happen that your styles might not work or something might

1:35:16not work on your page in css right so let's create a situation where i have a background

1:35:24of black but it's not working right so you can see it should technically give me a background

1:35:29of black but it's not so how do i debug this well the way to debug this is first of all

1:35:34you have to open let's just refresh this you have to open the inspector like i did and you have to

1:35:40click on this select an element in the page to inspect it now when you're hovering over the

1:35:46page you'll see it just you know sticks to all the elements and just go to the element

1:35:51you want to debug in this case this is our green text and i have this aside inside the site right

1:35:59just right here inside of the styles part you will see the css assigned to this

1:36:05and right here you can see chrome gives us a warning and it says that invalid property value

1:36:10so now we immediately know that hey our background black is not getting applied because it has an

1:36:16invalid property value now you can go back and change the code and it'll work fine or you can

1:36:21just click right here and change the code right and chrome will just give you a small preview

1:36:26of course this does not stay if you refresh it it will go again to the broken value but it can just

1:36:31you know just use you can use this area for quick debugging or quick checks even you know writing

1:36:37something like background yellow just to see how it looks like so you can do some real time changes

1:36:43on the web and this is how most of the if you have ever seen that on internet most of the fake

1:36:48screen shots kind of stuff is also generated where you would right click on a page change the bank

1:36:54account from zero dollar to 99 take a screenshot and you know just show off kind of so that's how

1:37:00it works people just open this inspector change the value and use it but of course that is not

1:37:07something which is in real world because if you refresh the page it will reflect back but yeah now

1:37:13i can see that hey we had a wrong value because we were using codes so i'll go ahead and remove that

1:37:19and once we do that it will just work fine because just like html i mean for css the browser kind of

1:37:26helps you because for html even the browser does not tell you what's wrong but for css you can get

1:37:31a little bit of help little bit of hints from the panel so if you use any wrong value your browser

1:37:37will say that it's an invalid property value so yeah that's pretty much it for the css part in

1:37:43the next video we'll try to explore more ways of working with css more properties and so on

1:37:53hey everyone welcome back and in this video let's just go ahead and take a look at css properties so

1:38:01what we have been doing so far with background and colors is actually styling certain elements with

1:38:07the help of css properties right so these things background color and whatever we will discuss in

1:38:14the future as well these are called as properties and these are values in css so like i said

1:38:22css always follows a property column value format always you will never find something weird here

1:38:30and yeah this is this is the underlying thing of basically all the styles which you see on

1:38:36the website a selector a property and a value and that can be used a lot of times a couple of things

1:38:43you have to note here is that all these values end with a semicolon there is no exception here

1:38:49in css your code will work fine if your last value omits the semicolon then it's fine but

1:38:55if any other value omits the semicolon you will get errors right you can see it saves me semicolon

1:39:01expected and also our styles are broken here so it's as a rule of thumb just make sure you're

1:39:06ending all your values with a semicolon that is one another thing is that we have a bunch of

1:39:12properties in css some of the common ones which you can think of are you know related to

1:39:18dimension for example we sure have background and color but we have for example width where i can

1:39:25wi ddh where i can give let's say 200 pixels otherwise so you can see it's a little shorter

1:39:31than before if i increase it to 300 you'll see it just increases a little bit 350 and so on

1:39:37right so you can see that you can play around with width you can play around with height

1:39:45width and height for example it's it's a long aside tag now

1:39:50you can also play around with certain properties like margins and paddings which we'll also get

1:39:55into and we'll discuss how they work in terms of their short hands um but yeah for now i think

1:40:01it's a start with background colors width and height right so now you can have

1:40:07four tags for example let's just go ahead and create a p a side div and h1 right and now let's

1:40:14just give them different different words so h1 is width and height 200 pixel and background as

1:40:21green for example then for a side we can have the same thing but for let's say 150 pixel and then

1:40:32for div we can have the same thing as blue red and this would be 250 pixel right so you can see

1:40:41we have a mix of styles here and it's already a lot colorful than just you know plain html page

1:40:50so yeah i mean we have now we also have a property which comes to my mind like border border radius

1:40:56and border radius is just in either in pixels or in percentages the amount of curvature you want

1:41:02on the borders i'm going to give it a 50 and you can see it turns it into a circle now obviously

1:41:08the content is overflowing which we don't want so maybe we can fix it later down the line or

1:41:13you know just keep it as it is but you can see now you are able to play with css a little bit

1:41:19and there are tons of properties right there are tons and tons of properties so i would probably

1:41:25not be doing just one property per video because that will just be a really boring course in itself

1:41:32so what we will be doing is we will be actually discussing these properties as and when we are

1:41:36building stuff with them right whether you are building them in the exercises where you will

1:41:41see the properties names and the description in the uh in the exercise description or whether

1:41:46it's a video where of course i will be telling you what the property does so that's how we'll

1:41:52start working with css properties by actually making use of them there are a lot of them

1:42:02hey everyone welcome back and in this video let's just go ahead and take a look at classes in css

1:42:09and classes in css will make a lot more sense the moment we realize what is happening right now

1:42:15so for example right now you can see that what we have is that we are trying to create multiple tags

1:42:21for selecting those tags inside css and styling them now this might seem okay right now but if

1:42:28you think about it if your website has hundreds of elements then it probably makes no sense to

1:42:34actually come up with hundreds of such tags and then style them differently because that will be

1:42:39just insane amount of work so what we came across is that we said okay you could pretty much use

1:42:47a bunch of tags on the like div or p or span or whatever we discussed and you can still select

1:42:54them in a unique way or in a collective way by using classes now what does that mean let's say

1:43:02this is a div again matching it with the with the one below but let's say i also want this to

1:43:09just have the blue circle which which it had earlier so what i can do is i can give it a class

1:43:16of blue right and right now what i'll also do is i'm going to give this a class of red so so

1:43:24far you see nothing happens because that's it that's what all that's all class does right it

1:43:30just gives an attribute which you can pick up in css but we are doing no such thing in css so far

1:43:37so what we can do right now is instead of aside i can say i want to target this blue class

1:43:45but remember the moment we write blue css is trying to actually look for a blue tag in the html

1:43:52it's not looking for a blue class right so the way css looks for a class is you have to start that

1:43:58with a dot with a period right so this full stop distort this period whatever you want to call it

1:44:05this denotes that hey this selector right here it's not an html element it's not an html tag

1:44:12but it's actually a class name so go ahead and take a look at the dom and see all the elements

1:44:18which have this class of blue whatever you want to call it right you can call it very well call

1:44:24it green and it'll still work if you just make the right changes so if you call it green you can see

1:44:30it still works so it's basically you can pretty much name it anything as long as it starts within

1:44:36um with a string i think that condition is also relaxed a little bit i'm not sure but yeah make

1:44:42sure you just keep your class names sane not really just go all wild characters or anything

1:44:50so that's how you use classes and you can see we already have this as red because we are targeting

1:44:56div but even if we target even if we go ahead and target for example dot red like this it will

1:45:02still work right another advantage for this is that i can also use the same class for example

1:45:09with this another tag right and now i did not need to go ahead and write more styles for the

1:45:16same thing so you can see it's kind of it kind of makes it reusable it kind of makes your css

1:45:21code reusable because now you can just slam a class to any of the element you want and

1:45:27it will be just turned that way similarly i can just go ahead and give this h1 a class of blue

1:45:32and right here you would see that suddenly this green color went away for each one and why is that

1:45:40why that happened that is because of some cascading style sheet rules and we'll discuss that

1:45:47but for now you can just imagine you can just say that whatever comes the last whatever comes last

1:45:52is applied right if there's a competition between h1 and dot blue then blue is coming at last then

1:45:59gets implied but this is not the full statement we can kind of override this as well but we'll take

1:46:05a look at that later on the line you don't have to worry about this now at this point i would say not

1:46:10to put conflicting styles so probably a good idea is to just remove any conflicting style at all

1:46:22hey everyone welcome back and in this video let's just go ahead and take a look at

1:46:26ids in html and css and what that what does that mean so in the last video we saw about classes and

1:46:34if you understood classes that's awesome because ids is pretty much the same concept right it's

1:46:40exactly more or less the same concept but the thing with ids the only one constrained with ids

1:46:46is that you have to give an id to only one element on the page so one unique id

1:46:54one unique value of that id belongs to only one element so what do i mean by that well

1:47:01i can give this a class but i can also give this an id and i can say this is only paragraph right

1:47:08so this id right here technically i mean of course nobody's stopping me and go ahead

1:47:15and for going ahead and create this paragraph two but this is wrong in the eyes of browser

1:47:24right the browser will not like this and that's all the browser can do to be honest um because

1:47:31they don't complain about html right but this will actually come and bite you when you're

1:47:37working with javascript because javascript just like css has selectors javascript has methods

1:47:43to pick up the elements from the dom right we'll come to what dom is what did i just say

1:47:49but what you have to realize is that just just keep it in mind at the moment although you can

1:47:55cheat the system and i can tell you like if we go and only p and do a font size of let's say 30

1:48:00pixel you will see it works across both of these paragraphs that works fine but trust me don't

1:48:07do it if you are using ids just keep the id to a single unique value on the html document you can

1:48:15give it another one only p2 that's fine and then style it and you know i might have skipped this

1:48:21but the way you style an id is by using a hash symbol here right so we had a full stop a dot a

1:48:29period in the class name and we have a hash symbol for the id so that is basically it that's all

1:48:37that's all the difference between a class and i and an id the way you refer that number one and

1:48:43number two is that the fact that you can only keep it one unique value per page in most of the cases

1:48:52i usually prefer people to just go ahead and use class because it's just less cognitive overload

1:48:57you don't have to think a lot about that and it's fine i mean ids have a very slight

1:49:05more performance on the web page um but that's that's basically negligible right you

1:49:11would not never never ever feel that so just technically speaking ids are faster because

1:49:17browsers can maintain a hashmap of the ids on your page and directly go to the element in that

1:49:23tree but don't worry about that trust me here you can pretty much just forget all about that

1:49:29and focus only on classes but i'm telling you that ids exist just because you should

1:49:34know if you see an attribute that should be a unique id on the page and you can style that

1:49:40using css just like you would do a class but using a hash symbol instead of a dot

1:49:51hey everyone welcome back and in this video let's talk about an interesting concept in

1:49:56css and in html which we also have talked about a little bit before which is the inline and the

1:50:02block elements so just to quickly revise if you have forgotten what inline and block elements

1:50:07were block elements are the elements which pretty much take the whole width of the screen i mean in

1:50:13this case we have obviously just customized all of them with a given width and height

1:50:18but if you take a look right now for example for blue if i give it a background of blue

1:50:23you'll see that it takes the full screen width or i should rather say the width of the container

1:50:28it is in so for example if i go ahead and and close this in a div and give it let's say a

1:50:36class of parent and right here if i go ahead and do a parent and width of 200 pixel you can see

1:50:44well the blue is also taking the 200 pixel width right if i switch to 400 the blue element is

1:50:51also taking 400 but this one right here is taking the full width of the body because

1:50:56the parent of this blue element is the body which is 100 of obviously now this is a block element an

1:51:06inline element is an element which for example is a span right this span right here you can see well

1:51:15we have a rate class as well so let's just get rid of this first of all so right here you can see

1:51:22this span right here is an inline element because it does not extend the whole way to the screen

1:51:28with css what you can do is you can change these behaviors so we know that span is an inline

1:51:35element right but we can make span a block element how do we do that we make use of a property called

1:51:42as display and we set this property to display block and you can see the moment we do that

1:51:48this span spans the whole row no pun intended but yeah that's how you can change the behavior

1:51:56similarly you can make a block element in line as well so if i go ahead and decide

1:52:03to let me just go ahead and remove this parent and switch this blue from a block to an inline element

1:52:10you can do that so the moment you do that you can see they have stopped taking up full 100 width but

1:52:16this span right here takes up the 100 width even though technically span is an inline element right

1:52:24it's not a block element so you can see that with css that's just one of the many things you can

1:52:31control right you can for example in this case h1 you can go ahead and target h1 and give it a font

1:52:38size of 16 pixel and you know font weight which is if the font is bold or not

1:52:45and you can say normal right so you see that you have converted an h1 into just a paragraph

1:52:50and you can pretty much just reverse apply this to your red paths and say that they are 32 pixel

1:52:57for example and font weight bold right so you have basically converted these

1:53:02red class elements into headings so you see with css you can bend the rules you can

1:53:11just break html in multiple ways html says that h1 should be the heading it should be the

1:53:16largest element but well there are no rules to that right with css you can change that

1:53:23so yeah that's pretty much it that is all on how you can switch between block and inline

1:53:30this display property is very useful and it is also useful for creating layouts with css which

1:53:36we will see how we can do that but yeah that's how you switch between block and inline elements

1:53:41and we will take a look at a couple of more values which we can give that but later down the line

1:53:52hey everyone welcome back and in this video let's just go ahead and take a look at layouts in css

1:53:58and we're going to be starting off with flexbox now i'm going to give you a quick understanding of

1:54:05how layouts used to work i think we have barely just you know in one video touched upon this

1:54:12when we discussed tables right so in the very old days when the web was still new and young and

1:54:18you know the support wasn't there what we used to do as web developers was we used to create

1:54:23all these layouts with the help of table tag because just like i showed you in the

1:54:28tables video as well we can find it above in some other section that table gives you the

1:54:33opportunity to use things like row span and call span so these things allow you to kind of bend

1:54:39the rules and display nice uis but that is not useful at all because tables are not responsive

1:54:46they just don't make sense on a mobile phone or you know different width devices and that was

1:54:52a real problem in 2021 and beyond because we are actually using a lot of mobile phones and

1:54:59weird screen devices not just fixed display devices so we needed a better layout solution so

1:55:06what we came up with in css3 which was the latest version in which flexbox was released

1:55:14was a different sort of layout now how that works let's see so i'm gonna go ahead and create a div

1:55:22where i'm just gonna name this as a class of new new layout uh yeah i mean we can keep that that's

1:55:30fine and let's just give this div let's just give create four empty divs here right just to

1:55:38set the picture set the stage and right here i'm just gonna remove all of that i can just give

1:55:44the body a background of pink i don't know kind of like you know it's a smooth color for the tutorial

1:55:51so anyway so we have the new new layout and right here what i'm gonna do is first of all

1:55:59yeah i'm gonna also tell you about a different kind of way to select elements the way you can

1:56:04do that in css is you can write a dot new layout like this and then give it a space and then div

1:56:12now what does this mean if you hover over this you will actually see it gives you a simple tip

1:56:19as well that it element class new layout and any element after you know any child div inside that

1:56:26so what does that mean this says that any div any sort of div which is inside the new new layout

1:56:33can be used right we're going to be discussing more about all the selectors later down the line

1:56:39but for now this is a start this is how you can pretty much select div inside a new new layout

1:56:47class of div right so right here i'm just going to give it let's say a background of red

1:56:54a width of 200 and a height of 200 right and you necessarily do not need to give this um you know

1:57:04a width and height both if it contains some sort of content but in our case because these

1:57:08are just empty divs we don't have any width or height because of the inherent width or height

1:57:13because of the content and you can see that it looks like we have just one div which is super

1:57:20tall and that is because all of these discs got stacked with each other right so what we can do

1:57:27is actually also give them a border so i'm going to say it has a border of one pixel

1:57:32solid black again a new property i guess for you which we did not discuss in this

1:57:36which is border it takes up a border thickness then a solid which is the

1:57:43kind of the border which you want we also have dotted and i think we also have dashed

1:57:48so these are like two three values but solid is like you know the most common one and then the

1:57:53color of the border obviously we can give it a two pixel and it'll just double the thickness

1:57:57so you can see all right the next thing is we can also give this a little bit of margin

1:58:04so margin is this property right here is actually a shorthand of four properties right

1:58:12um margin left margin top margin right and margin bottom so i'm going to show you real quick what

1:58:19this means not in here but actually opening this in the new tab and opening the inspector again

1:58:24which we have already discussed so if i go to the stiff right here which has been styled you can see

1:58:31although this this width and height is fine we have these arrows on the right of these

1:58:37three properties these arrows means that we are using a shorthand version of the property even

1:58:44for background right so you might be surprised what is the actual property name so in case

1:58:49of margin for example if i click on this arrow you can see that what exactly was the shorthand

1:58:55which i used so i said margin top is 10 margin right is 10 bottom and left is 10. so if you use

1:59:01all of these four properties or if you just use this one property this is equivalent right browser

1:59:07considers these four values these four properties and this one as same for border you can see it's a

1:59:15lot of properties right i mean this is something you can leave out but you can see these are the

1:59:21actual expanded properties right and you might be wondering like why do these properties even exist

1:59:28well they exist because css gives you extremely fine control over how the layout should look like

1:59:33so you can say that you want a different width of the border you might want a different color

1:59:40of one side of the border and no border at another side color and so on and so forth so

1:59:45theoretically you can customize each and every aspect of these things right so that's why but

1:59:51in most cases you don't necessarily need to worry about them for margin sure this will be something

1:59:56which we'll use a lot but for borders i think this is this is a very common thing which you do

2:00:01for background again you can see nothing's fancy you can't just forget about all these properties

2:00:06but background actually is background color not just background why because background also

2:00:12allows you to give an image as the background but background color well just gives you the

2:00:17opportunity to set the background color so anyway coming back to the video of layouts what i wanted

2:00:25to introduce you in this video was the flexbox layout which we still did not see yet so the

2:00:32build up is done and now what we can do is we can just go ahead and give it a display of flex

2:00:38remember we had a display of block earlier right um because this is also a block element so by

2:00:46default div takes a display of block right but what we did was we did not change this to inline

2:00:54but we changed it to flex and flex is a like i said is a new layout system flexbox is a new

2:01:01layout system which allows you to stack elements in a row or in a column depending on how you want

2:01:09so by default you can see it changed it direction to a row so flexbox by default just stacks

2:01:16all of the things in a row you can change it with a flex direction

2:01:21of row which is you know the default value or column where you would see it just gets stacked

2:01:27just like before before it was right so yeah that is pretty much it if you take care look

2:01:34at row for example you'll see it just sticks it like this and column would do the vice versa

2:01:45hey everyone welcome back and in this video let's just go ahead and take a look at what exactly is

2:01:53flex basis because flex basis is going to be a property which you will be using a bunch of times

2:01:58when you are working with flexbox so in order to understand that first of all let's understand

2:02:04a concept about flexbox that is the axis so you see when you have a flex direction of row

2:02:10whenever i add a new div here you will see it gets added inside that row right

2:02:17so it's all the new divs are getting added in this direction towards my right so this means

2:02:22this direction towards the right is actually the main axis of this flexbox container all right

2:02:30so once we have that understand the that the axis perpendicular to this that will be downwards right

2:02:36here is the cross axis so we have to access the main axis in which the elements are getting added

2:02:43like this like these stiffs and the cross axis which is perpendicular to this so what we have

2:02:50here is a width and a height right for the sake of clarity i have given different widths and let

2:02:57me just go ahead and actually just keep it with just two diffs to actually make it even more clear

2:03:04and we have a width and a height now we have some property known as flex basis and let me

2:03:10just go ahead and give this a width of 300 pixel right so you can see the divs got slightly larger

2:03:17right and this width got ignored so with this width is ignored and the reason for that is

2:03:23because flex bases actually is width in this case let me let me tell you what i mean by that so we

2:03:32discussed about the axis right so in our case this is the direction from left to right

2:03:37in which our main axis lies now what flex basis does is that it defines the length of the item

2:03:46in the direction of main axis so it is width in this case which is if i change this to 350

2:03:53or 340 whatever you will see it becomes longer and longer and if i shrink this to let's say 50

2:03:58pixel you will see it becomes shorter right so basically width is completely ignored

2:04:03similarly if i have let's say the flex direction of column what will happen is that this flex basis

2:04:11right here actually becomes the height of the element so if i change this to 200 for example

2:04:19you see the height increased and now if i have the width as 50 pixel then it stays the same right

2:04:25so now in this case height is irrelevant because the moment we change the direction to column the

2:04:32main axis becomes this from top to bottom because this is the direction where new elements are going

2:04:38therefore flex basis property is gonna point to the length of that individual item which is what

2:04:44we are selecting right now um in that particular direction right so in this case we are saying that

2:04:49hey this should be 200 pixel so if you're using this in this case it does not make sense to use

2:04:55height right because height is just meaningless for this so this is what flex basis property is

2:05:01super important stuff and super fundamental thing you should know about flex basis is that it only

2:05:08works in the direction of the main axis and how do you find main access a quick simple rule is that

2:05:14whenever you add a new element to the container in which direction it is getting added if it is

2:05:19in the row then the main axis is like this if it is in the column then the main axis is like this

2:05:29hey everyone welcome back and in this video let's just go ahead and take a look at flex

2:05:36shrink property and i'm gonna tell you what does that mean so first of all let me just go ahead

2:05:41and change this to row and i'm gonna say i'm gonna just show you let me just go ahead and also not a

2:05:47width but a height because our width is defined by flex spaces let me just go ahead and shrink this

2:05:53so you can see you can see by the end of almost you know the browser window collapsing to zero

2:05:59our boxes also get almost shrunk down now this is fine because flexbox is considered to actually not

2:06:08just overflow until and unless really needed right so it tries to adjust the width of every single

2:06:16item in in the container you can control this behavior by using a property known as flex shrink

2:06:24now first for that first of all let me just go ahead and move this as first and this as second

2:06:33right and what i'm gonna do is say for the first box i want to say that it's flex shrink

2:06:40is zero now let me tell you what what i mean by that let's just see this at this point both

2:06:46of them are 200 200 pixel right but what i have said is that the first which is this div right

2:06:53here should have a flex shrink property of zero so this means this flexion property

2:06:59is basically a proportion of compared to other elements how much a particular element

2:07:07should shrink to fit that's that's all this is so number zero is saying that hey

2:07:14don't really adjust at all that means never really change your width to shrink to fit so that means

2:07:21only the other element has to basically you know shrink all that all the way to zero or whatever

2:07:27their minimum weight is now if i give this a 0.5 for example you're gonna see that the first

2:07:34element just shrinks half as much as the second element not half as much sorry i should rather say

2:07:42um for example if the if the second element because the default property of lecturing

2:07:49is one let me make it a little bit simple so i can give this a flex rank of one and this a flex

2:07:55shrink of two so you can see that this basically is shrinking twice as fast as this element right

2:08:05here right so they start with the same width but right here this element is also shrinking but you

2:08:12cannot you know this element shrinks much faster than that because it's shrinking as twice as fast

2:08:18so these are absolute numbers they do not have any units because these are proportions compared

2:08:24to other elements so this is what flex shrink is right that means if you want certain element

2:08:32to not shrink at all all you have to do is just set their flex shrink to zero and these elements

2:08:38right here will stop shrinking that means they will just start overflowing the parent container

2:08:44if they have to right so that's how you can maintain a fixed width with a flex box

2:08:55hey everyone welcome back and in this video let's just go ahead and take a look at how you can use

2:09:03flex wrap so in the last video we saw that if i do a flex shrink of 0 this basically says

2:09:09that hey you're not supposed to change your width from whatever flick spaces has set therefore just

2:09:15overflow if necessary so what you can do in order to kind of fix this is on the container you can

2:09:21say a flex wrap of wrap and what this property means that just go ahead and overflow this

2:09:29you know element to the next row if it does not fit in the previous one and it's kind of fine with

2:09:35certain card based layouts for example where the width matters and you want to just just push it

2:09:41to the next row if possible or before you know for items where you don't know the size of the element

2:09:47beforehand or rather the count of the elements beforehand so that would be useful in that case

2:09:54but yeah it's as simple as you know just setting up flex wrap on the parent and not worrying about

2:10:00what would happen if we have more elements because now if you just try to add more elements it will

2:10:06try to fit as many elements as it can with within the single row as long as possible

2:10:13but the moment it is not possible it will just just you know push them into next next rows

2:10:20and there's that you have a free kind of like you know free responsive layout available to you

2:10:26not exactly responsive but you will get the idea that this is something

2:10:31which is much better instead of just having a user just keep on scrolling on the right of the mobile

2:10:37screen so that's at least that's one step in the future so yeah that's pretty much it you need to

2:10:43do flex wrap wrap that's it once you do that it'll just work fine it'll work the same way with flex

2:10:49direction column as well but browsers are weird and they are basically made for top to bottom

2:10:56reading not from left to right so this is why flex wrap wrap makes much more sense in a row-based

2:11:00system but it'll still work in the column based layout as well so don't worry about that

2:11:06but yeah that's pretty much it for this video hopefully you liked it if you did make sure

2:11:10you're leaving the review to the course if you haven't left a review yet and leave the comment

2:11:15just invite some of the people to watch this html course css course with you i mean it's completely

2:11:21free right and most likely you're enjoying the practice sessions as well so if you are make sure

2:11:26you share a word with your friends and family that will really help the platform grow as well

2:11:36hey everyone welcome back and in this video we'll be taking a look at how to center a div now this

2:11:43might seem like you know a easy thing but it wasn't easy at all back in the days when there

2:11:50was no flexbox when there was no advancement to css layouts and all this stuff so it's super easy

2:11:56now which we'll take a look at but it's still a running joke in developer communities that

2:12:01how do you center a div with html people just just like to throw the statement all the time

2:12:06so i think you should know the answer to that but anyway what do you have to do in order to center

2:12:11a div in a in a another div let's first of all have some divs here so let's say this is parent

2:12:19right and this is dave id child right and now we want to center the child inside the parent so

2:12:27first of all let's just go ahead and give parents some background of red width of 100 or 100 vw and

2:12:37height of 100 or you know 50 vh and let me just quickly go over these units as well if i haven't

2:12:44gone over yet so you could see that we are pretty much using units like pixel now i'm

2:12:50using something known as vw what exactly is this so in css there are multiple ways of specifying

2:12:57what the dimension should be right just like we have centimeters and then we also have meters

2:13:03and although they are technically convertible there are a certain there are usually certain

2:13:07ways you can also specify widths and heights dimensions in computers one of the ways

2:13:12is pixels which is the most common and the most used as well so pixel is just basically

2:13:19basically speaking a single dot on your screen which is responsible for emitting a light

2:13:24so 100 pixels just means 100 pixels across and 50 pixels wide and more or less sometimes you just

2:13:32have to play with these numbers to kind of get the feel of it then we also have percentages in

2:13:38css 100 just means complete width of the container it is in and 100 um is basically similar to what

2:13:48100 we w would mean with the only difference between vw is actually the viewport's width now

2:13:56what this means is the screen size of the of the container right so right now in this case you can

2:14:02see there's a little bit of overflowing if you see on the right the div actually overflows 100

2:14:07vw but does not overflow if i specify 100 percent now the reason for that is because 100 vw is true

2:14:16screen width right and right here we have some default browser margins available to us

2:14:21so the first thing we'll do is actually just go ahead and set margin zero and let me just quickly

2:14:26go with at this selector as well although we will go over this these selectors in depth in our next

2:14:32course which is advanced html5 and css3 but this selector pretty much here means everything

2:14:39so what we are saying is by default every single thing should have a margin of 0. well that sounds

2:14:46wrong right if you think about it we don't want every single thing to have a margin of 0.

2:14:50but the good thing is that css selectors actually comes with something known as selector specificity

2:14:57and again this is something which we will discuss in the advanced course but what

2:15:01you have to realize is that the star that is everything has the lowest specificity why does

2:15:08this matter because this means anytime someone wants to overwrite this style they can easily

2:15:13do with any any selector they don't have to worry about it right so that's that's a handy thing you

2:15:20should know so anyway we have vw and let's say 50 vh vh is just 50 of the screen if i give it

2:15:28100 for example you will see it converts fully to rate screen uh 50 makes it just half of it

2:15:35right now the next thing is we want some child dimensions as well so i'm going to

2:15:41give this a background of yellow width of 200 pixel and height of 200 pixel as well

2:15:49right and there's our child div and now what we want to do is we want to center

2:15:55this child div inside this parent diff and as a matter of fact let's just go ahead and see all the

2:16:01positions possible with flexbox um alone for this right so it's gonna be a fun exercise and you will

2:16:08also realize what all you can do with flexbox in terms of positioning and in terms of layout

2:16:14so let's say i want to center this first of all because that's that seems like the simplest

2:16:20so the first thing i'm going to do is i'm going to make my parent a flexbox by saying display

2:16:27flex now the moment i say that this means that my parent now is a flexbox and

2:16:32all the children inside it are automatically flex children however i haven't specified how

2:16:39or what should the layout be right so by default it just takes the flex direction as column

2:16:44therefore if i have a second child there and if i go ahead and convert this to a class and make

2:16:50this a class and create a second child you will see that by default no not not in the column but

2:16:57in the row by default they just stack in the row right that's the default flexbox behavior

2:17:02but anyway we don't need to worry about that what i want to do this time is i want to say

2:17:07justify content center and align items center now let's just go ahead and take a look at what

2:17:14these two properties are because our most of the work would involve these two properties

2:17:19so the first thing we are doing if i remove justify content send align item center you

2:17:24will see that our main access was from left to right right which is what we discussed in the

2:17:30first flexbox video from left to right so justify content whatever value you provide it you could

2:17:37see that it actually centers that on the main axis now this is important this is important

2:17:46why we will take a look at that but justify content centers on the main axis and align items

2:17:53center would pretty much center it across the secondary axis now let's say if i have a margin of

2:18:025 pixel here just to make some space and now if i go ahead and create another child

2:18:09right and let me just go ahead and actually make this full screen why not right so we have these

2:18:15two divs let's just remove align items for now we see that justify content does it in the main

2:18:22access way and we don't have a line items so what i'm going to do next is i'm going to say

2:18:29flex direction as column right so what this means is that switch our direction from stacking items

2:18:37in a row to the column side right and immediately you can see because our main axis was now this

2:18:43you can see it centered it in this main access row right earlier our main axis was this therefore

2:18:49it got centered in the main axis so justify content always works in the main axis direction

2:18:56and to be very honest it's it's just a property which you don't necessarily need to remember where

2:19:01it centers you can just figure it out on the go as well you can just apply it see how it is centering

2:19:06because it will center the children in your flexbox until and unless you are doing some funky

2:19:11stuff here it will work just like it is supposed to but again like you can see a line item center

2:19:17right here will actually center it across the secondary um axis as well all the items rather

2:19:24all right so this is that let's just go ahead and take a look at let's just go back to the

2:19:30the one child itself and in this case it does not matter what flex direction you have

2:19:34but what i'm going to do is i'm going to start messing around with these

2:19:38values so i'm going to say justify content flex start and let's just remove this as well

2:19:45so you can see flex start is basically like saying nothing because it just keeps it right there

2:19:50right so it's basically the default value then you have justify content flex end which

2:19:55just pushes the content towards the the very end right and that is all what justify content can do

2:20:02on the main axis it can allow you to align all the child items then we have align items right

2:20:09and align items just like you would have guessed from justify content also has these values

2:20:14flex start which is basically doing nothing flex end which is basically pushing it on the

2:20:21end of the secondary axis and center just centers it right so you see you have three possible

2:20:28values here and you also have three possible values here therefore it means that you can

2:20:36pretty much have nine combinations here right and if you think about this flex start flex end and

2:20:44center if you have nine combinations then you can have one two three four five six seven eight and

2:20:53nine so this is like this square right here then this square right here then this square so you can

2:20:59pretty much possibly place the object all the way in a in a kind of a symmetry right so let's start

2:21:05very quickly from flick start and flick start and we'll go in this direction we'll form this loop

2:21:11right then let's say if i want to push it all the way to the center first i'm going to give

2:21:16this a center then we want it flex end then we want this to be center because it brings it down

2:21:27then i want this to be flex end then i want this to be center because it brings it in the center

2:21:33then this should be flex start then finally this would be center and then finally this

2:21:41value would be also center so that's how you get a div in the center of a parent pretty nicely and

2:21:48i hope you understood a lot of properties along the way as well justify content and align items

2:21:53and of course they will play a little bit differently if you have a couple of divs here but

2:21:58obviously the idea remains same if you just start again with flick start flick start you will see

2:22:06that if i do this flick center it's basically just not flick center just center it basically

2:22:11just moves both of them together flex end and so on you know you get the idea

2:22:22hey everyone welcome back and in this video let's just go ahead and actually take a look at

2:22:27some of the common layouts and i want you to be confident in how you build layouts with flexbox

2:22:33so what i'm gonna do is i'm gonna go ahead and create some sort of layout structures for you some

2:22:39basic hands-on layouts which you should be aware about and as you practice as you build more sites

2:22:45with the similar layout you will realize that this is super important stuff which you should learn

2:22:50now what do i mean by that i mean like if you go to google and carefully look at this webpage you

2:22:55will realize that this area is in the center of the screen then you have a footer then you

2:23:00have a kind of a small header and so on right there's a big gap between this footer and the

2:23:06um these navigation buttons and so on so just to develop just for developing that understanding

2:23:12of how to create these layouts you need to fundamentally understand how you work with flexbox

2:23:18so what i'm going to do is let's just shift this to pink for example and what i'm going

2:23:23to do is go ahead or maybe just a little darker shade on the reddish side yeah

2:23:33so i'm gonna go ahead and create first of all a simple google.com like layout

2:23:40right and i'm gonna leave the elements filling elements part to you like creating this button

2:23:45creating these input fields because we have seen them all creating these anchor links and so on

2:23:50so let's just start with parent i'm going to go ahead and remove the margin from everything

2:23:55and we have the parent like this and child and in fact we don't need this as well

2:24:03okay so the first things first i see that there's a navigation bar now make sure you're

2:24:08understanding this tutorial in a way how i am thinking not what i'm telling right super useful

2:24:15super important just make sure you are able to see how i'm thinking so i got a navigation bar

2:24:20i start from the top to bottom of the site i see first things first which i have to place is this

2:24:25navigation bar so i'm going to go ahead and create some sort of um some sort of navigation right

2:24:32i'm going to use a nav html tag which we'll probably see in the advanced course as well

2:24:38nav and i'm just going to add a couple of links here home about for example right nothing fancy

2:24:50now the next thing i need to do is there are there are two ways developers approach a project

2:24:56the first kind of people what they do is they just code up the whole html structure thinking

2:25:01about how the css would make them look like and the second one just takes one step at a time

2:25:06code a structure then go to css code structure and go to css what you do is completely your

2:25:11choice my case i usually prefer to just write the whole html structure and then arrange it

2:25:16but it's fine you can pick whatever you like for the sake of this tutorial i'll

2:25:20just go ahead and stick to my own style but you can pretty much do whatever you like right

2:25:27then you have an area which is the center so i'm gonna have actually let's just get rid of the

2:25:30parent as well it's not exactly needed we can just style the body tag itself then we have a section

2:25:38which is probably in the center of the screen i will say this this is divided logo for example

2:25:44right then we have a footer at the bottom and we've also have a photo tag in html

2:25:51and you'll just know about these tags don't worry about them if you don't understand

2:25:54that hey this tag also exists or hey that tag also exists for the most part you can

2:25:58stick to div but we will also discuss about these stacks briefly in the next course in

2:26:03the advanced html css course and how you can know them as well so don't worry about that yet

2:26:09so for the footer i would say we have a layer 1 so i'm going to say dave id layer 1 for example

2:26:14or div class name it's to be honest it does not really matter you know i can even give this a

2:26:20class of layer because they pretty much have the same background color so class layer again

2:26:27so we have our basic html structure at this point we are not doing anything with the css and

2:26:32you can see pretty much nothing looks like google right but let's let's fix that so the first thing

2:26:38i'm going to do is arrange this navigation part right so i'm going to say this nav has a display

2:26:44flex and flex direction by default turns it into a row but what we want to select is the snag ul why

2:26:52because li or whatever you write here would be the children of ul not nav right the direct children

2:26:59and what i can say is for these nav uli is list style none which will disable their bullet points

2:27:06right and just a quick hit heads up if you know about what you need to do for example this thing

2:27:13you're stuck hey how do i remove this bullet because this is overwriting

2:27:17how to find this is to go to google and write that question how do i remove bullets from

2:27:25ul or from li whatever use google when you're building projects to answer these common simple

2:27:31questions don't just get stuck or rely so much on a video whether it's code down whether it's

2:27:36any other place which you're watching because we can just teach you so much you will run into small

2:27:40issues which you would have to debug yourself so make sure you're using google properly for

2:27:46every single question so anyway let's restore that so that we have a nice clean looking thing

2:27:53and uh yep that is pretty much it what we can do next is i can say flex direction flex not flex and

2:28:01we already have a flex direction of row so that does not matter just if i contained flex end right

2:28:06so this puts us right here now you could pretty much go ahead and play around with a little bit of

2:28:13padding padding is like i said um we will discuss about the content the box model in css again in

2:28:20the html and css advanced html and css course so stick with me i'm i'm pretty sure a lot of things

2:28:27would get clear once you are done with this course the exercises and the next course so i'm going to

2:28:32go ahead and put a padding of 10 pixels which gives us a little bit of padding on the sides

2:28:36um and you can also put a margin off to pixel and if you want to see like how margins and

2:28:41paddings are working you can always give this a background of yellow for example

2:28:45so now you will see that this white space or let's give it a darker color this white space in between

2:28:51this is this is the margin and this gap between the text and the boundary is the padding right so

2:28:58if you increase these values the gap increases but if you increase these values the space

2:29:04between them between the elements increases so it's your call what you want to use on

2:29:09a white background i mean margin and padding visually both look same here but they are not

2:29:15just to make sure you know that all right so once we have the navigation part figured out the next

2:29:21thing we need to do is the center thing and lucky us we have just discussed how to center something

2:29:28on the body or on the you know the page so we will not be following that because i want to show

2:29:36you a different strategy i mean kind of we will be following that but let's just go ahead and for now

2:29:42i'm going to go ahead and say logo has a width of 80 vw and a height of 200 pixel right i'm

2:29:49just giving it a background of red for example just for our placeholder so this thing should

2:29:54technically be going right here but we'll take a look at how we'll do that the next thing i will

2:30:00do is i'll style the footer which we have right and the layer part we know that this is a little

2:30:08bit of grayish color you can extract those colors out as well but i'll be just a little lazy here

2:30:14we don't necessarily want to style footer we want to style the layer part here so what i'm going to

2:30:20do is i'm going to go ahead and say this has a background of gray which you can of course just

2:30:25lighten a little using the select this speaker itself and yeah i'm just going to give this

2:30:33a width of 100 or 100 vw whatever you want um i would recommend not confuse getting confused a lot

2:30:40with percentages and vw just try to pick something and maybe like percentages and stick to it

2:30:47but for the most part you'll realize that you don't necessarily need to give bits or heights

2:30:52to these elements the only reason i'm doing this is because these things don't have some content

2:30:57contained right for example if we really had an image right here it will automatically have its

2:31:02own dimensions right so that's why we don't necessarily would be giving a lot of width

2:31:07and height in the real world projects but yeah it's a good idea to just know about them as well

2:31:13so we have a width of 100 and a height off again let's not give this a height because like i said

2:31:19we are lacking content so i'm just gonna add a footer one and a footer to notice so you can see

2:31:24the moment i do that because we have some content right here it automatically appeared on the screen

2:31:30now you can sure go ahead and give it a padding of 10 pixel 0 and what this means

2:31:37this means padding top right bottom left so padding top is 10 pixel padding right is zero

2:31:46padding bottom is 10 pixel padding left is zero right top right bottom left it if you have two

2:31:53values if you just have a single value here then it's top right bottom left all same if you have

2:31:58two values here then it's top right bottom left oscillating right for example if i give

2:32:0420 pixels here see that we have more space on the left and you can see really right but we do have

2:32:10than compared to top and bottom so anyway we can give this a 5 pixel and we can also give it a

2:32:16border bottom of 2 pixel solid gray for example right there we go now it still looks horrible

2:32:26compared to the original side but we'll do one neat trick which will kind of fix them all so what

2:32:32we will do is we will go ahead and select body first of all and let's just go ahead and give it a

2:32:39height of 100 vh or kind of like minimum height at least we want at least one the body to be 100 vh

2:32:47the next thing which is going to be interesting is i'm going to set this to flex

2:32:51right and you see the moment i do that it kind of breaks it it breaks the layout but we don't want

2:32:57this flex to be row we want this flex direction to be column which is what it was earlier but now

2:33:04what we can do is we can stretch this section to take up as much width as it wants now we can

2:33:13go ahead and say that hey hey hey hey don't go ahead and take out any sort of width from nav

2:33:21and footer and how we do how do we do that we say flex shrink zero i don't want my header or footer

2:33:27to be shrinking but what i want is that section go ahead and take as much width as you want

2:33:36see now what happened here the way the reason what happened uh the reason why this layout is

2:33:43looking like this if i go ahead and open this in a new tab you will see and we have not have not

2:33:48discussed the chrome dev tools yet don't worry about this there is another course in the full

2:33:52stack learning path on this dev tools but just stick with me here for the sake of visualization

2:33:59so we have a body right it has got a nav it has got a footer and it has got a section the thing

2:34:05which we said here is that nav and folder should not shrink and if you do not understand this

2:34:10just go back a couple of videos you will find me discussing these concepts in great great depth

2:34:16when the flexbox was starting so we said nav and photo should not shrink that's fine so what should

2:34:22happen to section i say section should take up as much place as it could right and we know that

2:34:29body at least has the height of the full screen therefore section is taking up a lot of space

2:34:35here right that is cool but how do we center this now i mean that should be simple here

2:34:40right because this is again a reduced problem where you have a div and you want to center this

2:34:47and we have discussed this so what we want to do is we want to just say display flex here

2:34:52justify content center align item center and boom you're done and that's it that's how you create a

2:34:59nice little google like layout for yourself you can see now it pretty much matches a lot i mean

2:35:06not exactly in terms of the fonts or the layouts or whatever but in uh in terms of

2:35:10the positioning right so that is what you want to do right you want to go to different websites

2:35:17like even like code dam for example i would recommend that like go ahead on code damn

2:35:23try to create this layout again you should be able to visualize how these nav items would

2:35:27be placed how the search bar would appear how this gap would be created in between and so on

2:35:33right so try to go to different different websites which you see like in the guess of

2:35:37this footer just take example of the photo and try to construct them for now you can also go ahead

2:35:44i'm not sure how long it will stay like that probably but if you go to codedam.com projects

2:35:52you could see certain projects which you can also build which have certain helper files

2:35:57available to you in order to build those things and certain guidelines available to you so these

2:36:03projects would be also very very useful very very beneficial when you're learning layouts and

2:36:07stuff like this but a bunch of them also involve javascript so i'll recommend just holding your

2:36:12horses until and unless you do javascript but you can take a look at them how you can create them

2:36:22hey everyone welcome back and in this video let's just discuss about a very very very very

2:36:27very important concept in css again some of i think some of the fundamental things

2:36:32just like layouts is one of the fundamental things this is also something which i consider

2:36:37one of the fundamental things you should know in css and that is the concept of positioning

2:36:43now let's just go ahead and create i'm going to explain the positioning part from the last video

2:36:48which we did and create a span right here right just a simple span tag okay now what i'm gonna

2:36:58do is i'm gonna go ahead and first of all go to section span and create a background of yellow

2:37:05or you know blue for example because it could give this a little bit of

2:37:14better looking thing width of 100 pixel and height 100 pixels nothing fancy right so we

2:37:20have a small square here and obviously because this is a part of a flex box so it's it's kind of

2:37:28you know following the flex direction now what i want to explain in this video however is not

2:37:34related to flexbox it's related to a property in css called position now by default what happens

2:37:41is all the elements come with the property of position static a position static doesn't mean

2:37:48anything that's that's just a placeholder kind of value for example so what what is position

2:37:55first of all well i believe you will be able to appreciate and understand it in much more

2:38:00way if i just kind of used it right away so we have a value called position absolute

2:38:08now position absolute like it sounds it actually picks your element

2:38:15and picks it apart from the layout tree which you have from the layout structure which you

2:38:21have now if you think about html in fact i don't even need flexbox and all this stuff in this one

2:38:27if you think about html a little let's just keep body um you will realize that even though if you

2:38:34don't have any styles or anything that css just starts css just starts to not exactly css but

2:38:43html just starts to stack elements together right on one after another one after another and so on

2:38:49but with css you can change this behavior of elements you can pick an element

2:38:54bring it out of this behavior and position it anywhere on the screen by giving it coordinates

2:38:59position absolute kind of allows you to do that so if i go ahead and give this a top of zero

2:39:05and a left of zero you will see that this blue square just got stuck to the top of the screen

2:39:12right and if i try to actually let me just go ahead and open this in a new window because that

2:39:18will be much faster how i can explain and don't worry about this weird looking dev tools panel

2:39:23we will discuss how to work with that in another course but you can see right here at least um we

2:39:29have an area where i can see the styles and i can set this to one pixel right and now if i careful

2:39:36take a look at here and the behavior what's happening here if i increase this value with my

2:39:40keyboard you will see that this element is sliding down right so it's pretty apparent that the stop

2:39:46value is exactly controlling the coordinate of the top left this top left pixel of this element

2:39:55right similarly the left value is also controlling the left attribute of the top left l top left

2:40:02pixel so if i give it a new value you can see it pretty much just you know it's it's just

2:40:09increasing and it's just placing the element at a new place now you might think why this is why this

2:40:15is necessary i mean would there be any real use case of this at all and yes there is a use case

2:40:21even if what i'm about to tell you wasn't did not exist till css absolute property is super helpful

2:40:29but anyway there's a special use case of this and the use case arises when the whatever element has

2:40:38an absolute value has a relative parent what do i mean by that i mean for example let's say i have

2:40:45a 10 pixel top and 10 pixel left and i go ahead on section and give this a position of relative

2:40:53you see what happened here if this did not exist if this block did not exist

2:40:58what this blue box was doing is it was just taking up the 10 from left and 10 from top

2:41:04from the screen from the window right but the moment i give this section a position relative

2:41:10which is the parent of the span of absolute it actually considers this this red box as its

2:41:17ultimate you know zero zero coordinate system this is important because what position absolute

2:41:24does actually in fact is that it tries to go ahead inside your html and tries to go ahead

2:41:30to all these parents and tries to find which one has a position relative stuck to them

2:41:38and the moment it finds a single parent which has a position relative it just uses that as the

2:41:44coordinate system of you know you know just placing it from top and left if it does not

2:41:50find anything then of course it's just the screen right and you can do some interesting stuff with

2:41:55this now you have position absolute you know for example if you know the dimensions of a container

2:42:01you can pretty much just play around with this mess around with this as well right you can just

2:42:05place it anywhere um in that particular card for example you can give this a negative value as well

2:42:11so if i'll give for example write as negative 10 pixel um well we have the width as 80 vw that's

2:42:19why but if you take a look here you can see that this they've just slides outside this div and

2:42:24you know i'm not sure if you have seen but there are certain sites like we just post like certain

2:42:30numbers like new course and that's kind of like nice looking label for that right so that's how

2:42:36you style these elements that's how you pick them out of the tree and do all sorts of funky stuff

2:42:43so yeah that is how you use position absolute with position relative super important stuff which you

2:42:49should know that is how position relative works in harmony with position absolute and so that

2:42:56is all for this video make sure you are leaving rating to the course if you haven't share it with

2:43:01your friends and colleagues and practice along the way practice practice practice is super important

2:43:11hey everyone welcome back and in this video let's just go ahead and take a look at another value

2:43:16called position fixed which is kind of like position absolute but slightly different so what

2:43:24do i mean by that for that first of all let's just give our body a minimum height of 200 vh

2:43:30that means we will now be able to scroll this body right now let's just go ahead and change this from

2:43:36position absolute to position fixed and you will see a couple of changes here if you are careful

2:43:42the first change is that the box has moved slightly up for some reason and the second

2:43:48change is now when i'm scrolling this the box is actually stuck to the screen right and that's what

2:43:55position fixed does position absolute takes it out of the coordinate system the l takes out the

2:44:02element out of the regular html coordinate system right and puts it to the nearest relative parent

2:44:08position fixed goes one more step ahead and just pretty much takes out the element out of

2:44:13the screen and gives it to you and says that hey just go ahead and position however you want it

2:44:19and you can see because i haven't i have given top as negative values top and right

2:44:24it is actually going out of the screen because for position fixed the coordinate system is in

2:44:29fact the screen and not the parent element which has a position relative or absolute or whatever

2:44:35you can pretty much put whatever you like here but position fixed does not has a coordinate

2:44:40system which is bound to an element but it is only bound to the screen so you can

2:44:46only style it with the help of setting up coordinates on the screen and the fun fact about

2:44:52this is that it kind of sticks to the screen right it just sticks when you're scrolling and so on

2:44:58that's how pretty much a lot of these sites even for example for code dam i guess we use

2:45:03uh we use slightly different technique here which we'll again discuss but you can see this this kind

2:45:07of effect where the header stays the same is kind of like position fixed not exactly because you can

2:45:14see you cannot get this effect where you have a where you have something at the top and then

2:45:19it starts sticking but it's pretty close if that banner wasn't there for example if i remove this

2:45:24now you can see you know it seems like this is position fixed which is pretty cool

2:45:34hey everyone welcome back and in this video i just wanted to quickly tell you one more

2:45:39css property css position property that is position sticky now i just i don't know why

2:45:46i wrote all these styles in line but it's fine you can also write them in different style sheet

2:45:51but because this is just going to be a quick video i just wanted to show you one way you can

2:45:56bring the benefits of position fixed that is just having to scroll just having a fixed element

2:46:02which is scrolls with your scroll bar and the benefits of position relative that is relative to

2:46:08your scroll bar basically for example take a look at codem.com this header we have something at the

2:46:15top in purple but the header is position relative as long as i don't start scrolling and does not

2:46:22reach here so the way we do it you can do it with javascript solutions as well but the way

2:46:27we actually do it now is using css position sticky so for example let's say i have a yolo div sitting

2:46:35just right in the middle and let's say this has a style of i don't know like display not display but

2:46:43background yellow now what i want to do is i want to make this as position sticky so when

2:46:49i scroll past this yolo it just sticks at the top and currently it's not possible because if

2:46:55you use position fixed then always stick at top right or always stick at wherever it is

2:47:01and otherwise you need javascript solutions but now you can go ahead and use position

2:47:06sticky and give this a top of zero a top of zero just tells it how much distance you need from the

2:47:14top when the stickiness starts so if i go ahead and go go and you can see now even i'm scrolling

2:47:21this just sticks at the top if that if i give this a top of 20 pixel you're gonna see and i probably

2:47:28know this is not the right way to write css it's too cluttered but i hope you are understanding

2:47:33because as developers you also need to understand a little bit of way of working with bad written

2:47:39code or at least bad formatted code so anyway if i give this a top of 20 pixel you can see if

2:47:45i scroll down it starts crawling just before 20 pixels in the height right so you can just also

2:47:51see a little bit of green background at that time and it has a distance of 20 pixels from the top so

2:47:57yeah that's pretty much it that is literally how the code dams header also works in case of this

2:48:03thing right this is not position fixed this is position sticky so now you know one way of how to

2:48:09make cool elements on the web right so yeah anyway that is all for this video i hope you understood

2:48:16something if you did make sure you are leaving a rating to the course if you have done that

2:48:21already that's awesome if not just leave a rating and help some people in the comments if you can

2:48:31hey everyone congratulations on achieving completing this milestone which is completing your

2:48:37very first programming course in web development now i'm assuming some of you are extremely new to

2:48:43programming and if you have completed this this is a huge feat so don't don't think that this is

2:48:50a small thing it's it's a great achievement to complete your very first coding course

2:48:55now the question is people usually ask what's next what's next and we are improving the code

2:49:01dams ui we are improving this whole interface to make sure you actually understand what's next

2:49:06but if for the matter of fact if it's not there yet or if you're even seeing this video that means

2:49:11there needs a little bit of update in the ui which tells you where to go next

2:49:15and in this case what you have to do is go to your learning path and pick up the full stack

2:49:21web developer learning path and take a look at the next course in this case it's advanced html5 css3

2:49:26but it might be something different in your case right so make sure you do that make sure you jump

2:49:32right into the next course and keep continuing your full stack your front end whatever you

2:49:37are doing in that particular journey but yeah that's pretty much it for this video

2:49:43hopefully you understood a lot of new things in this course and hopefully that makes you

2:49:49starts your front end web developer or full stack fifth developer journey whatever you are doing

2:49:55that is all for this video hopefully see you in the next course really soon

2:50:04hey everyone welcome to the very first video of this new course on javascript which is the part of

2:50:12full stack web developer learning path on code dam you can find this course on front-end web

2:50:17to proper learning path as well doesn't matter but what matters here is that we'll start from

2:50:23ground zero we'll start from basically assuming that you have no information about javascript and

2:50:30we'll build that solid framework of understanding along the way in this course before that make sure

2:50:37you have done the first three or whatever amount of courses you have before javascript in this

2:50:42learning path and the best way to follow this is from code dams learning path code damn.com slash

2:50:48learning paths so make sure you're following the learning path in order because if you're trying to

2:50:53learn javascript before actually getting to html or css or even i would say internet fundamentals

2:50:59which is important then you will have a hard time later on so that is all for the introductory part

2:51:05super excited to start this course with you hopefully you are too this is going to be

2:51:09an interactive course that means you will have a bunch of exercises and projects to complete

2:51:15along the way and i highly highly recommend to do them and not just watch videos only

2:51:25hey everyone welcome back and in this video we'll quickly take a look at how you can set up your

2:51:30development environment so that you are able to learn in this whole course and beyond that as well

2:51:37now for the vs code the offline setup i would highly recommend if you go back to the html css

2:51:42course and try to look to that video because we go in depth on how to set up uvs code for your local

2:51:50system otherwise what i do recommend and what i would also be using is the code dams online

2:51:56playground so you can go to codedump.com try to look for playground it might have a little bit

2:52:01of change to ui maybe by the time you're looking because you're right trading very fast so maybe it

2:52:06changes and once you go ahead you should see some sort of html or css playground just go ahead and

2:52:12open that the moment you open it you will be able to see that you get a live ide within your browser

2:52:20which also saves your work so it's completely fine to use it for practicing and come back to it later

2:52:26similarly you will find the same ide also embedded as exercises right so you would see them

2:52:33this ide interface in the practice labs further ahead so this will also feel a lot home to you now

2:52:39in order to edit this ide edit the files inside this you can see we already have these three files

2:52:45index.html script.js and style.s style.css well we are familiar with these two files

2:52:52and javascript is all about learning what goes inside the script.js and a little bit of you

2:52:58know the html file so don't worry about this if it seems confusing um you know you don't necessarily

2:53:05have to look at the javascript syntax yet we will go through this one by one what exactly whatever

2:53:11means but yeah once you have this screen up and running you can see whatever changes i'm making

2:53:16are automatically synced to the right side and you don't have to worry about

2:53:21um anything except the code here which you're coding so that is cool

2:53:30hey everyone welcome back and in this video let's just start with the fundamentals why do you even

2:53:36need javascript we will go into the depth of this a little bit but just to give you a very

2:53:42real world example of why you need javascript is this right here right so if when i when you

2:53:49change this text right here you see the page on the right refreshes right so on code damn you can

2:53:56see whenever you are making some change it happens automatically and this is one of the examples

2:54:00where we use javascript what we do we just simply in the in the code dams source code this id source

2:54:07code we are simply seeing that hey if there's any change in this file refresh this page well it's a

2:54:13little bit more complicated than that but you get the idea that if there's any change in this file

2:54:17refresh this page so you see programming is all about logic it's all about building those chain of

2:54:25logic and links and if else and going down that rabbit hole if you understand that you will be

2:54:33able to understand javascript in no time so our aim with this course is not only just to learn

2:54:38javascript but also learn programming in general because you would realize once you start learning

2:54:44javascript a lot of things are transferable or if you're somebody who has a bit of experience

2:54:50with some other programming languages you will be able to relate that javascript is very similar so

2:54:54that's the idea we also want to develop the core understanding of the language not just the the

2:55:00basic language itself because that's something you can do pretty much anytime anywhere right with any

2:55:06language but what really makes a good programmer if you is if you understand the core fundamentals

2:55:13but anyway let us start with a hello world of course like we always do and for this

2:55:19for this playground at least what i can tell you is whatever the syntax here is you can

2:55:25leave a bunch of these script files if they are still present by the time you're watching this

2:55:29if they're still present just leave them here this script file exists because we want to have these

2:55:35browser console logs reflected right inside um our area we don't want to go into the chrome dev tools

2:55:41but we'll see how we can work with that anyway i'm gonna remove this and has the hello world program

2:55:48for javascript all we have to do is we have to make use of something known as console.log

2:55:54hello world and don't worry we'll also take a look at what this is but you can see we get a

2:55:58hello world here in the console of the screen which is basically the console of your browser

2:56:04right so if you open this in new tab you will see we get nothing but if you go to

2:56:08the inspect which we have already done by the way if you are coming from html course we have

2:56:13used this panel right so if you go to console you will see we get this hello world with us

2:56:23hey everyone welcome back and in this video we're gonna be taking a look at a very simple thing in

2:56:29javascript which is variables and very simple but fundamental things in programming languages as

2:56:34well which is called as variables so what variable is it's basically a placeholder that holds a value

2:56:42that's all it is right so you can have let's say if i give you 10 plates to hold it's not

2:56:51possible right you would hold two plates in your hand and you need for example some different

2:56:58some table or some sort of thing to just put the rest of the eight plates similar thing exists with

2:57:03computers with cpus precisely cpus cannot hold a lot of information all together right they need

2:57:12some place to put the temporary information and that that's the temporary information is called as

2:57:18ram right so your ram inside your computer holds that temporary information random access memory

2:57:24in programming languages analogic analogous to that we have variables which hold temporary

2:57:30information which we might or might not use later in our program it depends on

2:57:35us right so how do you create these temporary containers well in javascript we make use of

2:57:43two keywords to create these and let me also introduce you with uh with javascript syntax

2:57:48with this and that is using let or const these are the two keywords which we use to create variables

2:57:55in javascript and the syntax is const let's say my first variable then an equal to sign

2:58:04and then the value which you want to set it to let's say 250 for example which is just a number

2:58:10so a couple of things you can see that i have a name of the variable i have a keyword

2:58:17which basically says that hey this whatever thing you're writing is in fact a variable

2:58:22and then i have a value with an equal to symbol that is how most programming languages work i

2:58:28mean there might be some difference in how the variable is declared or how the value is assigned

2:58:34but for the most part you will see that's how this works now once you have this variable you

2:58:41can pretty much do a lot of things with this right you can maybe add a few numbers you can subtract a

2:58:46few numbers you can do a bunch of stuff but with javascript you can not reassign a variable which

2:58:55has got a const value for example let's say for a moment let's pretend that you understand what

2:59:02console.log is right for now we'll just consider console.log as a simple function which puts

2:59:07the value here right in the in the bottom area so if i go ahead and console.log this

2:59:12you will see that i get 250 console locked here now if i go ahead and try to make this 251

2:59:21what you will see is that we get an error which says assignment to constant variable right so

2:59:27this const right here means that hey whenever you create this value you have to keep this the

2:59:33same value all the way and you might be thinking like what's the use of this i mean if variable

2:59:39actually stands for a variable right and you are saying this is a constant variable which is

2:59:45i don't know what's the word called in english uh but it's it's like you know opposite so you're

2:59:51saying constant but variable but this is super important because of number of reasons which we

2:59:57will discuss later down the line but this just means that once you initialize this variable

3:00:02with a value you cannot change it later down the line in your program right now of course

3:00:08there are a bunch of edge cases we need to be careful about but we will discuss that later

3:00:14now the second part which we discussed was how you can create a variable with let keyword

3:00:21led this keyword right here what this does it does the pretty much the same thing but you're seeing

3:00:29that i did not get that error anymore so what has happened well you see that with let you actually

3:00:37tell the javascript that hey okay i'm setting this variable but you can you're free to just

3:00:44change this value later down the line if you would like to right so now if i go ahead and console.log

3:00:49this my first variable you would see that we get two console logs the first one is 250 and the

3:00:55second one is 251 right so that is how it works that means with let you can reassign the values

3:01:05with cons you cannot reassign the values and if you look carefully what you will observe is that

3:01:10i am not using the let or the const or any other modifier after i assign it once or after i use it

3:01:17once and why is that because javascript already knows that this variable has been created right

3:01:23so we only need to use this initializer keyword or whatever you want to call this led or const only

3:01:29for the first time if you try to do it right here if i try to do let here you would get an error

3:01:36which says that identifier myvariable my first variable has already been declared this error

3:01:42message simply means that hey go ahead and see if you already wrote my first variable somewhere

3:01:48before in your code similar thing with const so if you change this to const you will get the same

3:01:53thing you know the same error basically so that means you should always use let or const once for

3:02:00declaring the variable and the rest of the places you just have to use either for accessing it or

3:02:06for reassigning it you just have to use it without anything basically right so this is all you need

3:02:13to know about variables in javascript there is also a third way to make variables in javascript

3:02:18using war we are right so this also used to be a way in javascript but please don't use it right

3:02:27for the reasons which we will discuss later this is dedicated this is no longer required

3:02:33do not use war to create variables in javascript it is supported and it will be supported for

3:02:38a very long time in future as well but don't use war right use let or use const

3:02:44and finally you would have observed that you can also create variables without actually

3:02:49defining anything without actually putting anything here at all which might seem like

3:02:55you know that i just wasted your six minutes now that you did not need to do that at all but don't

3:03:01do this again because of the reasons which you will discuss these reasons are due to scoping

3:03:06and we will discuss these issues later down the line but for now the best rule

3:03:10of thumb you have to remember at least for now is always use const or late

3:03:15some sort of identifier here and yeah that's that's all you need to remember at the moment

3:03:26hey everyone welcome back and in this video we'll be looking at a very important thing in javascript

3:03:32and in programming languages in general and that is the data types supported now javascript is

3:03:38a language which can store a lot of types of values in a variable like i said variable is

3:03:44a empty container which you can use to just hold values temporarily right as long as their scope

3:03:51lasts technically we will discuss about scoping so don't worry about that yet but what do i want to

3:03:56discuss here is all the kinds of values which you can give this variable and what does that mean and

3:04:03we'll also just keep an eye on the console at the bottom so that we can see what's happening

3:04:08all right so first things first numbers are simple right we understand numbers like 1 2 3 and so on

3:04:16right so whenever you store a number you will see that you never use quotes or anything right single

3:04:22quotes double quotes nothing that's it you just put a number you put an equal to sign and put a

3:04:26number now i want to store a string which might be my name which might be anything right so for

3:04:33example for my name i will just write mayhew right so this is a string and the way you store strings

3:04:40is that you enclose them into double quotes or single quotes javascript does not care if you use

3:04:47double quotes here or if you use single quotes it doesn't matter in some languages it matters

3:04:52does not matter in javascript the next type which we have is boolean which is either true or false

3:05:01so something like you're above 18 can only be true or false right it does not make sense to have

3:05:08an integer answer or maybe i mean a string yes or no is also fine but we for the boolean values for

3:05:15values which can only have two possible outcomes we usually go with true or false so you can go

3:05:21ahead and give this value as true again without the quotes or false right without the quotes as

3:05:29well so you have numbers you have strings you have booleans which is like um for example my

3:05:37age could be 22 above am i above 18 could be true and my name could be mahul right so this

3:05:52is like reflecting three different kinds of uh variables and you can see we get an error that

3:05:57my first variable is not defined because we are trying to console.log something which is not there

3:06:02right so another important thing which i would just pass on as a quick hint is always try to

3:06:07read error messages if you see an error if you see the code is not working try to see what the

3:06:12computer is telling you in a lot of cases it might just seem practical for you to just skip

3:06:18over it but trust me computer wants to help you so make sure to read the error messages

3:06:24so yeah we have the three fundamental types with us string boolean and number let's take a look at

3:06:30a couple of more so what i'm going to do is i'm going to write an a variable called friends right

3:06:38and i know that my friends well they could be a string that means i can

3:06:43just separate them in a comma but that's not the best way to store something which

3:06:48can have a lot of values a better way for that is to use an array now what this is an array if

3:06:55you're seeing this for the first time an array is a collection of usually the same data type

3:07:03right and why do i say usually because javascript is lenient javascript allows you to store

3:07:10an array with different kind of values as well this is completely fine

3:07:14so if i go ahead and console.log friends you will see i get 22 and true like this if i add mahul

3:07:21here as well you will see i get mayhew logged in as well so what is an array i mean what is this

3:07:28weird syntax and why do i have to write these square brackets right here well you see if you

3:07:34just write like this this is wrong syntax because well it doesn't really make a lot of sense right

3:07:41this square bracket just denotes that hey this is a start of an array which consists of ordered

3:07:48items that means the order matters here and you can access them with something known as index what

3:07:56index they have and we will discuss about arrays in great length but just to give you a quick look

3:08:02at this let's say if i want to access true from this array so what i will do is write friends of

3:08:07one that is friends and then in square brackets i will write one and you can see i get true

3:08:14because indexes in computers and in javascript especially start with zero so if you want to get

3:08:2022 in the console below you will write friends of zero if you want to get true you will write

3:08:26friends of one if you want to get mayhew you'll write friends of two this brings me to the next

3:08:32data type in javascript and that is what would happen if i write friends of three here right

3:08:38so let's just go ahead and take a look at friends of three and you see we get undefined although we

3:08:43don't have a string here calling called undefined right so what is this well this is not a string

3:08:50this you might get confused here by seeing that this is a string this is another kind

3:08:56of data type you can say or kind of value which you can provide to the variables and you can say

3:09:01some special special value as undefined right and again you can see it's not in quotes

3:09:09that means it's working fine and it's fine so if i console log this you see we still get undefined

3:09:16but what exactly is undefined well undefined is basically a value of a variable which has not been

3:09:24initialized so here we are obviously giving it specifically the value of

3:09:30undefined so that's why it works but let's say if i go ahead and remove this

3:09:35right well in the case of const we get an error that it says that missing initializer in the

3:09:41const declaration because remember i told you that const cannot change its value later down

3:09:46the line right so you need to give it a value then and there but if i switch this to let for example

3:09:52so i say let some special value and i console log this it saves me undefined but later down

3:09:58the line i say okay you know it should be 22. then if i console log this then it gives me 22.

3:10:05so undefined is basically you can see i did not assign this a value but it

3:10:08got undefined by default so it's a value for something which has not been initialized yet

3:10:14right so that is all you need to remember in terms of undefined and we can move forward with that all

3:10:21right the next one which we have is beginned now what do i mean by that that means big in number

3:10:30this is a number which is big which is which could be really big right so for example in this

3:10:37case you see my age is 22 which works fine but javascript has a limit on the size of this number

3:10:45right so if you have a number which is of certain magnitude let's assume 1000 in this case for the

3:10:53sake of simplicity javascript would kind of not work well with 1001 and 1002 and 1003 right the

3:11:01math breaks for javascript and why is that because computers have finite memory right so javascript

3:11:08has to cut off after some point that it has to say that hey i'm not going to store any number

3:11:14beyond this and it's a really really big number right it's a really big number it's

3:11:19this number is actually 2 raised to the power 53 minus 1 right which is a huge number but

3:11:27if you are working with large sets of data in javascript you might need even bigger numbers

3:11:33right so you might need a lot of bigger numbers which are much much much much much much bigger

3:11:41than 2 raised to the power 2 raised to the power 53 and if you try to let's just get rid of this

3:11:47if you try to console log this i mean this would work fine but the way i said it is that arithmetic

3:11:55for example addition subtraction multiplication would break on this number so the way you put

3:12:00the way you make this as a big number is you write an n after this and the moment you do that

3:12:08you would see that well we do not get a console log here but if i go right here in this console

3:12:15you would see it craze out kind of but we do get a console log and the best way to verify

3:12:20that this is a big end is using something known as a type of operator which we'll learn about

3:12:26very soon there are a couple of more data types you can say in javascript which are objects

3:12:32which are functions which are symbols and which is also null one one data mode one more data type

3:12:40is null just like we have undefined we also have a value called null which you just go ahead and

3:12:46use you will see you just get null right so the difference between null and undefined is basically

3:12:54null is like explicitly saying that this value does not exist or should not exist right whereas

3:13:01undefined just means that this variable has not been initialized yet so that's the difference

3:13:07right null is basically saying that this should be blank or this is empty and this should be empty

3:13:14undefined is just saying that hey this hasn't been initialized yet that's all but yeah there

3:13:19are like i said a bunch of more variables and data types in javascript which we will discuss do not

3:13:24worry about them but we will pick them up as the time comes but for this video i think that is all

3:13:35hey everyone welcome back and in this video let's just quickly take a look at

3:13:39type of operator right so like i said we can create multiple variables i'm gonna say type of my

3:13:47h as the variable name and i'm gonna write my h here first of all just to give you an idea of what

3:13:54i'm trying to do you see in javascript what you can do is you can assign the value of a variable

3:14:02as another variable right or maybe a bunch of more variables let's say you want to add a few

3:14:07variables here so you can do that that's completely fine but what you can also do

3:14:12in javascript is you can write the keyword called type off and you can see it immediately turns red

3:14:18because this ide knows that this this is a special keyword and what this expression evaluates to if

3:14:25you just take this expression right here what this expression right here evaluates to is a string

3:14:32which is the data type of that particular variable so a couple of things to mention

3:14:39here remember here is that this thing right here gives you a string value just like me hole is and

3:14:46the second thing is that the string value is actually a data type of whatever the variable

3:14:52you wrote after type off right so you can see in the console if we take a look at this we get

3:14:56number because my h is in fact a number if i use type off with this you will see we get boolean

3:15:04if i use type off with me my name that is we get string if you type off with friends you see we get

3:15:13an object and the reason we get an object and not an array because in javascript arrays our object

3:15:19right so don't worry about that yet it just means that you know it's some sort of special value

3:15:25for some special value which is actually null you see we still get object this is interesting

3:15:31this is a weird edge case in javascript as well which might get caught you off guard

3:15:35so how do you distinguish you might ask how do you distinguish between an array and a null type and

3:15:41there are ways don't worry about them but what you have to remember here is that if you write this as

3:15:45undefined you will get the value the type of as undefined right so null both null and arrays are

3:15:53type of object but undefined has a type of itself right that is important then if you move on to

3:16:00begin number you would see that we get big end and that's it that's pretty much all we have at the

3:16:07moment in terms of what whatever values we defined so yeah that's pretty much it for type of it's not

3:16:13super handy i wouldn't say that you would be using this a lot of times but it this is something which

3:16:19is irreplaceable when it is needed because this can help you in data validation or this can help

3:16:26you in determining what kind of data you're dealing with without actually taking a look at

3:16:31um the code above which sometimes is not even possible right if you are using some

3:16:36library or anything or you know just use an input from untrusted sources

3:16:41so that's that's a good um way to just validate what kind of data type you are getting

3:16:53all right everyone welcome back and in this video let's to do a little bit of math operations with

3:16:58numbers because numbers are fun and you will be using a lot of numbers in your journey so

3:17:03i'm going to start with cons and i'm going to show you um what is possible so right now i'm

3:17:08going to start with my h as 22 and what i can do is i let's say i want to increment a year

3:17:14as fast and i want to increment my h223 so i can do my h plus 1 right which is basically what you

3:17:21would also write on paper kind of right if you are doing math problem or anything and that's

3:17:27what you do with programming as well you just write plus one but you can see that i still get

3:17:3222 even though i tried to do my age of plus one and the reason for this is we are not assigning

3:17:38this value back to my age right because this plus one although it does increment this to 23 but we

3:17:45are not storing this value anywhere so how do we store this value well you might think that hey

3:17:51i can just go ahead and use like something like this and this is completely fine but remember what

3:17:57i told you about const is that you should not or you cannot actually um reinitialize its value so

3:18:05how do you fix this you have two solutions right now the first solution is you change this to lit

3:18:12and the moment you do that you will see that it works just fine why does it start working because

3:18:17let allows you to change the value after you initialize it const does not the second way is to

3:18:24actually create a new variable called my updated h and then do a my h plus one and in the console log

3:18:33the statement just pass in my updated age and the moment you do that you will see that you get a

3:18:38nice updated value this time i think this is the first time we are seeing something in the console

3:18:44which we did not explicitly write in the code right so this is a big moment where you are

3:18:49actually computing something for the very first time this is the very first time you're computing

3:18:54something right you're telling the computer that hey go ahead and add something to it and this is a

3:19:01revolutionary thing if you think about it because a computer which can add once it can add twice it

3:19:07can add so many times and it can do it and at an exponential speed right compared to a human

3:19:12so that's why computers are well fused because they compute that's what computer actually stands

3:19:18for as well but anyway that is a very simple operation right you can also add two you can

3:19:26also add three four five whatever whatever you would like to do you can do with this

3:19:31and the next thing you can do is you can also subtract things with a negative sign which is just

3:19:36a simple dash um not sure if zooming in here would really help but i hope that you all know that what

3:19:44addition and subtraction is i'm not probably going to go ahead on that in this course so

3:19:50the next thing you can do is multiplication right so 22 times 5 is 110 and you see that you get that

3:19:57in the console and also you can do division right so you see if you divide 22 by 5 you get 4.4 as

3:20:04the output which is again fine what you can also do in javascript is you can use double asterisk

3:20:10right here and this double asterisk symbol you can see it gives you a

3:20:14huge value because this is setting this to a power so this essentially means setting 22 to the power

3:20:21of 5 22 to the power of 5 and i think we haven't discussed what i just wrote here which is called

3:20:27as a comment in javascript so we'll do that in the next video don't worry about that

3:20:31but essentially what this means if i have let's say 2 and i have 5 then this should give us 32

3:20:38right because 2 multiplied by itself 5 times is 32 2 times 2 4 8 16 and 32 right so this is another

3:20:48operator these are super handy for example if you want to have let's say an average of a few numbers

3:20:57um what we can do is let's let's write a very simple program right a very manual but very

3:21:03simple program i'm gonna write my friend's age and i'm gonna have let's say 20 19 22 21 and 23

3:21:11right and i want to calculate my friend's average age using a computer i can do it with a pen and

3:21:19paper but let's use a computer now remember i told you how you can access the elements in an array

3:21:24by using index so i can get 20 if i just use average right here you would see i get 20. if

3:21:31i have a 1 we get 20 19 we if i have a 2 we get 22 and so on so what we can do is before calculating

3:21:40average we can calculate the sum of them and i'm doing this very manual way there are obviously

3:21:46better ways which we will look at later but right now you can see i can just go ahead and keep on

3:21:52adding them 0 1 2 3 and 4 right so there we go so now we have a sum which consists of all these sum

3:22:02and i'm going to say total friends which is one two three four five so i have five total friends

3:22:10and the sum of their ages is this so what i can do right now is i can say um

3:22:18again we have not discussed console log much but stick with me here we will very soon and then it

3:22:23will be much more clear but you can also pass all sorts of values in console log right separated by

3:22:28comma and they will all appear down here so what i'm going to do is i'm going to say sum of friends

3:22:35h and just pass a comma and a sum which just shows us this value 105 which is good and i'm going to

3:22:42say console.log total friends and this will be not five but actually my variable total friends

3:22:49here and then finally i can say average is equal to sum by total right and if i just do console log

3:22:58average friend age is average and you can see the console in the console we get 21 which is

3:23:07fair enough because 105 divided by 5 is 21. so you have written your very first javascript program

3:23:14by just calculating the average of a few numbers and yeah we that's that's a great start i mean

3:23:20you have figured out what math operators are and how to perform addition subtraction multiplication

3:23:26divisions and exponential and actually write a great program a great small program as well

3:23:36hey everyone welcome back in this video i will quickly discuss um something known as increment

3:23:42and decrement operators right now these are just fancy way of doing something which we have just

3:23:48done in the last video so first of all let me just clear this out and let me just go ahead

3:23:53and say my h again as 22. now we saw that if i just make this lit i can do my age is my h

3:24:02plus one and if i console log this you will see that my age in fact comes out to be 23.

3:24:09now there is another fancy way of doing the same line which line number two does

3:24:13and that is by writing my h plus plus that's it no late no reassignment nothing like that

3:24:20remember i told you that hey my h plus one would not work because we are not storing this value

3:24:25anywhere right you can see my h plus 1 still gives me 22 but my h plus plus gives me 23

3:24:32right so this is because these two pluses are special these two pluses actually evaluate to

3:24:40the same statement which we wrote my age is my age plus one so you might ask why do we need that well

3:24:47we technically don't i mean we would still be able to write code if that did not exist in fact a lot

3:24:52of languages also does not include the support of doing plus plus um like this but i mean just

3:24:59another feature right just like your phone has tons of feature a programming language also has

3:25:04tons of functionalities does not necessarily mean you have to use them always but it's good to know

3:25:10that it exists anyway there's another operator called minus minus which exists which is you know

3:25:1722 goes to 21. you might think there might be a star star operator but it would not make i mean

3:25:24i don't know like it could make a lot of sense if you just want to square the number real quick

3:25:28but no that does not work these increment and decrement operators only exist with addition

3:25:33and subtraction because these are the most common things which people usually do especially in loops

3:25:38which we will see when you want to loop over a certain statement you want to maintain a counter

3:25:43which just keeps on incrementing by 1 1 1 1 until it hits a certain condition so there

3:25:48is where we use these conditions a lot but you should anyway know about this plus plus adds one

3:25:55minus minus removes one and the fun fact about this is that you can add these plus plus

3:26:02after the variable or before the variable and there is a slight difference in these two ways

3:26:09which we will discuss maybe later down the line but nothing you should worry about at

3:26:13this stage right you can add this before the variable you can add this after the variable

3:26:19but of course you cannot add this before and after this would not work right this is

3:26:23like a weird syntax so if you want to increment it by two either do it twice or

3:26:30just write a single statement which just says my age is plus my ages my age plus two right so

3:26:39that is how you would work with it and that is how increment and decrement operators also work

3:26:49hey everyone let's just go ahead and quickly discuss about console.log in this video which

3:26:54we have been using for a long time but i haven't really gone over to what exactly we are doing here

3:27:00so you can see that console.log is actually just putting some value here but it is especially very

3:27:07helpful if you are doing this offline or just you know just trying to debug something some value

3:27:13what console.log does is before actually getting into that let's just discuss about what a console

3:27:19is right so if you see right here i'm not sure if you have used this before or not but we briefly

3:27:25discussed this about in the internet fundamentals that you have a concept of a terminal right so

3:27:30this is a terminal which is essentially a command line access to a computer right so whenever you

3:27:38are running a programming language you can tell that programming language to output certain code

3:27:45or certain outputs whether it's mathematical whether it's some object whatever it could be

3:27:52into this terminal into the console right so this area right here whenever javascript is running it

3:28:00has a special area not exactly the terminal but it has a special area called console

3:28:05which pretty much looks like this terminal right so where is this console in the browser if you go

3:28:11ahead and open this in the new tab right click on this page go to inspect you will see that there is

3:28:18in fact a tab called console right so you go to console and you will see all the logs which you

3:28:24generate right here as well so for the sake of ease what we have done at code dam is whenever

3:28:30you use a console log we just put it right here in front of you right so you don't have to just

3:28:36switch between codes and uh console all the time therefore you can use it from right here so anyway

3:28:43the point is that this console.log is a function we will discuss about functions in javascript

3:28:48in the next video probably but what a function more or less is this function is is that you can

3:28:55write console log open a circular uh open parenthesis not a circular bracket

3:29:02and go ahead and supply these values whatever you want to console log separated by commas

3:29:09right so let's say you write the second value as 2 3 mayhew whatever right so whatever you write here

3:29:18you can see it appears in the console as well as in the browser if i refresh this you will see we

3:29:23get this so this is cool because now you are able to see whatever kind of values you are writing in

3:29:31the console right or you have in your program why this is helpful because your program can contain

3:29:39um intermediate states for example let's say let's let's take example of the last case itself

3:29:45right where we were calculating averages of the friends so we had a sum variable right we had a

3:29:52um let's say the total count variable and so on so we had all these variables and these were not

3:29:59the values which we could actually see right which we could inspect from the code itself

3:30:04therefore we could use console to just print them out and check the values in a running program what

3:30:09those values are so in a way console.log actually helps you to introspect a running program as

3:30:16well so it's kind of used as a debugger as well right it's not a debugger but you can use

3:30:22console.log for debugging purposes if something is not working you can print the values which are

3:30:27temporary intermediate values and see what value is going wrong so that's the use of console log

3:30:34and of course you can print funny messages here as well want to work with us come join us at carriers

3:30:45you know stuff like this i think companies do this all the time right

3:30:54hey everyone welcome back and in this video let's just go ahead and take a look at functions

3:30:59in javascript what functions are how you can work with them and what do they mean so what i'm going

3:31:05to do is go ahead and create a very first function first of all and after that i'll explain it to you

3:31:11what that means so i'm going to go ahead and put this console.log statement inside this block i'll

3:31:18name this function and i will say make console log and like this and if you don't understand

3:31:25what i'm doing it's fine what you have to realize is what's the syntax of this the syntax of this

3:31:32is i have a keyword function then i have a name then i have these two brackets with me and then

3:31:39i have an openi opening a curly brace right so this is the syntax of how you write a function

3:31:47in javascript and a closing curly brace now whatever you write inside of this function

3:31:53is the function's body now what is the use of this well consider the statement console log of hello

3:32:04world and let's say you want to console log hello world but you also want to console.log a variable

3:32:11there right so you have two statements and it is possible that you might console logs this multiple

3:32:16times right so let's say we have another statement which says total count right so if we go to

3:32:23the browser logs for example let us see if this is still attached to our index.html script

3:32:31and yep it looks like it is but you can see that we do not get any locks right so why that is

3:32:38happening now the reason that happens is because this console log this function right here is a

3:32:45function and a function is a piece of block which does not execute until and unless it is called

3:32:53so how do you call this function you just write the name of the function in this case it's make

3:32:57console log and write these two brackets right opening bracket and a closing bracket and the

3:33:04moment you do that you can see we get the first statement and the second console log if i write

3:33:10it again you will see that even though i haven't really copied pasted this console statements

3:33:17but we still have two sets of console logs that is because we are using two console logs in this call

3:33:24function statement this is as simple as it can get so i can go ahead and write this i can go ahead

3:33:32and let's just go ahead and make another function where we will say function print all variables

3:33:39right and the only uh use of this function is to write all the variables my age is my age right my

3:33:51sum is sum and total count is total count right so now what i can do is whenever i want to print

3:34:01all of these variables instead of writing these statements over and over again i will say print

3:34:06variables then let's say if i make a change to my age then when i make a change to my age you

3:34:11will see that let's say if i make it 23 and then if i say print all variables again you will see

3:34:20that my age first of all was 22 then it comes out to be 23. rest of the variables are same

3:34:26so this is like one of the most useless use case of a function but there is a lot of use case of

3:34:33functions in terms of you will be using functions all the time in your code so it's important to get

3:34:39the basics right how you create a function what is a function body anything which goes into these

3:34:44two brackets and how do you call a function this is like a very 101 function 101 for you

3:34:55hey everyone welcome back and in this video let's just go ahead and see how you can

3:35:00pass certain parameters to a function and what does that even mean so you see functions are

3:35:06okay this code block is okay that if you want to execute it multiple times you don't have to

3:35:11write all these lines which is fine but the true power of functions come in the fact that they can

3:35:17work with dynamic data that means you can pass you can create a generic function for a certain

3:35:24certain you know operation and pass in some inputs to it and get a completely different output

3:35:31so how do you do that the way you do that is you can pass certain variables to this

3:35:38function or certain parameters and let's say in this case i have a function which adds to my h

3:35:47right so right now the only thing it does is that it just adds my h is equal to my h plus one

3:35:55so that's all it does right so i can say add to my h and if i console log my h after this

3:36:02console.log my h you will see that we indeed get 23 in the console now let's say i want to make

3:36:11this number dynamic the amount of age i'm adding how do i do that well i can just say that hey

3:36:17get my or you know not get my butt something like increment by something like this now this is a

3:36:26this is just a keyword i just wrote it in these two brackets in these two parentheses

3:36:30right now what this is is that it is an argument to this function and what are the argument what

3:36:38are arguments in general arguments or specific values which you can pass when you are calling a

3:36:44function like this so for example in this case if i want to populate this increment by with

3:36:505 i'm going to pass this like this so if i access this function if i access this variable right here

3:36:57if i go ahead and console.log this you would see that we in fact get 5 as the console log and you

3:37:04can see we don't have a lit or a const here we don't need that in an argument so you can just

3:37:09go ahead and name your arguments like that it's fine now the true power is that i can just go

3:37:16ahead and replace that one with an increment pi and now you can see i get 27 if i have adds to my

3:37:22h and then 7 for example you will see that we get 34 now because 7 plus 5 plus 22 is 34. right so

3:37:32this is how you pass an argument to the function now you can pass multiple arguments right it's

3:37:37not that you just have to pass one single argument you can say for example something like multiply by

3:37:45multiply by right and if you just pass this as 2 and you do something like

3:37:52you know you can do weird stuff if you would want but this comes out to be 54 right because well 22

3:37:58plus 7 22 plus 5 times 2 is 54. so that's cool i mean that's completely fine but you

3:38:06can see that you can pass multiple values here and remember what we discussed about undefined

3:38:12data type in javascript let's say if i did not pass this value right here you will see that um

3:38:19first of all what we get in the console is undefined for this argument because

3:38:24like i said it's missing that's what undefined means it's not initialized or it's not passed

3:38:30like that and second we also get another number so if you see nan anytime in your

3:38:35console that stands for not a number that means you're trying to use a mathematical operator

3:38:42on something which is not a number right in this case it's undefined in our case it could be string

3:38:48it could be function you might be multiplying it with a function or anything but yeah that's

3:38:52what it means so anyway i hope you understood the concept of functions you can create very

3:38:57simple functions um once we discuss one more part about them that is the return statements we'll do

3:39:03that in the next video and then we can get into a little bit of basic math with functions as well

3:39:14hey everyone welcome back and in this video let's just go ahead and take a look at how we

3:39:21can go ahead and make use of return statement in a function and what does that even mean

3:39:28so first things first you can see i'm right now i'm assigning this variable which is outside

3:39:33directly and then we just try to log it and that this console looks perfectly fine but

3:39:39this practice although this is a bad practice because we are this function is not pure in

3:39:44in the sense that it is mutating the state outside it but anyway leaving

3:39:48that aside let's say this was const right i don't want my my variable to be modified

3:39:55right now we are getting an error that we are assigning it to a constant variable

3:40:00and we can fix that i mean not exactly fixed but we can just remove this assignment and say

3:40:06that hey this is fine right because this is allowed we are not changing the my age here

3:40:12the variable here but how do we get the value of whatever this is this is being computed

3:40:19outside this function that means let's say this function says that it adds to my age right this is

3:40:26the end goal of this function so how do i get out the final end goal value for that we use a keyword

3:40:33known as return in javascript so what this return does is let's say if i add this return keyword

3:40:40what this does now is that if i store the result of this function in another variable

3:40:46my new age for example so what i'm doing essentially here is that i'm saying that hey

3:40:52whatever this function returns me which is done by this return keyword store this in this

3:40:59variable so i can say my h comma my new h like this and you can see we get 22 and 54 like that

3:41:07so what's happening here is that because i'm returning this computation i get that value

3:41:14returned into a new variable and if you do not store it then it's very well lost right it's

3:41:20basically lost at this point so yeah i mean if you need to store it you need to give it a variable

3:41:26like this now another thing with the return is that if you do not return anything from a function

3:41:34if it is empty or you know if it just has a bunch of statements like this you can guess what it

3:41:39returns it returns you undefined a value which is not set a value which is not initialized right so

3:41:46the b the default behavior of javascript is if you do not have a return statement in your function it

3:41:52just returns undefined implicitly if you're coming from a different programming language which might

3:41:58throw some errors if you're not having a return statement that's not that's not what happens with

3:42:03javascript you don't necessarily need to return always from a function but you should i mean it

3:42:09just makes clear that hey this is where you are pointing that it's the end of the control or end

3:42:15of the function call right even if you don't have anything to return for example let's say if you

3:42:21just want to increment some by 100 and that's it you can just mark an empty return statement which

3:42:29is also pretty much just means return undefined if you don't write you know anything else out

3:42:35in front of return it just means return undefined right that's it that's all it does right so

3:42:42this is one thing and another important thing is any statement after return never executes

3:42:49right so if i try to for example if i try to console log sum here and total count

3:42:57here you will see we have 305 because sum was incremented but if i have let's say total count as

3:43:05total count plus 200 you would see that in the console we still get total count as 5 which was

3:43:13the initial value and the reason for that is because like i said after return no statement

3:43:20gets executed and you can also see our editor pointing us saying that unreachable code detected

3:43:27that means you cannot your program cannot actually reach this part of code ever right it's an

3:43:35impossible condition why because well you always return so you're never going to reach below that

3:43:41so that is something you should keep in mind that whenever you write return

3:43:45you cannot execute anything after that right so that's important so yeah that's pretty much it

3:43:51in terms of return we will take a look at examples of return how they work you can return any single

3:43:57thing any single value in javascript right it's not that you have to return numbers or you

3:44:02have to return strings you can return all these types you can return arrays you can even return

3:44:08functions which is interesting and we will discuss about that probably when we are discussing about

3:44:13closures in javascript but you can do all sorts of fun stuff with javascript when you're doing that

3:44:23hey everyone welcome back and in this video we'll be discussing a very important thing in javascript

3:44:29and in general in programming and those are conditionals and conditionals just means to

3:44:34add if else logic if this is true then that should happen if that is true then some other

3:44:40thing should happen right and as developers all your work would more or less involve

3:44:47building up this logic and setting up this logic in the code so this is super important stuff let's

3:44:52just go ahead and discuss this so let's say i have a function called should should i get a license

3:45:04right and this think function accepts an h and it should return a true or false depending on should

3:45:11i get a license or not a driving license so what i want to do is i want to return

3:45:16true if the age is greater than 18 and false in the other case so what do i do

3:45:24is i make use of a statement called if h is greater than 18 then i say

3:45:31return true else return false and let me just tell you what's happening here so you see how

3:45:39i start an if block is i write a if keyword then a bracket the condition which should be matched and

3:45:46this is a symbol for you know greater than symbol i hope you understand this from your math class

3:45:52if the age whatever i'm passing here is greater than 18 just return true otherwise return false

3:45:59else just means that if this condition does not match then do that right and if i go ahead and now

3:46:06pass in let's say if i start console logging it so let's say i have should i get a license as

3:46:13100 of 800 so we get true here right makes sense if i have the same statement

3:46:21with me but with an age of 17 you would see that the second thing second statement we get is false

3:46:29and see that i'm console logging this function call itself this is just a shortcut of saying

3:46:35that hey i want my result to be stored like this and then console logging result these

3:46:40two statements are same right so i just eliminated one step by taking this value directly and putting

3:46:46it inside console.log so that would work right there's another way we can structure this code

3:46:52a little if you remember from the last video when i said that whenever some function returns a value

3:46:58it will not execute anything below that right so technically speaking we don't need this else thing

3:47:07if i remove this it's still equivalent why because take a look here if the age is greater than 18

3:47:16then we return true and we know once the function returns it will not go below this therefore the

3:47:23program ends if we do not return if we you know if age is less than 18 or less than equal to 18

3:47:30then we'd never enter this if block and this if block essentially ends right so it's technically

3:47:37acting as a else block itself this would not have been else block if i just wrote

3:47:42for example instead of console logging if we just did uh instead of returning if i just did

3:47:49this person is above 18 and let's say if i did this person

3:47:56is below 18 right and if i just had a single statement here single function call rather

3:48:04not even counsel logging it you can see i get both of these statements this person is above 18 and

3:48:10this person is below 18. even though this person is only above 18. so why does this happen because

3:48:15i'm not using return here right so it enters this if block but it never returns and therefore it

3:48:22executes the lower block as well but if i had a return statement here you would see that we

3:48:27only get a single console log which just says this person is above 18 because the moment it happens

3:48:32we just return right and that's it the execution ends or what you could have done is you can just

3:48:40remove this right and else and shift this line right here and it will still have basically

3:48:47the same meaning right you can still see we do not get a duplicate or you know a second console log

3:48:54now you might think what's a good way to go about and in programming generally what you will see is

3:48:59that there are multiple ways to do a single thing so you have to stick to a style you have to stick

3:49:04to a pattern and what i would recommend at the moment at least you can be as much explicit and

3:49:10as much clear as you can when you're using this if else blocks right because you clearly tell the

3:49:16other person who's reading your code another human that what you want this might this is also fine

3:49:22and i use it personally all the time this behavior of early return this is basically what we call as

3:49:28early returning um but yeah i would just say just stick to if else at the moment you will also get

3:49:33a little bit of practice so yeah that's pretty much it for if else introduction in this video

3:49:39hopefully you were able to think about how you can put in some logic using if else but

3:49:50hey everyone welcome back and in this video let's just go ahead and take a look at

3:49:54logical operators in javascript and what do they mean so like i said we have this function

3:50:00called should i get a license right and it just accepts an age at the moment let's just go ahead

3:50:05and extend this and i'm going to say let's say we also have a bright as the second parameter right

3:50:12and what i'm going to do is i'm going to write a condition here which will try to and try

3:50:19to count for both of these factors so we're going to say that if age is greater than 18

3:50:25we will say that well okay this person is above 18 that's fine else you know you can include else or

3:50:32exclude it because you already have the return statement so it does not really matter here

3:50:36else we are not gonna go ahead and do this right away i'm gonna say inside this else block itself

3:50:44you can go ahead and say if bribe is greater than let's say 100 we can say console.log you pass

3:50:55right else we will say this person is below 18. simple as that now if i go ahead and write hundred

3:51:05then obviously it will pass if i go ahead and write 5 and 100 like this

3:51:11you will see that this statement right here uh let's see

3:51:21we get the statement that this person is below 18 because this check fails because private is not

3:51:26greater than 100 it's actually equal to so if i pass in 101 you will see we get the statement you

3:51:32pass right and this is fine but we can rearrange this code a little bit so what i'm going to do is

3:51:40i'm going to rearrange this code and i'm going to write a should i get a license version 2

3:51:46right and in this case i'm going to start with the bribery condition so what i'm going to do

3:51:52is i'm going to say that if my h is less than or equal to 18 and i have a bribe of greater than 100

3:52:04then i'm gonna console log u pass and return what's happening here

3:52:11is that we are using a double ampersand sign right which just says that this condition should be true

3:52:18as well as this condition should be true if both of them are true then i'm going to enter this if

3:52:24lock right otherwise we just say that else if any one of them is false then we enter this else block

3:52:33and we say that hey this person either is greater than 18 or they have a bribe of less than 100

3:52:41so what i can do is i can go ahead and check else if and see i can write if here as well and else

3:52:50if here as well that's also a second syntax so else if age is greater than 18 that means in

3:52:57this case age is greater just greater than 18. so i'm just going to say console.log this person

3:53:03is above 18. and finally i'm going to say else i mean this you can write here that if bribe's less

3:53:11than 100 but from the logic you should understand that this else this if would run if and only if

3:53:19both of them are true right this would run if this condition is true and we for sure

3:53:26know that if this if did not run and this if did not run then this if would run and always run

3:53:35because the bribe might be less than 100 right that's the only that's the only condition

3:53:41that these two ifs would not run right so i'm going to go ahead and just write else if bribe is

3:53:48less than equal to hundred you know i'm just gonna say two less not exactly two less but the original

3:53:55messages we had right this person is below 18. and if i remove this code right here and if i

3:54:02switch this from license to license v2 you can see we still get you pass and for 100 you will

3:54:10see that we get this person is below 18 and for basically a hundred hundred we just get

3:54:16this person is above 18 right so you can see that these two functions are technically the same

3:54:24but you might find one more readable than the other well it's it could be the first one it

3:54:30could be the second one it's your choice but that's that's what i'm saying whatever feels

3:54:35more readable to you are logical to you you should probably use that this one is a little bit flatter

3:54:41in structure that means if i just even remove this you can see there's a single if else if else

3:54:47if chain right here this is a little bit nested but might be a little easier on the eyes right

3:54:52it depends on you but what i wanted to focus on in this video was this double amp sand thing which

3:54:59just means that this condition and this condition both should be true right so let's say i have

3:55:09i'm aged 50 and i give a thousand dollars as the bribe i still get into this block right why

3:55:17because my age is not less than 18. so what we can do is we can write this

3:55:24um let's say if i have this as the first condition or i write the bribe is greater than 500

3:55:35so what does this mean this means if you think about this i want you to stick with me here if

3:55:41this gets confusing just stick with me here and see what's happening we have the first condition

3:55:47age less than equal to 18 which is not gonna pass right so the moment javascript sees that

3:55:52this is gonna fail it just evaluates this whole expression as false right

3:56:01now the next thing javascript sees that it says okay i don't have just this expression i have this

3:56:08this another expression with me which has these two bars and these two bars are logical or so

3:56:14it means if false or bribe is greater than 500 and in this case we are passing thousand here so

3:56:21this is in fact true so we evaluate this part as true so what we say if false are true and

3:56:29false or true just means that it just needs at least a single value as true right so we are we

3:56:35end up with true and we just get you pass right so this is the breakdown of what's happening here

3:56:40that's it that's why you get pass here so if you are passing like 300 you will see we get

3:56:47this block because again just to quickly run you through this is false right this is false

3:56:54false and and anything is false because and requires every single argument to be true

3:57:00so this becomes false and bribe is greater than 500 that's not true because it's 300

3:57:07so 300 is not greater than 500 so this also becomes false and finally we end up with this

3:57:14so we don't run this if block we go to the next elsif block where we say if age is greater than

3:57:2018 which is in fact the case therefore we run this block and that's what you see right so yep that is

3:57:29how logical and and logical or works in javascript and there's another boolean operator which is

3:57:40like um you know white listed for example i have a white listed variable and i can say

3:57:48that if the person is not whitelisted this not operator then i'm just going to say console.log

3:57:55you are banned right and just return from here so what does this mean you can see we already got

3:58:03you are banned and if you can guess why that will be awesome we got this console log because if we

3:58:10just log this value as well you will see because i'm not passing anything i'm getting undefined

3:58:15as the value so if i pass this as true you know what this means this means that the person is

3:58:22in fact white listed therefore not of true is false right not of a boolean is the other boolean

3:58:31so if it's true then it's this expression is false if it was false then this expression was true so

3:58:37because this was true we end up with this right and this expression becomes false therefore we do

3:58:43not enter this block right so we move ahead and we get our regular output but that was not the case

3:58:50if i pass in false you would see that we get you are banned just like that

3:58:55and that's it now what you have to understand in javascript when you're dealing with this not the

3:59:01logical the the snot operator javascript considers true and false as the values which is fine but it

3:59:10also considers pretty much every other thing as a value as well so you can technically speaking pass

3:59:17in a string here and this will work now the reason it will work is that javascript is a dynamic typed

3:59:27language that means javascript tries to understand what is the type of the variable at runtime

3:59:35right it does not make efforts for you to just you know make sure you're using the right values and

3:59:41the right types of uh values basically where they are required so if you're using a string

3:59:46here javascript would try its best to convert the string into a boolean whatever rules are assigned

3:59:54inside javascript's engine according to them and then try to evaluate this so i'm just going

3:59:59to give you a cheat sheet here telling you a few things which you have to remember that is

4:00:05if you pass in 0 here this would be a falsie value right and let's just change this to

4:00:13right listed so you can see if i pass in 0 we get you are banned because 0 is a false value

4:00:18a false value is a value which will evaluate to false if casted into a boolean right which is what

4:00:25happens here so 0 is a false value undefined is a false value like you would have seen

4:00:31when we did not pass any argument null is a false value false is a false value right and there are

4:00:39a bunch of a couple of more right so you will discover them but for the most part always try

4:00:46to stick with booleans whenever they are used like booleans right you can use a string here but it

4:00:55wouldn't make sense and javascript wouldn't tell you that it's what's right or what's wrong so yeah

4:01:01that's pretty much it on your first introduction to some logical operators and how to use the not

4:01:05operators with conditions in a function and i think this is you have made a lot of progress so

4:01:11if you understand this that's awesome if you don't then don't worry try to rewatch some of

4:01:15the content practice all these labs and i'm pretty sure you will get the hang of this

4:01:25hey everyone welcome back and in this video we're gonna be taking a look at arrays in

4:01:29javascript how to work with them a little bit although we will see how we can work with

4:01:35the arrays in our different section but this is like a just a quick start for you

4:01:40so i'm gonna go ahead and remove these two functions and i'm gonna create

4:01:43a new function called add my friends right i'm gonna have an array here let's say my friends

4:01:53is equal to this array and what i'm gonna do is whenever i call this function add my friends

4:02:01this will accept a friend as the argument and i want to add this friend to this array right

4:02:09so what i can do is i can say my friends dot push my friend now what's happening here let's take a

4:02:17look at the console as well so that we have idea what's going on so what i'm gonna do is first of

4:02:25all write my name right away right so you can see the moment i do that i get the console log

4:02:31as mehul inside these square brackets so what this means is that i have just added one element to

4:02:38this my friends if i call this function again someone for example you will see i have mahul

4:02:45and someone in this array right and a couple of things which i mentioned about arrays is that they

4:02:51are ordered that means this order matters what is first what is second what is third and so on

4:02:58this order matters this push function right here helps you to push values to the end of the array

4:03:07right if you want to push a value to the start of the array you use a function called unshift

4:03:14so these are a couple of handy functions which you should know and you can clearly see

4:03:19that the order got reversed from the last one right because earlier you saw that mayhew was

4:03:25first element then someone was second because they were getting pushed at the end now if i go ahead

4:03:30and add the third friend you will see that this person gets added to the front of the array so

4:03:36unshift adds the element at the top which is like at the front and push adds the element at the end

4:03:44so this is one important thing about arrays second important thing about them thing about them is

4:03:51that they start with a zero index that means and we have briefly discussed this my friends

4:03:57of zero would be three in this case because we are unshifting this right so this is zero this is one

4:04:05and this is two right so if you do a zero one two cycle you will see that you get these different

4:04:11different elements together super important stuff another thing is that you can always get the size

4:04:17of this array how many elements there are in in this array by writing a dot length with this

4:04:24and this comes out to be three and this three is not this three just let's just change this

4:04:29so that it makes more sense you will see we still have this three this three is the length of this

4:04:35array right how many elements are there so we added only three elements but if i had some

4:04:40default friends here you would see our length was actually four why because we already added one we

4:04:48already had one and we added three more and when we console logged our friend's length we had four

4:04:55so this is how you work with arrays in general now let's say i have a function or you know i i

4:05:05wanted to remove this last value from this array so what i can do is if you can think about it

4:05:11one way is i can just go ahead and i can say my friends of uh you know 0 1 2 3 is undefined right

4:05:22that's something i believe is fair enough to think about and if i console log my friends you will see

4:05:29that now we have we still have four elements but the last one has got undefined so how do

4:05:35i really remove this element right here well we can use something known as my friends dot pop as

4:05:43the method and this is a function right this is a function so when you call this what's gonna happen

4:05:50is that it's just gonna give you the end value the last value which you pushed and it's

4:05:57just gonna remove that right from the original area array as well so if i console log this as

4:06:04final array and console log the my friends you will see that our final array does not contain

4:06:12this default value right this is removed and i also said that it gives you pop actually gives

4:06:18you the last value so i can just say last value is this because this returns you if you remember from

4:06:25the last return video it returns you that value so last value if you console log this you will see

4:06:33is in fact the default right so what it did is that it took the last value

4:06:39assigned if you want to assign it to a variable it's fine if you don't want it's fine as well

4:06:44and then it also removes it from the primary array which you have

4:06:48right so if i do a couple of more pops for example if i write this two times instead of once

4:06:56and move this you will see my final array is just two elements if i do it three times you will see

4:07:03it's just one element if i do it four times i lose all the elements and if i do it five times

4:07:08well it does not matter after your element is your array is empty this function would

4:07:14just return you undefined right you guessed it right because there is nothing to be returned

4:07:19so it returns you undefined and it removes nothing so you will always just keep on getting this empty

4:07:24array if you write a lot of these statements so that's how in general how you work with arrays

4:07:30in terms of pushing popping and inserting elements one final thing which we can take

4:07:36a look at is we can also insert or you know modify values based on the index so like i said

4:07:44you can access the first value like this where you have someone like this you can also modify this

4:07:52so if you say something like like i said i had a typo here so if i say something like

4:07:57someone and then i console log my array you can see that my typo was updated from the last copy

4:08:05right so you can change the values which are stored in an array

4:08:09if you know the index of the value which you want to change index is basically everything in

4:08:14an array if you know the index you can pretty much do anything with that particular element

4:08:23hey everyone welcome back and in this video i'm gonna be introducing you to loops in javascript

4:08:29one of the most important things again in a programming language and what loops allow

4:08:33you to do is it allows you to run a bunch of statements over and over again so you might

4:08:40think that's what functions did right we can just call a function again and again which is fine but

4:08:46you still have to write functions certain number of times right you are writing this

4:08:51once then you're writing this twice what if i wanted to insert 100 of such friends then

4:08:56you would need to write 100 search calls so sure i mean you can create a function call of 20 and then

4:09:02call it five times and so on but that's that's not what i'm talking about i'm talking about

4:09:07actually repeating a piece of code a set number of times or even infinite or even arbitrary

4:09:13if you want so how do we do that we do that with loops so what a loop is there are kinds of loops

4:09:21but we'll be taking a look at for loop in this video so i'm going to start with writing for

4:09:27as the keyword and there's a set syntax you have to follow here so i'm just going to show

4:09:32you that once so i'm going to say for let i is equal to 0 i is less than 10 i plus plus right

4:09:39and i'm just going to console.log i here real quick so let's take a look at what's happening

4:09:47well you see first things first is that we in the console we get 0 to 9 as the values printed

4:09:54right we never wrote 0 to 9 anywhere in the code but it got printed so that's our first observation

4:10:01our second observation is this line number 8 right here what the hell is happening here so

4:10:06you can see that we have the first block as the initializer this is the place where we initialize

4:10:14a variable which will control the loop right this case it's i i is a convention you can name this

4:10:22anything you want then we write a semicolon very important very important syntax this could not be

4:10:29left out or missed in the second part we have a condition this condition basically says until how

4:10:38long this loop should run right so we start at 0 and we have to run the loop as long as i

4:10:45is less than 10. that's fair and what do we want to do as long as you know this loop is running

4:10:54on every single iteration that is every single time we complete everything inside this uh

4:11:00loop body we want to run this part so whenever you complete it you run it whenever you complete it

4:11:07you run it and the fact that you can see that we start at zero this means that

4:11:12the very first time this loop runs the very first time then only this runs and this runs

4:11:19this statement always runs after an iteration has completed right so that's why we get 0 first then

4:11:27we check hey if i is less than 10 nope it's not um so we get into this console log and just puts

4:11:35out zero in the next part we increment this so i becomes one we check if i is less than 10 nope

4:11:43still not because i is one so we put out one again we increment i becomes two we check if i is less

4:11:51than two nope it's not so we put out two all the way this happens till eight so we are at eight we

4:11:57just console log eight we go back we make it 9 we say is 9 less than 10 yep it is so we put out 9.

4:12:06we go back we make i 10 we say is i less than 10 nope i is not less than 10 because 10 is not

4:12:15less than 10 10 is equal to itself but it's not less than itself so that's where we know the loop

4:12:21should stop and the loop stops that's it so this basically gives you 10 iterations which is 0 to 9

4:12:28which are 10 in count right and you can do pretty much anything you want you can multiply this i

4:12:35with 2 this is just a number right which just gets populated you can multiply this or you can

4:12:40raise this to a power of 2 whatever you want to do i mean you can pretty much have a lot of fun

4:12:45with the numbers part here but what you can also do is probably like do a my friends.push

4:12:53as i right so you're just pushing 10 numbers into an array and you can say my friends like this

4:13:03so you can see we have a default and then we have a zero to nine numbers available in this

4:13:07array which is like a quick way of initializing an array with some set values but yeah that's

4:13:14how you can do it and yeah that's pretty much it for your introduction part to loops you can pretty

4:13:20much control all of these variables if you want you can make this 20 right and we have already

4:13:26discussed i plus plus this could very well be i is equal to i plus 1 as well that's completely fine

4:13:34right nobody's judging you or anything and it'll just work fine but in loops what we usually do is

4:13:40we use these plus plus or minus minus incrementers right and like i said you could also do plus plus

4:13:47i and it would not make a lot of difference it's one on the same thing for the loop at least right

4:13:57hey everyone welcome back and in this video let's just quickly discuss about continue and break two

4:14:03important statements in loops which you should know and how to work with them so if we take a

4:14:10look you would see that we run all the way from 0 to 20 in this case let's say i only

4:14:14want to push even numbers to this array right let's say this is just even numbers and if i

4:14:21remove this function as well now what i want to do is i just want to make sure that we have

4:14:290 2 4 8 6 10 12 these numbers right here so how do i do that well the first way to do that is

4:14:37you actually change this condition so instead of incrementing it every single time you increment it

4:14:44twice right every single time just once you increment it twice which gives you pretty much

4:14:49the same result which we which i just said right that you need to get even numbers so that way you

4:14:56are reducing your iteration count as well as the numbers you are pushing and that probably is the

4:15:02best solution right another solution is that you can go ahead and say here that if i modulo 2 is 0

4:15:12and i think we haven't discussed the triple equal to or double equal to yet so stick with me here

4:15:18we will discuss that later but this just means that we are saying that hey if you divide i with 2

4:15:25do you get the remainder as zero if you do then we know that it's an even number because even numbers

4:15:30when divided by 2 gives us 0 remainder otherwise we know this is an odd number so i can say

4:15:36let even numbers let odd numbers odd numbers i can say odd number start push

4:15:44i right and if i console log them in both in order you will see we get even an odd number separated

4:15:52so that is how that is another way you can do that that's fine but a third way to do this

4:16:00is you just skip an iteration right which is pretty much what we are doing here if i do

4:16:06something like this this is pretty much what i'm doing right but let's say i have a function here

4:16:13which says skip number and i have a number like this and whenever i pass

4:16:21a number for example let's say i have this even numbers inside this array and i remove this

4:16:30and i just return even numbers right fair enough simple program and we know all the parts here

4:16:37let's say i have a skip number of 10. now what i want to happen is that whenever

4:16:4310 arises here i don't want to push it right i don't want to do anything so sure you can do

4:16:50something like if i mod 2 is equal to 0 and i is not equal to number then push it which is again

4:16:59magically it works right and again this means that i is not equal to the value here this means

4:17:06that this result is in fact equal to the value here right just making sure you know about the

4:17:11triple equal to and not and then double equal to symbols here these are important stuff right

4:17:17so make sure you understand them as well along the way but what i wanted to discuss is a little

4:17:23bit of alternative let's say i don't want to push this in a condition i always want to add this and

4:17:29now we have a problem because now we get all the numbers however what i can do is make use of a

4:17:37couple of handy statements in the loops and that is the first the first one is called as continue

4:17:44so what continue does is that it says that i can say if i mod 2 is equal to 1 then i want

4:17:51to continue so remember just like return just does an early return from the function itself

4:17:58for example if i just wrote return hello from here you wouldn't see all of this stuff happening and

4:18:05we will only get hello in the console similarly anytime you are inside a loop and the loop body

4:18:12contains a continue or the you know when the code is executing it encounters a continue

4:18:18the iteration is marked as done right so it's kind of like a i won't say a return because it keeps

4:18:26the loop running but it kind of like skips the current iteration and whatever has been done it's

4:18:31done okay that's fine but it moves to the next one right so if i just keep on writing continue here

4:18:38you would see we actually get in blank array right because nothing happens in this loop

4:18:42for all the 20 cycles we just waste them so instead of that what we do is that we say that

4:18:48for every single odd number we want to just skip the cycle if i switch this to zero you

4:18:54will see we only get odd numbers because for every single even number we skip the cycle

4:18:59right similarly what i can do is i can say if um i is equal to the number again i want to continue

4:19:10because i don't want to add that number and if both of these conditions don't match

4:19:15then well the code will come here it will execute and it will add those numbers so right here you

4:19:20can see we get 0 2 4 8 6 12 whatever that is not added if i supply 2 here you would see we have a 2

4:19:27missing now and so on so that's how continue works let's say we have a number which is break number

4:19:37now what i want to do is i want to break out of the loop if i get that number if i don't get

4:19:46that number then it's fine so so far you can see let's say if i have a i mod 2 condition with me

4:19:55that's fine but what i want to happen is that the moment i get this number which is passed here

4:20:02it should break out of the loop right so how do i do that well for that i can write if number or

4:20:12you know rather if i is equal to number then break now pay close attention to what's happening here

4:20:19you're seeing that i passed in 10 and the results which you get is 0 2 4 6 8 because the moment

4:20:27this i became 10 and this number got 10 this number was also 10

4:20:32then we ran the statement and it breaked out of this loop that means it came to the next line

4:20:38and it just said return even numbers so that's why we get all the previous work which has been

4:20:44done by this if i write for example 2 here we will just get 0 why because the moment i becomes 2 we

4:20:53just breaks out of the loop right that's that's what we do now there's a very slight difference

4:21:00between break in a loop and redone in a loop which is in a function because if you think about this

4:21:08think about this carefully i told you how return works right whenever you write a return nothing

4:21:14works under that so that's kind of true but in a more logical way what i should say is that the

4:21:21moment your function executes return nothing else runs right nothing else runs everything else stops

4:21:27so if i return here instead of breaking what would happen is that we will get undefined why

4:21:34because we are not returning any single value so let's say if i return and say early return

4:21:42so or even better like instead of early return i just say even numbers

4:21:47so what's the difference between doing this between doing this and just writing break here

4:21:53the difference is that if there is anything which is in between these two loops which might be some

4:22:00important work like you know just console logging that final numbers length is even numbers.length

4:22:10right if we have the statement then the statement would never run because you just returned out of

4:22:16the loop right and you did not just return out of the loop you also returned out of function

4:22:20so that statement never runs if you want it to run you just want to break out of the loop you

4:22:27don't want to return out of the whole function so the moment you change that you will see that

4:22:31we also start getting the final numbers length is 1 and so on so this is a kind of introduction

4:22:38for break return and continue in a loop which is running inside of function

4:22:45return can only be used with functions break and continue can only be used inside loops right if

4:22:53you just write break here it wouldn't make sense and you will get another message if you write

4:22:58continue here it wouldn't make sense break and continue only make sense for these loops right

4:23:04so yeah that's pretty much it for the language syntax hopefully you're able to understand how

4:23:08the language and how the dynamics are working out if you do then make sure you're leaving the

4:23:13rating to the course recommending these two other people in your family in your

4:23:17circle and your peers whoever wants to learn javascript that really helps the platform

4:23:26hey everyone welcome back and in this video let's just go ahead and discuss about equality

4:23:31in javascript and how that works so what i'm going to do is first of all make some space here

4:23:36and i'm going to start with just a console.log statement we're going to keep this simple

4:23:40so i'm going to say starting with 1 is equal to 1 right and you can see it console logs true

4:23:48so whenever you are checking for equality like this this expression in itself would

4:23:54give you a boolean value what do i mean by that for example if i have a result

4:23:591 equal to 1 and if i do a type of result you will see that i get a boolean right so this can even be

4:24:05either be true or be false and in this case we know it's true because well one is in fact one

4:24:12you would have seen that i'm using three equal to signs here and i'm using one equal to sign here

4:24:17so what's the difference between these three and one so what you have to remember is in javascript

4:24:23whenever you use a single equal to sign that means assignment that means you are assigning

4:24:30a value in this case you are assigning result to one right if you are using double equal to

4:24:36or triple equal to in javascript you are comparing a value to something else right this is important

4:24:44because javascript also comes with a double equal to variant and double equal to variant is a little

4:24:50less strict i mean this still evaluates to true but if my one was a string then also it will

4:24:57evaluate to true right and depending on how you are looking at this it might or might not make

4:25:02sense but if you use a triple equal to it will not try to type cast things right javascript will not

4:25:10try to typecast things and it will give you false why because string and number are inherently not

4:25:16the same thing however if both of them are strings that's a different story right but yeah in general

4:25:24in general always make use of triple equal to until and unless you know what you're

4:25:29doing that's the best practice you will find thousands of code pieces and a lot of things

4:25:35with a double equal to sign and double equal to usage that is fine but whenever you're writing

4:25:40new code always use triple equal to don't ever use double equal to that's just i mean that's

4:25:46just not a good way or good practice to go about plus you will have a bunch of buggy code

4:25:51if you're not careful with the types like i said if you're comparing strings and numbers and you

4:25:56know doing bad comparisons all the time javascript has a history of not reporting those errors to you

4:26:02in fact javascript just tries to use its own little brain which it has and sometimes it

4:26:08results in horrible disasters so you don't want to do that try to stick with triple equal to

4:26:13which will just reject your results if they are not type equivalent or value equivalent

4:26:20and yeah that's pretty much it that's all i wanted to discuss i mean you can compare

4:26:26all sorts of values fg fdg you know anything you like right i'll just work out of the box

4:26:39hey everyone welcome back and in this video let's just go ahead and start with

4:26:43objects in javascript so so far we have seen the primitive data types and used functions as well

4:26:49but objects are super interesting super important because objects is everything in javascript your

4:26:57function can be an object your arrays are object and objects are object so very simply speaking an

4:27:04object can be created as follows so you can say my object like this and just create an empty uh

4:27:11you know this curly braces right now the objects in javascript are stored in the following way

4:27:20you have certain keys and then a column and then certain values so you have a key name

4:27:25and then a value right and you can put this key name in quotes again right here does not matter

4:27:32whether it's single code or double quote so the moment you do that what's going to happen is that

4:27:38this is an object which has a key called keyname and a value called value you can define multiple

4:27:43values and multiple keys here so i can say keyname2 for example and then a value 2.

4:27:49so now if i try to console.log this object right here you will see that we get the full object key

4:27:55name as value and key name too as value 2 right simple as that now how you can access the value an

4:28:03object and what does it even mean what do you have to remember in objects is that the way you

4:28:10access a particular value is through its key so the premise is how you store the object

4:28:18is that you store it in such a way that you know the key more or less or you can derive it and you

4:28:23don't probably know the value or you know you want to store it against the value so what i can do

4:28:29in order to access this value right here is i can use the square bracket notation just like we used

4:28:34with the arrays with number 0 1 2 but instead of writing 0 1 2 i will write key name like this

4:28:43and when i do that you will see that i get value in the console which is the value of this and this

4:28:49could be pretty much anything right it could be a string it could be a number it could be a function

4:28:56it could also be a function right it could be a function like this which is anonymous function

4:29:04it could very well be another object itself right so you can have another object so if you want to

4:29:11go into you know this object for example key name let's say 2.1 and you say hello world then if i

4:29:20go ahead and copy this and use the square rocket notation again in a nested fashion you can see

4:29:26this gives me this object and then keyname 2.1 gives me hello world right so that's how this

4:29:34works the object uh you know extracting the key out of extracting the value out of all these keys

4:29:44there is another way you can make it work and that is first things first you don't need to have codes

4:29:50around the key name if it does not contain spaces or any weird characters or does not start with

4:29:57any weird characters so what do i mean by that if you have a key name like this keynum 2.1 you have

4:30:03to you use the quotes in this case right because this is now just bad syntax but if you don't have

4:30:10any spaces or anything you can pretty much use and set the key without quotes in javascript right so

4:30:17similarly for this this is also valid syntax now similar alternative exists for us here so you have

4:30:26an array like notation here which is fine if you want to access but if your key name is valid that

4:30:33means it does not contain a this does not contain weird characters or does not contain spaces

4:30:38what you can do is you can use something known as a dot notation so you can just write a dot and the

4:30:44name of the key which you want to access right in the second case we have to use the square notation

4:30:51because if i try to use the dot notation you will see it does not make a lot of sense because this

4:30:55way it does not know there's a space it does not know where it ends right so in this case we have

4:31:01to use a square notation and this should obviously be in quotes because otherwise it will be

4:31:07evaluated as a variable right and you don't need a dot then so yep that is pretty much how objects

4:31:14work in javascript you can define nested objects you can do basically any sort of and all sorts of

4:31:21nesting here these values could be null these values could be functions these values could

4:31:26be undefined these value could be nested objects strings booleans everything you can think about

4:31:32right and you can look them up with the help of their key names and that's how this works

4:31:38so hopefully this was a good introduction for you um for getting started with objects and there's a

4:31:44there's a lot of use of objects in javascript we will be working with them all the time

4:31:54hey everyone welcome back and in this video i want to discuss a very important thing

4:31:58a very important concept in javascript and that is known as how the objects are passed

4:32:04in a function and in general here and there so what i'm going to do is i'm going to create a

4:32:09function called mutate which basically mutate just means to change something and i'm going

4:32:14to have an object being accepted here right and let's just go ahead and create an object like uh

4:32:21let's name it something else my profile for example so i can say this is named as mehul

4:32:28and h as 22 right and in this object whatever object i pass for example i have a second profile

4:32:37let's say second profile where the name is john and ages 42 right so now if i go ahead and say

4:32:47object dot h just console logging that what you will see is that when i do something like mutate

4:32:59my profile we get 22 in the console if i do mutate of second profile we'll get 42 in the console fair

4:33:07enough now before doing any sort of work in this what i will do is i will do a primitive mutate and

4:33:16i will have a primitive value here right and what i'm gonna do is i'm just gonna add one to it so

4:33:23i'm gonna say primitive plus plus right and what this primitive mutate does is that it'll accept

4:33:31a number so let's say i have 100 here and i do a primitive mutate of number right and if i console

4:33:38log this primitive what we see in the console is one zero one which is you know understandable

4:33:46you want increment hundred you get one zero one but if i console log the number here back

4:33:53you will see that this number is not changed right it is 100 although it was made 101

4:34:00inside this function but this function actually has this primitive variable in scope plus

4:34:08this call when this call was made this number got copied into this function's execution context

4:34:14right so this means this primitive is a copy of this number it's not this number which we are

4:34:22incrementing here with objects however this is different because with objects if i try to do

4:34:28the similar thing object.h plus what's going to happen is that you will see that if i console.log

4:34:36second profile here we will see that the age in fact gets increased by 1.

4:34:43so it was 42 before i passed it inside this mutate function i just incremented the age object.h

4:34:50the age property of this object and i console logged it and you can see it suddenly turned 43

4:34:59right but if we go by this logic it should not have modified the original variable

4:35:04but that is not how objects work in javascript the way objects work in javascript is by reference so

4:35:10when you create this object you can think of when you're passing this in a function you can think of

4:35:16an address being passed so instead of the actual object let's say you have passed an

4:35:22address something like 0x1234565 for example right this could be anything now whenever javascript is

4:35:30trying to access the property of this object it will try to go to that location in the memory

4:35:36and search for that property and then increment it now the reason this increments the older object as

4:35:43well the outside object is because both of them are pointing to the same object in the memory

4:35:49right you just pass the address here whereas when you're using a primitive you actually

4:35:55copy the value so if this is a number if this is a string if this is a boolean if this is

4:36:01any primitive type bigint it gets copied so the original value isn't mutated but

4:36:06in case of objects the address gets passed or the reference gets passed and that is basically where

4:36:14the change takes place so this is very very very important behavior of javascript which

4:36:21might catch you a little off guard if you don't know about this so this is

4:36:24super important to know but yeah that's pretty much it for this video hopefully you were able

4:36:29to understand that whenever you pass an object you are always dealing with a live copy of that object

4:36:36and whenever you pass a primitive you are actually dealing with a fake copy of that object right

4:36:48hey everyone welcome back and in this video let's just go ahead and discuss about

4:36:52scoping in javascript which is again a very important concept so what scoping is well you see

4:36:59that when you're trying to work with javascript a lot of times you would see that you have to create

4:37:07this opening and closing curly brace now a general rule of thumb in javascript is that whenever you

4:37:14see these opening and closing curly brace that means that this is a scope and what is a scope

4:37:21a scope is an area in which a variable's lifetime is right so if you create a variable for example

4:37:29hello and assign it a world you can do whatever you want with this variable here right you can

4:37:37console log it you can um you know if this is a lid you might also be able to change it and so on

4:37:45right so if i run this function this works fine we will get world in the console but

4:37:51if i do console.log hello outside this you would see we get an error that hello is not defined

4:37:58why because the scope of this variable is bound inside this opening and closing curly brace

4:38:06right if i take out this line out of the function you can see that we get two console logs the first

4:38:13one from the function call and the second one here right so why that is why this is working now

4:38:20because in javascript what you have to realize the scope of this variable is actually the scope which

4:38:28it is in that is in this case it's globally plus any other scope which is defined as a child of

4:38:35that scope right and all the scopes are basically children of the global scope so that works fine

4:38:42what do i mean by that let's just take a look at another example let's just say i had hello inside

4:38:48this function now what i can do is i can go ahead and say that if something is true then console.log

4:38:59hello now if we take a look here this statement will always run because this is well if true will

4:39:05always be true but what's happening here is that i can access this hello variable inside this scope

4:39:13see we have a opening curly brace and a closing curly brace therefore this is also a new scope

4:39:18but this is a child scope of this function because it's inside this it's embedded inside

4:39:24this therefore i can access all the variables defined above just just as usual right you see it

4:39:31works however if i move this inside this you would see that this statement right here the second one

4:39:39starts giving us error why because now this hello variable is in the scope of the variable or not

4:39:46exactly variable but in scope of the statement of this if right so you cannot access this outside

4:39:52the if block so you have to remember like function creates a scope this if else also creates a scope

4:39:58anywhere where there's a opening and closing curly brace and loops also create a scope what do i mean

4:40:04by that let's write a simple loop i zero i less than 10 i plus plus i'm going to console.log i so

4:40:12what you can see here is that we get let me just remove this what you can see here is that you get

4:40:19one two zero two nine and the console log but if a console.log outside this loop you would see it

4:40:26gives us an error right and although it seems it might seem like this is just outside loop and not

4:40:32inside these parentheses but the loop variable is also tied to the scope of the loop so you can

4:40:39access this eye you can do pretty much anything you want with this eye inside this loop but this

4:40:44i would not be available outside the loop why because its scope is not defined outside the loop

4:40:51if you could have defined i here for example and if you remove this declaration you can

4:40:57leave this space as empty it's it's totally fine right and if you do something like this

4:41:02now you can see that when i console log this i get i as 10 the last value

4:41:08why because our scope wasn't expired in this for loop we can access it right

4:41:16so this is one way of creating a scope if else block is another way like i showed you

4:41:21and functions is also a way if you want every single variable to be accessible everywhere

4:41:27you can just go ahead and create all the variables at the top so any variable you create in the

4:41:32global scope can be accessed in the functions right until and unless they are shadowed which

4:41:38we will discuss in the next video so yeah that's pretty much it for this one i hope you understood

4:41:43what the scopes are how the scope work and it's basically the same thing for constantly both so

4:41:49it's fine i mean i just showed you the example of lit i guess but works the same for the const

4:42:00hey everyone welcome back and in this video let's just take a look at variable shadowing

4:42:05in javascript and what that means so what i'm going to do is i'm going to go ahead and actually

4:42:10just clean this up and i'm going to say cons to my variable or you know let's say my age has 22 right

4:42:18and i'm going to create a function um print my age right and i'm gonna console.log my h and whenever

4:42:28i call this you see we get 22 in the console which is fair enough that's what we would expect right

4:42:36but what happens if i try to create my age as 25 here well you would see that we get no error

4:42:45because you know we can see in the console we get 25. so why do we get an error when we do

4:42:52happen to create a variable in the same scope but no error when it's in a different scope

4:42:57or in a nested scope rather well there's no why to that that's that's just the rule that

4:43:02you can create any sort of variable in a nested scope but the problem here is that now there is

4:43:10virtually no way to access the older variable the older value i mean you cannot access my age

4:43:18as 22 because it has been shadowed by a local variable and why the way it works is as follows

4:43:27if you don't have a local variable that is a variable in the local scope javascript will go

4:43:34to one scope above and it'll ask do you have that it will say yes and it just prints that

4:43:40this can be shown in an even better way if i wrap this whole thing in if true

4:43:45so if i wrap this like this and give this an indentation what you will see is we still get 22

4:43:52and if i move this a little bit up and define my age as 27 you would see that we get 27 now right

4:44:01because it takes a look here it says that hey i did not find it do you have it it says yes i do

4:44:07therefore we print 27. if i remove this you would see we print 22 because this also does not have it

4:44:14so it asks above and that got that so it prints 22. now the only thing which we need here to

4:44:23shadow this variable is just a declaration right not even an initialization if i just have a lit of

4:44:30my h what you will see is that we print undefined right i did not initialize this that's it you just

4:44:36need to define it somehow the moment you define it it gets shadowed right so the above variable

4:44:43are not used or cannot be used so this is important in order to you know just make

4:44:49sure you understand that you don't shadow over variables which are required because

4:44:54then there's no way to access that global kind of variable right so that's how shadowing works

4:45:00in javascript variable shadowing nothing fancy but you should just know about how this works

4:45:10hey everyone welcome back and in this video let's just go ahead and start with the most important

4:45:16thing in the browser javascript that is document object model and what document object model is is

4:45:23that it connects your html to the javascript world so so far what we have done and what we have seen

4:45:30is that you can use javascript to do calculations to call you know to calculate prime numbers to do

4:45:36all sorts of mathematical and computing stuff but that is not what we learned javascript for

4:45:41right we are learning this because we want to make sure we use this in web development and we

4:45:46have already seen that html and css are the rock stars of web development whatever you write here

4:45:53the browser processes them parses them and shows them on the right now the big question is that how

4:46:01do you let javascript control this html world and the and the simple answer is that javascript

4:46:09by itself does not ship with any way to interact with an html document so how does it work

4:46:17well you see that your browser in this case chrome actually exposes another set of

4:46:24api to your javascript world in order to interact with this html simply put i'm just saying that

4:46:33there is a special object here which exists which allows you to tap into the html world and

4:46:40that object is not coded in the javascript world itself it's coded in the c plus plus and c world

4:46:46of the javascript engine which is a relatively lower level language compared to javascript

4:46:52right so what is that object that object is called document and we will we will take a look at this

4:46:59document object a lot we will use this a lot of times so if you console.log this document object

4:47:06you will probably be seeing something like this mess but instead of seeing this mess what you

4:47:12can do is open this in a new tab and go to the console of this tab right here and you will

4:47:18see if you ignore this error you will see this as the document console now this looks awfully

4:47:25familiar with what you would see in the elements tab right so this basically means that there's

4:47:31a variable in javascript called document which pretty much is this representation of some kind