ASMR Programming - Complete Responsive Portfolio Design - No Talking
Vložit
- čas přidán 25. 07. 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 CZcams : @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.
Thank you for creating easy way coding like abcd..... Had a lot of fun in this Project 😍😍
So useful!!!! Thank you so much!
i've learned more by watching your videos and recreating the codes, than actually studying theory
thank you
Wooow, what a project, can't wait to watch full video
🙏❤️
I have only one thing to say: It's Amazing! please, continue the good job
🙏❤️
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!
Bro... You're insane thk u so much. Im learning coding and your videos is helping me.
🙏❤️
Wow!what a design and coding real impressive ❤❤
Thanks 🙏
Lovely stuff, looks great!
Thanks a lot, i will be happy if you like it 🙏❤️
Life saver, and learn alot from you thankyou, you deserve a sub n like
Watching your vedios , always give me best vibe🔥🙌🏻
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 🙏❤️
juda ham zo'rakan meng ayoqdi ishizga omad bundanham zo'r sayt qiling
😎
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
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
Hey ! your work is insane bro !! thanks. Btw waiting for #2 of Portfolio design :D
Thanks 🙏❤️
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 🙏❤️
Thanks man ♥ keep going!
🙏❤️
good video man, i like how do u this, thanks for making this kind of videos!!!
Thanks 🙏❤️
bro is a god send for posting the repo!
Thanks 🙏❤️
nice skills you have, thnks for sharing your skills
Thanks! Super helpful
Oh bro, I saw your donation, thanks a lot ❤️❤️😍😍
your my inspiration❤ thanks for sharing broooo
🙏❤️
Awesome!
🙏❤️
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
Bro ye portfolio bna k bhot acha lga meri knowledge main b bhot azafa hoa hai thank u bro
Thanks 🙏❤️
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 🙏
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 🙏❤️
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 🙏❤️
یا خدا باورم نمیشه که یک ایرانی صاحب این چنله ماشلا دمت گرم پسر
Omg. Bro. That is a great video. please keep going
Thanks 🙏❤️
Your Programming Skills Are Incredible 🔥
Thanks 🙏
yes
@azizbekyusupov8864 🙏❤️
it's shit literally
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 :)
hey can u make a video on the extensions that u use and themes really loved the cool look
Nice!
awesome tutorials so helpful
Thanks 🙏❤️
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 🙏❤️
Great content!
Thanks 🙏❤️
Hey need a proper video for complete portfolios website... And your work is amazing .. Keep it up 😊
Thanks 🙏❤️
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 🙏❤️
I want to be a great web developer like you.Good Job Brother
Thanks a lot bro 🙏❤️
Bro 😭 the day I'll learn to code like you, I'll conqueror the world 😭 love you teacher 🙏👑😍
Thanks so much, Keep going on 🙏❤️
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 🙏
you are the best thank you
Thanks 🙏
Nice design bro 🎉
Qalb 🙏❤️
Hi. Thank you for this. I was able to write all the codes and got the same result. Just one thing, for some reason, the blur from the span tag is having a bounding box on the right side and the bottom so, it is not showing a full circle blur. I have no idea why. LOL. Anyway, I learned a lot in this tutorial. Specially the properties used in the CSS file. Thank you very much! You are amazing!
Oof that's an akko 5075b dracula castle. Love this keyboard
Wow ❤
🙏❤️
Magnificent programming skills, may I know the model of the keyboard in the video?
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!!
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?!
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 😁❤️
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
Dá pra saber que o cara é BR só pelo teclado. Fez muito sucesso no Brasil, eu mesmo tenho um
it it so cool website. i have made it for my portfolio website.
Great 😉❤️
Nice 👍🏻🙂❤
Your'JOB is cool,I have coded with you along and also added your projects to my resume ^_^,you from Iran????
Where do you get your images bro???
You are incredible, i hope to stay like this one day🙏🙏
Hi, search for illustrations 😉🙏
wow, you are very good to code
Thanks 🙏
Which Recorder you use for recording, i want to know about this cursor red line.
Hi, it’s zd soft screen recorder 🙏
دمت گرم
keep it up !
Thanks 🙏
Nice video!
🙏❤️
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 🙏❤️
I'm curious as to how you programmed your keyboard knob for scrolling
With it’s software 🙏
Thanks 🙂🙂🙂😁👍👍
Please like and share 😉🙏❤️
bro how to addmouse cursor backline as yours? Please, tell me bro, I want that!
Hey what extension do you use that shows the errors and stuff in css?
Hi, it's error lens extension 🙏
حاجی عشقی
🙏❤️
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!
Nice video ... very good :) :)
🙏❤️
Why links in bar dissappeared when u changed size of the window?
Hi, because of responsive!
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!
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 🙏❤️
چاکر حاج رضا
🙏❤️
Hello, what VS extensions do you use so that it has transparency.
Hi, this one is glassit extension 🙏
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 🙏
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 🙏
could you please tell me what was the shortcut did you used while you create nav - link??( class link )
Sorry?! What you mean!
bro where didi you find the images you used in your video and plss provide the resources you used in you video
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!
what is this theme and how to set that transparency and change it with keyboard
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 🙏
داداش کارت درسته
Hello! What did you use at the minute 5:41 to make the VSC transparent?
Hi, glassit extension 🙏
Thanks!
@edi50 🙏❤️
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?
wow, you're very good programmer ❤
Thanks 🙏
Hello , first of all , thank you so much for your knowledge and techniques. I'm really learning from your videos. ... Well, i am having a problem at the end of this project. I dont know why but i am not able to click on the tabs (features, pricing etc) and getting a scroll down page. Could you help me? I am not finding a solution =/
Hi, your code have bug, check my source code!
❤❤❤❤❤❤ nice vary good ❤❤❤❤
Thanks so much 🙏
How did you put this line trail in the mouse cursor?
Hi, it’s screen recorder effects!
آقا رضا🔥
Hi, please write in English 🙏❤️
pashmam irani hasti 😍😍 damet gaaarmm kheili chanelt khobe ❤❤
Thanks, please write in English 🙏❤️
ok bro ❤@@AsmrProg
@mitikouman7581 ❤️❤️
9:23 What did you use for that transparent background?
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 🙏
monster
🙏❤️