Camping Website Using HTML CSS and JavaScript
Why Build Camping Website ?
- To showcase your work to clients
- To gain experience in different design aspects
- Practice HTML CSS and JavaScript
Let's get start to built camping website
First thing first, Create folder in your desired directory like desktop with name camping website and make these folders and files inside.
- index.html ( Main file of your website )
- css/style.css ( Css file to style website )
- js/main.js ( JavaScript file for menu, slider and animation functionalities )
- images/ ( This folder to store your all webs we ite images )
Folder Structure
/camping-website │── /css │ ├── style.css │── /js │ ├── main.js │ │── /images │ ├── / logo.png │ ├── / other images │ │── index.html
Let's start with making navigation first to travel in different website pages. In left we have logo in center nav links and on right search, login and menu button which will display none in desktop mode. We will use flex box to align navbar item horizontal center.
Hero Section
In hero section first we have background image which will be align fit with position absolute. On top add hero heading. Below heading we add a button with text view products. Then we have main image of hero section which align center vertically.
Category Section
First we add color background and vectors images each side using position absolute. Then we use Swiper Js library for slider. I have added five category box with each box image and a heading.
Products Section
I added a paragraph on top of products center align. Then we have to add product container to add products boxes. Boxes are are align with display grid. Each product box have image, product name, discount cut price and buy price, Last we have a off tag and cart button to buy product.
Backpack Section
In this section its like about section with a right side main image and on left a heading, paragraph and view products button.
Products Slider
We will use existing product box as a component to showcase products as a slider using Swiper JS. Also we add next previous slider custom buttons.
Brands Section
In brand section we will add 8 brands images using grid to align them responsively.
Blog Section
We add 2 latest blog in left with blog image, category, blog title and read more icon. In container center we have feature blog post and on right add some external links.
Footer
In footer center we use flex with space between to align footer boxes. In right and left we add links. In footer center we add logo, a description and social icons.
Make Responsive
Make Responsive
If your website is not responsive it will irritate use to use in small devices. I have use media quarries to make this responsive for all devices.
Animations
In addition I have use ScrollReveal to add animation to website components which makes website more attractive for user. These animations are work with page scroll and it will work for all devices.
Watch YouTube Tutorial
Congratulations, You have perfectly working camping website to showcase yours skills. Leave comment if you face any problem to create this.
