How to Create Personal Blog Website Using HTML CSS JavaScript
HTML-код
- Опубликовано: 13 июл 2024
- Source code: www.patreon.com/posts/wren-pe...
Check out my next video update: / codewithsadee
How to Make a Personal Blog Website Using HTML CSS JavaScript.
If you're looking to start a blog website using HTML, CSS, and JavaScript, then this tutorial is for you. In this video, we'll walk you through the process of creating a personal blog website from scratch.
GitHub Repo: github.com/codewithsadee/wren
HI 👋
I'm Sadee(web dev)
In this channel, I make videos about the Complete Responsive website.
You can check out my channel 👇
📺 My Channel: / @codewithsadee
🔔 Subscribe: / @codewithsadee
🔗 Starter file
▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀
Download the starter file to practice: drive.google.com/file/d/1goh0...
⏱️ Timestamps
▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀
0:00 - Demo
5:37 - File structure
6:32 - Project initial
16:27 - Header
37:15 - Hero section
51:59 - Topic section
1:12:06 - Featured post section
1:26:25 - Popular tags section
1:33:15 - Recent post section
2:05:49 - Footer
2:24:04 - Media queries
💜💜 PATREON BUDDIES 💜💜
▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀
Many thanks to our lovely Patreons (from / codewithsadee ) who support us every month and encouraged us to make this video:
Asher, Danish Khan, Jose Galvez, Kesu Endalkachew, vagdrak
👍 Like - Follow & Support
▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀
Twitter: / codewithsadee
Github: github.com/codewithsadee
Facebook: / codewithsadeefan
Instagram: / codewithsadee
⚠️ Disclaimer
▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀
Disclaimer video is for educational purposes only. Copyright Disclaimer Under Section 107 of the Copyright Act 1976, allowance is made for "fair use" for purposes such as criticism, comment, news reporting, teaching, scholarship, and research. Fair use is permitted by copyright statute that might otherwise be infringing. Non-profit, educational or personal use tips the balance in favour of fair use
#codewithsadee
#responsivewebsite
#blogwebsite
at the line of 1286 you need to set `all: unset` property to (navbar.active)
I forgot to do this
.navbar,
.navbar.active {
all: unset;
display: block;
}
and add the style:
at 1200px screen
body.nav-active { overflow-y: overlay; }
You are amazing my friend. Thank you :)
@@full-stackhouse7925 You're most welcome
Sir can you please tell me which extension you are using for live preview?
@@codewithsadee good
live server@@jawadalee1398
This is what I've been waiting for! Thanks for the beautiful design as always. 😍
Thanks
Keep up the good work bro. We appreciate you
Thanks for the beautiful design as Always ❤❤
I search many but,you used is best
Is there an admin panel? If not, Please update this tutorial for part 2 where Admin Panel where I can create blog post is being coded But still, I'll watch this til end.
I've no words how to appreciate such a beautiful work ❤️🔥
You are best Sadee Sir ❤️💎
Many many thanks my friend ❤
Hi,
I'd like to know where do you get your inspiration for the design of the website you build ?
Thanks in advance and keep up the good work !
It helps a lot 🙂
You should do voice over, this is really nice content!
Beautiful As Always , Keep it Up Man ♥♥♥♥
Thanks a lot!
Leaving personal time stamps! Thank you!
13:38
9:08
You're most welcome!
Excelent!
Great Sir
Excelente, Saludos desde Barranquilla Colombia
Thank you for your love ❤
Hi bro ,what extension you used for media queries?
2 mins here equal 1 day on earth
jokes aside, thank you so much , I learned alot from your videos
I'm glad to hear that! I'm happy that you learned a lot from the videos. Thank you for your support and kind words!
aww thats very nice
Hello, I see that you start programming in the mobile version, and last desktop, is this ideal? don't you use jquery?
Thanks 🌹🌹
really you`re the best one👏
Thank you so much 😀
Hey Bro, I created this, but I need Backend Development Process video? Please Take this Comment Seriously ???😁
Good day. Please tell me where i may get a source code with all pages? Because on Github i only see first page, but page with exact blog is absence. But it to be a real blog there have to be all pages.
May humbly request to if you have time please create a 1/ social media clone and a 2/ dashboard design...Here's a request
from where u got style guides. Please tell
Wow 🤩🤩🤩
Thanks
how did you setup the emulator with vscode?
Can you please tell me how to get that mobile view in vs code?
what keyboard you use ,it have nice sound :D
just awesome thanks sir
Please give advanced e commerce website project
Sure I will
I guess I may not understand. How are we supposed to actually create the blogposts that are accessed when clicking on each title of the blogposts? I’m looking to add multiple articles that are accessed after each click event instead of just being sent back to the top of the page.
Use anchor tag to redirect them to the blog page you want
sir what does it mean " overflow-y:overlay ;" ."I searched on Google, but couldn't find an answer."
There is no single post page?
Hi when you are going to do projects on reactjs I'm eagerly waiting ..those who want reactjs plz.. Like
Plz first do the desktop version then the mobile it will be very helpful 🙏
Sir,What extension you used for live preview
The name is live preview
Can you work with us a website using tailwind?
Hello. I have a question about the navbar. When I click a navbar list item on full screen, all navbar items move the right and when I click again. They are came back to first position. How can I fix this problem?
at the line of 1286 you need to set `all: unset` property to (navbar.active)
I forgot to do this
@@codewithsadee I couldn't fix it my friend. Did you try to your project? When I change the tag (.navbar to .navbar.active) navbar list become invisible.
@@full-stackhouse7925 check pinned comment on this video
Thank you for your video
Pls try and be saying something so we can understanding.
please what's the name of the font used in your VsCOde
cascadia code
Which code editor are you using
VScode
Good morning sir Project is good with helpful 👍 i request you sir drop-down menu in navbar add please sir 👍
Of course I will
Plz make the ui of hostel website
16:46
Good evening sir Sir without web kit property ka banao website apni voice ma please
But where is admin panel ?
I don't have the essential stuff, how can I install it?
Starter file download link in the descriptions.
48:21
i followed this turtorial step by step, yet still my page doesnt look like yours, only thing i did was change colors and pictures and it seemed to fvck the whole website
Join our discord server to discuss about this issues
I have downloaded the source file. But its not working!
Join our discord to discuss project related issues: discord.gg/fU3VvKMg
I have some complaints in your video
First you code all of your part then save which is difficult to understand for us who are beginners
After I watched the entire video and applied it with the same code, then I put it on RUclips to sell it, is that permissible?
No, brother. I'm sorry
This project is educational purpose only
I paid and still can’t find the full source code
After reviewing the source code thoroughly, I can confirm that there are no issues. The complete source code should be accessible to you. In case you're facing difficulties locating it, I recommend joining our Discord server for prompt support.
i hate people that put so many comments in the files , is too much
your workflow sucks