DEV Community

Cover image for Personal Blog Website using HTML CSS JS

Posted on


Personal Blog Website using HTML CSS JS

How to make personal blog website using html css javascript

In this video, I will show you how to create (mobile-first responsive) personal blog website.

Live Website
Github Repo
Source Code

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 Week

🔗 Essential links

All Images
Html Text
Font - Inter

⏱️ Timestamps

0:00 - Demo
4:37 - File structure
5:03 - Html initial
5:47 - Css variables, reset & base style
10:40 - Header section
19:56 - Hero section
24:52 - Blog section
37:06 - Aside
40:26 - Footer
45:26 - Navbar javascript
47:14 - Media queries
1:08:49 - Light/Dark mode

💜 Like - Follow & Subscribe Me

Twitter :
Github :
YouTube : codewithsadee
Buy Me A Coffee :
Patreon :

Buy Me A Coffee

Top comments (6)

ashleyjsheridan profile image
Ashley Sheridan

Just a suggestion, but you may want to consider trapping the keyboard focus when the hamburger menu is displayed. Currently, the menu covers the entire content of the page, but the user can still tab through to the page elements beneath it; they just don't know what they've tabbed through to because they can't see it. Also, the labelling could be a bit better on the dark mode and hamburger buttons to indicate to the user what the buttons do, as those sorts of things are the least likely to be changed by anyone using what you've provided here as a base.

codewithsadee profile image

Thank you very much for pointing out such an important issue.

mhadi2003 profile image

excellent, and with a beautiful design 👌

raziulislam profile image
Raziul Islam • Edited

Nice UI 😊

farhadi profile image
Farhad Rahmani

That was awesome, dear sadee.

appcode profile image
AppCode ⚡

Image description

This is a great article on building a website, there is also a reference material for coding a few footers for your website with navigation buttons.

Need a better mental model for async/await?

Check out this classic DEV post on the subject.

⭐️🎀 JavaScript Visualized: Promises & Async/Await

async await