Create A Responsive Cosmetics Website Design Using HTML / CSS / SASS / JavaScript – Step By Step



how to make a complete responsive cosmetics / spa / makeup website design template using html css / sass and vanilla javascript from scratch.
create a complete responsive single page cosmetics website design using html css / sass and javascript tutorial for beginners.

the main feature of this website are:
✅ responsive header section with search bar using vanilla javascript.
✅ responsive home slider with split screen vanilla javascript.
✅ responsive category section using css grid.
✅ responsive about section.
✅ responsive shop / products section with touch slider using swiper.js.
✅ responsive lightbox gallery section with touch slider using lightbox-js.
✅ responsive team section using css grid.
✅ responsive reviews / testimonial section with touch slider using swiper.js.
✅ responsive service section with css grid.
✅ responsive blogs / news / posts section with touch slider using swiper.js.
✅ responsive footer section with css grid.

* SOURCE CODES *

DOWNLOAD THE SOURCE CODE FROM GOOGLE DRIVE ( INCLUDES IMAGES ):

*How To Download*

Step 1 :- click the google drive link ☝☝☝
Step 2 :- click on download link in the google drive.
Step 3 :- extract the zip file into your desired folder.
Step 4 :- open the folder and then rename each coding files.
Step 5 :- convert each coding files example ( index.txt to index.html ) – ( style.txt to style.css ) – ( script.txt to script.js ).
Step 6 :- open the converted index.html file into your browser.
Step 7 :- open your editor and put your converted into it and then edit it as you like.

lightgallery.js official website:

lightgallery.js cdn links:

swiper.js link:

font awesome cdn link:

google fonts:

clip-path generator:

Editor : – visual studio code with Laetus: Dark Vibrant Theme
Browser : – google chrome
UI Tool : – Figma
Images / Video / SVG : –
01 –
02 –
03 –
04 –
05 –
06 –
07 –

New To My Channel Subscribe Now And See More Stuff Like This:

Timestamp:
0:00 demo
4:25 file structure
5:40 header
27:25 home
45:15 category
49:00 about
52:30 shop
1:10:12 gallery
1:15:29 team
1:23:49 arrivals
1:31:31 reviews
1:39:57 service
1:43:39 blogs
1:54:44 footer
2:07:57 final demo

#FrontEnd
#CosmeticsWebsite
#SInglePage

25 comments

  1. Great webdesign… but im having trouble with the sliders and the icons working as they should… :c

  2. Amazing!!! I really appreciate your designs, it simply awesome. Please can you also make a responsive admin dashboard?

  3. Olha, esse material disponibilizado por você, com tanta riqueza de detalhes, tem valor inestimável… acredito que nenhum de nós podemos retribuir, mas o Senhor esse sim, tem visto o que tens feito, e Ele há de ser por ti, abraços e obrigado. 🙂

  4. Sir, Could you a register and study online website

  5. can you make a website for online course selling website. With duration of the course. contents of course. a cources page using html and css. It's Very helpful for me. please help me

  6. Superb Frontend Designing Sir. really like it! 🙂 ….Please make one video on Portfolio website, Personal Blog.

  7. BRI my friend Recommended your channel for my online education project but your online education project is outstanding level please make one another online education not easy not outstanding just medium level and please also use bootstrap in our medium online education project

Leave a comment

Your email address will not be published.