The Journey of web development
The journey of any web developer starts when he writes his first HTML “Hello World” program. Then his first heading <h1>, and paragraph <p> tags. Then he codes his first, Of course, ugly looking😒😒, HTML Form. He then switches to CSS and started applying some basic CSS classes like background-color: Red and color: blue, which, in turn, makes our web page more ugly😉.
Pretty done with some HTML and CSS and a little exploration with W3 schools or videos elsewhere, we started looking ourself as a good level web developer and web designer. Oh, wait — web designer🤦♂️. You just started with the basic web development bro✔.
Web design is totally a different field when compared to web development. A web designer designs the website, focusing on how the UI should look, where to place the search bar, where the icons and buttons, and of course, a web designer will tell the developers as to what colour must be chosen. Whereas, web developer codes the design delivered by the designer and adds functionality to it. Now, it’s your turn to become a web designer or web developer. Choose wisely😊.
Need to make more and more Clones
I, myself, prefer react.js over angular.js or vue.js. You may prefer another.
Now, what next!!!. You are still half-way. Create more and more website clones. How does it help me to code the same thing that already been coded? Well, you know the UI right, so it’s basically like you have the UI now you just need to code it and adds suitable functionality to it where-ever needed. This way, you can practice to code what is called real-life websites. Hence learn more deeply and enjoy along with new other frameworks to explore their advantages. Like, I prefer material-UI for icons. Hence coming through all this journey you need to create at least 2 clones a week in addition to this explore other edges of web development tools.
Here I have shown the screenshot of the clone. Try to see things from my point of view. First is the header component consisting of some icons. Then there is this sidebar with different options to switch between and then the main body of YouTube consisting of recommended videos. I purposefully attached three videos remaining four with no wrong image URL and some with no URL and information. But just to get you to know how will it look like, the basic structure is there. Coming to the coding point of view, as I have cloned YouTube using React.js I think of everything as component and their collections. Starting with the header component, think how you can design the same header component as YouTube, that will at first, need some icons, so better import it from material-UI, then an input field and a logo of your account. Once done the header component will look like this.
Of course, as I said earlier, it ended up looking so ugly as compared to the actual YouTube header. Let me get you through the code once,
Not much code isn’t it?. But the question is, how to make it look pretty decent. So, there is where comes your CSS knowledge, try to give it some styles so that it can look like this.
The CSS code for the same is here.
Now you do you think about making clones with React? Well, it’s pretty easy, which seems tough at first sight. The CSS display: flex property helps you to arrange items in row and align-items: center helps you align the center of the item aligned rest is some padding, margin and border properties and you are done with good output on your localhost😉.
Now same rules apply for the sidebar and video component. Well, let’s dig through them also. The sidebar component again needs some material-UI icons better to import them at first then you will up with something like this on your browser window.
React code for the sidebar is pretty much simple but it needs something called a state which will be maintained by another component, you can call it anything, I call it the SidebarRow component.
Here sidebar component is passing icons, title and a boolean selected, to identify which row is selected. The rendering work is mainly done by SidebarRow component and sidebar component is just passing state to SidebarRow. Well after being done with Sidebar and SidebarRow. Lets do some CSS. The effect should come out to be like this.
The CSS code for the same will be something like this
Now that tough right? Well, practice makes the man perfect. So keep practicing. Now is the time for the main part of video rendering. What I have done here is have hardcoded the videos properties as the is no backend or database to manage it. Let’s dig it as well.
There will again be two components, Recommendedvideo and VideoCard, same as Sidebar and SidebarRow, Recommendedvideo held the raw state and VideoCard renders the video. What you will get after rendering will look like this.
Following will the the code for the same.
As you can see from the code, properties that are passed are image, title, channel, views, timestamp, and channelImage. These will help the VideoCard Component to render each one of the videos in the desktop. If you want to know the CSS, the code will look like
This will give the ultimate look, which is close to the actual YouTube look. You will end up getting something like.
Hurrahhh!!!!👏👏. You have done pretty much good with the clone and ended up getting good results. It may be time-consuming at first but you will enjoy it once you got the rhythm.
Seems depressing but there is a long journey ahead. Our clone lacks much functionality as of now. No video is playing, nothing can be searched. Why did I build it then? We need Router to and Redux to add those functionality to the clone which I will discuss in some other Story. Further, I will come up with new clones. Till then keep practicing and keep cloning.