DEV Community

Sadee
Sadee

Posted on β€’ Edited on

33 11

Responsive Personal Portfolio Website with HTML CSS JS - Part 1

How to create Responsive personal portfolio website with html css js

In this video series,
I will show you how to build a Complete Responsive Personal Portfolio Website using HTML CSS JavaScript.

🌟 Website features

  • 5 pages
  • Fully Responsive and mobile friendly
  • Awesome Page Navigation
  • Filterable item showcase

HI πŸ‘‹
I'm Sadee (webdev)
In this channel I make videos about Complete Responsive website.
You can checkout my channel πŸ‘‡

πŸ“Ί My Channel : codewithsadee
πŸ”” Subscribe : subscribe now
πŸ• New videos Every Friday & Tuesday


πŸ”— Essential links

Images : image.zip
Font : Poppins
Ionicon : https://ionic.io/ionicons
How to use ionicon : https://youtu.be/TTrYjLOJeKs
Source Code : https://www.patreon.com/codewithsadee


⏱️ Timestamp

0:00 - Demo
1:12 - File Structure
1:28 - Initial html setup
2:09 - CSS variables
2:47 - Custom scrollbar
3:15 - Reset and default style
5:15 - Mobile navbar
8:15 - Sidebar
14:15 - Hero
18:15 - Service
21:25 - Testimonials
25:50 - Client
27:52 - Media queries


πŸ‘€ Like - Follow & Subscribe Me

Twitter : https://twitter.com/codewithsadee
Github : https://github.com/codewithsadee
YouTube : codewithsadee
Buy Me A Coffee : https://www.buymeacoffee.com/codewithsadee
Patreon : https://www.patreon.com/codewithsadee


Buy Me A Coffee

Sentry blog image

How I fixed 20 seconds of lag for every user in just 20 minutes.

Our AI agent was running 10-20 seconds slower than it should, impacting both our own developers and our early adopters. See how I used Sentry Profiling to fix it in record time.

Read more

Top comments (3)

Collapse
 
dazeb profile image
Darren Bennett β€’ β€’ Edited
Comment hidden by post author
Collapse
 
codewithsadee profile image
Sadee β€’

Hey Darren Bennett!
I appreciate your words 😊
I made the video for Helping other peoples,
I have four more videos left with this project, Which I'm still working on, and the video has full source code. Anyone can watch the video and copy the source code if they want.
I have given the source code in patreon, so that if someone supports me, I can also give them something πŸ˜‡
I believe you realize what I mean. Thank you! ❀

Collapse
 
gnio profile image
Gnio β€’
Comment hidden by post author

Some comments have been hidden by the post's author - find out more

The best way to debug slow web pages cover image

The best way to debug slow web pages

Tools like Page Speed Insights and Google Lighthouse are great for providing advice for front end performance issues. But what these tools can’t do, is evaluate performance across your entire stack of distributed services and applications.

Watch video

πŸ‘‹ Kindness is contagious

Please leave a ❀️ or a friendly comment on this post if you found it helpful!

Okay