HTML and CSS Project – How to Build A YouTube Clone Step ...
文章推薦指數： 80 %
Our code doesn't look too beautiful after running. Well, we'll fix that with CSS. So let's add CSS to it to really create a YouTube layout. CSS ...
Search
Submityoursearchquery
Forum
Donate
OgundiranAyobami
InthistutorialwewillbuildaYouTubeclonestepbystep.You'lllearnhowtocreatelayoutsandaddcontenttothoselayouts.
IfyouhavebeenstrugglingtobuildarealwebsitewithHTML&CSS,thisisthearticleforyou.BecauseIamabouttoteachyoutodoitstepbysteptoreduceyourstruggle.
We'lldiscusshowtomakethelayoutoftheYouTubeclonewithHTMLandCSSandyou'lllearnhowtomakeatwo-columnlayout.
Justwait:Ifyou'reatotalbeginnerandyoudon'tevenunderstandthedifferencebetweenHTMLandCSS,youcancheckoutthevideobelowtolearneverythingyouneedtogetstarted...
It'simportanttobreakthingsintosmallerpiecestomakeourprojectseasiertobuild.So,wehavetobreakthisYouTubecloneintosmallerunitsthatwe'llbebuildingstepbystep.
YouTubeCloneBreakdown
IntheYouTubeclonewe'llbebuilding,thewebsitehasabout6units:
TheHeadercontainsthreesections(left,centerandright).Theleftsectioncontainsthelogoandmenu,thecentercontainsthesearchboxandanicon,andtherightcontainsnavigationicons.Theiconsarebasedonsimilarelements,whichmeansthatwedesignaniconelementandthencopy,paste,andeditittocreatetheothers.
TheMainbodycontainstwosections(sidebarandcontent).Thenavigationlinksinthesidebararealsosimilar,sotheyarejustonething.Thesamethinghappenstothevideosinthecontentsection.
So,ourYouTubeclonehasaheader,main,sidebar,content,video-card,navigationlinkandnavigationiconasthemajorunits.Thatisthebreakdownoftheunitsofthewebpagewewanttocreate.
YouTubeCloneLayout
ThefirstthingwehavetodoiscreatethelayoutstructureoftheYouTubeclonewithHTML.We'lldothatwiththebelowcode:
Inthistutorial,IassumeyouhaveanunderstandingofhowtouseHTMLmetatagsandhowtolinkaCSSfile.Ifyoudon’t,youcanlearnmoreabouttheminthevideoIaddedabove.Butyoudon’tneedtounderstandthemforwhatwearelearninginthislesson,sokeeponreading.
WehaveaheadertagtocreatetheheadersectionoftheYouTubeclone.We'lladdtheYouTubelogo,searchbox,andothernavigationiconstotheheaderlater.
Thereisalsothemainsectionthatcontainstheside-barandcontent.Theside-barwillcontainsomenavigationlinkswhilethecontentwillcontainvideos.So,thatisitforthestructurewithjustHTML.
Wait!Ourcodedoesn'tlooktoobeautifulafterrunning.Well,we'llfixthatwithCSS.Solet’saddCSStoittoreallycreateaYouTubelayout.
CSSfortheYouTubeClone
Step1:Usethe@importinCSS
@importurl('https://fonts.googleapis.com/css2?family=Roboto:wght@300;400;700&display=swap');
Let’sstartwith“importurl(‘path’)...Whatdoesitdo?WeuseittolinktotheGooglefontcalledRobotosothatwecanuseitasthefontofourwebsite.
Step2:ResetHTMLdefaultstyles
*{
margin:0;
padding:0;
box-sizing:border-box;
}
Theasterisk*isaCSSselectorthatselectsallHTMLtagsonourpage.Wesettheirmarginandpaddingto0.Wethensettheirbox-sizingtoborder-box.Whydowedothat?
Wewantwidthorheight,border,margin,andpaddingtoadduptobethetotallength.ThisiswhatImean:inCSS,ifaboxhaswidthof100pxandpaddingof10px,thewidthoftheboxwillnowbe110px
Butwedon'twantthat–wewanteverythingtobe100px.Widthshouldstillbe100pxincludingthemarginof10pxinsteadofmakingit110px.Thatiswhatbox-sizing:border-boxdoes.
Note:whenyou'reusingit,youwillstarttobetterunderstandhowitworks–butfornow,Ijustwantedtogivesomeinsightabeginnercanquicklyrelateto.
Step3:Setthefont-family
body{
font-family:'Roboto',sans-serif;
}
Weselectthebodytagandsetitsfont-familytoRobotoandusesans-serifasafall-backincaseRobotoisnotavailable.
Step4:Styletheheader
/*headersection*/
.header{
display:flex;
justify-content:space-between;
align-items:center;
height:60px;
padding:15px;
}
The.headerclassnameisusedtoselect(orconnectto)theheadersectionofourwebsitesothatwecanaddsomestylestoit.
Wesetitsdisplaypropertytoflextocreatealayoutoutofit,andthenwecaneasilydivideitintosections.Wewilldivideitintosectionslater.
Justify-content:space-betweenmeanswewantthecontentsintheheadertohavespacebetweenthemoncetherearemorethanone.
Align-items:centreisusedtomoveallthecontentsoftheheadertothecentre-leftofyourscreen.Thatiscalledverticalalignment.Wefinallysettheheightoftheheaderto60pxanditspaddingto15px.
Step5:Settheheightofthemainsection
main{
height:calc(100vh-70px);
display:flex;
background-color:#f9f9f9;
}
Wesettheheightofthemainsectiontocalc(100vh-70px)...Whatdoesitmean?Vstandsforaviewport,whichisthevisiblepartofawindow’sscreenwithoutscrolling.“height”meansverticallength,andwecanalsouse“w”whichmeanswidth-horizontallength.
Inshort,100vhmeansthetotalheightthatisvisibleinabrowserwithoutscrolling.Andweusecalc(100vh-70px)torunacalculationthatsubtract70pxfrom100vh.
Wesetitsdisplaypropertytoflextocreatealayoutoutofit.Finally,wesetitsbackgroundcolourto#f9f99fwhichisakindofsilverorash.
Step6:Hidethescrollbar
/*Sidebar*/
.side-bar{
height:100%;
width:17%;
background-color:white;
overflow-y:hidden;
}
Theheightofthe.side-barissetto100%ofitsparent.Thatmeansitwillhavethesameheightasitsparent.Itswidthissetto17%ofitsparentandbackgroundcoloursettowhite.
Hey!Whatisoverflow-y:hidden?WhenTwitterloads10tweetsatonce,youcan’tseeeverythingatonceandyouhavetoscroll,right?Inthiscase,wehidethescrollbar.Gracias!
Step7:Addmediaqueriesforresponsiveness
@media(max-width:768px){
.side-bar{
display:none;
}
}
Weusethismediaquerytomakeawebsiteresponsiveonmobile,tablets,anddesktop.WhentheYouTubecloneisonadevicewhosescreenislessthanorequalto768px(likemobile&tablet),thesidebarwilldisappear.Also,max-width:768pxmeansthatadevice’sscreencanbelessorequalto768px.
Alright,wehavebuiltthelayoutofourYouTubeclone.Belowistheresult…
HowtoAddContenttotheHeaderSection
Inthispart,wearegoingtodiscusshowtodivideanelementintosectionsandaddcontenttotheheadersection.
Inshort,wearedividingtheheadersectionoftheYouTubecloneintothreesections:left,center,andright.Andeachofthesectionscontainssometags.Let'sgetstarted!
Step1:Addchildrenandgrandchildrentotheheader
Here,wewillsimplyaddHTMLtagstotheheadersectionoftheYouTubeClone.We'lldojustthatwiththecodebelow:
Afterpastingthreelinks,wewanttomakethemintoseparatecategoriesbyusingthetagtocreatealinethatseparatesthemfromthenextcategory.Now,let’sstylethehrtag.
hr{
height:1px;
background-color:#e5e5e5;
border:none;
}
Then,wewilladdtheremainingcodeafterthehrtagasinbelow:
Introverts&ContentCreation|SumuduSiriwardana
延伸文章資訊
- 1An Easy CSS Trick to Make YouTube Less Distracting
YouTube is designed to keep you clicking from video to video, ... Once you've added this CSS code...
- 2Build A YouTube Clone Using HTML, CSS and JS 100 ...
Best Practice: Master your Front-End Web Developer Skills By Building A YouTube Clone Using HTML,...
- 3[CSS]響應式網站設計(RWD)如何擺平Youtube 的影片-CSS3 教學
RWD(Responsive Web Design)的設計，其中一個問題就是Youtube, Vimeo 等影片嵌入時，不會隨著網頁寬度自動縮放。雖然RWD 這個我們稱為響應式網站設計 ...
- 4How to create a YouTube video background with CSS
In this tutorial we will learn how to set a fullscreen Youtube video as a background using CSS an...
- 5HTML and CSS Project – How to Build A YouTube Clone Step ...
Our code doesn't look too beautiful after running. Well, we'll fix that with CSS. So let's add CS...
