Design a portfolio website using Bootstrap HTML and CSS / Bootstrap Landing Page

Подписаться 8 тыс.

Просмотров 124 тыс.

50% 1

Design a portfolio website using Bootstrap HTML and CSS / Bootstrap Landing Page
Demo Shots: dribbble.com/a...
📙Topics Covered
✔️Google Fonts
✔️Bootstrap Installation
✔️Bootstrap Container
✔️Bootstrap Grid
✔️Sticky navbar on scrolling
✔️Bootstrap Scrollspy
✔️Line Awesome Icons Embed
✔️ And more
______________________________
👍 Recommended videos
▶️Build a Website Using HTML CSS | Start To End | Step By Step Tutorial
• How to make a website ...
▶️Design a hair salon website using html5, css3, and Bootstrap
• Build a website for a ...
▶️Design a premium template using HTML, CSS, and Bootstrap 5
• Design a premium templ...
▶️How to Make a Multipurpose landing template using HTML CSS and Bootstrap
• How to make a website ...
______________________________
💖Subscribe here:
- / @sa7man
______________________________
📂Download Project Files
- github.com/SA7...
📂How to download Project
- Click on the GitHub link
- Click the green Code button
- Download ZIP
- Save and extract
______________________________
💻Follow & Subscribe to us
- Instagram: / sa7man.khan
- Github: github.com/SA7...
- RU-vid: / sa7man
______________________________
📂Assets used in this video are from
- feathericons.com/
- Fonts: fonts.google.com/
- www.pexels.com/
- unsplash.com/
_____________________________
⚠️Disclaimer
Just for the time being, I did not use browser prefixes, If you wish to ensure cross-browser compatibility please use prefixes.
______________________________

Опубликовано:

10 сен 2024

Ссылка:

Скачать:

Готовим ссылку...

Добавить в:

Мой плейлист

Посмотреть позже

Комментарии : 128

@SA7MAN 2 года назад

Download Project github.com/SA7MANKHAN/joncarter-portfolio Quick Demo: selfpolio.netlify.app/

@thapis9192 Год назад

I did not know where to start with creating a portfolio using Bootstrap. Thank you so much for your brief explanation. Keep creating more videos

@amalkumar256 Год назад

I'm new to web development and I'm so lucky to have ended up on your channel. Stay blessed Salman.

@beksaylor Год назад

Thanks so much for the portfolio template. I am not a designer by any means, I was trying to but then I found your awesome video and I can't thank you enough. Now I can go back to focusing on my blog articles and coding projects.

@colonelshtepan647 Год назад

I am a 4th year student, and thanks to you I managed to make a working website and complete the study task, thank you! But there is a small problem: I followed step by step, as in the tutorial, but for some reason at the moment 56:39 it did not work out to make several columns from the elements. For me, for some reason, they all go 1 column down.

@SA7MAN Год назад

Columns should goes inside row class and row should be in container class.

@vividlypossible484 Год назад

If still not solved...chances are your bootstrap is not linked properly

@KaifKhan-di2rr 9 месяцев назад

@@SA7MANyes when we use bootstrap framework then we have to use container class then row class and then inside row class use col class it's rule of bootstrap...

@omotayomiracle707 2 года назад

Your videos have been so helpful to me...improved my skill on bootstrap... Thank you so much.more energy and knowledge.

@luckykathumo9461 Год назад

Successfully created my first projec. Thanks 🎉

@TravelerAbdulAlim Год назад

I finished this project. Thanks again.

@prinzybeats1735 2 года назад

Yet another Great Project!!!! More Energy. You are doing an excellent job. Your UI design is top level.

@jesusmartineznoda6595 Год назад

Thank you! My project looks great. It is my first time building a website and you made it a great experience. Can you make a video on how to make it public?

@ArtByGerrett 9 месяцев назад

You should watch a video on how to create a github repository, and upload your projects. Once you do that, there is a github pages feature what will allow you make your project public and shareable. I have sent one of mine to a work colleague to test how it views on a mobile other than my own. It worked!

@olive3024 Год назад

the aos.js script has to be put before your main.js script like above, otherwise the animation won't work! no, mine h1 heading just simply disappeared after I add the "data-aos='fade-up'".

@srijitbhattacharya6770 Год назад

Dude you earned my subscription. I wish you all the success.

@mahirkhan6664 3 месяца назад

attractive portfolio nice work

@IsaiahLove-go2kx Год назад

Thank you so much sir. This video got me through my 1st boot camp project!

@FavourOkeke-j6p 7 месяцев назад

Thank you for the video, concise explanation and easy to understand

@fritz3654 2 года назад

Thank you so much for your explanation, I've learned some bootstrap with your help.

@siddhanbaranwal6946 2 месяца назад

Great video Sir..❤ Can you teach me how you learnt designing because I always fail at that..

@ahsanmughal3806 2 года назад

Awesome 👍 Sir please make a multi page E-commerce website please

@tatashyam Год назад

Wonderful Explanation. Thank you very much. Practicing this tutorial. It is really very helpful for the beginners. Best wishes to you.

@SA7MAN Год назад

Glad it was helpful!

@tatashyam Год назад

@@SA7MAN I am getting an error in the home and contact section button. I am not able to see the button when I reduce the screen size to mobile resolution. Not able to find where I did mistake. CSS i checked each and every step you created it got matched but here button is not displayed on the small screens.

@easetellnetworks7201 Год назад

🔥🔥🔥🔥🔥🔥🔥🔥🔥🔥🔥🔥

@somebody1222 7 месяцев назад

Man this is crazy!

@muhammadtalha097 5 месяцев назад

Very helpful video Really appreciated Bro Keep it up Like it

@mufidhatulnafisa1841 10 месяцев назад

THANK YYOUUU, uwaaa aku kebantu bangetttt

@everestwolfie8421 Год назад

thanks very much man you just saved a soul

@NkangAnthony 3 месяца назад

i have had issues applying the scrollspy feauture please i need help

@mukamafrancois2776 Год назад

Thanks! We appreciate your hard work

@vividlypossible484 Год назад

The services part is not appearing in the center instead it's fixed at the bottom of the page....help me out please

@jeetsikder5912 2 года назад

Awesome congrats 🤩 bro... Love fom India ❤️🇮🇳

@SanjeevSharma-fi5qw 7 месяцев назад

Am gonna share this video

@mrfenix3542 Год назад

Hey Mate! Which Bootstrap course u r gonna recommend me on youtube and also which theme are you using in this video?

@sanamarnissi5444 4 месяца назад

Thank you so much😍😍

@TravelerAbdulAlim Год назад

Your explanation is charming. Thanks a lot.

@ArtByGerrett 9 месяцев назад

great Tutorial, however I used my own images but now the cards are different sizes in the Work Section. Is there a way to have them all the same size for uniformity?

@michellepoderanan Год назад

THANK YOU SO MUCH!! YOU ARE VERY HELPFUL

@chenmoasis 8 месяцев назад

Thank you for this amazing video! What do I need to do so the site is supported on mobile as well? I use netify to host it.

@jefoxop5700 Год назад

you made me your fan as well as a subscriber

@gamingweb09 11 месяцев назад

Where can I find the images used on this website since your github link is giving me a 404 error!

@dadi_vlogs3254 6 месяцев назад

thank you sir.

@AyushKumar-ih9xf Год назад

how to control the length of custom cards in the work section? they are not displayed with the same height for different images

@ArtByGerrett 9 месяцев назад

Did you ever figure this out. Im having the same issue.

@sibaff8141 3 месяца назад

Thankyou Bhai ❤

@sohampathak8173 Год назад

I am getting some error and my main.js file got erased automatically i can't understand what happened and tried a lot DevTools failed to load source map: Could not load content for localhost:5500/portfolio/assets/css/bootstrap.min.css.map: HTTP error: status code 404, net::ERR_HTTP_RESPONSE_CODE_FAILURE DevTools failed to load source map: Could not load content for localhost:5500/portfolio/assets/js/bootstrap.bundle.min.js.map: HTTP error: status code 404, net::ERR_HTTP_RESPONSE_CODE_FAILURE Do you know what can help??

@Hattrik94 11 месяцев назад

Great project. Thank you.

@rutabaga6126 Год назад

Thank you for the content! Do you use extensions in VS (bootstrap)?

@farukweb Год назад

nice.....portfolio........

@Mzati1 7 месяцев назад

Nice video, what extensions are you using for it to suggest the bootstrap classes

@josephcajocson4422 Год назад

It's okay if I just link the bootstrap 5 instead of downloading it?

@codecluster9772 Год назад

Good 👍

@dilanlasantha3744 9 месяцев назад

all the details shown as one column how to show it as double column

@aimanecouissi 2 года назад

Legend as always

@ariel66100 8 месяцев назад

Thank you bro!

@abiydema8124 Год назад

Quite helpful. Thank you.

@bhavinkanzariya2161 2 года назад

Superb sir

@zairoangelo9496 Год назад

Thanks for this I'm learning frontend design again, this is very helpful for me starting again, can i use this for my portfolio?

@SA7MAN Год назад

Yes you can!

@Fish-im5yc 2 года назад

keep them coming🔥

@batraktotonji1730 Год назад

can it be detected as plagiarism if i copied the code?

@tony266 Год назад

what a beast XD ty man

@thesleeptalker3714 Год назад

Thanks man.

@xFelipeM Год назад

lookin greattt

@vividlypossible484 Год назад

Aos is not working....please help me out..what could be the reasons

@SA7MAN Год назад

Do as I did. If still not working download the complete project from my github account.

@umairshah3115 Год назад

my collapse bar in the nav wont work, any reason why this might be the case?

@SA7MAN Год назад

Make sure to link Bootstrap JS

@rahidbu Год назад

Which font you use in your vs code that looks Awesome at the class and href element????

@SA7MAN Год назад

Operator mono

@alexmartin2796 2 года назад

hi! i have a problem, when i put the data-aos tag, it won't show anything. but when i remove the tag, it works.

@salmanparis7841 5 месяцев назад

Yes I have this problem.

@oluwolemoses9858 2 года назад

Pls can I also use this portfolio for my frontend web work.

@SA7MAN 2 года назад

Yes

@snehasharma6761 Год назад

@SA7MAN My CSS file effects are not reflecting I followed all the instructions for linking

@SA7MAN Год назад

Check the path to the css file. Make sure it's correct.

@snehasharma6761 Год назад

@@SA7MAN I did it's correct yet not reflecting I even checked that bootstrap is linked correctly but the it's not even bootstrap is not working like the navbar is reflecting as it does when there is only html plzz help even though I linked bootstrap and CSS plzzzz help

@SA7MAN Год назад

@@snehasharma6761 Intresting, View page source and then click on the link and see if it opens the file or not. If the file opens then you path to that file is ok.

@SA7MAN Год назад

@@snehasharma6761 Or you can download the project from my Github and compare your code. I hope will help.

@snehasharma6761 Год назад

@@SA7MAN ok I'll try and let you know

@himalayarajsinghjhala2668 11 месяцев назад

why the github link is not working

@sushreepreetilaxmi5606 2 года назад

At 10:53 ,then I opened the live servor my back ground does not change ..please help

@SA7MAN 2 года назад

Make sure the path to the image is correct.

@alexeysloty7812 2 года назад

I had the same issue. Its because I didnt link the css to the html Paste this into your index.html

@bishnuify1443 11 месяцев назад

15:08

@putraafiqi7493 Год назад

Terima Kasih

@reyaldi_5367 Год назад

lu berhasil kah bang?

@m.anasayub80 Год назад

how do you change your vs code font style? and also tell me that font name

@SA7MAN Год назад

Go to the setting(ctrl+,) and then you will see the font family where you can change the font. The font I've used is Operator Mono.

@felipecoutinho_ Год назад

what font do you use in vscode, for writing code?

@SA7MAN Год назад

Operator mono

@felipecoutinho_ Год назад

@@SA7MAN thanks, is this theme dracula? seems different from mine

@ulysseaudel1822 Год назад

if someone knows why my toggler button is not working, everything else is working perfectly .

@bishnuify1443 Год назад

1:18:58

@pandaytff2512 3 месяца назад

Can you give this ui desing 😊😚

@voldemort7585 Год назад

@PEGASUSOP Год назад

24:40

@f-s_interpreter Год назад

bootstrap 4 or 5?

@SA7MAN Год назад

@kamalsameh3338 Год назад

Can you please explain how the min-height works in bootstrap at 15:45? It centered the navbar on the screen instead of staying in the same place. Thank you for the tutorial.

@SA7MAN Год назад

(min-height: 100vh) In simpler terms, it means that the element will take up at least the full height of the screen, regardless of its contents. The "vh" stands for "viewport height". And the content is in the center because because we set display:flex,align-items:center, justify-content:center

@kamalsameh3338 Год назад

@@SA7MAN I looked at the tutorial and it seems we only set flex-lg-column on the whole navbar and there was no justify-items: center or align-items: center in css. Is it just default behavior of bootstrap when applying flex column?

@SA7MAN Год назад

@@kamalsameh3338 Those properties have been applied to the ".navbar" class by default which I have mentioned earlier. And When the "flex-lg-column" class is applied to an element in Bootstrap this means that the child elements of the element will be arranged in a vertical column on large screens.

@voldemort7585 Год назад

@user-cl7jq8hz5k Год назад

bro plz give me this project images

@SA7MAN Год назад

github.com/SA7MANKHAN/joncarter-portfolio

@SA7MAN Год назад

Link to the project also in the pinned comment

@user-cl7jq8hz5k Год назад

@@SA7MAN thanks mera bai love from bangladesh😍😍😍

@thedusbin6643 Год назад

The `navbar-dark` won't let custom `.navbar .nav-link { ... }` property to work. @20.10

@thehazelnut2960 3 месяца назад

Thank you so much for this awesome video, I'm currently doing this myself and i encountered a problem, after pasting the scrollspy code and typing the .navbar .nav-link.active the color doesn't stay changed when i click on home it seems like the link isn't active , what should i do?

@SA7MAN 3 месяца назад

In your syyle.css .navbar .navbar-nav .nav-link.active {...} I hope it will work

@user-cl7jq8hz5k Год назад

your github link is not working

@codecluster9772 Год назад

Good 👍

@SA7MAN Год назад

Thanks