ASMR Programming - Complete Responsive Portfolio Design - No Talking
HTML-код
- Опубликовано: 31 май 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 RUclips : @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
![KFF Singapore Badminton Open 2024 | Alfian/Ardianto (INA) [7] vs. Liang/Wang (CHN) | QF](http://i.ytimg.com/vi/g0QGafkoT2o/mqdefault.jpg)
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 😉❤️
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!
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 🙏
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!
Thanks a lot, keep going on 😉❤️
i've learned more by watching your videos and recreating the codes, than actually studying theory
thank you
Thank you for creating easy way coding like abcd..... Had a lot of fun in this Project 😍😍
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.
wow got to know 2 new features
background and glass effect of vs-code
thanks man
Watching your vedios , always give me best vibe🔥🙌🏻
Wooow, what a project, can't wait to watch full video
🙏❤️
Wow!what a design and coding real impressive ❤❤
Thanks 🙏
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 🙏❤️
I have only one thing to say: It's Amazing! please, continue the good job
🙏❤️
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 🙏❤️
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 🙏❤️
your my inspiration❤ thanks for sharing broooo
🙏❤️
bro is a god send for posting the repo!
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!
🙏❤️
awesome tutorials so helpful
Thanks 🙏❤️
juda ham zo'rakan meng ayoqdi ishizga omad bundanham zo'r sayt qiling
😎
good video man, i like how do u this, thanks for making this kind of videos!!!
Thanks 🙏❤️
Hey ! your work is insane bro !! thanks. Btw waiting for #2 of Portfolio design :D
Thanks 🙏❤️
Your Programming Skills Are Incredible 🔥
Thanks 🙏
yes
@azizbekyusupov8864 🙏❤️
it's shit literally
Thanks! Super helpful
Oh bro, I saw your donation, thanks a lot ❤️❤️😍😍
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!
🙏❤️
Great content!
Thanks 🙏❤️
Omg. Bro. That is a great video. please keep going
Thanks 🙏❤️
Nice!
Nice 👍🏻🙂❤
What is this extension that suggests what you can write? 8:18
bro how to addmouse cursor backline as yours? Please, tell me bro, I want that!
9:23 What did you use for that transparent background?
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 🙏❤️
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 🙏
I want to be a great web developer like you.Good Job Brother
Thanks a lot bro 🙏❤️
you are the best thank you
Thanks 🙏
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 🙏❤️
Nice design bro 🎉
Qalb 🙏❤️
Dá pra saber que o cara é BR só pelo teclado. Fez muito sucesso no Brasil, eu mesmo tenho um
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 🙏❤️
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 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?
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?!
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 doubted my knowledge but when i watched this the fact that I understood what you were doing gave me confidence, keep it up🫰🏻
Thanks 🙏❤️
Oof that's an akko 5075b dracula castle. Love this keyboard
یا خدا باورم نمیشه که یک ایرانی صاحب این چنله ماشلا دمت گرم پسر
Hello Manito! I’m a beginner in programming, I know how to solve code error issues but I have difficulty remembering some codes, could you give me a hint??
wow, you are very good to code
Thanks 🙏
Wow ❤
🙏❤️
Hey need a proper video for complete portfolios website... And your work is amazing .. 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 😁❤️
Hello! What did you use at the minute 5:41 to make the VSC transparent?
Hi, glassit extension 🙏
Thanks!
@edi50 🙏❤️
could you please tell me what was the shortcut did you used while you create nav - link??( class link )
Sorry?! What you mean!
Thanks 🙂🙂🙂😁👍👍
Please like and share 😉🙏❤️
it it so cool website. i have made it for my portfolio website.
Great 😉❤️
what switch does you choose?
keep it up !
Thanks 🙏
Nice video!
🙏❤️
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 🙏
Hello! teacher! What screen recording software are you using?
Can you tell me how can i get that cursor.....
Why links in bar dissappeared when u changed size of the window?
Hi, because of responsive!
Hey what extension do you use that shows the errors and stuff in css?
Hi, it's error lens 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 🙏
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 🙏
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!
what's the size of the logo you had? is it 500 in px's? hope to have an answer soon, thank you.
I'm curious as to how you programmed your keyboard knob for scrolling
With it’s software 🙏
Hello, what VS extensions do you use so that it has transparency.
Hi, this one is glassit extension 🙏
دمت گرم
Magnificent programming skills, may I know the model of the keyboard in the video?
Does anyone know what program they use to make the green circle on the mouse and the red line that follows the pointer?
Alguien sabe que programa usa para rl circulo verde en el mouse y la línea roja qur sigue el puntero
Hi, it’s screen recorder effects!
@@AsmrProg That's great, do you know of any program that achieves that effect in the day to day working with the computer?
@andrescastillo7544 sorry but no!
Anyway, thank you very much. Excellent video.@@AsmrProg
@andrescastillo7544 🙏❤️
Nice video ... very good :) :)
🙏❤️
Bro How to get circle around the cursor and that line following cursor?
Hi, it’s screen recorder effects!
Hello, I want to ask if I can put the text Copyright © 2023 on the template, even if I did not create the template ?
Yes but you can’t send copyright to anyone!
@@AsmrProgit gets confused... I'm Brazillian, what you mean "you can't send to anyone"?
If you just put it, so you aren’t main creator of it, maybe owner of template published it for free, so you can’t say anyone that your template need to be credited or have copyright!
Hi ! I have a question, what is your extension for the cursor, he's beautiful ? Thanks
Hi, it’s screen recorder effects!
@@AsmrProg No, I'm talking about your cursor when you type on visual studio code
@minrex_5810 oh it’s cursor effect from vscode settings!
@@AsmrProgNice Thanks !
@minrex_5810 🙏❤️
داداش کارت درسته
❤❤❤❤❤❤ nice vary good ❤❤❤❤
Thanks so much 🙏
hy @asmrprog all codes are work perfictly but the javascript is not working do you help me?
Hi, did you checked my source code?!
چاکر حاج رضا
🙏❤️
How did you put this line trail in the mouse cursor?
Hi, it’s screen recorder effects!
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!
monster
🙏❤️
How can i get a vscode like you?it can blur and i can see background behind
Hi, please check my GitHub, there is a repository about all of my vscode settings 🙏
How did he do this by placing the visual studio code in the middle of the screen but with less clarity?
Hi, with glassit extension 🙏
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 🙏
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!!
HONEY WAKE UP NEW ASMR PROG VIDEO
I know
Like video please 🙏❤️
Like please 🙏
which plugin makes VS code transparent?
GlassIt-VSC
Hi, glassit but sorry for late response 🙏
Thanks for answering 🙏
wow, you're very good programmer ❤
Thanks 🙏
آقا رضا🔥
Hi, please write in English 🙏❤️
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
How find this pointer for the mouse?
Hi, it’s screen recorder effects!