Featured

Make Responsive Website Using HTML & CSS | Fully functional Multi Page Website Design Step by Step



Published
Let's make a complete business website using HTML and CSS only that can send an email and is fully responsive on any device. Step by step process to create a fully functional and totally responsive website using HTML and CSS.

Source code: https://github.com/aashishpanthi/hostque
Part 2: coming soon ...

In this video, we'll be creating a complete multipage website that has all the basic functionality needed for a startup or an organization. It will be a fully responsive website design and we will create 4 different website pages and we will link all pages through the navigation menu. We will learn to create Home Page, Pricing Page, Contact page, and Login page with a working contact form. And at last, we'll host it for free with a custom domain like this one: https://hostque.netlify.app/

Main things about this video:
1. You will learn to structure the project
2. You can send email without any backend
3. You will learn to reuse the same CSS styles
4. You will get a good understanding of the flexbox
5. You can make a complete responsive website
6. Learn glassmorphism form design
7. Hosting using Netlify.com

Download the images used in this website from the links below and try to code along with me. That way you will get the most out of this tutorial.
space.jpg :: https://unsplash.com/photos/Q1p7bh3SHj8
laptop.jpg :: https://unsplash.com/photos/Im7lZjxeLhg
man_with_computer :: https://unsplash.com/photos/PbUShBsiwZI
lock.jpg :: https://unsplash.com/photos/lmFJOx7hPc4
favicon :: https://bit.ly/3EAVGz2
SVGs :: https://undraw.co/search
OR download all from here: https://git.io/JPiq2

You need not know much, to begin with, in this tutorial, I will be explaining everything in this video. This video may get longer but I think it's worth it. Stick around and I will show you how to create a website. If you are an absolute beginner then I think it's the best video to get started.

And forgive me if I sound horrible in English. The real reason is that I'm horrible at English.

And here is the time stamp:
00:00:00 - intro
00:00:19 - demo
00:03:34 - making video longer
00:04:10 - Project setup and basics
00:10:55 - Start coding (Links setup)
00:15:21 - Making navbar
00:50:24 - Main text area of the home section
00:59:46 - Making responsive design
01:03:11 - Making navbar responsive
01:23:49 - Coding about section
01:44:05 - Making trusted by (about section)
01:55:48 - Making subscribe box
02:03:22 - Making footer (copyright text area)
02:08:31 - Coding pricing section
02:35:40 - Completed two pages (next two pages)

WORTH CHECKING:-

Hosting websites for free(playlist):
https://www.youtube.com/playlist?list=PL9RVyg6xl__g97QlXHEMukWwI6qbSA4ZG

Making Facebook Clone using HTML & CSS:
https://youtu.be/-sIS4uRDAnI

Send EMAIL without backend (using HTML):
https://youtu.be/nV1d1Bz7-MM

Top 5 online CODE editors:
https://youtu.be/uZcMh6BKtW8

AROUND THE WEB:

GitHub: @aashishpanthi
https://www.github.com/aashishpanthi

Instagram: @aashishpanthi11
https://instagram.com/aashishpanthi11

Dev.to: @aashishpanthi
https://dev.to/aashishpanthi

Do not click this
Category
Web design
Be the first to comment