Building 10 Websites - From Design to HTML and CSS - Coding Challenge 🔥

hello youtube we're live again on twitch to try another coding challenge 10 websites html and css my friend adrian who's a designer did a challenge to design these 10 websites in one hour i'm going to put his youtube channel and the video you can check it out in the description and now we're going to attempt to code this using html and css and probably javascript if we need to probably for this project we'll have to see so as i said i'm live on twitch now but this will be recorded and uploaded on youtube so you can watch it whenever you want and i also have the twitch chat here to help me in case i need help because as you may know live coding might not be perfect but coding is not perfect in general so yeah we're uh we're coding in like in real life awesome these are the 10 websites we're going to do let me zoom out a bit he designed them in figma so it's automotive car design uh this one then restore and design food design shoe footwear design fashion clothes design tourist landing page design let's see news magazine this one then we have uh let's see lego legal law firm design tv streaming design it support landing page and the last one is a portfolio resume as you can see they're all like landing pages one page so they're not very very sophisticated well he only had one hour now how much will it take me i don't know now but you'll probably see the length of the video i going to say three hours probably uh i don't know we'll see i have the base project here which has index html uh script javascript if we need i although i don't think just for the how do you call the carousel here and some style css yeah let me remove this though all right good let's start with the first design which is this one i need to get the image so let's export it let's call it a car bg and you know what let's first create a project all right and let's name it to uh automotive car design up cart car r good and now we can put the background image export rpg i'm going to work and here awesome next what else we need from the design we have the font awesome icon library all right okay we can start working on that let me open this with live server okay good now let's work on the navbar so on nav let's see what we have we have an icon which is basically a font awesome icon and the text we don't or i could let's see can i import this as a logo oops i'm not good with sigma by the way all right let's not worry about that let's have a class of logo and we're going to use fasfa car as an icon like that and we're going to say automotive yeah let's see how it looks awesome we have the first part of the code next up we're going to have a ul ally times 5 and inside links okay good uh they won't go anywhere so let's fill it up and this will be home this will be features this will be price and i was checking if we're recording apparently we are yeah contact and this will be book a point point if i could type month okay good now this will have a special class so let's add a class of um highlight okay and this one we have a class of selected okay good next under the nav we're going to have this header part which has let's see a header which has an h1 your car repairs it has a paragraph visit us for your service and it has a button which has the same class of highlight you could use to style it book appointment you know what let's make it an a and a half okay and we're going to have a footer so a simple design this will have ul times three li and it will have strong plus uh paragraph okay for the strong our location uh 15th street suburb count 3 6000 next up phone uh 61 0 40 400 4 000 email automotive at car sales.com that uh oh oh okay so we pretty much have the entire html let's see how it looks almost perfect it's like you can tell the difference you just just need a tiny tiny little bit of css okay first up let's add the background image we're going to edit on the let's see we have it on the body good or we could have this as a header and then have included hmm yeah probably that would be better so let's have the adder be parent of the nav and we're going to have the header to have a background image i need the image how was the name rbg gpg all right awesome look at that perfect uh we want the color of white by default and we want to make it mean height 100 heights uh let's see the nav we're going to make the netflix so that this could be in the center which means we can do display flex let me look there uh we want background image background size to be sorry background size to be covered all right background image image yay good good good good good now we might need to remove the footer height from the header but we'll see later and let's also do background position center center all right now for the nav uh we have some kind of container here let's use that in a class container with max with a thousand pixels and we're going to add this to the nav all right and inside the footer because the footer has a back a black background so we want the container just here hmm we could use it on the ul actually because we already have it okay thank you for all the follows and everything in the chat sorry i'm not looking now all right good next up let's do the there's so many things to do let's see the nav should be display flex and we have a div with the logo and the ul the nav ul also display flex list i'll type none list i'll type none okay padding 0 that okay now the nav uh logo should be font size probably two ram make it big all right and we need to push so we have that container inside the nav we need to push the logo on the left side and the [Music] links on the right side so nav justify content space between oh a the header flex direction column like that okay get good good and this should have margin auto all right we're slowly getting there max weight instead 100 all right good good good good heading one ram like that we want nav ally nav alli a color white text decoration none we want them to have some kind of padding one ram two ram too much one overall okay good now the nav lia highlight this is the highlight class we're going to have on the button too so let me just highlight we want background color this blue color okay good and we want the uh a with the class of select ted i think that was the class yeah selected we want font weight bold all right not too bad right right right okay now inside of the header i still don't like this [Music] might need another div a class of content because we want it to be centered inside all the space remaining here in the header so this should have also there on the left okay we don't need this content margin auto this should fix it put it in the center but it's too much in the center so let's play with um header line items start no it will push it too much so let me just auto top and left top and bottom and zero left and right okay but then it needs the container so we can do this and have other container container all right now let's move it here under the header this is general class oh boy just the fight says summer doesn't look like that is the same containers yeah so something uh i'm messing up with the classes here it has have the nav class too this is all because i changed the nav to be inside of it let's keep it content and have this inside and then just the content it doesn't have the container now container okay good so now the container has a weight of 100 pixels from here to here and because we have margin auto all over the place it's centered finally get that was a rough start and now let's make this we can do font size 1.5 ram to make it bigger and we want content guess we can remove this uh content h1 to be this color all right looks like it's even bigger margin bottom zero maybe my uh screen is too big and see from the car and highlight a i need these two for this button and padding so let's add everything here oops like that and now we can just leave this this way yeah right i mean close uh whoa i messed something up okay and now let's make the footer which could be position do we want it fixed not really let's just give it the height height of 50 let's try 100 pixels and we can have the header be uh calculation minus 100 pixels like that good now the footer i want it to be background color i think it's black right black so there's a zero right we want the color to be white i want the footer ul don't have list style type none adding zero display flex align at the center justify content space between like that okay let's have adding one ram right and footer strong i want color to be this okay and footer paragraph margin zero not really i don't like margin on it okay let's keep it like this uh okay it's kind of the same the idea at least the idea um what is the logo font size 2.5 yeah we made it bigger yeah oh i still don't like the margin there in the paragraph some reason and we need to fix the item so margin zero okay and let's have more padding on the two ram all right good and we still have the scroll bar because we need to find out exactly what's the height of the which is 7102 so minus 102. don't do this though yeah so now this is 100 report heights minus the height of the footer here which is 102. we dynamically calculated it might not let's see yep definitely won't work when the text goes down but then people can scroll so important is on the desktop to be like that okay good now let's make it responsive much as we can so media screen and max width 700 pixels what do we want the nav which is currently display flags just back on space between we want it to be flex direction column there will be a like at [Music] the nav ul again for exaction column maybe we can keep it like this it doesn't look that good right nav ally margin 0.5 ram looks like a job for a hamburger menu but that's time-consuming how can we make it look good on mobile uh i think i know i have an idea nav highlight display none and we can keep that yeah get and we can keep nav [Music] what was um the nav tax direction column okay and the ul it could be align self line items align cell flex send doesn't look good that's what happens when you're a designer okay let's just have li margin 0.5 ram and not the first child 0.5 ram 0 all right margin bottom on the last so the margin bottom should be 0.5 maybe even more now one ram okay good uh something's wrong with our max with 200 percent weight because we have this scroll and figure out why is this all right so that's why the container here has more space because the content is not max with 100 all right now it's squished good good i'd also like to add a container maybe a bit of a spatting left and right yes so we have a mobile bit of padding okay and let's fix the footer footer ul flex direction call hey all right you out space between yeah that's the center very interesting how that still has heading thank you for all the follows whoa that's crazy let's see why like okay i see it uh it's just that this is how my what's the width of this so it's centered which is well what we wanted right uh let's just do text on my center and yeah much better okay i mean it's kind of responsive right and we only needed probably 20 minutes on the nav what's wrong with the nav it doesn't have padding i don't like i see so it has but then the container removes it then let's just this is usually how bootstrap works also so uh container and we have everything inside so the nav has its own padding container has its own padding top and left left okay and then the container inside is broken i think think think think think this needs to be um blacks so that the logo goes to the left and the yellow on the right let's find another way to fix it to have padding i mean i could add on the container padding all over the place and just remove them on the footer what's that all right good oh boy this was a bit uh harder than i thought but yeah look at that we have a website which looks oh on mobile i'd like to fix this too what is the content right on tenth i want margin to ram zero uh auto zero okay and the font size to be what's what's it now two ram let's make it 1.2 0.4 okay i removed the margin on the i didn't so many follows thank you everyone for following clicks javi uh alex hulo oh boy what are we doing today we're doing 10 websites in how much time we need all right yeah uh yeah i i guess this is good right right right don't say otherwise they're definitely improvements but you can do that that's a challenge for you improve on this all right let's go to the next one the idea is the same right we have the logo the navbar uh text here and a footer and in that cool image so i'll call it i'll call it done yeah the next one here is restore restart how do you pronounce that the food design all right the food design let's copy the base project and restaurant sign okay i forgot to change here the title uh automotive our design awesome now the restaurant design and just that got what we need we need again this image so let's export it uh put it inside store on design and we want pg pg that should be fun okay now inside we can use again the same approach header which will have the background image and it will have a container which will keep the width here i'm going to have one nav on the top basically this is the nav though the nav with five buttons okay and this part here again a content part oh we can use the idea we worked before so let's see nav doesn't look like a nav let's just use a div here with a class of container okay it will have a logo again we want the f a s what's this can i see u10 seals fau 10 cells in an i tag okay and restaurant maybe this could be an a tag so we'll be clickable that's what would you do right all right and on the left we want let's do another a tag which will be phone call us on zero to 200 4 000 like that let's see how it looks yeah look at that pretty cool pretty pretty cool now we're going to have underneath this we're going to have a nav [Music] snail also needs to be inside that pu part ul times li times 5 a will be home this will be about us this will be more well menu this will be contact us and this will be book a table like that and this will have a class of active active was the correct class we should use the last project and this should be a class of highlight again good and here yeah content i'm thinking maybe you should use a container to a wrapper for all of this so that we don't need to use the container that many times so many ways to do one thing that's why it's a bit confusing and this should be let's call it links okay so this is the links this is the navbar links uh pre-nav the pre-nav the links and this is the content the content has an h1 try something new it has an h3 book look a table should be a link right yeah two links st links eight times two this is a class of uh white link book a table and the other one is a class of highlight is this one so this one is view our menu class of uh tl link r get so many classes and we need to make them on display line blocks so we'll be on top of each other all right this should be it with the html now let's go to this styling this one header again background image we need bg gpg background size hover height 100 height minimum height all right good whoops you see what i did i stored this okay all right i just want this image ipod or stern sign bg uh png okay good and i'll delete this one all right now let's add that container again you're almost done hey how's it going hey it's going good i mean almost all right let's do it again weight 100 1000 pixels and we want a max weight of 100 percent let's have a padding of one ram overall okay good and also merging their auto so it will be centered now uh we have three containers like we have this pre-nav let's do it enough although we can have double maps we have a pre-nav which should be display flex just by content space between like that i also want all the links on the page to be color white for now and text decoration uh none good good good good good now the pre-nav should have a font size of two rams make it big and the pre-nav i guess we can do the logo should have the colors color this and font weight bold okay yeah right all bolt good what does the display flex do on the pre-nav it will display this as a flex and we can just space between to push this on the left and this on the right maybe too much one five all right get now the next one nav now this will do them both so what i want i mean we just want the ul here to style so i guess we can have ul at least i'll type none play style type none of adding zero i wanted to nav l i a background color white oh no no no i'm going to color this color i'm going to color this the color white it already has all right the nav a of active blueberry and color white and this will be the this one will be the color okay and the nav a dot highlight will be background color this and this color okay they all should have a bit of a padding it will be a bit tricky here but we'll see okay good uh this should be display flex and yeah you can see the buttons are good but we need them to be stretched so [Music] i can do l nav b flex 1 like that and this should be display block text align center something like this although the width here looks a bit oh what's the way oh it's a 1000 pixels i mean close close enough let's do nav a power i saw a trick today because i forgot something with blur or i forgot when we hover i guess we can do opacity 0.9 just soft it's very soft though okay good it's just a soft something all right okay that looks good i kind of want that to be on tweet bold like that right and more ram oh maybe in the container do two ram one ram uh wait now this is only there so need our own navs the padding much good now let's tell this and center it and we should be done so content now you need to be flex one take all the space you can and you'll be display flex on your own this which is what we could have done ah i missed it last time and i want i'll justify content center uh flex dejection column item center oh wait wait wait wait this flex one background color purple just for test why is it not flex one is content nav never container okay so the container a header is good so the container needs to be here display blacks flags action okay and height one hundred percent doesn't have room to stretch yep minimum height okay um oh you know what i'm over complicating this not that not that not that let's leave it like this and i'm just going to do here margin top 2 ram 3 ram maybe like that yeah you see it's not exactly in the center so we just need uh more space there ira all right that's gone we don't need this now okay good content h1 background color the blacker thing here on the size three ram oh too much to ram like that background color that color white display nine block adding one ram font uh weight 400 okay even lighter 200. all right thank you very much for subscribing as it thank you thank you very much and thank you for all the follows you're crazy all right let's continue and i want the content a's to be display and this is or not no no no i i got it i found i'm going to do display flex flex direction column so now they will be on top of each other and uh line items flex and goes there we want flex start like that and now we can style our links and should be done white link tl link weird names for classes but i don't have much okay book a table this is background color white and color the other teal color this one and let's do padding one rim and the other one is this same but reversed this is color this is background color and padding all right and we can do margin top ramp to this one okay so this is something like this uh yeah e that's a bit better we have a logo yeah let's make it font size to ram and five and the pre-nav display flags the second align center now they're centered there good uh let's see how it is responsive not the best right uh how we're going to fix this india screen and max width 700 oh i'll be 7 68 will be best okay i want the pre nav to be flag session column and justify content center we nav pre-nav this one flex direction [Music] card oh screen okay perfect now the nav i have the nav the nav what should i do for other than that i'd also like to have the background position center center we can see a bit of a food there uh this could be a bit smaller so the content font size 1.5 ram okay and this how should it look that is the nav [Music] li if we do inline block here don't work uh i think i know let's do this lex wrap wrap and whenever we go like that it doesn't look the best though okay at least we know that it will wrap on the second row when there isn't space but all right we have center let's see extra prep display flex [Music] okay flex one why they're not stretching them i um i'd like them to be the same height always i'm missing something definite this oh yeah oh they won't have a second row next one in idea chat why is this same height it says flex one this space here let's figure it out i could do nav ul flex direction column but it will show like this at the best i got so far okay yeah i i guess this is good or yeah i don't know why the height there was not stretching i think has to do with this okay don't ask me what i did because definitely this looks better right okay good i'm happy i'm very happy with this result all right good yeah let's take a water break we are almost 50 minutes in excel verb mail [Music] okay good let's go to the next design where's my scroll bar here all right this is the design with the carousel fun stuff yeah this will be more javascript heavy okay i don't need this good uh copy this paste and rename this to of woodware footwear design right that was the name show shoe design okay uh let's think we again have some kind of a navbar here but as you can see these design stretches of the whole page which is uh interesting so i don't have some kind of container anymore although yeah i guess we can do this as being centered this will be the slider which goes full width and yeah something like that okay that should be good and this will be just positioned and on mobile they should still be good okay so we're going to have a hamburger let's have a button hamburger which has an ifas fa hamburger i think we're going to have another button with a class of phone which actually this will be a a tag and this will be fasfa phone fa phone yeah i tag okay good let me open this all right so we have the phone and the oh we have a hamburger actual hamburger uh found awesome let's see what's the burger menu here i think i keep forgetting burr menu bars buyers busbars bars like that okay i don't know if we're going to have some kind of a menu hit them by these bars but oh yeah now let's do the cat oh like this will be position fixed we're going to have some kind of a logo fasfa shoe print sure prints and here we're going to have an h2 shoe r us and a paragraph find the right fit for you okay underneath this we're going to have the container uh the container which will be cursor a carousel now for each um we're going to have a slide and the slide will have this image you type show show thank you we'll have the image this h one or this big text and a button or a link whatever so image which we need to find get the images it will have as i said the h1 performance and it will have a tag learn more get now also the carousel will have the links which we click to move to the left and right well let's make them buttons are going to need the left plus button right like that button left will have i fa left i think fas fa if ron left and this one maybe i fas fa chevron right i'm right or not hey look at that i am good and here we're going to have like a progress kind of thing which will be interesting to do because it needs to be dependent on how many slides we have [Music] yeah let's call it progress and we're going to add dynamically inside the bubbles depending on how many slides we have this will be javascript project oriented stuff all right i'm going to go to unsplash here we're going to have a folder with uh images and i'm going to have right shoe here we need this one footwear images shoe one thank you revolt for this image we're going to have this one thank you tren and a trend and studio for this one uh let's have this one thank you imani bahati for this one and the last one is this will be tricky because we need you can see this has a full background of red it says white let's find another pair yeah that's it thank you ian babies okay good so we have me have four shoes although i'd like another color yeah let's use this thank you and as for four okay and now we have two [Music] rage um it will be hard to get the background color right but oh well now this will be images slash one shoe one and let's copy paste this slide this will be shoe or this will be a design y4 it will be 3 this will be commodity is it the thing for shoes what's another thing for shoes this will be uh lightness don't quote me on that alright so we have look at that big images good now let's style our nice website css okay color whoops anyone know i guess this right [Music] now the idea is following i'm going to have this will be carousel but the background color will be the color of the image background somehow and we're also going to change this whenever we change the slide right so yeah let's do by default background color this uh no that's not the background color probably just red ah finally this one good uh what else we need we need to style those buttons okay hamburger and phone let's make this a link to no ref okay uh all the links list i'll tie uh execration none and color white okay good now this should be position fixed top one ram left one ram font size so big okay now this one position fixed top one ram uh right one ram font size uh two ram kind of the same but yeah that's there and this is here all right now we have the logo which should be margin zero i guess to ram auto go to this and there it doesn't want to why is that body logo class [Music] okay you know what then text line center okay uh color white what else we want so color white big font font size to rem [Music] we have inside an h2 in the paragraph logo h2 um logo paragraph h2 margin zero paragraph margin zero like that i want this to have a margin to ram okay h2 font weight normal you are us good the logo needs to be a bit better maybe this 1.5 and the logo i on size 3 ram a good and the paragraph should be black the paragraph color this and old okay pretty pretty dude uh let me do this two ram to ram two ram two ram to ram trim trim because this has two them also so they will be this they will be on the same line here uh good right right right maybe a bit bigger there okay not too shabby now let's fix the carousel um carousel and then slide and then a slide image max with how much should the image have let's see 300 400 kind of footwear thank you for the follow stranzi benzie little uh so let's make it 400 pixels by 400 pixels like that okay so this is the contain the carousel and this will be the slide so the slide will be centered and whenever we click on this it will move the entire slide to the left or well to the right and we'll bring in the next one right then the slide should have a weight let's do 400 pixels and height 400 pixels and this then will be 100 and i want object fit cover uh wait because i have the image which should be height less than the total height of the slide so no height for you just do it and height 400 pixels here okay now the slide should be position absolute [Music] yeah no no something's wrong we need actually this to be 100 so this will be the slide because that way we can control the left positioning yeah and let's do item width to be 400 pixels here like that position absolute perfect we want text align center perfect i we could do something else even better so i'm just getting ideas of the fly and we have the carousel container but then the curved cell will be this parent and the carousel will be display flex the slides will be uh 100 viewport weight like that i don't know and the carousel container will be width 100 width and it will have overflow hidden display flex and not position absolutely no no like that good uh although the car sounds wrong okay wait 100 per weight oh [Music] oh so we have one parent and the thing inside it should be bigger so that it can move oh absolute left zero top zero transform translate zero and this will we're going to move this external bye okay background color purple good now we can see all the purples perfect and we can target this air cell and we can move the transform translate uh on the x-axis good right should be good now good to go powerful hidden all right and now this is centered and whenever we're going to press this we're going to change them and move in the place thank you mr wolf okay good uh i also want the carousel container to have just a bit of margin top forum that's quite a bit terror okay good uh there is some scrolling here left which i don't like but and we need to fix that all right let me do the styling for these slide image slide h1 font size forum good uh color now white will be interesting because the other images are not white but margin top minus two ram i want them on top of the image okay and slide a or what do we have here but yeah background color some kind of dark ish color here adding one ram to ram a color oh it's already white so we don't need this okay font size maybe a bit more one five ram okay now uh the left let's have a class of left arrow and here a class of right arrow so left arrow right arrow ah let's also add a class of arrow so we can do something like arrow which could have we could do here too so we don't um have wk code background color transparent that position absolute top 50 okay font size 3 ram color white not quite white but not quite a black weight opacity 0.5 all right i want it to be in the center so transform oh wait wait trans form translate y minus 50 percent okay and i want this to go inside it there's so contained which is relative let it go oh oh oh oh no i want it to go inside the container here and then a carousel there and the castle okay now it's there awesome and i don't want border border zero good and now this should be left zero and this should be well not zero or right ram it should be around left to right all right look at that uh yeah almost right but not quite okay uh we're now dependent on this carousel which is very long but yeah we need to be dependent on this one so let me put it back up [Music] but now they're there because we have a height on the carousel container too big okay that sounds about right 40. that's off the button there okay i guess we cannot do top 100 to 50 to 30 and then we fix that issue okay cursor pointer awesome awesome awesome and maybe bigger yeah look at that what do you think chat how does this look now all we need to do is to add the javascript and yeah those is here which might be interesting all right let's do it we want slides with the document query selector all slide okay and now uh i'm going to need a slides slides count this slides that length i'm going to need to create those four buttons uh also we needed a slide uh no no we're going to calculate this another time we needed two buttons left document get element by id left and here right right right and left add event listener click and down and right add event listener click like that i have sound effects good now we need to keep count of uh with a lot of current slide which is zero oh not left left okay and uh what we need to do is when when we click the left arrow we want the slide to go to the well the image to go to the left so he also needs the slide the container oh wait uh carousel this one post carousel document and get all my id carousel okay and what they want is when i click left then the current slide should increase so current slide plus plus if current slide is uh greater than slides count minus one so if we reach the end then we want current slide to be zero okay and we want on this side we want to do when we press the right one we want to go to the right so minus and here we want when it's less than zero we want to go the slides count minus one and we want to update carousel a function function update carousel this will basically take the current slide and it will so on the carousel our cell we want to style transform translate x-axis to be current slide times one slide wait so slide slides of zero that inner no know how do we get let me do quickly here's something oh i forgot how can't read [Music] 10 left left left okay well c wise all right uh i want to see do i have the slides nodes list zero okay why is that slides oh okay okay we need the fur here i forgot here in the base project we need defer otherwise the javascript will load faster and we won't have access to what we good you see the error disappeared now so we should do slides and we should see four okay slides of zero that i want it's weight how do i get a width must be a property so offset weight and the weight also works yeah it doesn't see offset yeah up let's try that so the width doesn't work we need to get started but there's a complicated things offset uh width and plus pixel so if you are on the first slide it should be zero current slide zero times the slide width which is one thousand or so so the translate will be zero but when we are the first light the translates should be minus so we go to the left it's minus and move to the left okay something like this hopefully drum rolls we can see if it works or not let's see yeah it does awesome just we just don't have the transition i forgot about that [Applause] so the carousel we want here transition the transform property 0.4 seconds is in out like that so now look at that pretty pretty cool works on the left side and it works right side uh now there's a trick we need to update the background color depending on this image and the way we can either store the background color in json or we can store it here in the slide on the data bg kind of property the first one is this the second one will be let's see oops something's wrong oh no no it's good or not yeah i think it's good uh we set the background as per image background is possible yes now this background image what is it like white the next one another white might be wrong and the next one will be this i don't have a color picker version do i do i need a color picker color picker chrome tension all right where is it arrows are working reverses ah chad did it foreign i'm not sure what to check on the puzzle icon nothing here tensions our picker let me [Music] store this and restart the browser and chat says that this is reversed i i that we can change so when you go to the left don't you want to see it yeah probably no all right we can just change this here and this here and that's all now yeah okay the puzzle okay yeah thank you all right on this color this color for the second image i want this color for the third image whoops okay and one is color or the fourth image come on why did you gave me rgb all right and now we have the databg property attribute and what we can do is to say uh document.body.style that background will be slides of current slide that get attribute that fingers crossed yeah perfect what's wrong well let's see do we have what we need here missing something okay oh you also need yeah the hex thank you that's correct so we need the hex and then this look at that pretty nice although yeah it won't be perfect and what we can do is to have a transition also on the background here transition the same same time but instead of transferring it will be background all right i mean yeah these are not perfect backgrounds for the images so it won't be perfect but yeah and this text won't be very visible oh well i tried [Music] let's see the the paragraph here i want it to be an f1 f1f so darker black and again this one on f1 all right it's good enough as we don't have so the images will be great if these were only png you know or something like a full background red how this although you can see here in the corner you can see the difference between background color and they still have some kind of gradient but i mean it's good ish let's see it is it responsive enough oh look at that almost responsive perfectly so i won't worry about that anymore and we have a hamburger button but doesn't have a menu because well i don't have a menu here so all right good uh yeah i'm going to take a break but that that break and i'll continue then for days uh yeah chat if you have any questions let me know i'll just take a short break and i'll be back okay in the meantime i don't know wait i think i can use this [Applause] [Music] do do [Music] do [Music] [Applause] [Music] i'm back hello back uh yeah uh one hour and 30 minutes this go a bit slower than i thought i think i'm over complicating things right is it isn't it all right let's go on the next one fashion style fashion design base project rename fashion design okay good i close those let's see we need this image let me get it and put it in websites fashion this will be image run probably let's create a folder yes when we have multiple images image one and this will be image two okay good uh what's this about thank you very much for subscribing bjdshs sorry let's pronounce your name thank you very much for subscribing i really appreciate it uh okay now as you can see this design has some borders on the margin and other than that is not that complicated so maybe we can do it faster let's see we have some kind of a container again everything goes inside i'm going to have that icon up there logo fa f a t-shirt f a wait f a s f a t shirt right underneath that we're going to have h1 saying fashion style [Music] italic as a link that's weird you might need another div here put this and then here we're going to have a link visit us okay underneath this we're going to have a row with two columns column left column right column times two the first one has an h2 our new cloning line as a paragraph u2020 designs today and it has an image and these images you can see they have something special i need to figure that out uh images images slash image this is image two image two and this one has image images slash image one like that and this will have another link say shop now or delete minecraft okay yeah that should be it for the html we just play with the css and we should be good now the body has this border which is 32 pixels wide order left 32 let's make it 30 pixels solid color all right we also going to have border right all right and we're going to have a background color of again i found it somehow this uh thank you for the support top 5 am 3 r and titanium and vgi adhs thank you very much okay let's open this and there we go container which will have a width 100 1000 pixels margin zero auto max weight 100 percent and let's have a padding ram like that something like that comic severe javier okay container something soft maybe not margin zero auto auto [Music] i mean height 100 report heights we have the borders here and the container doesn't oh we have what is in the style line container point container awesome uh why can't you use body bg as a background color half padding left button right for the continuity side uh because how much would you have padding right and padding left this way you have the container be fixed with and margin it to be auto always and you can see that it always stays nicely in the center you know but good question okay now oh let's style everything we have the logo [Music] whoa thank you very much for the donation thank you thank you very much uh ali mayu thank you very much for the donation that's crazy i appreciate it uh flurry loves you okay i get so the logo font size forum and i want the color to be this color like that oh base again i need fashion that thank you you're great uh and h1 also font size for um the same colors feels like yeah um it has margin too much margin i do margin zero a little bit too well i guess it will be good now uh we only have two links on the page so is it safe to say that we're going to do the both the same although if you have multiple links we might have a class specific class okay so let's see background color will be this and the color will be white text decoration none okay we want padding one ram to ram like that and uh we once make it skew transforms q uh minus 20 degrees or something yeah uh i guess this needs to stainless block yeah something like that the text inside doesn't look interesting too much so maybe we can do something else a little bit trick after i'll keep the skew here the background color here so basically we're going to create another content which will be behind this text and it will have this skewish effect position absolute left zero top zero uh weight 100 percent height 100 and this will be position position relative so now we have the same skew but if we do z index minus one the text will be okay i'm happy to hear that you like the cars uh good now what we need is to put it inside here so i guess we can put it inside of each one here how will it look although i like it better this way uh let's do it even more i i go off the track here with the design uh think think think think think it's pretty effects just back on the space between like that and align the center like that and what they can do is the h1a could be transform scale 0.6 so it i'll shrink it a bit okay so now it's although i like this better are these for clients or coding for fun this is a challenge we have these 10 designs i'm going to do today in this stream or done almost three weeks to go all right so yeah oh i see there's another color for this right yeah different than this color all right let me get that i'm gonna get that okay now they're better uh another subscriber thank you very much albert lucta alberto oh boy let's open how hard to pronounce sometimes your usernames okay next up let's have that row we have a row which will display flex and we have a column which will be flex one available the same width and height okay and what we have inside let's just make this a text class put this inside and make it big so text font size dram ooh too big okay uh they also need i think all the text is like italic right yeah except for the icon so what i can do is say font style italic everywhere good uh oh and icon is not changed awesome good so that works you 2010 designs that paragraph inside the text text paragraph is font weight uh 100 they don't have 100 but we'll pick up 200 i guess yeah okay next step let's see i don't need more room for this so all the images on the page let's have margin to ram zero three round zero and what i want is image i want to add this it's kind of a shadow oh box shadow what's the weight so i'll assume it's like half of this 15 pixels 15 pixels and the color is this color like that um please don't change the design okay uh good so that's that and we have the shadow yeah the design is done by adrian a friend of mine who also will have a youtube video okay and now this should be big so what i can do is have this as a class of block and i'll have this block to be a display block like that text online center font size for ram make it big why is that enter a text block sorry i guess we can add some padding to ram here all right oh no we just need on the right here left here okay you know how can do it we can do column first child uh padding or well margin right or ram okay so it has some margin between okay and let's have some margin on top there or padding rather yeah is this another 10 hour stream hopefully not better through phil yeah this is the design kind of so yeah all right and let's fix the responsiveness extraction for flex wrap crap like that uh textile uh no no alignment center justification and i want this media screen and max weight 768 pixels i want this to be zero on mobile okay great and columns text align center okay good i mean not the best design but oh well let's add an h1 also flex wrap rap it will go on the second row and h1 here text align center also right this is in a block okay good kind of okay because this image is a bit large oh well this is how it look yeah this one has a different box shadow we can do a class of shadow reverse and the image with the class of shadow reverse will have a box shadow of minus like that so now oh there i messed the class this should have the class all right yeah let's have on the big block here a bit of margin top just to i don't know make it look better a bit oh and text align center not on the columns there but here right so our mobile looks like this and a desktop like this [Music] oh well let's move on to the next one which should be here okay i think that visitors button text is very big i it is a bit hit in five oh this one uh okay then this i can scale it more yeah [Music] uh okay sorry sorry sorry i got the message good let's go to the fourth fifth one hey we're almost halfway there crazy designs right how do you like the challenge so far i think we are almost two hours in favor romanian dish okay this one is all fifth one tourism this one two raised tourism design okay tourism now let's see for this one again we have a background image and we have this sidebar and some text so this should really not be hard but that's what i said multiple uh occasions so bg and we go reason save another two hours will be done i don't know i'll have to see choose better funds okay next time i'll choose better fonts good good good good and thinking what we need uh let me close these index yes okay some projects don't need javascript though so yeah he's doing homework i think no it's not homework it's a challenge and projects in 10 something 10 projects just just 10 project no time frame this time good fashion design so we have the background color the background image and here we can have some kind of let's see some kind of side one and the rest part will be for the content so a side plus main okay and the site [Music] very interesting side we have two buttons there and then a url with two links [Music] yeah link.class special this will have explore and then we're going to have another class of special and this will see learn more and between them we're going to have a ul ally times seven and links first one will be home economy places uh videos locations about book and photos like that and in the main we're going to have this should be pretty straightforward an icon which is city fa let's have logo i fasfa city like that and underneath we're going to have an h1 visit new york and [Music] h3 express yourself and explore all right now let me open this we need it oh i have the image right and we're going to have the image on the body so background background image uh bg.png like that background size cover and background position now this is tricky background position center center okay i mean height 100 height oh look at that resting right right right now the body will be displayed flex that way the side bar should go on the left side right yeah the sides should go on the left the side will have a height of 100 viewport heights oh well also the i mean the main doesn't need to have a fixed height okay display flex what did i mess up on position behind margin okay it should have a weight of 400 pixels okay some i messed up something aside main is this image oh look at that i don't want that it doesn't get the oh wait i can add this like that and now i can export this to be the background nope something's wrong with the image it doesn't get the gradient i can i mean you kind of see no okay good yeah i get it got the gradient although it's too big no no probably not all right aside background color i want it to be black whoa so dark like that look at that it works i just didn't have it first okay aside links i want them color white as the creation none margin [Music] like that much one ram a side ul padding 0 list style type none all right perfect and i want the side to be display flex flex direction column and space uh justify content space between okay look at that good we can increase the font size or theorem big and another thing i noticed this is has another font prata do we have the font on google fonts google practice okay yeah we have i need to use this for this project instead of the robot we had so far prata yeah perfect oh okay displaying unblock so we can see the margin thank you for a love another thing i want a bit of a padding on the side let's see how much it seems a bit bigger right maybe 300 pixels with more padding and we have the aside that special class or what's the class special yeah special the special class has this color background color background color the color of black and it's display block so it's all there um text align center and padding let's add some padding too much one wrap okay something like that right oh and the rest of the text which is invisible some reason what is the main main whoops main color white okay perfect there there we go let's make this on size forum adding vram whoa i went overboard okay and main h1 margin 0 and main h2 uh color i think this color right uh h3 yeah we added again margin zero kind of okay decent right like the idea is now how we're going to do it to look on mobile that's the thing because if we go now mobile it looks like this [Music] thinking maybe a mobile and media screen and max with 768 we can do a couple of things uh the body and become body oh wait so the body can be flex direction all only reverse and now uh the side can be hide auto uh wait 100 so whenever we go down boom this goes on the bottom like that mean high tide okay oh and here we can have the main to have a height of 100 i don't know mean height of 60 viewport heights doesn't look that good uh we can hide a special display none like that and aside ul can be is it flex or something no right no play flex flex wrap wrap they go next to each other so then we have more space okay there's still one thing like where is what what's this space there let's see it's because of the main okay main is the body flux action okay i can do accession column reverse and i can do uh justify content space between okay but this looks better moba this is on desktop this is a mobile okay halfway there what is your that's crop like blending hamburger mini for a side yeah they're apples we'll do a hamburger menu probably for one project good let's go to the next oh look at this newspaper copy paste name newspaper design yes yes paper all right this is uh interesting we have three yes so let's create an images folder or this newspaper images this will be image three right this will be you uh okay uh image one ah this is image too let me change this to image one and this is me all right that's done we have the icon good right this is enough this is the logo this is the time which seems a bit weird there or not we can have and we have three columns so we can have two column [Music] and put this in the first column here or we can have this centered and this place like with position or something i think oh i have a better idea which is weird we're going to add it inside the nav and position position absolute on top of the nav although then when we uh we're going to resize the logo will go on top that might not be the best idea all right let's work on the other thing in the meantime uh i want it to have a text center class and we'll have the logo inside which will be hello fasfa newspaper like that and it will have a paragraph which will say the daily times where do you get the challenges from asks someone in the chat uh random random ideas or today today's challenge was an idea from adrian you can find the link in the description for his video all right okay that's the logo and then we're going to need a nav is this one but it should be inside of a container so it will keep it the center nav ul ally time fix home business technology mining tv and comedy mining and okay and underneath we're going to have an let's have a main with a class of container and this has a row and has column times three three with uh this is a headline paragraph lorem 30 and another paragraph lorem 20 uh image images slash that image one and paragraph lorem 10 like that for the first column the second column h3 this is a headline lorem 30 image images slash h2 image2 25. okay thank you for the follows all right and the last one h3 recent photo image images slash image three image 3 that and lorem 17 because oh because we need to edit inside of paragraph good that's the entire html we want now we need to style it and that's done wait we have this [Music] such a weird place because when we resize where it will go you know what i'll break design and i'll put it underneath here saturday or 12th 9 20. okay i'll have the this will be here like that easier to code it don't tell anyone all right now uh there are a couple of things we need a container 1000 pixels width max weight 100 padding one ram margin auto like that everything should be pretty much centered uh x center text line center like that oh so the logo i messed up the logo fas finish letter good let me add inside of this this go here and we can drop the paragraph the if goodie okay this is a general style general style of logo on weight old logo i margin right one like that good it's even bigger font size vram okay display flex line center okay yeah now the text center time time oh wait wait wait wait wait the logo now has some merge because it's a paragraph okay actually we want margin top something like that and even bottoms here firearm all right that looks good and the time uh font weight bolt too much how is the html changes showing instantly in the browser i have an extension in vs code which is live server and whenever i save it will refresh the browser all right now the nav uh we want the nav to have these borders we color border top how much is 2 pixels solid this color and has border bottom okay then f ul uh padding zero list i'll type none like that and it will be display flex and at the center just for content uh just because the spaces around space if only oh there's another thing let's see okay look at that pretty nice uh and have a what's the style here background color oh color black and text decoration yeah let's have a margin one ram on top and bottom awesome and the row display flex and the column of weight 33 33 percent like that with a padding of one ram okay and images max weight 100 all right look at that not too shabby although we can work on let's call it main paragraph so the paragraphs in the main i want them to have a line height like longer like [Laughter] you know what you mean like that and let's have ladder spacing one pix like that oh look this is not in the paragraph gotcha because you're not styled that's awesome okay and what we want is the columns to have a border right this kind of thing came to pixels as this one so border right i don't want them on all only if it's not the last child okay so yeah this was interesting let's make them 32 to 30 percent or i think if we do flex one is the same thing right yeah uh can you explain the max with 100 on images which is a parent container i don't want the the parent container of the image is the column and i don't want the image to go berserk and have its own life usually images will just be slapped there and it will take up the space it needs they want to contain it you can do max or wait 100 to force it i usually do max with like that another thing i noticed uh this header has a margin there so where is it where is it main h3 no questions a stupid question correct no questions just a big question uh margin top zero and apparently we still oh oh i see the padding they're padding okay no padding top and bottom ah you know what i like the padding there awesome now uh the fun part is to make it responsive at least on mobile oh i like the menu mobile on mobile i'll make this be lex wrap wrap so whenever it needs space it will wrap but it doesn't so it doesn't doesn't need so it doesn't do and what i'll do on mobile media screen and max max weight 768 because we used it all over i want the column to [Music] be with 100 percent all right a row to be what happens if i have row of flex trap wrap it will wrap once not as much as i want so i'll do flex direction column like that and the border none all orders zero i guess border right to be specific why not okay it's very specific here so i'll be very specific here awesome yeah so uh mobile view pretty good although probably this menu will jump around the mobile but it's very fluid awesome six one done let's move on to the next one this look at that has an interesting layout which i don't know i don't know how much i like the layout base project rename uh legal design add on the script yes legal [Music] it is a weird [Music] because it aligns very nicely now but to do this programmatically it's going to be a bit harder let's get the image first with a guy illegal see men i guess i can do this you can see that there will wait here and put the image on top now have a left side on the right side with no margin just a bit on the right here up yeah probably that's the way i have main plus the side and the side will have the image uh yes i know top 5 a.m are i just uh i said in the beginning i didn't want to do that i'll just put a clock on the left on the previous design uh i won't put on the left i'll put underneath okay thank you for the follow s-r-s-a-j-j-a-d good he is great i don't know grid [Laughter] uh that's the part i don't know grid that well i don't want to learn it now but probably this will be a a good job for grid right because it's exactly what you need a row here a column here which goes above the rows and then three stuff here but i'll solve it without it what the side tag it's just a tag random tag you usually do for a side stuff sidebar you have a lot of time remaining yeah i don't have a time for this challenge so yeah i'd have time but i still don't want to spend all the time okay let's uh work on something i'm going to have this kind of boxes which will how should we call it um i have no idea box i just call it the box and this boxer will have an icon on the left on the right left or on the right and inside we'll have the text and browse so a div here with logo yeah last logo and this has this icon which is balance scale right ifs fa balance scale right right and on the right it has h1 legal legal and an h2 all your legal advice [Music] yeah that's one box this will be dark box okay and other boxes box will be light box or i guess just box this will be the default okay another div here with the h let's make this h3 and then this will be h2 a family law a paragraph out with issues and this boxes seems to be like links right you could click on them let's make them link this is not linked one two three oh wait wait and we have another one here it is the icon i f a s f h chevron right okay which emit plugin are you using uh the default which is mbs code fingers crossed awesome uh good good good good side main yeah let's see how this looks yeah perfect uh oh forgot we need three uh two more this will be i p law output tech technology and this will be contact out with paperwork like that good oh this one and this one oh not the newsletter uh legal this one and this one yeah i don't need script here now uh what we want the background color of black and who dark uh color of white i want the a to be color of white take the creation none like that now i want the body zero margin but i want padding to be on top oram uh forum oram zero it has four four four zero like that now d should be display flex because they're next to each other good and let's do this the main should be width 60 and the side should be wet 40 percent okay and we have the padding we need more i guess i could do 6 ram and then padding left zero this way it's easier to change contract law i think the contact law should be contract huh attacked contract oh thank you i think i'll okay [Music] now let's tell our boxes we want the box to be default to this color background color and i want the box dark to be background color this right we're almost right the box start box up dart box and this should be a block all right perfect now oh i could push this down let's style them in first inside so the logo i wanted to have background color of white border radius almost almost 50 percent so 35 i mean oh no no uh 35 pixels yay boxes should be display blacks should have a padding no uh an item center just for content center a now logo should have flex one no too much why the color change only we display block because this plane inline which is the link by default doesn't have a height i mean it doesn't take up space it doesn't show us black okay thank you for helping in the chat dark box i want marching bottom to ram i want logo this logo let's see what 50 pixels height 50 pixels okay display inline legs uh center and i want the color to be black apparently okay uh and well i want it bigger so font sized yeah and well this bigger 100 too big no right oh i mean close eight awesome and uh dark box on the logo to have a bit of margin the right margin right one ram okay okay now legal legal which is h1 vram very big h3 should be font size five ram okay i don't want margin on them little next to each other and i'll have the box to have some padding like that yeah all your legal device should be on the h3 here that's one now the next one is h2 well let me oops all right h2 should also be big font size 2 ram font weight normal right margin 0 also the paragraph origin zero okay and they have these have some kind of weight in the same line here so let's see uh we can have here and here and here class of text this class of text can have a fixed tweet okay and uh arrow i guess i'll just target this all right usually don't do that but oh well okay and the bar these boxes needs to have some in so i guess let's see dartbox has a margin bottom 2px 2 pixels i can have on all the boxes a margin bottom of 1.5 ram of pixels like that but not the last one because what i want to do i do margin but auto it will push them if the main is display flag flex direction column look at that perfect and the boxes will have margin bottom 1.5 but not the last one not last type and now they're kind of aligned here sort of kind of now see it's not exactly like in the design because there here everything is way bigger but oh well you know what i did do i had to do um instead of playing with the padding here i'll just still align it to center just say contents and there no oh yes yes yes yes uh just i think you think i want them to have the same height same height lunch height uh the image in the side let's see can i break it weight 100 right 100 object fit cover okay as that weird board i don't like but oh well uh and i mean height 100 heights awesome it's centered although i want some margin here how do i do that because they their weight take up full pace yes let's do padding right six ram why i keep miss typing right okay something like that i can't share the sigma link sorry my friend gave it to me and yeah i can't tell him all right uh how does it look on mobile not too shabby i guess if a mobile i'll do get rid of the padding media screen and max weight 768 pixels body adding right zero exhibition column main height auto [Music] oh and wait 100 yeah look at that mobile looks like this this is desktop this is not too shabby good let's go next one we have three more left right mobile looks better than desktop right uh one second false alarm i got the phone call but apparently it was a false alarm i think just give me a second to check and this html is easy yeah i mean it's not hard but really depends on uh on the layout you know give me a second i need to check to see if everything's all right one second later back okay can we see zen again i think those left nav are not exactly in the bottom they are i mean if i would make this mid uh look this is how the design looks but we have more height so thank you for the follow clone stream and oh boy all right miss pronounce your name all right let's go to the next one which is tv video streaming design which is this one okay copy paste rename uh streaming design streaming okay what do we need we need these images back framing new folder images and here i want image one this will be image two and this will be extra one for yes i am romanian image 3 23 can you share is the file i can't it's not my design sorry okay good html css we don't have javascript now button button layout good logo good border good layout throw good good good it's simple it's just so simple okay let's have a nav which will be inside of a container like that and here we're going to have button plus logo plus button will be view all this will be i f a s f a play plus uh h1 net stream steam stream and the button subscribe good and then we're going to have the main which will have a container which will have a row which will have column times 3 which will have wait let's just do one column and we're going to have here let's see the image the image will have the thing on the top image let's have a class of play okay because we're going to have something on top of it you'll see in images one and all 12v image one okay underneath we'll have an h2 the matrix with the paragraph green which will say take the yellow pill you get into the zone okay and underneath the button with the watch now all right and we're going to copy this column two more times this will be red this will be orange this will be three and this will be two like that and there we go with html let's open this up and style it again black as a background color interesting choice my friend very tired uh container wait 100 1000 pixels margin zero auto max weight 100 so we don't get out of the boar box like that then we have the row display flex then we have the column weight flex one and this will have flex wrap crap uh column will have padding ram uh what else we have the nav which will display flex justify content space between a line item right item center the color should be white okay the nav should be text line center and we have the buttons which are let's see background color white border zero padding 0.5 ram 2 rams all our black font size 1.3 rams something like that maybe font size too much 1.2 and font weight bold perfect now the nav also has a back border bottom of 5 pixels so border bottom 5 pixel solid white and then let's add some padding top and bottom trip ram okey-dokey the columns they don't like flex one let's do rather weight like that and the column image max weight 100 like that oh the nav has too much padding good and we have the logo right okay the logo inside the nav font size to ram and the logo i font size for ram i went overboard with oh we have an h1 there [Music] um i guess that's not the h1 but rather remove it and just be uh it needs to be on top so we either do this display block yeah yeah that looks 2.5 ram and margin bottom one okay they look to be down so on the nav justify align items uh flex end okay let's have this those special colors green red orange colors color that color and that is it me or the columns have text lesson again how long have you been doing front end seven years almost eight years oh on size in the columns marching yeah let's make everything bigger and the buttons also seem to be a bit bigger awesome uh and on the images inside the column what i want something special is after i want content uh background this is tricky i want that uh image display or i can do something else let me show you something we're going to create the arrow so width 0 height 0 and we're going to have border 30 pixels solid white uh we need to position it position absolute we want it centered so top 50 percent left 50 transform translate minus 50 minus 50 oh and this should have position relative okay border right why can't we see them and then border position i if we do 10 pixels can we see something no maybe interesting transfer position absolute top left content border we do it on a div inside [Music] what's the current plot problem out i want to create a box on top of the image but for some reason i can't see maybe image has weird things going on oh before we use the unicode content okay i can use that thank you f04b but i still so proud because it's an image something's weird we have a content we have a content we have a wait we have that let's have a background color white it doesn't appear anywhere which is weird if we had it if just a random div they will have the box all right you know what i'll do an image container dev around the images and then that way we can target these okay the uh image container okay and i'll add this image container should have this i then wait i'll add this instead and we need position relative now here and yeah we have that and someone said that content doesn't work as far as i can tell or does it i don't know i'll do the way y'all know how to do arrows i'll show you second we have border and then we do border left color transparent and border top color transparent like that and then we rotate rotate minus 45 degrees like that and we can make smaller 20 pixels good uh yeah now it's not flickable but you'll get a point it it it looks nice it's aligned oh let me change the title here this is the best fast and chill or as though slow and chill second one this one slow and chill i think he has another name too fast soon okay the outback yeah let's do that out back and this can be take the green take the red take the orange just have just a bit of diversity okay good uh it's a small one let's make the responsiveness and we'll be good so when we are on that side media screen and max width 768 pixels i want the column to be width 100 percent boom all bit uh and i want to nav a button to be displayed on now we just hide those the nav oh just click on the center okay yeah as simple as that we have these or these awesome two more left ready really really let's see yeah two more left satisfaction yeah i won't use purple i'll try to keep to stick to the design oh boy just give me a second to breathe it's been three hours already so we're close to three three to four hours i said i estimated right and didn't even i mean i i didn't hurry a lot so that's good right how is the chat how are people in the chat say hi say bye say why say my i don't have water that's a sad trombone [Laughter] okay take water it's outside i'm too lazy to go flurry loves you thank you for the love i sent some love too okay good the ninth project which is called technology i.t design and it looks like this okay rename technology design we don't need script and this will be technology all right i'm going to need images get them technology images this will be banner okay this will be image one will be h2 this will be image three thank you for following zero x-a-r-e-r such a long name okay now we have a nav but that's an interesting nav there kind of a nav with double things because we have the logo which goes on the two rows but then this goes separately so let's have a logo which has um i tag fasfa up medical like that the right um [Music] and for grade i don't know grade don't ask for grid [Music] on the right we have two rows yeah let's use row why not and we have column column is a bit key no no no column uh paragraph big times two this will be id support today and the next one will be 0 8 200 4 000 and another row which will be the blue paragraph blue 24 7 i t support all day every day it's interesting and a uli times or a home serve this is about us contact and this one has a class of active good now under this we have a header which has nothing just a banner huge band yeah i'll do it with a background image and underneath we're going to have a container oh we need a container here too or the nav because it's inside [Music] inside this kind of base a row column times three and well let me do just two ones uh image images slash image one each one uh h2 maintenance paragraph lorem 20 and i'll do this two more times this will be image two this will be image three this will be software this will be hardware and let's change the text also this will be lorem [Music] [Music] and underneath this a row container sure i'm thinking we need her kind of a row but not a row because that's this i thinking yes the button inside a div with a class of centered text center uh button this let's open this and there we go it looks awesome now container the same drill max weight 100 percent margin their auto random now i want to do the header background image images slash banner background size cover and i want to have it uh let's have a height on it i don't know 300 pixels yeah perfect background position center center okay now the nav we have the logo one size three ram make it big then how did i do it so the nav the logo row row row oh that's a thing another div for this rose because this is on the left and this is on the right and then have their own thing so now display flex like that [Music] i'm going to have the row display flex next uh just effect on the space between like that and the row should be weight to 100 it is 100 what i'm doing [Music] oh something's not good display flex [Music] flex one no fire not full height f logo okay this one if [Music] let's give it a class of inner nav and this inner nav should be flags one more perfect too perfect uh now big we have a big class which is on size 3 ram probably very big good nav lantern center okay dead i i don't know i have to look at that i have a blue class which is the text which is blue what i need the blue color color blue okay and i think it's bold yeah onto it bold okey-dokey now we have inside the nav we have a ul which has padding uh list i'll type none margin zero okay and i have these big funds check margin okay getting closer and ul display flex all right uh it's blue also margin zero oh look at that hello hello nine thousand cuts and hello cassieri benny welcome to the stream okay logo margin right one ram okay probably this big tax is too big with three are good now uh nav a uh color black tag execration none margin zero one ram okay i want the nav to have some kind of margin margin to ram zero one ram or maybe three with two no okay oh let's do this margin left the ram because i don't want that there okay and they should be font way bold and the nav a active should be color 007 ff4 all right [Music] right oh and the big text apparently is bold too so everything in the app is bold yeah so let's remove this and this and this oops and just say the nav you are a bold nav we need to solve this and uh yeah pretty cool i have weird noises sorry i'm tired uh the column let's just have some padding like that and h2 should be text align center like that and font weight font size to ram bigger and the column images weight 100 percent ooh [Music] interesting the column should have flex one the same width all right and now the button with the text center should be background color 007 ff4 color white adding 2 ram 3 ram font size 1.35 kind of order order none big very big too big all right uh time to go to sleep 1am follow you tomorrow thank you for joining and thank you for us subscribing uh good i think that's it x regular auto yeah let's have the header have some margin on its own or at least margin bottom okay okay pretty much pretty much these are buttons although it might be good to have them links but this button may be linked but it looks good so why not awesome let's see how it looks on responsiveness that's bad i have an idea how to fix some part of responsiveness hidden mobile i'll add this to a couple of things we don't want to mobile and here we can say media screen and max suite pixels uh hidden mobile be display none explain none all right that solved it there at least now the column of the row could be plugin column perfect oh yeah oh it's not bad the icon a bit i'd like it to have and now open up something also the row should be centered hey [Music] i mean not that bad right it doesn't look aligned a lot but flex start don't forget when the direction columns is on opposite okay well paragraph big okay the logo has margin but why does oh inner now row center this is pro a big big display line block oh mobile why is not hidden because i'm because i'm showing it obviously no no hello test this test i mean the justify and the line are swapped opposite just fine oh oh thank you okay yeah much better much much much better and i think kanga logo margin left one ram r yeah much better thank you uh thank you for following a lot of follows appreciate it are you not gonna use burger menu for mobile no it's fine uh hey clink we are working on 10 designs uh it's a challenge we're doing these 10 designs to html and css and we're done with the ninth one so one more to go thank you for the love i appreciate it um yeah this one this is the last one so the last one is a portfolio cleaning portfolio [Music] where did you get the designs from my friend adrian did all designs in a challenge he did 10 designs in one hour and i took the challenge and i'm doing the uh what well the websites the code html system thank you for joining the stream uh the source code will be live someday yes for those of you watching on youtube you should find it under this okay the last one portfolio design we don't script this one will be a bit um messier as you can see the text is all over the place and icons and all that so i don't know how i can do with position absolute just to mess things up as he did here it's too messy though let me get this portfolio design this will be thank you dev nick class thank you very much where is it okay let's see we're going to have the background image and the body we're going to have the text be like this oh let's just write everything out i'm adrian from australia let's see i'm florine from romania i do videos on development web development i really need you to hit the like and subscribe so i can get the video to 1 million views alright that sounds like me uh that's a paragraph this is so all over the place i mean you can't find a relationship between anything [Laughter] uh so you know what they'll do i'll clean up somehow or not i don't know let's have an h1 i'm flurry and pop [Music] let's have some ul which we'll have on h2 skill ul times li times let's see four six six allies this will be html css javascript react gs node.js uh fun.js and i want purple.js and the last one pop jazz are you trying to finish them all yes we are the last one okay and i'll have a link yeah let's have a link which will be in two parts enough phone number this will be awful uh and it will be also an email in the second row this is this will be like the best the best personal website uh hello at florianpop pop.com don't email this email is not real don't call this number it's not real uh okay and i'll also have uh skills which will be let's put it in h2 web development i'll put them in a span span okay so this is we're going to be this is going to be very messy prepare for that messiness messiness times 3.0 uh yeah let's see what we want we want the background color a background image in bg gpg i like to add codes i want background size to be cover background position to be center center and i want mean height 100 we protect and the boom well look at that [Laughter] i copied again the wrong background uh [Music] uh bg bgb this and i want bg.png awesome now let's drop them on the page somehow we have a paragraph we have an h1 we have a link we have a ul uh we have an h2 and the h2 has pens right that's all we have and everything will be dropped on the page randomly on size to ram make it big uh with 500 pixels 700 pixels and i want this position fixed top uh four ram left three ram okay uh next h1 on size 5 ram uh background color white adding 1.5 ram and font weight uh 200 boom and position fixed don't do this this is a do not uh reap class names [Laughter] top six ram left two ram and uh should be this display inline block okay i need to push it down a bit 10 ram uh 15 ram okay yeah so far so good now the a this will be position fixed i want it to top two ram and right here like there i want color black text decoration none font size swamp five wrap and text line right like that okay i have the ul which will be top 20 ram position fixed right vibram on size to ram okay yeah but what's wrong with the h side well that's weird is this responsible it's not oh i have a ul inside the ul no that's not how you do it all right good uh h2 should be underneath h1 so something like this but it will be more down like 25 ram uh whoa i have an h2 here no h3 uh and i want left anti-ram okay text align right like that and they have a span span let's see how this looks background color like this and color white okay padding do a ram ah it's interesting how that is over okay and uh let's do span last child to be margin left minus three minus one ram goes both you know what then we'll do something else we'll do transform translate uh minus one ram minus one ram okay like that good so yeah see basically it you were probably wondering why i did this but this is kind of how you can achieve something like this i mean it doesn't have any uh logic right like a layout or something so you just yes and yeah people ask this is responsive it is but look at that see so don't do that okay uh let's see a prom please uh wait a bit i'm in a video now once we finish i'll look at the portfolio okay we're in the challenge now i can't look now okay yeah and the h2 i also want font size 1.5 ram yeah oh and this one has another color so the paragraph now this one has let's do this color like this and the paragraph here the same color okay and h3 can be bigger here on size uh 1.5 ram oh yeah and margin 0 and ul list style non-square median circle decimal disk okay now i was thinking if we can have lines but oh okay this is the design we got this bigger yeah let's increase that 2.5 you know what we can do we can go on mobile yeah screen and max width 168 pixel to be everything i want position static doesn't work important okay good so on mobile uh and max weight 100 on mobile i'll kind of i kind of fixed it by removing this weird positioning we have i mean it's not that bad right it's definitely not something you would like in a portfolio but yeah pretty close to design here and there there are times when design oh i forgot we have this which is an icon let me edit here f a f a both right okay okay oops all right i can edit under that misclicked uh thank you yeah sorry miss clicked okay i can and i can i want it font size very big 10 ram okay maybe even bigger 20 ram and again let's do the weird stuff for positioning fixed and we want it all around the center there so top 30 ram and right anti-ram yeah probably like 15 okay and we wanted uh color ffff and opacity 0.3 so this is just kind of blending in maybe more very big okay and i can move it up and left yeah so this is this now although on mobile it will be here so i i'd just explain them well why is not going away uh no it wasn't euros sorry my i was a misclick on my side so why is not this is going away mini screen max suite is playing none this is very interesting oh f okay well now that's weird can't hide my own like all right oh fas yeah the specificity probably was the wrong thing okay so we hide that or nah let's hide it let's also have body on the body some padding uh which can actually go here okay on mobile looks much better but on desktop like we have the design uh yeah it's all over the place all right this is a weird design uh i have to admit probably then run out of time or i don't know maybe this is just one thing people do it doesn't have any structure for a programmer to follow or this is a column or this is a column or this is centered or why is this outside here or i don't know okay uh yeah this is pretty much it let's open them all and check them out okay footwear legal newspaper portfolio restaurant gaming technology and tourism good so this is the first one automotive then we have fashion footwear which has a slider pretty nice and then legal newspaper portfolio which is talkies restaurant streaming technology and tourism thank you for watching this pretty long youtube video 3 hours and 40 minutes so under 4 hours if you like it give it a like subscribe if you haven't for more tutorials like this and streams check out the twitch uh check out my twitch if you want to join live next time when we're live and yeah you can find all the helpful links below you can find uh adrian's video where he designed this uh in 10 like 10 he designed these 10 designs in one hour and i'll see you in another video take care bye

Channel: Florin Pop

Views: 129,538

Rating: 4.9630437 out of 5

Keywords: coding challenge, coding stream, live coding, websites, 10 websites, design to code, design, Automotive Car, Restaurant Food, Shoes Footwear, Fashion Clothes, Tourism Landscape, News Magazine, Legal Law Firm, TV Video Streaming, Technology IT, Portfolio Resume, html, css, design to html and css, javascript, css tutorial, html tutorial, coding tutorial, coding tutorial for beginners, coding live challenge, 10 websites in one go, website from scratch, coding from scratch

Id: Rz-rey4Q1bw

Length: 227min 21sec (13641 seconds)

Published: Tue Sep 15 2020