DEV Community

Cover image for Boilerplates for websites/app building
Kritika Srivastava
Kritika Srivastava

Posted on

Boilerplates for websites/app building

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
Alt Text

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
Alt Text

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
Alt Text

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
Alt Text

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
Alt Text

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
Alt Text

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.

Happy Coding :)
You can follow me on Twitter and Github.

Discussion (0)