Frontend Components you should know

#beginners #tutorial #webdev #codenewbie

Hello Everyone today I will share with you some common website components that are used in almost every modern website.
I won't teach you how to create those components individually but you can learn how to create them with the codepen I will provide with each example.

Let's get Started...

Responsive Navbar (Hamburgerrrrrr)-

As the number of devices accessing the web increases, we can't rely on a navbar that doesn't fit every screen, Responsive Navbar with a dropdown effect on mobile and tablet devices is the solution for that.
A Responsive Navbar is usually fully visible on large desktop devices but is hidden on mobile and tablet devices and can be seen with some dropdown effect with a button click (hamburger icon).
CODEPEN Example 1 - With only HTML and CSS
CODEPEN Example 2 - With only HTML, CSS, and JavaScript
This is a very basic example of a responsive navbar.

Carousels -

Well This one you will found on many modern websites, It can be used to create an image gallery with some text, Reviews comments slider, etc.
Codepen Example

Tabs -

Well these are really helpful when you want to show multiple items at the same viewport without scrolling down.
It is mostly used to show pricing sections, different features of some sections, etc.
Codepen Example

Progress Bars -

Well these are not often used but can be helpful at places where you want to show some statistics containing numbers, it can also be created with some animation.
Codepen Example

Loaders -

This one is not hard to create but you can show some creativity here. Loaders are basically used to show that the content is being loaded, it mostly happens at slow internet connection.
Codepen Example

Cards (Animated cards or hoverable cards) -

Whether you visit an e-commerce site or news site or blogging site, everywhere you will find card components, it is basically used to show a description of an individual item like Product description which contains image, title, intro, price, buttons.
Codepen Example 1 - Flip Card
Codepen Example 2 - Hoverable Card

Accordions -

These are mostly used to show the FAQ section of a website.
Codepen Example -

Modals -

These are basically used to show some forms, ads, Prompt Messages, etc.
Codepen Example -

Form Validations -

This one needs no explanation, a well-created form will never take extra, less, or unnecessary data.
Codepen Example -

Custom Checkboxes and radio buttons -

You can create attractive checkboxes and radio buttons by using the CSS property "appearance:none", it will hide the default styling for the checkbox and radio buttons and then you can put your own styling with CSS.
Codepen Example

THANK YOU FOR CHECKING THIS POST
You can contact me on -
Instagram - https://www.instagram.com/supremacism__shubh/
LinkedIn - https://www.linkedin.com/in/shubham-tiwari-b7544b193/
Email - shubhmtiwri00@gmail.com

^^You can help me with some donation at the link below Thank you👇👇 ^^
☕ --> https://www.buymeacoffee.com/waaduheck <--

Also check these posts as well
https://dev.to/shubhamtiwari909/css-iswherehas-and-not-2afd

https://dev.to/shubhamtiwari909/theme-changer-with-html-and-css-only-4144

https://dev.to/shubhamtiwari909/swiperjs-3802

https://dev.to/shubhamtiwari909/going-deep-in-array-sort-js-2n90c