Build a Real world Website Using HTML CSS JavaScript

hello my friends welcome to the new project tutorial in this course you'll create a completely responsive real-world website with modern UI in HTML CSS and JavaScript starting with the interesting Parallax effect and gradient background how it works blog and much more this is the creative marketing agency landing page that you can discover on the YouTube by completing this project you'll get a solid foundation in front-end development as well as pigma experience which will help you to build more creative website in the future there will be no extra things everything will be built from scratch this video is perfect for you if you want to learn how to convert a figma design into a fully functional website increase your CSS abilities and learn how to build a responsive modern website and this course is entirely beginner friendly will start easy and progress to more advanced topic as we go and I'll explain every step along the way in addition to develop this website you'll discover the complex usability of Gray it blacks and JavaScript Parallax effect and correctly position media queries for all devices give me a thumbs up if you found it useful now let's dive today's video alright let's open the file with code editor in my case I'm using vs code you can choose your favorite one and there's initial the HTML file push comment for the primary meta takes and let's set the title open the index.txt and here is the title copy and after that idle and content will be this one and after that at a description will be this one and then let's set the favicon it's like the path and here will be SPG Plus XML and after that we need to link our Google font now let's open this style guide to MD file in this file I share all essential staff here so let's open the file with Ctrl shift p and markdown preview and here is here's the Google font you can copy from here and paste it down below [Music] link or css file path and of course here will be the comments for CSS file and then here will be the load images we'll walk with it later sharing this course and after that we need to bring our Javascript file [Music] and Link the Javascript file select the path like this and now we need to link our ion icon file [Music] for the arnicon file we need to go our style guide.md and scroll down and here is an icon so you can copy from here and paste it down below alright here is our HTML file let's go to the CSS file to reset some browser default Style so now we need to Define our CSS custom property so for this the background color let's go to the style guide AMD and here is the background color just copy from here and paste it down below and after that we need to Define our text color so for the text color most common first and as always we need to go is target.md and here is the test color so let's copy from here and stick down below sure after the text color let's define the Border color and here is the Border color [Music] and then let's define the typography [Music] foreign typography first of all we need to define the import size and here's the font size and font family so there's coffee from here will be the font family and there will be font size all right after that let's define the font wait and here is defont weight then let's define the spacing so here's the spacing and paste it down below and now let's define the Border radius [Music] [Music] here will be defaults both shadow [Music] and snow water radius [Music] [Music] all right and then there will be the transition [Music] Terrace transition [Music] alright here will show all of custom property in our CSS file and then it's time to reset our browser default Style or elements and they are before [Music] after will be margin zero and adding zero oxidizing the water box and then or the list open this style none and all the hyperlink and image and span also a button and then an icon display will be blocked or the hyperlink color will be inherit [Music] and text decoration will be none and or the image height will be Auto for the input and button background will be none and Order also non-want will be inherit the input width is 100 and outline none after that there is button because a little bit pointer by an icon pointer events not for the address Bond style normal and then we'll select the HTML [Music] font family [Music] bar and chance large size 10 PX and scroll Behavior smooth then let's select the body and inside the body let's say the background color of a r b g dark purple and color will be far takes white Alpha 60 and then one size will be far what size six and also line height 1.8 and let's select the body and as I said before we are going to style from our figma file so here's our figma file you can see in my screen there is all the colors and typography and some elements button and the input field and here's the style this is a mobile version and this is the desktop version here is our live server you can see the change here so let's get started so first of all we are going to structure our header so let's get started in the body comment for the header add a class with Ada so let's see what next and here is our header inside the header very sharp element logo and some other links and also a button this is the desktop version and here is the mobile version so inside the desktop version let's see there's the desktop and here is the header so you can see inside the header we have a container so a Chevy container in our code and inside the container our first element is the logo so let's set the logo challenge set the source for the logo logo and with will be two five two zero five and IDs or zero old will be foreign [Music] and after that let's see what next so next is the nav bar so navbar contains with four links so let's set this bar let's say that data this is for JavaScript nav bar and inside the nav bar a Chevy on order list us with nav for our list and after that here is the Ally inside the Ally we have another link so a DOT navbar [Music] here's the old first link and paste it here copy this more time is second one and foreign [Music] so after that here's the button so audio button [Music] a DOT BTR BTN primary sorry secondary [Music] and then let's see what next so this is for the desktop version and HD nav toggle BTN here you can see in my screen so let's set it button password now open BTN area level toggle menu [Music] and also here will be data for JavaScript [Music] now so we'll be here unsight enough toggle with the end we have iron icon so let's copy these two iron icon and paste it here all right so what next next is the overlay for the nav boxer Dot or lay and there's the data overlay again this is for the JavaScript I don't write now we are finished the structure of our header or the mobile version and the desktop version all right let's get started so let's check our browser everything is fine or not and here is here's the container logo and after the logo here's the nav bar also a button and the enough open BTN and after that where's the overlay let's check it oh I forgot to save and reload again and here's the overlay all right let's go to this tile so first of all for the header and display none for nav bar overlay and BTN inside the header so dot nav bar and and also better dot BTN it's playing on let's check it oh yeah that's great all right after that select the header [Music] and position is absolute and top is zero and left is zero with 100 and adding block which is top to bottom padding 30 BX and c Index is four so let's check it squared here's our header Style with absolute and top left with padding and index so after that now we are going to style our antenna which is this one inside the header so let's select this dot header inside the header antenna will be Flex justify contains space between and align items items will be Santa yes like this and here is our music style so in the reality style we can use the container so this style for the all container in our website so this is the padding and line which is left to right padding is 16px let's check it now here's containers content Style with the padding inline 16px all right overlays still visible so maybe I mistake something [Music] copy [Music] and after that select the logo so this one dot header inside the header logo and Ash IMG H1 [Music] width will be 160px [Music] and then select the nav open vtn [Music] nav open vtn [Music] and let's say the color [Music] takes White which is the white color and font size should be three Ram yes like this and after that select the nav open vtn so inside the nav open vtn select the menu icon and when nav open BTN will be active on the time menu icon and a DOT now open BTN and now let's select the close icon Now display is none and then let's copy this one and now remove the active and set it here here will be display block so let's check it what's going on this is nav open BTN and let's set the class active all right guys when nav open BTN is active on the time close BTN and otherwise this one chair after that let's select the enough bar cut from here and paste it unfold enough bar Position will be absolute top is 100 right is 16px and background color bar all right answer the color and then for the padding top to bottom will be 16px left to right is 30 BX let's check it just like this and then let's set the Border radius bar radius 24. as like this let's see our mobile nav bar right and default opacity will be zero and visibility will be hidden and then I set the transition 500 millisecond and keeping out Z index will be one then navbar when navbar will be active opacity will be one and also visibility will be visible and then transform Translate Y will be minus 15 PX all right let's check it active all right chair let's see what next and next is between the old Nava links we have education which is a 5px so let's set it the navbar selecting Apple list and inside the naval links alloy Not Lost Child margin lock end which is margin bottom is 5px yes like this here is our spacing all right so what next next is first select enough bar link [Music] let's set the font weight which is white medium [Music] air like this alright then after that we need to select our overlay some style for the overlay Position will be fixed and top zero left is also zero with 100 percent and height 100 pH and of course Oriental depends none and when overlay will be active [Music] monetary bench all sure verse remove from here foreign move only our next section which is the hero before going to the hero we need to do some JavaScript so let's see this see you this is great event on multiple let's declare a variable name with adivan listener on elements const and here will be the function and function contains with three parameter first one is elements and second is event type and last one is callback say inside the function let's set a full loop all right inside the loop all the element and uh index add infant listener and here will be event type and after that there will be the Callback now let's comment for the nav bar [Music] declare some variable const nav bar document top quarter selector copy this one data navbar and then toggle BTN so document dot query selector and select the enough togglebitian [Music] and after that let's select the overlay selector that's great that's initial function namely toggle nut bar and inside the function navbar dot class list which is a snapbar DOT Togo and active and also active for the nav toggle meeting nav to all vtn Daw class list dot total dip and also this is for the overlay overlay door class list Dot toggle also active let's select the body so document dot or data class list I'll go yep sorry here will be the nav active which is body plus width now overflow will be so let's copy the class name and [Music] there is all right then there's add event listener on this all elements and event on element which is this function let's call this first one will be now toggle BTN and the second one will be overlay and event type will be Click Share and callback will be this function so travel all right let's check it [Music] like this when I click on overlay just walk in when I click on the button which also working great so let's move on to the hero [Music] chair here will be the main kill and less common for the hero so let's see what's the hero okay here is our hero content and besides here content here is the hero Banner so first of all there is our hero section and as well as the container so I set it section door section dot 0 and area label will be you know inside the hero where is the container okay then first of all there's the hero content search edit dot hero content and inside the content here's the hero title H1 dot H1 dot title dot video idle and paste the text and after that there's the hero text P dot EO text and the face HD tags and paste here and then there's the input wrapper which is this one so let's set it [Music] dot input wrapper first element is input and class width input and name is email address placeholder is this one all right then here is a button so let's structure this button type is submit and class will be BTN dot BTN primary and text is here all right and then now let's structure the hero Banner so this is the hero content and this is the hero Banner [Music] so let's set the figure dot hero Banner and then IMG door W Android plus setting part [Music] Urbana and with will be 8 35 [Music] and height is 960. and ALT is hero Banner and then you can see here here is some social icon share a shade it mg Dot shape dot shape one and source is your icon one way fish hundred and height is not great alt will be YouTube slash duplicate it so it will be our icon 2 and width will be 100 20px and 5 is 120px and shape will be shape two and ALT will be Twitter [Music] third one is icon 3. and also shape three and with will be Android 50px and height is 150 PX and old will be Instagram [Music] all right let's check it here's our social icon and here's the hero Banner and here content and the input trailer style our hero section so first of all select this section and it will be in the reality Style dot section I use a section dot section because every section have spacing in the bottom you can see here so that's why I use section dot section add in Lock and Bar sections patient [Music] and after that let's select the title [Music] which is this one so I use a title In The Heading so you can see here is the white color heading and here is also and area salsa so let's set the title Style [Music] select the title and paste it here color will be far text White and line height is 1.1 and then let's select the H1 [Music] or the H1 font size little bit far one size one and also let's select the HD and H3 H2 font size bar on size two and one to wait will be for semible [Music] and then for the H3 on size will be bar one size three and point weight will be white regular then let's select the vtn dot BTN and height will be 62px add in inline 50px let's check it yes height is 62px and padding in line is 50px and and want weight will be far white semi bold and Border radius is bar radius peel and color will be VAR text black and also display will be red and as content Center okay let's check it here's the hide padding and font weight everything is working so after that next width will be Max content and transition is transition one wow transition one foreign primary or the return primary background color will be far VG SoundCloud shake it yeah like this dot BTN is and Focus visible so let's check it in our design file you can see here this is the button so let's check the Hawaii fact so this is default style and this is the voice type so let's do this background color will be part and voila will be bar text White all right let's shake it [Music] yeah this is working and then select the w100 and or the w100 width will be 100 all right let's check it or hero BG contains the w100 plus that's why now let's select the payroll [Music] this is the here comment and paste it here and for the hero we can see here this patient right so let's do this add in block start will be 130 BX let's check it yeah like this and after that you can see here hero contains a background image so let's check this background image URL select the path images and hero PG and background repeat now repeat and also background size will be cover background position [Music] will be Center all right let's check it yeah like this and then let's select the hero and inside the hero the container for the container display will be great and Gap is 30px so let's shake it brush here is the display grid and GAP is 30px and after that let's select the hero text margin block which is top to bottom margin 25 BX is working after that let's see like the input field so copy from here and for the input field hide is 62px as well add in inline will be 30px and background color a little bit far BG and also order radius bar radius pill let's check it yeah like this like this one okay all right so then color will be far text White so now let's set the placeholder color right and fourth field pull on placeholder Allah will be a bar and let's check it yeah like this all right after that when input will be focused input field focus on that time box shadow in shade zero zero zero one PX and color will be order Alpha 20. all right let's shake it like this okay and then let's select the Halo and inside the hero select the BTN so what we need we need the little spacing right so margin lock start which is margin top is 15px [Music] let's check it yeah like this all right and after that you can see here in my style in the mobile version there is no social media icon right show us display none hero inside the hero select the all shape and this play is shake it yeah like this chair then let's select hero Banner which is this one and paste it here so inside the hero Banner select VW 100 Max width will be Max content all right let's shake it yeah like this we Face Max content right so here is our hero like this let's move into the next section so our next section is process let's see what we need to do here is the process process contains the title and section text and also a process banner and some cards all right there is the comment for the process and then section dot section process and text Center and area web build by will be process inside the process there is the container so first of all have a section title HD dot H2 Dot idle dot section and just copy the text and then P dot section text I and then let's see what next is process banner and some cards so for the process Banner all we need to create a wrapper which is you can see here here is the process and here's the process container and inside the container we have a title that we have created earlier and the section text and after that here's the wrapper that's crayfish top rapper and inside the wrapper we have an image and the content so for the image dot process [Music] and inside the process Banner IMG Dot w100 [Music] and let's select the path [Music] width will be 734 and height is 8 54. and also loading will be lazy and let's set the old which is process Banner [Music] and after the banner so let's see what we can do here is the process list so let's make it you will do create list and inside the grid list there will be a line door process item [Music] and IMG door item icon and let's set this holes process icon one and with will be 60px and I'd also 60px and of course loading will be lazy then create the title H3 dot H3 dot title dot item title and set the title text instead here and then P dot item text here's the item text all right we create the icon and the title and the text so now let's copy this one a few times here is the process icon too and [Music] I'll set the title [Music] count three foreign one more time for all right shake it everything is fine right here's the section title and section tags section title section text and then here's the section Banner and also the section card as default different card right so plus let's style this so first of all last select the attack Center sorry Tech Center and it will be in the uh resist tile so click Center pull their text align Center so let's check it yeah which is good and after that select the create list and display will be grid Gap is 50px yeah like this this is our grid list and here's the gap all right next is does she like the section text which is this one [Music] and launching block which is top to water margin or the top 15px and for the bottom will be 50 BX like this every section have a change patient right [Music] after that let's select the process Banner [Music] process Banner will be displaying an immobile version display on [Music] like this there is no process panel right you can see here okay after that it's like the process which is section [Music] and for the process section Position will be relative and Z index will be one so what next next is we need to create we need to set a background image so here's the process and the after right so let's create this the process turn content will be empty as well as position will be absolute and top is 50 percent and left is zero of course width will be 100 percent and height is also a hundred percent and then background image or select the path process ity and also background repeat now repeat and background Position will be left and background size is cover right then pointer events num and G index will be -1 so let's check it yeah like this here's our process and inside the process this is the process after right and then let's select the process item so what we can do here is inside the process item or icon in the center right so let's do this [Music] this is the process item and inside the process item let's select the process item icon right item icon margin in line will be Auto for centering and filter bar Shadow on let's shake it [Music] yeah like this right then let's select the process item again and inside the process item item title [Music] foreign top will be 20px and left up bottom is 10px right so let's shake it yeah like this everything is well right all right we are going to finish don't worry just keep it tight with me so let's get into the next section next section is the work and common for the walk section so I should go to the of figma UI design so what we need to do [Music] here is the work section so let's open the work section inside the work section there's a container so let's do this section dot section dot Works dot text Center and area level Works level last section I forgot to uh Place area level so here will be the ID all right and inside this section the container as well and then H2 dot H2 dot idle dot section title and copy the title and then P Dot section text [Music] and then here is the grade list you can see here so work list so you will do replace and then Ally and Dot works card and inside the award card for the banner figure Dot card Banner dot IMG holder [Music] tile with and hide I'm creating the custom variable and then IMG dot IMG cover let's select the path images and work one and with will be five atpx and height will be 6 20. [Music] and let's paste it here also hide all right after that of course loading will be lazy the lazy and [Music] alt will be product design and then let's create the title H3 dot H3 dot title and here's the title and inside the title a DOT R title and let's paste the title in here and after that a door text Ed all right let's duplicate it few times [Music] here's the one two and also check the alt and title this is product design and this will be up development and then copy this again this is the card work three and and copy the visual reality and paste it here select the alt and title paste it here and then after the UL here will be a dot vtn dot BTN primary select copy the text and paste it here this is the button right all right shake it here's the title and the text and this is the card Banner and this is the card title and cut text and after that here is the etn primary all right let's style the work section so first of all we need to do some code in our reused style so select the IMG holder and I'm using aspect ratio to avoid layout shifting when the image is not loaded so aspect right here far with which is this width and bar right which is this height right so after that background color will be [Music] and then overflow will be hidden so let's create the IMG cover with 100 percent eyed hundred percent and check feed over and transition will be far transition to like this services our IMG holder a IMG holder contains the aspect ratio you can see here then if I remove these Shores [Music] without loading image this is look likes and then let's select the card Banner [Music] as they work and stand tall walk card and inside their work card part Banner and Border radius will be bar radius 40 and margin lock and tbx so let's shake it this is the Border radius and as the margin block end right and then what card again when what cardish however and Focus Within on the time IMG cover which is this time to cover will be transition transform kill 1.1 jealousy yeah like this [Music] then what card and inside the award card [Music] car title [Music] chin lock end will be 12px and transition will be for transition to transition one and then work hard and cut title is over and Focus visible and color will be wow text and glow shake it yeah like this that's designed for the BTN again watch and inside the work section dot BTN margin block start which is margin top will be 60px and margin in line will be Auto for centering [Music] all right let's get into the our final section which is the footer so let's comment out for the water so here's our UI design and here's the footer first of all Edge the photo brand and inside the footer brand as a logo and address and the social list and after that here is a button so first of all let's create the footer top inside the footer [Music] utter door and inside the footer dot section dot putter top and then here is the container [Music] and inside the container first of all here is the water brand so dot water brand [Music] and a DOT or two logo sorry a DOT logo [Music] and IMG [Music] and width will be 205 and height is four zero and of course loading will be lazy and let's set the old [Music] and after that here is the address right so address to water text and here is the address and then here's the social list right so you will dot social list and then Ally and a DOT social link foreign icon and copy and paste it here so let's duplicate it few more time before the Twitter is this is will be Twitter and then Facebook foreign [Music] what next next is the button so after the social list [Music] and here's the BTN primary [Music] chair after they put a brand foreign so on all the list the water list and then lie and inside the Ally a DOT a link and this is the text and paste it here so let's copy a few more times and change the alt text [Music] is this advices foreign [Music] [Music] [Music] foreign [Music] list we have a footer bottom right so here's the footer bottom and inside the footer bottom there is a container as well and then here's the copyright text and then put our bottom list all right let's create this [Music] this is the footer top under water bottom dot X Center and then dot container [Music] P Dot [Music] copyright [Music] and here's the copyright text and then There's the link and Link will be this one in my case [Music] and then you will Dot but her bottom list Ally a dog what a link and copy it again all right let's shake it in our browser [Music] chair has our logo on the address social link also a button and all the other links and the photo bottom so let's start the footer [Music] and select the footer background color will be bar EG yptian violet and color will be bar text White yes like this so then let's select the footer top [Music] and padding block start lock start will be far sections patient [Music] just like this unless you like the container inside the footer top the footer up and paste the container display will be grid and cap will be 50px [Music] right container is now great and also Gap is 50px so after that select the footer text margin block which is top to bottom margin [Music] 15px right [Music] and then let's select the footer social list [Music] so here's the social list display will be flakes align items to Center cap will be 20px sorry here will be align items and margin block end which is margin bottom is 30px so let's check it yes this is cool right so after that let's select the social link [Music] hola will be text and glow and font size will be 2.2 Ram right like this [Music] and then let's select the footer BTN dot water inside the folder fitbitian font size will be far font size six sorry five and adding in line which is left to right padding will be 60px [Music] right like this so after that let's select the water list and all the filter list play will be grid and GAP will be [Music] 15px base this is all for the list which is display grid and GAP is 15px right then now select the footer button [Music] add in Block which is top to bottom padding will be 40px and border block start which is top border one PX solid bar order white over 10. let's shake it like this and then I should like the link here it will be the class so class is link select the link and the hotel bottom and then link display will be in line block and color will be VAR X SoundCloud [Music] like this and then Lush like the water bottom laced displays Flags justify content will be Center line items is Center Gap will be 1tbx margin in line start will be 10 to the x sorry here will be the margin block start centipex all right let's check it yes like this all right let's check it there's anything else no everything is fine right we just finished our mobile design so let's go to the responsive all right is your style and so let's increase or screen size to the 600 press on C4 foreign [Music] EX first of all here will be reused tile responsive container Max with will be 500 PX and width will be 100 percent margin in line Auto for centering shake it just like this and then select the header [Music] header dot container Max with will be unshaped this is for header like this then increase our window width to 900 [Music] so press copy [Music] and here it will be 768. then first of all his custom property and then we need to change some typography chair typography then when to change the the title font size so font size one will be 5.5 shaded yes like this and and also change the font size two will be for Ram yes like this after that we need to increase our section spacing 100 ftpx just like this [Music] all right so then let's select the reuse this tile here's the reused Style Max width will be 720px this ban dot section text Max with will be 500 PX and margin in line Auto or sanctuary like this and then select the our grade list all of our create lists so great list create template columns will be one of our and one of us [Music] here's our grid list remember this okay push reload it it's like this and also this grid list right so done this is the header and for the header nether Dot vtn [Music] display will be great and marching [Music] in line left will be Auto and right will be 30px [Music] so let's check it all right here's our button secondary right so let's style this [Music] dot BTN [Music] secondary [Music] color will be far extra White and height is 52 PX mortar will be 2px solid bar order lotions [Music] and adding in line will be 40px strike it yes like this and after that [Music] Etienne secondary when over and Focus visible [Music] than background color [Music] a little bit far Vijay Logans so let's check it yes let's walk in all right then [Music] let's comment out for the hero and oh hero hero section will be adding block which is top to bottom padding 180px [Music] right this is our hero section top to bottom is 180px now so after that select the error content Max with will be 560px this is hero content right here content now it's 560px with [Music] and then let's select the hero inside the hero select the input wrapper display will be Flex align items of the center and also Gap is 15px right that's like this and now select the BTN it should be here on margin log start will be zero and Main width will be Max content right like this and now let's see like hero Banner and for the hero Banner Position will be relative and acts with will be by 40px margin line will be Auto yes like this and select the hero are inside the hero select the old shapes do you remember that we display none in the first section which is these shapes so select these shapes and display will be mark and also Position will be absolute add filter bar shadow 2. let's shake it yes like this and do you like the shape one with will be 13px 13 and top will be 300 50px and left is atpx [Music] right and I select the shape too width will be 16 percent and top is 440px and also left this minus 20px [Music] and then let's select the shape three again with will be 20 percent bottom is minus 20 percent minus 20 PX and left is atpx yes like this and now let's add the relax effect on the hero Banner so [Music] and declare a variable const ant relics [Music] elements and then document the query selector all and let's say the data on the all elements that we are going to are the effect data LX and also data Alex speed a share first element speed is 10 and copy and paste it here and for the second one paid will be 15 and for the third one speed will be 25 and then last one paid will be 40. so let's copy the data parallax and paste it here add the mouse move event on the window so window dot add event listener Glacier will be Mouse move and [Music] event chair after that create a full loop for adding the products effect on the old elements foreign [Music] [Music] [Music] a variable const command X now collect the value of the horizontal position of the cursor with event dot client X and then divided by the width of the browser window which is winter.ino width and then multiplied by the relax element index dot data set top Parallax speed and after that movement [Music] and here will be y and here will be in our height [Music] and now add the animation on the products element shared parallax elements and Dot animate so [Music] trans form Translate [Music] basement X PX and then [Music] movement y and second argument will be duration is 500 millisecond and build mode will be or watch [Music] so let's shake it yes it's cool right so this is the pearlex effect all right [Music] and back into the all responsive seven comment for the footer dot or turn list and read template columns repeat three and one above just like this foreign [Music] [Music] and copy from here [Music] and here will be 9.92 and I like the TPX as well pair will be reuse this tile and container will be Max with 960px add in in line or DPX shake it just like this and body dot NAB tiv and this screen overlay overflow will be Auto so then select the header dot nav open BTN and Dot overlay display will be none and then dot adder charge logo and ing Max with will be Max content right I'll shake it and after that select the nav bar and also navbar DOT active all on shade and margin in line margin in line start will be atpx yes like this and then select the navbot list Dot navbar list [Music] display will be Flex line items is Center [Music] Gap will be 40px and insight enough but list Ally art last child margin block and will be zero so let's check it like this and after that Dot navbar link will be [Music] color is far text white and transition will be for transition one [Music] and when navbar link is hover and focus visible color will be bar text white Alpha 60. like this and then lash select the median header inside the header BTN will be Marching In Line and zero foreign items will be Center [Music] alright then select the process [Music] the process Banner display will be blocked and Max with i40px and margin in line will be Auto audition tree all right um process and inside the process as the wrapper wrapper will be displayed grid play grid create template columns and wonderful align items in Center and GAP will be 60px foreign [Music] select the process item [Music] text align will be left like this and again process I10 Dot item icon margin in line is zero like this then select the process and inside the process create list the Gap will be 30px and 40px [Music] and then let's responsive for the work [Music] work [Music] select the awards and save their work create list will be great template columns repeat three and one of her [Music] like fish [Music] and select the water top and inside the water top container will be right template columns 0.5 f r and one of them [Music] [Music] and after that select the photo bottom and inside the water button container will be display s justify content space between and align items Center [Music] and select the photo button list margin log start will be zero and GAP will be 50px [Music] okay now let's increase the window size and copy paste it here and here will be 1200 PX first of all as well because Tom I'll put tea and [Music] she liked their typography on size one will be seven gram like this and one size 2 will be sorry font size we will be 2.8 Ram which is this one all right so then select the reuse this tile foreign Max width will be 1140px [Music] like this and section text dot section text relax with 750px [Music] and now increase the screen size and Happy from here and paste it will be 1400 pixels foreign custom property [Music] and font size one size one will be eight run [Music] like this and [Music] here will be reused this tile [Music] container width will be 1350 PX shake it yes like this and section text [Music] margin block and will be 60 60px section text and here's 60px and now a comment for the hero and select the real text font size will be 1.8 Ram and margin block will be 40px [Music] like this and after that [Music] comment for the process the process dot wrapper grade template columns will be 0.7 Alpha and wonderful [Music] Gap will be 1 33x let's check it like this and then select the process item and item icon with will be atpx foreign item title [Music] margin block or the top will be 25px and for the bottom will be 15px [Music] strike it just like this and then select the process and inside the process grade list will be broke up 50px [Music] here's the row Gap finally we finish the long project with many features during the project we learned many things like grid Flex designed to develop products effect and more hope you enjoyed this project see you on the next video

Channel: codewithsadee

Views: 44,527

Keywords: how to build real world website, digital agency website html css, digital marketing agency website html css, agency website html css, creative agency website from scratch html & css, digital marketing website design html css, digital marketing website html css, digital agency website design, digital marketing website html css javascript, web design agency website, codewithsadee, code with sadee, html, css, html css, javascript, javascript tutorial, web development full course

Id: GohJZd9Tu2Y

Length: 124min 54sec (7494 seconds)

Published: Wed Jan 18 2023