hi guys HTM CS in the video probably are going to build your first [Music] first we are going to build this event page upcoming basics of tag paragraph tag HR tag EMC so let's begin first first Visual Studio Cod down. h okay before we begin right okay the RoR blue so so different form different Lo contr brows okay okay so first HTML HTML building block ofage HTML stands for hypertext markup language hypertext markup language set of symbols inserted in a text document to control it formatting symbols inserted in a text document to control it structure formatting opening first hello H4 hello 5 hello H 6 hello H7 7 H first H2 H3 H4 H5 H6 so H1 H2 H3 H4 H5 H6 [Music] development HTML and boot I'm to repeat it firstop and then H22 then again2 Javas angulars reacts okay okay next Anor anchor an for UR an an SA SCE HTM HTML h already [Applause] okay [Music] this is Dave again back IM IM with for example a HTML htl Ty of list ordered list unordered list 2 2 HTML order list order list ref to conect [Music] okay for [Music] for okay begin before we begin first [Music] okay so manag tutal okay okay h HML 1 HL HML h h top now equal I and thenal I upcoming events don't miss any of your important events here are the important events you have registered forc upcoming events don't miss any of your important events don't any of your important events St updated par okay almost almost LC so free entry free food PS are not allowed free entry and then in the line P syb free food and then pets are not allowed okayo free entry free food pets are not allowed almost half of the second second second IMG fashion free okay number Miss equal first ne. NE and then I am human f okay op okay okay first okayl Pro start okay let's begin first tabl and HTML form HTML tabl and forms and forms H and form first table t Row first name and second okay okay okay name AG name age first R First Column first R second column 41 again first R third sorry second R third column CSK ready ins okay okay button checkbox color date date time local email file hidden image month number number so first already input typeal typal ref ready so second second second Colum inal submit button first [Music] res and then again most of the people May place first input add your 1 2 3 Dr first number okay so again so now you are ready to move to the second project okay for andl and then forage so first okay1 first error makes Academy error makes Academy okay training Tech News freshers Guide training Tech News freshers Guide okay paragraph empowering young developers to level up their skills through corporate training so roet we got it eror makes Academy understand you ref okay let's divide full stack into three parts front and back datab first let's divide full stack into three parts let's divide full stack into parts in the list item first back database item database okay okay let's divide full stack into three parts front end backend database for devop for full stack web development technolog used for full stack web development used forment 1 2 3 1 2 3al one and then first table row cre second back third database HTML Java m htmlv m okay CSS python MySQL CSS python MySQL JavaScript nodejs AWS JavaScript node for instagr register for a Instagram YouTube first for register so for a course Instagram HTML page HTML for a course form name AG gender email select a course upload resume reset submit inal text your Tex place [Music] in name First optionr Option open C++ input typeal topal to uplo okay not upload input type f first input typal to reset input type equal to submit okay super you can do it actually the favorite let's start IND basically C so CSS is used to style and form web pages created with HTML stute sing Val color black mang background sorry again sty background color orange backr color par parag C create a tag with background color okay stag CS c c for okay understand default 100 create a tag with background inside create a head tag with color white you use set wi 300 Piel and height 100 pixel to already create a paragraph tag after H1 tag and set it color to Blue H1 tag exter C external CSS okay external CS C C Al csect CSS element C C El class attribute value for cl Target clal color BL second name okay equ H H hello unal of Select element class ID Universal CSS Box model OKAY in the CML okay the first ping top top padding left padding right padding bottom top left bottom right first padding top padding top first h toding left C ping fording top top bottom left right okay the CSS CS back to Hi how are you hope you are doing good 3 cre 100 15 yell in t for okay again [Music] step hello [Music] back [Music] so first theph [Music] compl okay display bline block okay display BL the display [Music] BL okay element okay element display block1 display block okay paragraph tag background purple h2 tag background color H2 background color blue background color P H1 paragra tag h2 tag tag 1 2 3 4 dis for prop BL element element element by 100 color box okay already El second [Music] element 100% dis element dis okay element home about us home about us contact us 10 okay for background color black text color white okay super dis h okay Gap I hope you guys are excited okay I hope you guys are ready okay let's start new okay okay already per title perfume sheetal prods sorry CL equal to First clal search clal to products clal clal contact search division products division division contact [Music] so 15 so it looks mous La color white okay okay place dis search search search 2 sech search element element element element okay [Music] first clal source. unsplash.com 2 [Music] 2 perfume okay border withd 5 pixel 2 pixel border style solid in the Box dis c v v okay 2 element element box backr C sty equal to Tex Center okay stal text but still already okay okay it looks good okay no problem navigation bar search bar images about us contact page okay H5 cont contact background color black color white text Center sty equal to margin top 30 Piel font f so hi guys in the video C hi guys C okay so okay so what is CSS position first CS position position for example CSS positions okay the CSS position okay the CSS position five types static relative absolute fix okay one 2 black okay default col okay first second left 50 pixel 50 top top okay Rel okay top left right bottom okay Rel black okay problem is Okay so Rel okay okay okay solid black 2el okay Rel top top top ute Rel top okay 50 okay fix okay [Music] f 500 pixel top 5el 200 pixel scky okay 40 okay okay see you next video guys bye-bye starting with in the flexx okay let's say there is some bunch of Books Okay the books okayed bsed bsed element yes correct let's say we have 2 with st and another okay background color green yellow margin 2 pixel padding 5 pixel okay 1 2 3 right yeah 1 2 you may be tried with let's say we have a around this 2 element just theen okay and F dire f f items okay Flex items and FX Direction f okay let's see H1 4 H1 5 H1 container okay f it 1 2 3 four okay f f fle items okay okay okay right Okay so f c v 1 2 3 space between you will get better understanding of it okay yeah super and also can download andage one image 2 image 3 image okay so starting with f C Shi anyway I'll use some dark colors okay background color this dark maget looks good and image gallery G Class equal to title okay title bar something class equal to title bar and okay looks good text Center toate random image you can use this one so this is theour unsplash.com random and okay okay so looks good and animal animal animal animal okay so yes okay it looks good not bad okay c v v 4 and 5 6 7 8 9 [Music] 10 for White v contr v contr v some cat some deer some okay number two 3 4 okay 1 2 3 monkey elephant tiger again number four five six 78 okay 1 2 3 4 5 6 7 8 okay because 2 3 okay 2 3 okay only four element has to be there 1 2 3 4 okay 1 2 and then CS okay display F and then background color green yellow padding or 10 pixel and then do one background color black padding 5 pixel margin 2 pixel two background color black padding 5 Piel margin 2X and color sorry okay okay fow one clal okay I need only four blocks okay no matter what the size of the screen there should always be four elements on the screen okay now screen H2 2 not H2 H1 now 2 3 4 H1 5 H1 6 H1 7 H1 8 okay background color green yellow padding 10 pix and over H H1 element background color black color white and okay 2 3 in the complete screen with 100 percentage okay 25 first element 25 per second element another 25 per third element another 25 perc fourth element another 25c 2 2 F basis 2 1 2 3 4 5 6 7 okay the margin pixel okay so this is fine 2 still it's doing a problem I think 20% should be enough one looks good looks basis 23 okay it's okay it's fine okay but main axis cross AIS mossis colum Main crossum okay okay flection mumis okay I will explain you flex and flex Direction row Flex Direction row Flex Direction Row mainx background color black color white padding 5 pixel margin 5el default 400 Flex Direction Flex Direction you will use items Okay [Music] so Main main AIS mainis mainis okay super so yeah this is what Al items is fin in the cross axis and Main hi guys [Music] guys respons okay screen okay elements and layout okay okay so okay and index HTML okay [Music] index okay okay for exle okay okay okay so okay orientation col landscape okay orientation first and then okay okay screen screen okay okay so Max okay first max okay Med screen Max okay scre Max Max withth okay listen carefully Max with Max withd 600 okay Max with 600 0 to 600 Piel maximum 600 okay maximum 600 600 0 to 600 61 62 okay meta viewport tag The Meta name equal to viewport content equal to width equal to device hyph width initial sc. okay ini okay okay first Total screen okay 0 to2 400 okay first small Med screen and smallen Max 600 okay okay mention okay okay 900 okay Okay small screen to 600 okay okay okay and the order media screen and Max with col backgr Okay so and 9 and okay Max Max 600 600 maximum 600 to 600 600 600 6 600 600 600 and 600 okay Max 600 600 600 Max 6 so insect Okay small screen okay to 600 600 600 so for okay media screen and Min with 600 pixel 600 600 okay okay 600 okay so okay Max Max okay Max okay one background color black margin or 5 pixel and height or 100 pixel width or 100 okay the screen and Max 600 6 okay scen okay so okay screen0 okay and screen okay equal to container theal equal one class equal one you can background color green yellow margin 5 pixel and what else height 100 say and just content space around okay okay screen and screen okay 800 600 100% that's okay okay okay JavaScript begin and then finook okay welcome tot javascri functional statements okay let's begin JavaScript is the world's most popular programming langage okay and alsoas is easy to learn okaying language scpt is totally different Java is totally different okay Java is used to create interactive and dynamic web pages okay first let's start variables dater first variable the console log C++ first online javascri comp comp onl JavaScript comp python F JavaScript fjs okay AAL Bal cons statement okay so variable next concept okay cons log cons let AAL console. a is not defined a is not defined okay Global scope Okay so conal constant consal assignment to constant variable okay con let week days quick again is a keyword function scope or Global scope so okay okay so let's begin create a variable named price and set it to a specific price value second create a variable name called Product and set it to a product name product okay where product equal to Apple okay iPhone 15 create a variable named tax and set it to a specific tax value print the name of the product console calculate the total price amount including tax total equal to price plus tax and then print it total am where total equal to price plus tax and iphoneone iPhone total equal to price plus tax total tax iPhone correct okay iPhone is not okay iPhone is not a is not def a equal okay iPhone iPhone iPhone equal where iPhone 15 equal to okay equal to Apple console.log where a equal to doual string iPhone 15 is noted iPhone string okay so understand the difference between name and name with JavaScript when a value or string is enclosed in double quotation like name it is treated as string or in the when something is mentioned without double marence okay declare a variable name called fruit name where fruit name equal to Apple okay declare a variable named count where count equal to count declare a variable name price and set it to the price of the fruit declare a variable name total and calculate it by multiplying the count by the price okay okay count equal to declare a variable name price and set to the price of declare a variable name total and calculate it by multiplying the count by the price where total equal to mulp syb okay in the star symbol into 100 equal 100 10 into 100 correct console. okay count into PR okay jaas let con JavaScript keywords function for equal to 20 console do log if okay JavaScript comments single L coms M LS JavaScript comms can be used to explain JavaScript code and to make it more readable equal okay okay so this is commments in JavaScript okay JavaScript operator here where a equal 10 where B = to 20 C = to a + b cons information okay number okay okay equal equal plusus star div so simple increment and decrement operators okay soal 10 A++ console.log of course 11 varal aus okay po increment post decrement but for the here listen carefully where b equal to A++ cons so a equal to 10 a value A++ a A++ AAL 10 so a value a plus plus [Music] l the A++ A+ reverse correct okay plus plus a so first plus plus a in the 10 plus plus a the pr understand okay so increment and decrement operator work out okay dat javascri in the app correct type of two major sections primitive data type non-primitive data type in the non-primitive dat equal object okay data false okay Ty of data type of true okay type of type type of Okay so okay you'll get to know about it better major topic JavaScript functions JavaScript functions JavaScript function is a block of code designed to perform a particular TK let's say function function name function hi okay phone number the phone number Windows Windows Mac Mac Linux Linux okay Comm folder create JavaScript programming open fold demo b equal to 20 30 console do log a + node space file name demo. Js lat okay so let's start with functions function function ABC the function console.log hello phone okay so I have a phone in the phone explain function function is working okay function my name okay my cons this is Samsung phone Samsung phone and this is Samsung iPhone RM Oppo console.log this is op the function Apple console.log this is Apple function redmi console. log this is redmi super Sam this is Samsung this is basally function so let's do it so a = to 10 where Bal 20 function console log a solution okay create a variable called Factor favorite actor favor favorite player favorite movie and B okay so okay where favorite actor equal to come where favorite player equal to Don where favorite favorite actor favorite player favorite movie equal to cons let's see fav okay next console.log favorite player favorite player console.log favorite movie favorite movie okay okay function favorite super right okay okay let's move on to the next Topic in the functions parameters the parameters variables place that you define when declaring a function function function add a b console.log a plus b not number so what exactly Happening Here 10 + 20 in the param okay function okay so same concept yeah so I'll do it first function bread console do log area is plus L + B okay where area equal to Quick confusion where a equal to l star B area is a where length equal = to 10 where breadth equal to 20 area listen carefully variable okay L into b a equal to l into B now 20 into 10 a equal to 200 correct area is okay okay so function function return return okay function my name return a equal to my name console. log where AAL my okay in the function in the function John the string the function soal myal function return just create a function called add which should take two parameter A and B and it should return the addition of two variables function a Comm B return a plus b still okay return a plus B where total equal to console do log total total equal add 10 in the a plus b = 10 Bal the 30 total equal to add 10al okay so again you will understand it okay function statements else else otherwise if else umbrella if true console. log it's true console log it's false or go if or and the statement false or go else or so question is it raining outside rain equal true if rain console. log taken umbrella enjoy the sunshine if equal if question Okay so so yeah we'll move on to the next topic okay console. log false false false and true FSE so and and and statement okay false okay first false and true false false FAL false console. log false r syb false false R and false statement false r statement true and okay false exbal orical not okay what is the color of the traffic light okay traffic okay where color equal to Red if color if color equal to equal to Red console. log stop equal to equal to stat statement corre equal okay greal green equal to equal okay if color equal to equal to Yellow console.log get ready if color equal to equal to Green console. log go Okay so spring summer autumn winter okay Vari okay okay so okay what is the score in a game okay third question I'm going to do it okay thir what is the score in a game if score is less than 50 print you need to improve you need to okay where score equal to 50 if score less than 50 console.log you need to improve score 40 50 Score 1 70 less than 70 less than 50 okay super cool if score is between 50 and 70 here if score is between 50 and if score if score greater than 50 and score less than good job okay so again the statement score less than score greater 70 greater than 50 true true this score less than 70 70 less than 70 statement 70 greater than 50 true and score 70 less than 70 true or false explan score less than 50 50 50 less than 50 correct 50 less than score less than 50 R score equal equal 50 score L less FSE score equal toal 50 equal equal 50 50 equal equal 50 true okay okay you can understand it okay score less than or equal to 50 score greater than 50 and less than or equal to 70 70 good job statement if the okay if the score is greater than 70 print excellent performance if score greater than 70 console.log excellent performance super fantastic guys if I run this program now excellent performance okay if need to okay score else else if okay so next questions fourth question and fifth question okay so yeah okay in JavaScript a for Loop is a control flow statement used to repeatedly execute the block or code on specific condition generally syntax blah blah blah blah Okay so console okay 1 three 9 10 for okay okay I should bring each and every Apple from this side to this side okay okay start okay okay first in the correct okay 1 2 3 4 less than or equal to correct true okay next next correct start plus one already at certain point okay okay thir for count cons okay count correct 1 2 3 4 5 condition count equal to count + one cons step one step one count equal to one count less than oral 1 less than or equal true Count equal to count one step two step two count equal to two count less than or equal to 5 2 than or equal true Count condition 6 less than or equal to okay 1 2 3 Okay so okay next so okay print all the numbers from 1 to 10 using a for Loop 3 count 1 2 3 4 5 okay okay soal count instead count equal to count okay okay so next count less than or equal 10 count equal to count plus one count fure print only the even number from 1 to 10 two tables in the One 2 1 2 3 4 5 6 into 2al 1 into 2 into 2 = into 2 = into 2 = 2 okay so basam okay so next session jaas let's start first jav first Dom stands for document object model demo body tag H title paragra something HTM head body title H1 paragraph tag so object model docent model HTML Tre of objects okay manipulation the doc okay okay first scpt okay select paragraph tag El okay okay using ID okay document dot get element by ID function docent get element by ID one okay cons get element by ID okay clear okay document get elid okay okay so let's see okay okay okay so cons okay text content [Music] okay so okay text content in the paragraph correct in the par in the paragraph text content equal to by Tex par text cont paragraph tag text first paragraph and then console.log parex content now okay get element byid element okay yeah okay H1 hello world Javas open ID equal to H1 where H1 equal to Doc dot get element by ID H1 H1 do text content H1 do text content equal to BU world selecting h1t okay question super okay event hand change and thenext H1 do text content equal to by World function create okay the function call function change h. text cont equal to by world function buto equ on click super right yeah so on change on click on M on okay okay so here here are some example okay ID okay number one number two okay one okay number Oneal 67 okay okay okay so selecting input box one selecting input Box 2 where box one equal to document dot get element by ID num one where Box 2 equal to document do get element by ID num two selecting result ID equal to result where result equal to document dot get El by ID result okay [Music] okay cons log uh just box one do text cons value equal to4 default on the same input inag in second value equal to 67 console.log box dot value Box 2 do value box two do value 34 67 okay console. log okay first where box one value equal to box one dot text content where box two value equal to box two dot text content okay box one box in the input box one value equal to box one okay okay cons log box one Value Plus box two value outut 34 4 4 equal a p where b equal to l Cal a app a plus a plus string value the number function 12 + 1 okay one one number okay 4 okay okay super right okay result do text content equal to total okay respons the L function create function result in the result in the result not function function result is not a function guess result function function result function okay okay 67 outut model Bo the function text content tot again to for first where box on value equal to number of box the 47 okay okay yeah so next javascri random number create okay how to create a random number in JavaScript Okay so a equal to Mac dot random console.log 0.7 01655 0.73 okay so this Mac random in the ma. random 0.0 0.9 2.56 9 1 7 point 3 point okay 6 point 3 okay Ma floor Mac do floor 0 mac. floor 0.9 okay is no b equal to. floor console. 7.1 random number 2.9 mag do floor two super number number okay proced okay the number project task okay guess the number from 1 to 10 okay so let's begin first okay guess the number okay number and then button check okay so so yeah your wrong or right gu so yeah let's begin number so let's do it first Javas uh check number ID equal to okay guest number guest number ID equal to guest number okay first selecting input box guest number equal to document dot get element by ID guess number ID equal to result where result equal to document dot get element by ID result okay function number number okay random random number equal to Mac do floor Mac dot random 10+ one okay if random number equal to equal to guest number equal to where entered number entered number equal to guest number dot value equal to equal to entered number console.log WR else console. log wrong okay so first numberal number value the input box but on click equal to right Miss create random number six okay result text content equal to WR result dot text content equal to wrong you want again so function okay ini score equal to 10 ini score equal score minus one okay score equal score minus one where score equal to document dot get El by ID score score dot text content equal to score colon plus score minus okay Aus score equal to score minus one else wrong score okay like again again there is a problem again it causes problem total score equal to total score vus one total score every time err okay okay six up the 10 P up the one okay Kong two three oh so my score is okay okay okay so background color withd 100 pixel height 100 pixel okay uh box button change color select box where box equal to document dot get element by ID box the box dot style okay box do Style color equal and thenal okay background color okay for example with Max 9 class equal to in the with Max box already box box dot set attribute class attribute okay class equal Max Okay so Max okay two second slow okay okay so see you in next session byebye concept task so okay h e so okay okay okay okay in ID equal to input box ID equal to result select input tag select H1 tag where input box equal to document dot get element by ID input box where result equal to document dot get element by ID result input boxal update update function update in the input text hell but click first inext input value [Music] input taga on key up first Tas complete next question number two how can you use JavaScript to accomplish the following task okay so hello hello first okay first start select select H1 where H1 equal to document do get element by ID H1 click equal update function function update H1 do text content equal to hello what the problem cannot set properties of null okay H do get ID okay okay it's my mistake H1 upend hello h okay okay still hello [Music] h El create new element H1 equal to document dot create element in the create elementalc create element H H1 okay list item list item do text content equal to hello list item create element okay third question third question button change color the but ID equal BTN BTN equal function BTN do style dot background color equal to red super change question number four how can I make it so that when a user clicks a button the text from that button is shown in the h loated okay ID equal to but John Prine and then Jack okay John Jack screen document dot get element by ID result and the function function update f okay function on click equal to update okay okay okay so cons open ised ALT key bubbles cancel bubble Cent X Cent [Music] y objects cons tet even. Target do text content refresh cons H1 do text content equal to even. target. text content John pin Ki super okay cool H1 1 H1 2 H1 3 H1 4 H1 5 H1 6 1 2 3 4 5 [Music] 6 so okay ask script H1 equal to document dot get element by ID one function delete item delete H1 remove h 1 2 3 4 5 6 2 3 4 5 six okay first first even. target. remove again refesh Del 2 6 super fantastic so okay okay starting with inner HTML okay so first to HTML HTML okay okay so javascri ID equal to where div equal to document do get element by ID 1 okay and then cons the conso okay good div do text content cont text content so in HTML okay HTML HTML HML okay HML equal to H element but okay again HTML okay okay in html text content so insert HTML element okay okay different ways of cons doc documentery doy CL H1 1 H1 2 C okay H1 class equal to okay H1 class equal to okay H1 class equal to okay first all okay okay where going here where fruit equal to fruital to Apple terminal new terminal Okay so node node cons Gra Square okay Apple orange grape comma banana apple orange grap banana okay super so for app Z orange one grape two banana 3 0 1 2 3 okay cons fruit of zero fruit of one fruit of two fruit of count equal to 5 count equal to count plus 1 2 1 2 3 4 okay so again in Loop 0 1 2 3ep Step 3 4 5 fruit Z fruit of one again console. log fruit of count count equal to Z count less than or equal to 3 0 1 2 3 UND 1 2 3 fourth fruit of count fruit of four 1 2 0 1 2 3 three l or equal cons fruit do 1 2 3 4 1 0 1 2 3 okay length four less or equal to four First Step Second Step third step okay second position third position okay first element of one second okay super for count count equal to0 count less than div dot length count equal to count + 1 cons div of count port Tex context content Super 1 2 okay okay super so get Elements by name elements element okay so insert okay something where div equal to document dot query selector up and hello D do up and hello first do hello okay mostt adjacent element okay insert adjacent element first before begin El after element do insert adjacent element first after begin after end before begin before end okay first before okay element okay insert adjacent element before begin hello okay insert adjacent element element create up so where H1 equal to document dot create element h insert adj element before begin after end after begin before for end okay super scratch I hope you guys are ready okay so let's begin create hello and in the list delete Buton delete copy PA paste okay first okay first JavaScript script function correct equal list container selecting UL where UL equal to document dot get element by ID list container you list item equal to document dot create element n elementem in the list item item text content equal UL do up list item Okay so okay equal and then. up list item in the UL and the container okay input value input equal document dot get element by ID input the input tag okay okay function delete item delete Buton delete delete on click equal to delete item the delete item Target in the delete even Target parent element remove Target but element Del okay HTML button add slash button delete delete delete delete button click on click equal to so delete item so delete C okay okay hi guys we are leveling up our game so maybe something and the way you think so it will get add can also delete it so yeah let's start this session Okay so so okay index HTML okay so let's begin first okay okay pop and but cancel first dot overlay the overlay background color black okay 100% height 100% 100% 100% Piel left 0 pixel top 0 pixel complete screen opacity 0 0. popup box IND one index so okay still I didn't come [Music] actually it's and color black okay see okay and then 40% 40% andd 20 pixel okay and Border radius pixel okay percentage okay yeah I think that's enough so BL popup overlay in the popup box popup overlay and popup box where popup overlay equal to document dot query selector popup box equal to document dot get element by ID dot popup box okay function show show button equal box style do display equal to block function the popup box display property first okay I did something cannot read style okay get by okay popup overlay dot style dot display equal to block function close popup CL but show close Okay function on click equal to close popup refres show Okay so [Music] [Music] IND function alert message function alage alert hello okay but okay let's see alert is not Al alert okay okay so okay [Music] FAL to document do id id equal to BTN document dot get element by ID BTN button listen l function button dot add a even listener add even listener overa function alert Mouse over okay okay the complete project okay okay let's begin so now okay so already okay I'm closing this okay books key okay so in the books key now index. HT ml F create style. CSS F cre scpt and then CS L sty okay not style so linkt SRC tot. okay FS so sty CS in the okay first stor margin Z and padding also I'm setting to zero and then body open okay okay and thenal nav bar in the div I'm creating H tag book # fd65 69 okay so background color and then padding 10 pixel first section so first class equal to container okay container class equal to Booky container okay first initially let me add rich. p and then H tag delete button button delete super dot container dot container in the container first padding padding it be 10 pixel so okay in the Gap looks good book container book iph container in the book container first let me add Tex Center okay not Center of course not Center okaying 15x and then 25% so that background color can be black border radius or 10 Piel and nextgel and then okay margin over 30 pixel super next and the book coder H1 do book container H1 container H1 okay it's not H1 it's H2 actually okay book container space button in the button background color the padding top 5 pixel set and then padding bottom 5 pixel and then padding left or 10 pixel padding right 10 Piel it looks good but border none okay so that okay looks good and then margin [Music] top okay okay uh next thing is okay so next okay I'm adding that button button class equal to add iph button equal add popup [Music] button again add I button background color set color it's going to be black border radius 100% And then padding top 20 Pi padding bottom 20x and then padding left or 30 pixel and then padding right or 30 pixel and then font 40 bottom 30 pixel and then right 30 okay first the pop okay class equal to First and the pop overlay first and the pop popup overlay okay in the popup overlay first background color black 0 and then position absolute WID 100% it height again 100% top zero left zero so Z index okay so class equal to or popup box create okay so in the pop first add book and placeholder equal to book title ID set okay book title input text book author ID book author input okay input tag in the input tag placeholder okay short description book description input okay super so first button ID equal to add book cancel ID equal to cancel s pop and the PO okay so first popup box po background color black okay not black background with 40 % okay and then 40 pixel so border radius or 10 pixel and then position abute top top or 20% and left or 20% should work okay and index okay so next in the pop box dot popup box input in the input background 5 pixel fontel okay and then solid black okay same C Vex okay okay so again dot popup box input colon placeholder in the placeholder order color would be black okay copy popup box button pop box button background color black padding left 20 pixel padding right or 20 pixel and then and then padding bottom or 10 pixel okay what else color text I think it should be good okay super cre canc but cre pop [Music] and dot popup box input Focus text area text area okay super because okay initi in the popup boxl okay first selecting s popup box popup overlay and then button select okay where popup overlay equal to quy popup overlay correct popup overlay where popup box equal to document get element by okay query selector again query selector popup box popup box where add popup button equal to document add popup button add popup button pop overl pop add popup button [Music] Dot listen function popup overlay display property okay okay so and then style do display okay so I guess next can okay where am can can okay in the formula action okay sub but but Def on click hand function def PR default select cancel button where cancel button equal to document dot get element by ID cancel button cancel popup okay cancel popup cancel popup okay cancel popup do add even listener event dot prevent default okay popup overl display block n none [Music] okay book description c v Okay so okay book container display property okay okay superer select okay overall container select container add book but in the book title in the book title theth in the book description input SEL okay container equal to document dot query selector do container where add book equal to document dot query get El by ID get El by ID add book where book title input equal to document dot get El by ID okay get element by ID n book title input right yeah book title input okay book author input book author input description input super okay do add even listener click comma fun comma function okay listen carefully first where div equal to document do create element element div do set attribute in the the ml equal to okay [Music] but okay templ Ander container dot up D okay so first in the button cck so book something something okay dollar symbol bracket dollar symbol okay first book title input dot Value First book title book title input do value book author input dot value book description input do value super title on again mindset Carol the hello there change the way you think delete onck equal to delete so sc. function delete book even dot Target Dot parent element dot remove par element so you canow through it so something blah blah okay something hello Plus BL blah blah add HTML csas hi you can collection search for example search okay and also at last we have contact page okay so ecommer okay [Music] index HTML and style. CSS F and then Javas so index.js first HTML HTML HTML okay and then Google okay and okay okay soal links okay c contr v contr v home and then collections contact okay first okay good okay links F okay home col contact okay cool let's see how it looks okay maybe 10 pixel okay 10 pixel looks good okay l 1 d 2 3 2 C but still it's not actually black okay Tex deoration okay so yeah I guess refresh okay option CSS box Shadow okay get CSS scan 93 full CS Bo the Home Collection contact to now Bar menu toggle okay and solid sech at media screen and Max with 600 pixel 600 okay okay now bar links okay okay class equal to side andb okay solid X LS c v Home Collection contact okay bar links link okay okay okay okay okay okay like and then and okay okay okay L side links an text decoration and sty equal toex right okay super okay equal docent do side nowar in the side nowar do Style doyle. okay display equal cannot read properties of null okay side problem okay side iar sorry show function close the function do style do display equ Al to blal okay close Okay okay but last forus okay okay okay okay super okay so again up your style and then with stunning collections okay cool okay DPS colon SL sl/ source. unsplash.com SL random SL300 X300 and slash fashion Okay so okay soel 50h it looks class equal to header button button okay header button in the button padding left 20 pixel padding right 20 pixel padding top and bottom 10 pixel padding bottom or 10 pixel and margin top 10 pixel background color set okay background color already same color textor white and cursor pointer equal to header image media screen dis okay provide best experience and all those things soice okay service okay equal service class equal to service container hyph one okay service we provide bester experience okay in the service we ensure that our customer have the best shopping experience pixel and then next do service hyphen container container one correct the service okay second service container class equal to same service container 2 okay okay F and face smile satisfaction guarantee okay okay this looks f c v v okay new arrival every day and F and free shipping service container service container display property F justify content looks good and what else is remaining service container # F2 F4 F7 okay and radius Piel anding also it looks much better okay index. HTML index. HTML okay newal okay okay 200 okay F class equal to fa solid fa Arrow right two Mark 3 Mark 4 new arrival okay dis prop and then justify content Center okay not Center space between basis Flex basis 40 40 okay or 10 percentage padding right or 10 percentage padding top or 5 percentage okay and padding bottom padding bottom or 5 percentage and Mar top 18age okay and okay it looks good already right what Isel okay cool missing okay and but the problem Isel okay now it looks better and okay so and here we have some minor problem that is because newable container Flex bases okay I'm not exactly sure from where that padding is already coming from so new arrival display Flex Flex around okay default from where we are getting that ping anyway okay so now it looks good yeah the okay in the whole most want but yeah by default nexts equal to news join news in the paragraph tag sign up for our email newsletter to get exclusive discounts and updates and more okay and section input type equal to Tex and class equal to search okay okay that's it okay cool okay first new first and F Direction news ining 11 pixel and 80 viewport margin bottom 10 pixel and Border solid black 3el news button margin top 10x color radius padding okay okay okay and okay class equal to and class equal to container okay one okay okay icon container first class equal to fa Brands fa Twitter and Facebook sty equal to color full white c v margin top 20 pixel padding 40 pixel and background color same and so let's see wow looks super cool4 so okay super it's up to you okay super okay search search H tag one in h tag two in h tag three in h tag four in h tag okay enter text equal to container equal documentery select elements equal doy cons elements okay function okay okay like kind of still it's part of the code cons app includes incl IND text content okay index index text content IND IND of enter elements oft Contex of enter text L elements element element do elements of Z do style do display equal okay element one one index of okay index of one index of okay for where I equal to 0 I less than elements dot length I ++ in the okay 0 1 2 3 4 0 1 2 3 4 elements of do style do display equal to block match okay super entert to Upper elements okay we have some problem here okay uppercase is not a function I hope you guys are ready okay indm index.js St collection HTML clal product [Music] section and placeholder search the search class equal to fa solid fa magnifying glass and search sectional to products okay box the products box SCH in the image in the texture okay c v black shirt black Shir collections first product section product section in the product section 80% and Border solid black 2 pixel and then R 20 pixel Andy content between 10 pixel and margin Auto so that okay okay product search 100% okay products 20 pixel and display property Flex Gap is 10 pixel Flex W is r and justify content space super it looks good yeah it looks good [Music] okay okay it looks good and yeah product box image JS product container equal to document do get element by ID Products first in the products okay in the products search where search equal to document get element by idar where product list equal to product container do query selector all D okay uh search enter value equal toget value per case upper case okay for count equal to Z count less than product list do L count equal to count plus where product name product list of count do query selector P text content if product name to index of entered value less than Z product list of count do style. display equal to product list of count sty display equal to block okay it's not working cannot read properties of query selector all third okay product container select all okay index collection contactl index. HML collection. HML contact. HML okay so okay byebye devopment happy learning guys