How to Build a Personal Portfolio Website Using HTML CSS JavaScript
HTML-код
- Опубликовано: 13 июл 2024
- Are you looking for a way to showcase your work and build a portfolio website? In this video, we'll show you how to build a personal portfolio website using HTML, CSS, and JavaScript.
This website is designed to be lightweight and mobile-friendly, so you can showcase your work in any format or device. We also include a light and dark theme so you can change the look and feel of your website to fit your own style. This is a great way to show your work to potential employers or clients, and build a portfolio website that you can be proud of!
🔗 Essential links
▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀
Starter file: drive.google.com/file/d/1LwxC...
Source code link 1: www.patreon.com/posts/devfoli...
Source code link 2: www.buymeacoffee.com/codewith...
Figma UI: www.patreon.com/posts/devfoli...
Join our Discord community: / discord
⏱️ Timestamps
▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀
0:00 - Demo
2:35 - Starter file
3:28 - Html init & Css variables, reset
12:42 - Typography setup
18:53 - Header structure & style
26:30 - Hero structure & style
34:37 - About card structure & style
38:09 - Light & dark mode
45:37 - Tab structure & style
50:11 - Project section structure & style
57:31 - Resume section structure & style
1:07:08 - Contact section structure & style
1:22:48 - Tab functionality
1:26:48 - Footer structure & style
1:28:12 - Media queries
👍 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
#personalportfolio
#portfolio
Hi please i need some help from you in
"Stock media platform video"
I have an error in 5:08:15
the error is about filterValue
Please give me the solution ❤
Amazing Project , Keep it Up Bro
Thanks 🔥
awesome content...excellent project tanks alot now i havea classic portfolio to show my projects.tnks alot
Glad it was helpful!
Great video! I am having trouble getting some functionality working. The hover functionality for buttons doesn't seem to work for me, and the hitboxes are not where the items are. For example, the projects only let me click on the last project, and the entire top of the website only clicks on the phone number. Any idea why I might be having this issue?
Thank you so much, it helps me a lot to see how to write clean structure and code
Glad it was helpful!
Thank you for video.
You are welcome
Your content is very top-notch. The only problem is you need to explain with your voice.
Excellent work ! Your content is very top notch. Best wishes ... :)
Thanks ❤
Honestly, Bro, you do a lot of projects for us. Thank you for that. But I think you are making a big mistake . Most programming tutorials are written with background music, which is a huge mistake of many programmers. Do they teach you how to build a website or anything but not even explain a word of a single code? Many people just copied the code from the tutorial and have no clue what any of it does. If you try to explain a code, how exactly that worked, you will gain many subscribers and view in your video soon. 🔥🔥
Agree 💯
I agree
I
Also
Agree
@@BlackBerry002 agreed, I just did not get that part where he was adding functionality of Changing inner content when specific tab is pressed. Although I can also achieve that in different manner using javascript but his way seemed intelligent and optimised. I wish he could explain that.
Te sigo desde Republica Dominicana y me encantan tus proyectos, pero me gustaría que lo explicara hay muchas cosas que hace maravillosas, pero a la vez no la entiendo y se vuelven confusa, sé que es tu decisión hacerlo, pero a todos tus seguidores nos gustaría que nos explique, pero si no quieres está bien aún así he aprendido muchísimo de todos tus proyectos, lo único que a veces me quedo con muchas confusiones felicidades gracias por ayudarnos tanto.
i have learned the full html course only and wanted this first website for my portfolio
keep it up
Which program do you use yo emulate an iPhone directly in your web browser?
A very cool project. The only problem I'm having is styling the dark to light theme button before specifying padding-inline: 16px; has an indent on the right and then on the contrary has no indent 23:33 Could you share your styles
how bro can you tell me how you fix it
Can you suggest any projects in JavaScript frameworks that can people can build for their resume
I respect your creativity! Awesome work
Thank you so much 😀
Thank you so much plzz also add live deployed project
Bro please make a video about bootstrap used for making full website.
Indeed top-notch projects everytime.
Incredible consistency Sir
Thank you ❤❤
My pleasure!
Whats is the theme of vscode?
Hey..can u pls design delevry website like swiggy...and one thing i want to ask u on u have designed many websites what was the pattern u follow to design these websites, if u share that pattern it will help alot plzz waiting for ur reply.
Hi Sade, Patreon not opening since
So far, I can find every single css/js stuff on the web.
Besides the obv. code, what does state layer mean?
Thanks in advance if anyone takes their precious time to explain.
Its high time you start with React on the Channel
It will attract more audience
😎👍
Can you please provide the live link of the website?
Hi sir, what software do you use to simulate the mobile device in the initial demo?
Vs code extension called Mobile View
fantastic
Thank you so much 😀
Let me ask a little question. At 9p42, I have a problem between switching the white and dark background, although I have checked my code to make sure it is not wrong, please help me.
Hey!
join our discord server to discuss about this issues
Your videos were amazing but one humble request pls explain with your voice 😢
I will try my best
26:28
Thank you brother but please say what is
Var( - -primary) color name and what is
Var( - - surface) color name please brother
main bhee aapka jisa html , css, javascript sikhna chhata hu kuch sorce batyo
Thank u brother 😍
Welcome 😊
portfolio for Egyptian software engineer 😂❤❤
Please brother what is colour name or code
Bro i miss your source code! 😭
Source plissss
Plz give us source code without payment...We are fresher and Don't have money to buy😭
Wt u do with that code he is giving u boiler plate design ur way
That's just bullshit. he is not asking like 20$ or something.
Hey Sadee, source code 😜
are you egyption
NO!
@@codewithsadee sorry i see name in video is ahmed khaled and cairo egypt i thought you are egyption sorry pal
@@mr.unchained It's okay 😊
completely not working. anyway thx for work
What isn't working?
@@codewithsadee the chips, switch to dark theme and picture adjustment. i can´t figure it out.
ill try it again.
@@robertpelzer5041 hey bro, I also had the same error as you, did you fix it?