ASMR Programming - Complete Responsive Portfolio Design - No Talking

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 KZbin : @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

[@AsmrProg]

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!

[@AsmrProg]

@klot44 hi, in this video i think it’s Ayu

[@Devrish04848]

​@@AsmrProghey how do you do that cursor animation in your desktop with a circle

[@AsmrProg]

@rishidev4186 hi, it’s screen recorder effects!

[@Devrish04848]

@@AsmrProg hey I have also question that how does it automatically make the attributes when you write code is this any extension

[@AsmrProg]

@rishidev4186 yes, check my github, there is a repository about all of my vscode settings 🙏

[@kervaci]

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!

[@AsmrProg]

Thanks so much, support me with your likes 😉❤️

[@cs2c_espinosaromeomatthewr759]

You dont know how much i need this bro, your a life saver. THANK UUUUU!!!!

[@AsmrProg]

Thanks a lot, sorry for late reply 🙏

[@tudgaming]

Thank you man for your time. I'm learning by you a lot of things.

[@AsmrProg]

🙏❤️

[@Mani_shkr]

Thank you for creating easy way coding like abcd..... Had a lot of fun in this Project 😍😍

[@channel-rn6jr]

i'm coding and learning with you while watching. I miss letters and some erros appears 😂😂 and I searching for the error for resolve it, that's fun and I learn a lot of things with you! Thank you so much! I will watch your other videos for make more content and learn!

[@AsmrProg]

Thanks a lot, keep going on 😉❤️

[@simplev2204]

wow got to know 2 new features background and glass effect of vs-code thanks man

[@Ali_Ahmed_Yousuf]

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.

[@Cuts-PrimeTv]

I have only one thing to say: It's Amazing! please, continue the good job

[@AsmrProg]

🙏❤️

[@MR.ZEUS.YOUTUBE]

Wooow, what a project, can't wait to watch full video

[@AsmrProg]

🙏❤️

[@SamoyiddinSirojiddinov]

juda ham zo'rakan meng ayoqdi ishizga omad bundanham zo'r sayt qiling 😎

[@xbeast7585]

Your Programming Skills Are Incredible 🔥

[@AsmrProg]

Thanks 🙏

[@azizbekyusupov8864]

yes

[@AsmrProg]

@azizbekyusupov8864 🙏❤️

[@mobaildigiha-sv1cb]

Watching your vedios , always give me best vibe🔥🙌🏻

[@zohidjonmarufov2008_]

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!!!!

[@AsmrProg]

Hi, it’s great to hear that 😉 keep going on and don’t worry 🙏❤️

[@jaystrugnell]

Lovely stuff, looks great!

[@AsmrProg]

Thanks a lot, i will be happy if you like it 🙏❤️

[@shooter8262]

Wow!what a design and coding real impressive ❤❤

[@AsmrProg]

Thanks 🙏

[@kiromi8255]

Life saver, and learn alot from you thankyou, you deserve a sub n like

[@mtehamazento2767]

Thanks man ♥ keep going!

[@AsmrProg]

🙏❤️

[@NessHypegaming]

bro is a god send for posting the repo!

[@AsmrProg]

Thanks 🙏❤️

[@olwi1]

Bro... You're insane thk u so much. Im learning coding and your videos is helping me.

[@AsmrProg]

🙏❤️

[@wayagas-ol6kh]

your my inspiration❤ thanks for sharing broooo

[@AsmrProg]

🙏❤️

[@the-khutinati-tech]

Awesome!

[@AsmrProg]

🙏❤️

[@zzz_yvy]

ur videos ar awesome and i try to learn all of this by mysef and you are my motivation. love u from Uzbekistan

[@AsmrProg]

Thanks a lot 🙏❤️

[@justrocketscience9930]

Thanks! Super helpful

[@AsmrProg]

Oh bro, I saw your donation, thanks a lot ❤️❤️😍😍

[@erni6465]

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

[@AsmrProg]

Hi bro, thanks 🙏 currently working in a complete course for web development 😉❤️

[@NinTheLost]

this is huge, thank you, you help aspiring programmers a ton @@AsmrProg

[@precious_reads]

That sounds so awesome

[@AsmrProg]

@precious_reads8552 🙏❤️

[@nicolastesla8791]

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 👍

[@AsmrProg]

Thanks a lot 🙏❤️

[@sajad2122]

یا خدا باورم نمیشه که یک ایرانی صاحب این چنله ماشلا دمت گرم پسر

[@Liquid_Stone_]

Oof that's an akko 5075b dracula castle. Love this keyboard

[@Josselfx]

good video man, i like how do u this, thanks for making this kind of videos!!!

[@AsmrProg]

Thanks 🙏❤️

[@billychau523]

Omg. Bro. That is a great video. please keep going

[@AsmrProg]

Thanks 🙏❤️

[@ryzeno528]

Hey ! your work is insane bro !! thanks. Btw waiting for #2 of Portfolio design :D

[@AsmrProg]

Thanks 🙏❤️

[@pauljustineposas1846]

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 :)

[@FactsSolver]

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.

[@AsmrProg]

Hi, yes in new video i did it, but in this code i want show how we can do it with js 🙏

[@FactsSolver]

i like your coding style.@@AsmrProg

[@AsmrProg]

@FactsSolver 🙏❤️

[@melroijohnlardizabal]

Nice!

[@AsmrProgReact]

awesome tutorials so helpful

[@AsmrProg]

Thanks 🙏❤️

[@Glazovikovirizatel]

Great content!

[@AsmrProg]

Thanks 🙏❤️

[@raponduty]

Wow ❤

[@AsmrProg]

🙏❤️

[@aj.edits1356]

Bro 😭 the day I'll learn to code like you, I'll conqueror the world 😭 love you teacher 🙏👑😍

[@AsmrProg]

Thanks so much, Keep going on 🙏❤️

[@skrrrzu]

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?

[@AsmrProg]

Hi, we will have complete websites soon 😉 auto reloading is live server extension 🙏

[@user-ul7so1lk2k]

I want to be a great web developer like you.Good Job Brother

[@AsmrProg]

Thanks a lot bro 🙏❤️

[@kyur5258]

you are the best thank you

[@AsmrProg]

Thanks 🙏

[@thunderzid]

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!

[@AsmrProg]

Thanks so much 🙏❤️

[@supercallous]

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

[@AsmrProg]

Thanks a lot, i will check it 😁❤️

[@DevHubAsmr]

Nice design bro 🎉

[@AsmrProg]

Qalb 🙏❤️

[@celashinkof]

دمت گرم

[@darkminops4505]

Magnificent programming skills, may I know the model of the keyboard in the video?

[@douaabousnina]

keep it up !

[@AsmrProg]

Thanks 🙏

[@Millinus]

I doubted my knowledge but when i watched this the fact that I understood what you were doing gave me confidence, keep it up🫰🏻

[@AsmrProg]

Thanks 🙏❤️

[@justohechim4822]

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!

[@AsmrProg]

It’s a great advice 🤔 we will have it 😉 added to plans 🙏❤️

[@Aman_yadav1419]

Hey need a proper video for complete portfolios website... And your work is amazing .. Keep it up 😊

[@AsmrProg]

Thanks 🙏❤️

[@aha9088]

آقا رضا🔥

[@AsmrProg]

Hi, please write in English 🙏❤️

[@NoobsJourneytoWebDev]

it it so cool website. i have made it for my portfolio website.

[@AsmrProg]

Great 😉❤️

[@enricosarmiento2414]

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!

[@spectronewcastro]

Thanks 🙂🙂🙂😁👍👍

[@AsmrProg]

Please like and share 😉🙏❤️

[@makibar-wh6qc]

wow, you are very good to code

[@AsmrProg]

Thanks 🙏

[@akhiraheemm]

Hi there! I love your theme and VS Code appearance. Can you make a video about it? Thanks! Appreciate it!

[@AsmrProg]

Hi, please check my GitHub, there is a repository about all of my vscode settings 🙏

[@user-sn7rp6yy7l]

داداش کارت درسته

[@CodeWhispersASMR]

Nice video!

[@AsmrProg]

🙏❤️

[@cosminalexandruantili2169]

monster

[@AsmrProg]

🙏❤️

[@RedKatGaming_orig]

HONEY WAKE UP NEW ASMR PROG VIDEO

[@The_sky220]

I know

[@AsmrProg]

Like video please 🙏❤️

[@AsmrProg]

Like please 🙏

[@arianpv3386]

چاکر حاج رضا

[@AsmrProg]

🙏❤️

[@patriknekola7343]

Nice video ... very good :) :)

[@AsmrProg]

🙏❤️

[@JerkDoe]

Love the content, how about a personal finance application using bank apis? If you already have this, then link the video!

[@AsmrProg]

Hi, our bank accounts are different! So I can’t do it!!

[@FabianoPseara]

Where do you get your images bro??? You are incredible, i hope to stay like this one day🙏🙏

[@AsmrProg]

Hi, search for illustrations 😉🙏

[@BruProg]

wow, you're very good programmer ❤

[@AsmrProg]

Thanks 🙏

[@kylegamingyt4422]

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 :)

[@AsmrProg]

Thanks, it’s screen recorder effects!

[@kylegamingyt4422]

@@AsmrProg ohh, how about the transparent thingy?

[@AsmrProg]

Glassit extension

[@twixz4883]

I'm curious as to how you programmed your keyboard knob for scrolling

[@AsmrProg]

With it’s software 🙏

[@mitikouman7581]

arzoye movafaghiat bishtar mikonam barat ❤💥👌

[@AsmrProg]

🙏❤️

[@mitikouman7581]

pashmam irani hasti 😍😍 damet gaaarmm kheili chanelt khobe ❤❤

[@AsmrProg]

Thanks, please write in English 🙏❤️

[@mitikouman7581]

ok bro ❤@@AsmrProg

[@AsmrProg]

@mitikouman7581 ❤️❤️

[@titrersin]

nice video

[@AsmrProg]

Thanks, please like video 🙏

[@titrersin]

I liked the video @@AsmrProg

[@AsmrProg]

@titrersin Thanks 🙏❤️

[@Xardimods]

Nice Portfolio! I have a question about your VSC Themes. What theme do you use for the opacity or transparent effect?

[@AsmrProg]

Hi, it’s glassit extension 🙏

[@Xardimods]

@@AsmrProg Thahk you very much!!

[@AsmrProg]

@Xardimods 🙏❤️

[@APM_Nukii]

@@AsmrProghey, do you know if there is one for Mac?

[@AsmrProg]

For mac no!

[@shaimeur]

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!!

[@AsmrProg]

Hi bro, it’s great to hear it, what you mean about design?! Source code?!

[@shaimeur]

I mean the high fidelity ux design or just a screenshot of the complete website@@AsmrProg

[@AsmrProg]

Oh ok, send message in telegram, link on channel about page, i will send full screenshot 🙏

[@shaimeur]

thanks buddy!@@AsmrProg

[@AsmrProg]

@shaimeur 🙏❤️

[@ar_besharati]

❤❤❤❤❤❤ nice vary good ❤❤❤❤

[@AsmrProg]

Thanks so much 🙏

[@ignaciotabilo709]

Hello, what VS extensions do you use so that it has transparency.

[@AsmrProg]

Hi, this one is glassit extension 🙏

[@rusvis]

Why links in bar dissappeared when u changed size of the window?

[@AsmrProg]

Hi, because of responsive!

[@user-gu8hd3tj7q]

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! ✌

[@AsmrProg]

Yes, i want audience see result when i want!

[@JaykeeM8]

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

[@AsmrProg]

Thanks a lot, it’s just need you do some projects step by step with videos, then you can create what you want 😉🙏

[@speedy6431]

Hey what extension do you use that shows the errors and stuff in css?

[@AsmrProg]

Hi, it's error lens extension 🙏

[@tryhardsohard11]

Bro what theme did you use in this video? Very cool content, gives motivation to learn to make up too)

[@AsmrProg]

Thanks, it’s Ayu theme 🙏 please like video to support me ❤️

[@mateorodriguezg]

Cool man! Tell me, which theme do you use in VS Code?

[@AsmrProg]

Hi, please check my GitHub, there is a repository about all of my vscode settings 🙏

[@soulff_]

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 😅)

[@AsmrProg]

Hi, this video's are just design, when we go on backend coding i will show how you can code SEO friendly sites 🙏

[@rnz4974]

Amazing video bro, what's is theme of studio ?

[@AsmrProg]

Hi, please check my GitHub, there is a repository about all of my vscode settings 🙏

[@andr4d383]

What font do you use as VS Code setup?

[@AsmrProg]

Hi, Cascadia Code 🙏

[@bradleybard1558]

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.

[@AsmrProg]

Hi bro, courses and youtube!

[@bradleybard1558]

@AsmrProg Thanks alot much appreciated

[@AsmrProg]

@bradleybard1558 🙏❤️

[@freezycq]

⁠@@AsmrProgCan you tell me how did you get the image to appear by adding a background color at like 5:50

[@AsmrProg]

@freezycq because image and background color was same, when we change bg color, we saw image 🙏

[@nguyenhuyhoangk18hcm37]

I think that you can use copy html to CSS tool because it takes safe time when you make the CSS

[@AsmrProg]

I have it’s extension!

[@devboy6960]

به به اقا رضا کارت درسته راستی چطوری این کیبوردت انقدر خوش صدا هستش ؟

[@blacktigerboss7814]

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.

[@AsmrProg]

Hi, please check my github, there is a repository about all of my vscode settings 🙏

[@amiltonscjunior]

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?

[@AsmrProg]

Hi, did you checked my source code?!

[@minrex_5810]

Hi ! I have a question, what is your extension for the cursor, he's beautiful ? Thanks

[@AsmrProg]

Hi, it’s screen recorder effects!

[@minrex_5810]

@@AsmrProg No, I'm talking about your cursor when you type on visual studio code

[@AsmrProg]

@minrex_5810 oh it’s cursor effect from vscode settings!

[@minrex_5810]

@@AsmrProgNice Thanks !

[@AsmrProg]

@minrex_5810 🙏❤️

[@drizzylol1901]

what extensions do u use on vscode

[@AsmrProg]

Hi, please check my github, there is a repository about all of my vscode settings 🙏

[@drizzylol1901]

@@AsmrProg Hi thanks for responding so quickly i just wanted to know how do u have the smooth typing thing im not sure how to explain it but like when u type theres a animation and it looks cool

[@AsmrProg]

@drizzylol1901 also in that repository i wrote about it 😉

[@HunterWatson12756]

Could you do this but using react as well?

[@AsmrProg]

Yes we can do it but react tutorials in the future, because we find out that most of our audience are beginners!!

[@user-sz4lb4ce7i]

Hello! teacher! What screen recording software are you using?

[@weisongtey3079]

Hi! Your video contents are amazing! But I'm more curious your visual studio code settings, can you share me about that? Please!

[@AsmrProg]

Hi, please check my github, there is a repository about all of my vscode settings 🙏❤️

[@weisongtey3079]

@@AsmrProg Thanks mannnnn

[@AsmrProg]

@weisongtey3079 🙏❤️

[@HuyNguyen-lv5sy]

what switch does you choose?

[@godking1004]

How find this pointer for the mouse?

[@AsmrProg]

Hi, it’s screen recorder effects!

[@maskedman0677]

Love your works ❤ and can you help me with connecting the payment?

[@AsmrProg]

Thanks, for payment we will have it after backend tutorials 🙏

[@maskedman0677]

@@AsmrProg ok thanks 🔥

[@AsmrProg]

@maskedman0677 🙏❤️

[@nut_anime]

how u got that cursor trail/trace

[@AsmrProg]

Hi, it’s screen recorder effects!

[@jorik_turaev]

bro how to addmouse cursor backline as yours? Please, tell me bro, I want that!

[@maciejhancyk5150]

What are u use a style in VSC ?

[@AsmrProg]

Extensions?

[@maciejhancyk5150]

@@AsmrProg Extensions and style you use, I really like the background and colors, which is very much

[@AsmrProg]

@maciejhancyk5150 check my github, there is a repository about all of my vscode settings 🙏

[@ewaddd]

how to make errors highlighted, example: 'property value expected', 'do not use empty rulesets'

[@AsmrProg]

Hi, with error lens extension 🙏

[@ewaddd]

@@AsmrProg ty

[@AsmrProg]

@muffinz3687 🙏❤️