ASMR Programming - Complete Responsive Portfolio Design - No Talking
Вставка
- Опубліковано 30 чер 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 UA-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 😉❤️
Thank you man for your time. I'm learning by you a lot of things.
🙏❤️
You dont know how much i need this bro, your a life saver. THANK UUUUU!!!!
Thanks a lot, sorry for late reply 🙏
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 😍😍
I have only one thing to say: It's Amazing! please, continue the good job
🙏❤️
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...
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 🙏❤️
So useful!!!! Thank you so much!
i've learned more by watching your videos and recreating the codes, than actually studying theory
thank you
Bro... You're insane thk u so much. Im learning coding and your videos is helping me.
🙏❤️
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
Wow!what a design and coding real impressive ❤❤
Thanks 🙏
Wooow, what a project, can't wait to watch full video
🙏❤️
Watching your vedios , always give me best vibe🔥🙌🏻
Life saver, and learn alot from you thankyou, you deserve a sub n like
Lovely stuff, looks great!
Thanks a lot, i will be happy if you like it 🙏❤️
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 🙏❤️
juda ham zo'rakan meng ayoqdi ishizga omad bundanham zo'r sayt qiling
😎
Hey ! your work is insane bro !! thanks. Btw waiting for #2 of Portfolio design :D
Thanks 🙏❤️
Thanks man ♥ keep going!
🙏❤️
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
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 🙏
nice skills you have, thnks for sharing your skills
bro is a god send for posting the repo!
Thanks 🙏❤️
your my inspiration❤ thanks for sharing broooo
🙏❤️
good video man, i like how do u this, thanks for making this kind of videos!!!
Thanks 🙏❤️
Thanks! Super helpful
Oh bro, I saw your donation, 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 🙏❤️
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 :)
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
یا خدا باورم نمیشه که یک ایرانی صاحب این چنله ماشلا دمت گرم پسر
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 🙏❤️
Awesome!
🙏❤️
Your Programming Skills Are Incredible 🔥
Thanks 🙏
yes
@azizbekyusupov8864 🙏❤️
it's shit literally
Omg. Bro. That is a great video. please keep going
Thanks 🙏❤️
Nice!
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 🙏❤️
awesome tutorials so helpful
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 doubted my knowledge but when i watched this the fact that I understood what you were doing gave me confidence, keep it up🫰🏻
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 🙏❤️
Hey need a proper video for complete portfolios website... And your work is amazing .. Keep it up 😊
Thanks 🙏❤️
I want to be a great web developer like you.Good Job Brother
Thanks a lot bro 🙏❤️
you are the best thank you
Thanks 🙏
Oof that's an akko 5075b dracula castle. Love this keyboard
Dá pra saber que o cara é BR só pelo teclado. Fez muito sucesso no Brasil, eu mesmo tenho um
Nice design bro 🎉
Qalb 🙏❤️
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 🙏
Wow ❤
🙏❤️
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 😁❤️
حاجی عشقی
🙏❤️
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!!
Nice 👍🏻🙂❤
wow, you are very good to code
Thanks 🙏
keep it up !
Thanks 🙏
Nice video!
🙏❤️
it it so cool website. i have made it for my portfolio website.
Great 😉❤️
دمت گرم
Nice video ... very good :) :)
🙏❤️
Magnificent programming skills, may I know the model of the keyboard in the video?
wow, you're very good programmer ❤
Thanks 🙏
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
Where do you get your images bro???
You are incredible, i hope to stay like this one day🙏🙏
Hi, search for illustrations 😉🙏
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!
چاکر حاج رضا
🙏❤️
Thanks 🙂🙂🙂😁👍👍
Please like and share 😉🙏❤️
آقا رضا🔥
Hi, please write in English 🙏❤️
❤❤❤❤❤❤ nice vary good ❤❤❤❤
Thanks so much 🙏
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!
monster
🙏❤️
داداش کارت درسته
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?!
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!
arzoye movafaghiat bishtar mikonam barat ❤💥👌
🙏❤️
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 🙏
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 🙏❤️
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!
pashmam irani hasti 😍😍 damet gaaarmm kheili chanelt khobe ❤❤
Thanks, please write in English 🙏❤️
ok bro ❤@@AsmrProg
@mitikouman7581 ❤️❤️
Why links in bar dissappeared when u changed size of the window?
Hi, because of responsive!
Bro what theme did you use in this video? Very cool content, gives motivation to learn to make up too)
Thanks, it’s Ayu theme 🙏 please like video to support me ❤️
Which Recorder you use for recording, i want to know about this cursor red line.
Hi, it’s zd soft screen recorder 🙏
I'm curious as to how you programmed your keyboard knob for scrolling
With it’s software 🙏
HONEY WAKE UP NEW ASMR PROG VIDEO
I know
Like video please 🙏❤️
Like please 🙏
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 🙏
Help a brother out what means, techniques and methods did you use to reach where you are and am talking of reading materials or whatever you did to reach there. Overall that's some good work you're doing out here.
Hi bro, courses and youtube!
@AsmrProg Thanks alot much appreciated
@bradleybard1558 🙏❤️
@@AsmrProgCan you tell me how did you get the image to appear by adding a background color at like 5:50
@freezycq because image and background color was same, when we change bg color, we saw image 🙏
I am suffering in problem solving? Do you think progamming is possible by me? Everytime i am given a problem to solve, i tend to forget the outline and where to start . 😅 Your programming skills are 🔥🔥🔥🔥 . how did you get to this level? And what is the best strategy to master programming?
Hi, yes why no?! You need to just have experience and do mini projects 🙏
Its crazy how while watching this, I understand everything your'e doing and why your'e doing it. But when I start my own project I seem to go completely blank and forget everything haha. Hopefully this goes away
Thanks a lot, it’s just need you do some projects step by step with videos, then you can create what you want 😉🙏
Hello! What did you use at the minute 5:41 to make the VSC transparent?
Hi, glassit extension 🙏
Thanks!
@edi50 🙏❤️
Love your works ❤ and can you help me with connecting the payment?
Thanks, for payment we will have it after backend tutorials 🙏
@@AsmrProg ok thanks 🔥
@maskedman0677 🙏❤️
nice video
Thanks, please like video 🙏
I liked the video @@AsmrProg
@titrersin Thanks 🙏❤️
Keep rocking ! You may have strengthened a lot of mans willpower to sit and focus but you never know😅...
Are you using red switch keyboard?m
Thanks, it’s white wine switch 🙏
Hey what extension do you use that shows the errors and stuff in css?
Hi, it's error lens extension 🙏
is that akko 5075b plus ur using?
Yes, dracula castle version 😉
Hello! teacher! What screen recording software are you using?
Hi! Your video contents are amazing! But I'm more curious your visual studio code settings, can you share me about that? Please!
Hi, please check my github, there is a repository about all of my vscode settings 🙏❤️
@@AsmrProg Thanks mannnnn
@weisongtey3079 🙏❤️
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 🙏
به به اقا رضا کارت درسته
راستی چطوری این کیبوردت انقدر خوش صدا هستش ؟