Hello Dev Friends.As we are learning web development, we often get overwhelmed with so much to learn and practice.Then why don't we simplify our learning by identifying the repeated patterns in our code.So let us have a look at what are the similar components you are repeating in almost every app and still not mastering it.
1.Navbar:This is the basic component which every application will have.Then first learn how to make one basic navbar.
It will have atleast a brand logo and list of menus for navigating to different pages.Use CSS-Flexbox or CSS-Grid to align it properly.To make it responsive you can make toggle bar using JavaScript or align the items in center row-wise for smaller devices.
Here is the example of my application which you can refer to.
Example:Github Repository Link
2.Footer:This is another basic component which you can style using social media icons from FontAwesome
You can also have a fixed footer.
Example:Github Repository Link
3.Homepage with a background image:Learn to atleast make a single webpage with a full background image,some text in center and a navbar.
Example:Github Repository Link
4.Basic landing page:Whether you are building any Business website or E-commerce web app,it is incomplete without a landing page.
It will consist of a homepage describing about the product,may be featured products,services,photo gallery of different products,contact form,footer,etc.
You can include whatever you want based on what you are building.
Example:Github Repository Link
5.Products page:This is another component you will be building to display the products in grid.So you can display the items using CSS-grid and CSS-flexbox.
Example:Github Repository Link
6.Products detailed page:If you are coding in React then you can use React Router to create a product detailed page.You can fetch the data from external api or the local file.
Example:Github Repository Link
There are many more components apart from these too but let us start with these first.I always try to quote examples from what I have built instead of copy-pasting tutorial links and others' examples from internet.
Feel free to come up with your own examples and share with us.
Top comments (0)