Create A Portfolio Website Using HTML and CSS Only - Easy Tutorial

Create A Portfolio Website Using HTML and CSS / Portfolio Kaise Banaye / portfolio website html css
In this video we are going to Creating a personal portfolio website is essential for showcasing your skills and projects to potential employers and clients. In this tutorial, we will guide you through building a responsive personal portfolio website using HTML and CSS. We'll cover everything from designing a visually appealing portfolio website with HTML and CSS to incorporating JavaScript for enhanced interactivity. Our step-by-step portfolio website tutorial will ensure your site is functional, attractive, and responsive, looking great on any device. By the end, you'll have a fully functional, responsive personal portfolio website that highlights your work effectively. Whether you're a beginner or refining your web development skills, this comprehensive guide is perfect for creating a portfolio website that stands out.
Click Here for Complete Website : • Create A Responsive Po...
🔥🔥🔥🔥👇👇👇👇👇👇👇🔥🔥🔥🔥🔥🔥🔥
This Video Like Aim:
Like Aim :- 7000 likes ❤️
Google Drive Link :
drive.google.c...
🔥🔥🔥🔥👆👆👆👆👆👆👆🔥🔥🔥🔥🔥🔥🔥
---------------------------------------------------------------------------------------------------------------------------------------
Links Used in this Video👇:
⚠️Note⚠️: Use Angular Brackets before and after the given code
In head Tag:
link rel="stylesheet" href="cdnjs.cloudfla..."
In CSS File:
@import url('fonts.googleap...
---------------------------------------------------------------------------------------------------------------------------------------
👇👇🫶Follow us on🫶👇👇:
❤️😍Join Our Telegram Group😍❤️
t.me/procoder09
📂follow us on github
github.com/rit...
📷 Follow us on Instagram
/ procoder09
🌏Visit our website
procoder09.blo...
▶ Subscribe Our Channel
/ @procoder09
Any Paid Promotion or Collobration mail me : [e-mail]
Thanks to :
‪@code‬ ‪@codewitha‬ ‪@CodeWithHarry‬ ‪@ProcoderBD‬ ‪@procoder09‬
#portfolio #frontend #webdevelopment

[@procoder09]

👇 Here's the full portfolio website. 👇 kzbin.info/www/bejne/rqWuZmqpa7aBaJosi=Ks_dIl7cmuUyT7-g Like, share, and comment your opinion. Don't forget to subscribe and support our channel!

[@kiyaaannnqttt]

nice keep up to good work

[@procoder09]

@@kiyaaannnqttt thanks

[@jasiayounus4328]

This is by far the best video i have ever seen dayum 🔥🔥

[@procoder09]

just wait few hours , you will get the full website of this landing page

[@Successfulmotivation943]

hey thx bro , im also learning web developing and watching your vids inspire me and I can learn a lot from u ❤

[@procoder09]

oh that's sounds great ❤

[@anime0903]

Looking Crazy🤩

[@procoder09]

@@anime0903 thanks 🥹

[@juanse3279]

Brother, your video saved many things for me. You are the best. It was for a school project, but brother, you are the best. Thank you. Thank you. I send you a like and a hug, my brother.

[@procoder09]

@@juanse3279 oh that's great, I just want everyone to support the channel and show their presence in upcoming videos also and nothing else

[@MOHAMMEDKHALANDER-g1c]

Superb and fantastic ever, too much appreciated 👏 💐 🥳

[@procoder09]

Thank You🔥

[@jamesHetfield344]

Thankyou cudie

[@bekam4441]

bro casually made a fireeeeeeeee website

[@JonathanPathmakumar]

The final project is my favourite part!!!

[@youreditorrrr]

stud tutorial bro hats off

[@procoder09]

Thanks

[@LaoWangBesideU]

Amazing project! I learned a lot from this video!

[@procoder09]

Thanks and by the way today i will upload full website of this portfolio, be ready

[@herambshete7708]

hey man thank you so much for this video appreciate it

[@procoder09]

Glad you liked it

[@concaeditz]

Amazing 🙉💙

[@procoder09]

Thanks ❤️

[@Timelessguy01]

Cool

[@procoder09]

Thanks

[@user-rf6qr1gt3x]

Absolutely mindblowing

[@procoder09]

Thanks ❤

[@mxxxio]

Nice design

[@procoder09]

Thanks❤

[@DailyUpload-ox5jz]

your contents are outstanding 🔥🔥 ❤Whoever agrees with me please like❤

[@procoder09]

Thanks for supporting me

[@abdulmuiz_almuayyad]

This is fire. Top content fr

[@procoder09]

Thanks

[@meemeeki]

Looking 👀👀👀👀

[@procoder09]

are you stuck while watching😂😂

[@procoder09]

if you like this video please support our channel here: UPI ID: ritesh.r3@paytm

[@Tensen_450]

sorry but I have another question, how do you combine the css and html file so that when you launch it, it launches both and not just the html?

[@procoder09]

@@Tensen_450 link the css file with html in head section

[@ProgrammerSushant49]

Which extension did you use to show the website in mobile and ipad view??

[@procoder09]

@@ProgrammerSushant49 That's mobile simulator

[@xo-yq1504]

Where do I get the img

[@officialchimkandi-qm5cw]

Bro you are such a pro coder you will made a responsive website wow bro vese agar ham apne dwara banai gayi website ko dekhna chahte hai to kaise karenge

[@procoder09]

You want to make it live

[@SRYPlayz]

thanks for learning i make it by your video thanKyou

[@procoder09]

@@SRYPlayz welcome

[@musicbeats0307]

That's look awesome

[@procoder09]

@@musicbeats0307 ✨✨

[@manojbadiger2324]

Wow super bro. 🎉🎉

[@procoder09]

@@manojbadiger2324 thankyou

[@mycookbook-13]

appreciated

[@procoder09]

Thanks bro

[@sidgaming3046]

Nice tutorial 🙌

[@procoder09]

Glad you liked it!

[@amithbhandarkar212]

bro loved it !!!

[@procoder09]

@@amithbhandarkar212 ❤️❤️

[@MamadouBA-k9o]

I appreciate that

[@procoder09]

Thanks

[@cytrus3670]

nice work man!

[@procoder09]

thanks bro

[@jilreaypa]

good👍👍

[@procoder09]

Thanks

[@siddheshkasar2643]

Great bro ❤

[@procoder09]

Thanks

[@amitarora6422]

It's not professional , but looks amazing , i will try with react

[@procoder09]

good, it can help you in learning new things

[@manojbadiger2324]

Super

[@procoder09]

Thanks

[@rocki_0161]

On mobile you don't have the navbar to navigate to other links. Btw nice video, love it

[@procoder09]

i have correct it in the new video go and check the latest portfolio website video

[@lubababintaabubakar1718]

Thanks

[@procoder09]

@@lubababintaabubakar1718 wlc

[@minhinhxuan1224]

That's look awesome! But how to display nav in mobile and tablet?

[@procoder09]

@@minhinhxuan1224 I have uploaded many videos so go and check it out

[@asurajjondhale8557]

Ye meri pahili video hai jo speed kr kr ke dekha hai 😂🌚

[@procoder09]

ok i will make short videos from next time

[@angleammuluu1209]

So nice🎉❤

[@procoder09]

@@angleammuluu1209 thanks ❤️

[@dazmarkjomel4572]

Imma try this on figma

[@procoder09]

Ya sure

[@akhilraju721]

Crazy

[@procoder09]

Thanks ❤

[@akhilraju721]

I have doubt @procoder09

[@procoder09]

@@akhilraju721 yes

[@akhilraju721]

@@procoder09 how to change Designation automatically like web developer,youtuber.

[@procoder09]

@@akhilraju721 i am uploading a video tomorrow between 8:30 to 9:30 pm, you will get the same animation you want, so just wait until then

[@chinmayalegend]

Bro add voice over also that will help us to understand easily

[@procoder09]

@@chinmayalegendI will sure in next video

[@abbysteinmindset]

you're a genius!

[@procoder09]

ThankYou for this complement

[@bolaakinjola8204]

hmm wow! this is nice how do you do this with html and css only i thought you will use javascript d way it look it look like u used javascript

[@procoder09]

i try to provide simplest way of coding and easy to understand and also for animation i used that's a github repo

[@bollywoodkol783]

brother suggestion make a distance between header, paragraph, icons & button

[@procoder09]

ok i will remember it

[@theriseofbruno]

It's amazing brother, subscribe at first sight 😂❤,, bro can you create a html bday template for crush 😹🎉 10 sep se phle please bro bana k vid upload kr dena 😢

[@procoder09]

ok bro, i will try only for you and your love, if the video is not possible then i will share you source Code personally

[@mouhamedsylla4841]

great !!!!.Please what is the extension you're using to view the responsiveness ?

[@procoder09]

It's a mobile simulator chrome extension

[@josueariza605]

Excelente video bro. Cómo te va con Javascript? Por cierto, dónde aprendiste a hacer todo esto?

[@procoder09]

@@josueariza605 from KZbin and a lot of practice

[@hsprince14]

cool dude, Please create a animated cool stylish portfolio website with some pages, PLease bro I need a source code of that for my portfolio. And yes you've get a new SUBSCRIBER. Take love.

[@procoder09]

@@hsprince14 I will create and welcome to your KZbin family

[@KakashiJod-._-123]

YOU MAKE A REALY GOOD ONE BRO BUT I HAVE A QUESTION WHAT DID YOU in that time 3:30

[@procoder09]

@@KakashiJod-._-123 I just copy the link of icon and paste it

[@OghenefegaOmajene]

Nice video, but please could you tell me how you enabled that feature in your browser that allowed you to change between different phone sizes. I really need it.

[@procoder09]

It's a chrome extension - mobile simulator

[@codewithskills1470]

Hey Which google extension you use for responsive prototype means mobile or vice versa

[@procoder09]

Mobile simulator

[@athaliahkisochi3443]

My best part is when you add animations in the css file. really good

[@procoder09]

@@athaliahkisochi3443 I love animation also 🫡 because it makes the website on other level

[@theinsanetuber1695]

its really nice but you didnt did anything in services, skills, education part. what about that?

[@procoder09]

I will create that in a few days

[@artasamjaved9827]

Awesome brother, I want to ask you something that , im learning css and js How can i make my basics strong .. mostly css..

[@procoder09]

A lot of practice and try new things

[@pratham_patel2410]

which extention are you using for checking in different devices?

[@procoder09]

i use mobile simulator extension

[@Tensen_450]

hi, I really liked your video but I can't get the different logos to appear like linkedin for example, I looked carefully, no syntax errors, thank you:)

[@procoder09]

@@Tensen_450 you have to check the link that I used in head section and also you internet is required to visible the icons

[@Tensen_450]

@@procoder09 What is the link ?

[@Tensen_450]

@@procoder09 ohhhh ok i see the link but but where can I find it pls:)?

[@procoder09]

@@Tensen_450 in description

[@Tensen_450]

ok its good, i did not see the link but i juste saw it in commentary thks

[@abidsaifullah48]

hey bro what is the extension you used to see the m mobile & laptop version of the website ?

[@procoder09]

It's a chrome extension mobile simulator

[@125mohammadfaizullah9]

plzzz tell the extension u used for changing screen sizes

[@procoder09]

It's a chrome extension mobile simulator

[@idkyou7129]

Hi bro, Loved your work I want to create a portfolio website to apply for an internship, I don't know much about it ....I saw in a video about domain & hosting, if I want to share the link of the portfolio like you created, is it possible? Please do answer, Thanks in advance

[@procoder09]

Yes you can if you want to host your website for free, you can visit GitHub otherwise you have to buy a domain

[@amzadhossain3171]

i have a question , why don't you use bootstrap in this website ? It would be easier if you use bootstrap.

[@procoder09]

Because many of the users don't know about bootstrap here, so I want them to know the easy way to solve it and most of them know css

[@lazyonii-chan3885]

What is the name of the extension simulator that youve used ?

[@procoder09]

Mobile simulator

[@sharan1865]

bro can i have import of social platforms buttons link

[@procoder09]

@@sharan1865 link in description

[@umeshkumavat9523]

which extension have you used in last to see in mobile , tablet and desktop view can you tell me that extension name and btw where i can learn css like you please tell me

[@procoder09]

Extension name is "mobile simulator" and I have learnt css from KZbin 😁😁

[@umeshkumavat9523]

@@procoder09 bro but From which channel you learn css give me that channel name

[@procoder09]

@@umeshkumavat9523 i just learn the basics from here , i think apna college but the main point i learned is to create the project and you will learn more than tutorial

[@lubababintaabubakar1718]

Hey what do u wrote for social icons ???

[@longoan5433]

what extensions you use in video to review all website interface?

[@procoder09]

Chrome extension - mobile simulator

[@footvidd]

i have a proplem 2:40 i cant put main pic i install a pic from a web but it dont work!

[@procoder09]

@@footvidd check the image path

[@kutakirosato7659]

where do you get that logo from? How did you put it in using just code?

[@procoder09]

i created it and style it

[@AnnoyingCat06]

what is the other device viewer extension called??

[@procoder09]

mobile simulator

[@Life-ts8sp]

when ever i go Fullscreen my text go to the bottom of the picture why is that?

[@procoder09]

@@Life-ts8sp check your use position absolute

[@user-sq3hm7jw6t]

I need your help whenever I pasted the picture like this 2:40 mine doesn't pop out is there any solution to fix that problem? I am also having alot of problems here about adding the logo or link to an app 3:44 It doesn't popped up in my website is there a way to fix it ?

[@procoder09]

for this 3:44 problem you can check out this video, i have added the timline then you will get to know how i added the icons to my website each step. and for the 2:40 i think there is some path error or you image has other format (means check the path and name of your image)

[@JimmyRichmond-mn4nz]

Please may i know how you get the responsive android smartphone

[@procoder09]

its a chrome extension - mobile simulator

[@xaea11s]

what extention do u used to have that phone view?

[@procoder09]

Mobile simulator

[@ayan_codes74]

how you added the media queries directly ? give name of the extension.

[@procoder09]

Mobile simulator

[@andyl9920]

Question. Y do most tutorials ive seen on yt uses ul and li up in the nav section? R u saying it is okay to just use the anchor tag?

[@procoder09]

@@andyl9920 no, there is no specific need to use ul and li and this tutorial is beginners

[@ANIMEEATOMICBOMBB]

can i know how you got that "change device" option?

[@procoder09]

@@ANIMEEATOMICBOMBB it's a chrome extension "mobile simulator"

[@adamsakallh1666]

Bro ,what is the name of the add-on that makes the phone appear like this?

[@procoder09]

That a chrome extension - mobile simulator

[@TechVerseGambia]

what extension fo you use to create those mockups ?

[@procoder09]

It's a chrome extension - mobile simulator

[@akashrahman9010]

What is the software you have used to see the responsiveness of the website on different devices? Can you please tell me?

[@procoder09]

It's a mobile simulator chrome extension

[@RUNWITHRAMU]

How to get source coad

[@procoder09]

Link in description

[@BenzBlox]

Sir, how can i change my local web to be public? . Because i have tried to change in public with Github and replit. But nothing happened, result is error

[@procoder09]

Go to settings and then pages of that repo after that move to root and set to main and save it after 3-5 min again go to pages and at the top check the link has been generated then copy it and use it where you want

[@riteshranjan7493]

its so attractive

[@procoder09]

oh i see

[@pavlo_prokopiuk]

What is the name of the extension you use to view the mobile version?

[@procoder09]

It's a chrome extension - mobile simulator

[@pavlo_prokopiuk]

@@procoder09thank you very much)

[@moonlightbae1136]

Please I want to create a site with a bar where the user writes the word and gets a page with a photo or a word associted to the input and each time they put a word they get different content depending on the word they write. For more explanation I want to create a site similar to Udixia book puzzle site. Does this work

[@procoder09]

Ok

[@Ankur21612]

How you host this website please full tutorial I did't know please

[@procoder09]

@@Ankur21612 ok I will try to create

[@tfmninbabasi]

bro what is your vscode font -family is it default?

[@SRR4I]

if i learn on w3shcool about css and html , will i be like you when you coding

[@procoder09]

@@SRR4I depends how much time you give and try to make project and solving error on your own

[@mazitor10]

Source code

[@procoder09]

Complete Task (check description)

[@Gabbbbyyyyy]

What is the purporse of @import url? I don't know this One 😅😅

[@procoder09]

@@Gabbbbyyyyy it use to add Google fonts

[@Gabbbbyyyyy]

@@procoder09 permission to use it please

[@jamesgaming901]

How should i add a image making same code using

[@procoder09]

just change the image src to your image src

[@JyotiskaBiswas-zl1fh]

can you please say the name of the extention used in the beginning of the vedio

[@procoder09]

Ya sure it's mobile simulator

[@tohakhan2877]

Brother, can you tell me, your chrome extensions name that you used for check responsive. please

[@procoder09]

@@tohakhan2877 mobile simulator

[@tohakhan2877]

@@procoder09 thank you

[@سكايتو]

let me know when the source code avilabale

[@procoder09]

@@سكايتو ok

[@DailyUpload-ox5jz]

check bro, its available now

[@InnaKhan-rf8pf]

How to get your icon link please tell me

[@procoder09]

Link in description

[@saideekshith9804]

can you please tell how to get those icons??

[@procoder09]

just go to description and copy the link and then paste in your head section

[@SAPTHAGIRISHDR]

How is the font awesome icons are imported in the Code what is the extension and how we can use it

[@procoder09]

I will provide the link in the description soon

[@riteshranjan7493]

If you watch the previous video, you will learn how to implement Font Awesome icons. He uses them in every video and shows us step-by-step how to use them.

[@Itsz_arya]

Where to learn html,css, and js ? Books recommendations; plz

[@procoder09]

I can suggest you a KZbin channel for that because I also learn all these from KZbin - @codewithharry

[@Itsz_arya]

​@@procoder09 Thanks ❤, bro.

[@ana_habibi]

please tell me how can i add my details in skills ,education and experience section.How will i make it fully functional

[@procoder09]

Just remove the overflow hidden from the body

[@sebyyyyyiii]

can i see the full screen of the vs code? so i can try it on my own

[@procoder09]

What you want to try

[@demongamer6677]

Is it possible in mobile Cuz no laptop

[@procoder09]

yes sure, use editor