ASMR Programming - Complete Responsive Portfolio Design - No Talking
ฝัง
- เผยแพร่เมื่อ 8 ก.ค. 2024
- Create a Responsive Portfolio Design using HTML, CSS, and JavaScript.
In this tutorial, I'm going to show you how to use modern HTML, CSS, and JavaScript to create a completely responsive Portfolio Design with Scroll To Element Functionally. We'll be using CSS Grid, CSS Flexbox, Media queries for our responsive design, and CSS transition for some cool animation effects.
After we upload second Personal Portfolio Design video we will create a separate playlist for it 😉
Source Code : github.com/AsmrProg-YT/Person...
Join the full "100 Days Of JavaScript Code - Web Development Bootcamp" course :
• 100 Days of JavaScript...
Keyboard Link : en.akkogear.com/product/dracu...
AKKO TH-cam : @AkkoOfficial
Web Design Coding Bootcamp Playlist : • ASMR Web Design Bootcamp
source of all projects also will upload in AsmrProg github page :
github.com/AsmrProg-YT
Video Contents :
00:00 - Intro (Portfolio Design #1)
01:10 - Warming hands
01:15 - Main codes
02:10 - Google fonts
02:45 - Nav
04:31 - Main styles
05:23 - Nav styles
09:28 - Header
11:00 - Header styles
15:28 - Features
19:20 - Features styles
23:13 - Pricing plans
26:35 - Pricing plans styles
31:41 - Footer
35:02 - Footer styles
38:25 - Copyright styles
39:32 - Responsive codes
42:38 - Responsive result
43:17 - scrollToElement()
44:38 - JS codes
46:49 - Final Result
Asmr Game Coding Playlist : • ASMR Game Coding
Other Video's :
Coding IOS (Iphone) Calendar : • ASMR Programming - Cod...
Coding IOS (IPhone) Dynamic Music : • ASMR Programming - Cod...
Coding a Snake Game : • ASMR Programming - Cod...
Movie Guide App Coding : • ASMR Programming - Mov...
Coding IOS (IPhone) Dynamic Music : • ASMR Programming - Cod...
Subscriptions, good comments and likes are great support for me 😍
Don't re-upload or edit the videos on your channel.
All copyrights by AsmrProg.
About AsmrProg Channel :
Here I upload ASMR programming tutorials related to HTML, CSS, Sass, JavaScript, React, PHP, Frameworks such as Bootstrap and more along with creative UI/UX Designs.
AsmrProg is a community for web developers from all levels to learn and grow their skills in front-end and back-end web development.
AsmrProg
Asmr Prog
ASMR Programming
ASMR Coding
ASMR keyboard typing
ASMR web design
ASMR coding html
ASMR coding website
No Talking ASMR
No Talking Coding
No Talking Programming
We will have a Complete playlist for Portfolio Designs, Please support my channel with your LIKE 🙏 Your LIKES help my channel to suggest more ❤ Hope you enjoy it!
@klot44 hi, in this video i think it’s Ayu
@@AsmrProghey how do you do that cursor animation in your desktop with a circle
@rishidev4186 hi, it’s screen recorder effects!
@@AsmrProg hey I have also question that how does it automatically make the attributes when you write code is this any extension
@rishidev4186 yes, check my github, there is a repository about all of my vscode settings 🙏
Probably the best project ive followed and wrote with. I’ve learnt so much and i love the JS script you wrote its very smooth and satisfying when i press one of the features or about links so thank you so much will be watching more!
Thanks so much, support me with your likes 😉❤️
You dont know how much i need this bro, your a life saver. THANK UUUUU!!!!
Thanks a lot, sorry for late reply 🙏
Thank you man for your time. I'm learning by you a lot of things.
🙏❤️
Bro you actually don't know that You are not only make me sleep but makes me a sleeper with the knowledge of Web development lol!!! Its so peaceful here. I want to make a video on MERN as well please!!! you are great. Just subscribed you.
Wooow, what a project, can't wait to watch full video
🙏❤️
So useful!!!! Thank you so much!
Thank you for creating easy way coding like abcd..... Had a lot of fun in this Project 😍😍
I have only one thing to say: It's Amazing! please, continue the good job
🙏❤️
i've learned more by watching your videos and recreating the codes, than actually studying theory
thank you
Lovely stuff, looks great!
Thanks a lot, i will be happy if you like it 🙏❤️
Bro... You're insane thk u so much. Im learning coding and your videos is helping me.
🙏❤️
Thanks man ♥ keep going!
🙏❤️
Wow!what a design and coding real impressive ❤❤
Thanks 🙏
bro is a god send for posting the repo!
Thanks 🙏❤️
Can't believe I just learned a lot of shortcuts and some programming practices from someone who doesn't speak at all. Thank you so much!
Life saver, and learn alot from you thankyou, you deserve a sub n like
Hey ! your work is insane bro !! thanks. Btw waiting for #2 of Portfolio design :D
Thanks 🙏❤️
Thanks! Super helpful
Oh bro, I saw your donation, thanks a lot ❤️❤️😍😍
3:26 the code on line 21 just blew my mind. Recently getting into web dev seriously and have been writing out each href for the nav bar individually. I've never seen this before and will definitely save alot of time. Very exciting. Cheers!
that's nothing but I understand the excitement
Whats the extension for it? I can't use snippets like that...
Watching your vedios , always give me best vibe🔥🙌🏻
wow got to know 2 new features
background and glass effect of vs-code
thanks man
Hey bro, how to adjust the background? I did the same he did, but I couldn't do it 5:41
ur videos ar awesome and i try to learn all of this by mysef and you are my motivation. love u from Uzbekistan
Thanks a lot 🙏❤️
good video man, i like how do u this, thanks for making this kind of videos!!!
Thanks 🙏❤️
your my inspiration❤ thanks for sharing broooo
🙏❤️
Awesome!
🙏❤️
I love your content, it's to useful for newbies programmers. It would be awesome if you would do a course and video-tutorial focussed on one topic each of them. For example, a video about responsivness and everything that should be known as well as some tips and tricks, or also the whole wekbit!
Keep up the good work and thanks for your help
Hi bro, thanks 🙏 currently working in a complete course for web development 😉❤️
this is huge, thank you, you help aspiring programmers a ton @@AsmrProg
That sounds so awesome
@precious_reads8552 🙏❤️
Brother, You made me to keep in coding even if i do many fail, and the most impressive side is that you response to each comment, you are the first man bro for me bro, thank you bro so much for your work, i will remember you when i will work as a web developer, teacher!!!!
Hi, it’s great to hear that 😉 keep going on and don’t worry 🙏❤️
@@AsmrProgbro can i still get a job in 2024 if i learn front end web development
juda ham zo'rakan meng ayoqdi ishizga omad bundanham zo'r sayt qiling
😎
Great content!
Thanks 🙏❤️
Omg. Bro. That is a great video. please keep going
Thanks 🙏❤️
awesome tutorials so helpful
Thanks 🙏❤️
Your Programming Skills Are Incredible 🔥
Thanks 🙏
yes
@azizbekyusupov8864 🙏❤️
it's shit literally
nice skills you have, thnks for sharing your skills
Nice!
For this scroll to element effect, you don't have to write even one line of js. You just need to place the anchor's href attribute and the element's id where you want to scroll when you click on a link the same.
Hi, yes in new video i did it, but in this code i want show how we can do it with js 🙏
i like your coding style.@@AsmrProg
@FactsSolver 🙏❤️
I have nothing to say sir, My God bless you 🙏 thanks, keep your great job and we will do what we supposed to do for you 👍
Thanks a lot 🙏❤️
Hey man, would you do projects you consider useful for learning and showing to companies to succesfully land a job? You could even make a playlist like "projects to land a job" or something. You would be my hero. Thnks love your videos!
It’s a great advice 🤔 we will have it 😉 added to plans 🙏❤️
یا خدا باورم نمیشه که یک ایرانی صاحب این چنله ماشلا دمت گرم پسر
This is just an extraordinary addition to experience for a noob! Very pleasant to look at and listen to. I'm wondering, how is the webpage being autoupdated after each element is added?
Hi, we will have complete websites soon 😉 auto reloading is live server extension 🙏
you are the best thank you
Thanks 🙏
Bro 😭 the day I'll learn to code like you, I'll conqueror the world 😭 love you teacher 🙏👑😍
Thanks so much, Keep going on 🙏❤️
I'm so bad that I'm getting different results even with same codes wth
fount it lol
Hi, did you check my source code?
Sorry?!
@@AsmrProg i missed a semi colon lol
@@Jefpesosstupid
Which Recorder you use for recording, i want to know about this cursor red line.
Hi, it’s zd soft screen recorder 🙏
Wow ❤
🙏❤️
I want to be a great web developer like you.Good Job Brother
Thanks a lot bro 🙏❤️
Nice design bro 🎉
Qalb 🙏❤️
Kinda confuse a bit to that tutorial since i just started at coding, but still great tutorial, the vids motivates me to keep continue learning and practicing, thx so much!
Thanks so much 🙏❤️
Dá pra saber que o cara é BR só pelo teclado. Fez muito sucesso no Brasil, eu mesmo tenho um
Oof that's an akko 5075b dracula castle. Love this keyboard
Hello , I truly find this video amazing!!!. May I request to use this as my reference in creating my own portfolio page too? I am starting my journey as front-end since you released so many programming videos like this and it was satisfying as well :)
Nice video!
🙏❤️
keep it up !
Thanks 🙏
Try type lorem immediately followed by a number to tell it how many lorem words to generate. Saves hours 🤘🏼 otherwise, I'm a huge fan of your videos. Learning a lot
Thanks a lot, i will check it 😁❤️
Great video, inspired me to do one project like that, but when I use Blur it has lines marking it and the box in it ends before the gradient mix with background. I'm having a hard time trying to figure it out... do you know what could be wrong?
Hi, did you checked my source code?!
Why links in bar dissappeared when u changed size of the window?
Hi, because of responsive!
حاجی عشقی
🙏❤️
Hey need a proper video for complete portfolios website... And your work is amazing .. Keep it up 😊
Thanks 🙏❤️
Nice 👍🏻🙂❤
wow, you are very good to code
Thanks 🙏
Thanks 🙂🙂🙂😁👍👍
Please like and share 😉🙏❤️
Nice video ... very good :) :)
🙏❤️
I doubted my knowledge but when i watched this the fact that I understood what you were doing gave me confidence, keep it up🫰🏻
Thanks 🙏❤️
it it so cool website. i have made it for my portfolio website.
Great 😉❤️
دمت گرم
monster
🙏❤️
mate is there are reason to not use the autosave function within vscode? just curious.
keep up the good work tho! i enjoy watching all your vids! ✌
Yes, i want audience see result when i want!
Hi there! I love your theme and VS Code appearance. Can you make a video about it? Thanks! Appreciate it!
Hi, please check my GitHub, there is a repository about all of my vscode settings 🙏
I'm curious as to how you programmed your keyboard knob for scrolling
With it’s software 🙏
❤❤❤❤❤❤ nice vary good ❤❤❤❤
Thanks so much 🙏
چاکر حاج رضا
🙏❤️
Hey what extension do you use that shows the errors and stuff in css?
Hi, it's error lens extension 🙏
آقا رضا🔥
Hi, please write in English 🙏❤️
HONEY WAKE UP NEW ASMR PROG VIDEO
I know
Like video please 🙏❤️
Like please 🙏
bro how to addmouse cursor backline as yours? Please, tell me bro, I want that!
Love the content, how about a personal finance application using bank apis? If you already have this, then link the video!
Hi, our bank accounts are different! So I can’t do it!!
Brother, I have one question you have used nav on top of the site and header tag below nav 9:29 in the body section, is that a good practice or that's how it is done? Can you please tell me? I'm a beginner so...
( I'm not good at English 😅)
Hi, this video's are just design, when we go on backend coding i will show how you can code SEO friendly sites 🙏
Hello! What did you use at the minute 5:41 to make the VSC transparent?
Hi, glassit extension 🙏
Thanks!
@edi50 🙏❤️
arzoye movafaghiat bishtar mikonam barat ❤💥👌
🙏❤️
How to do get the windows to be like that I have a Mac and I’m wondering how to put the code window in front of the html in Google. You changed the opacity of the window too how?
Hi, you can’t change opacity on mac! For window you need find Mac extensions for it 🙏
Cool man! Tell me, which theme do you use in VS Code?
Hi, please check my GitHub, there is a repository about all of my vscode settings 🙏
9:23 What did you use for that transparent background?
bro where didi you find the images you used in your video and plss provide the resources you used in you video
how does your highlight blinking? im new to web development and i find your content really helpful to beginners such as me! keep it up :)
Thanks, it’s screen recorder effects!
@@AsmrProg ohh, how about the transparent thingy?
Glassit extension
could you please tell me what was the shortcut did you used while you create nav - link??( class link )
Sorry?! What you mean!
pashmam irani hasti 😍😍 damet gaaarmm kheili chanelt khobe ❤❤
Thanks, please write in English 🙏❤️
ok bro ❤@@AsmrProg
@mitikouman7581 ❤️❤️
داداش کارت درسته
wow, you're very good programmer ❤
Thanks 🙏
Nice Portfolio! I have a question about your VSC Themes. What theme do you use for the opacity or transparent effect?
Hi, it’s glassit extension 🙏
@@AsmrProg Thahk you very much!!
@Xardimods 🙏❤️
@@AsmrProghey, do you know if there is one for Mac?
For mac no!
What is this extension that suggests what you can write? 8:18
Hello, what VS extensions do you use so that it has transparency.
Hi, this one is glassit extension 🙏
What are your settings for Visual Studio Code for it to be so versatile. Unless it's me, the typing is different and it is see through whenever you minimize it. Please share.
Hi, please check my github, there is a repository about all of my vscode settings 🙏
Hi how should i go for this level programming i have just learn html css basic plz tell and which video should i watch with channel name?
is that akko 5075b plus ur using?
Yes, dracula castle version 😉
Hi, I wan't to have the circle around your cursor, you can give me the name of these program please?
Hi, it’s screen recorder effects!
Where do you get your images bro???
You are incredible, i hope to stay like this one day🙏🙏
Hi, search for illustrations 😉🙏
Hello! teacher! What screen recording software are you using?
does someone know how to make a trail with the mouse ?
Hi, it’s screen recorder effects!
Brov I have been following you recently you have build good quality projects that helps junior developer to polish their skills. I do have a request If you can drop the design of this portfolio I wanna try it solo and compare my work with your's just to improve. Peace brov!!
Hi bro, it’s great to hear it, what you mean about design?! Source code?!
I mean the high fidelity ux design or just a screenshot of the complete website@@AsmrProg
Oh ok, send message in telegram, link on channel about page, i will send full screenshot 🙏
thanks buddy!@@AsmrProg
@shaimeur 🙏❤️
I think that you can use copy html to CSS tool because it takes safe time when you make the CSS
I have it’s extension!