Design a portfolio website using Bootstrap HTML and CSS / Bootstrap Landing Page
HTML-код
- Опубликовано: 12 июн 2022
- Design a portfolio website using Bootstrap HTML and CSS / Bootstrap Landing Page
Demo Shots: dribbble.com/agensip
📙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/SA7MANKHAN/joncarter
📂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/SA7MANKHAN
- RUclips: / 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.
______________________________
![DRAGON BALL: Sparking! ZERO - Fused Warriors Trailer [BUDOKAI TENKAICHI Series]](http://i.ytimg.com/vi/84p4Lvyfyes/mqdefault.jpg)
Download Project github.com/SA7MANKHAN/joncarter-portfolio
Quick Demo: selfpolio.netlify.app/
Yet another Great Project!!!! More Energy. You are doing an excellent job. Your UI design is top level.
I'm new to web development and I'm so lucky to have ended up on your channel. Stay blessed Salman.
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.
Your videos have been so helpful to me...improved my skill on bootstrap... Thank you so much.more energy and knowledge.
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
Dude you earned my subscription. I wish you all the success.
Thank you so much for your explanation, I've learned some bootstrap with your help.
Successfully created my first projec. Thanks 🎉
Thank you so much sir. This video got me through my 1st boot camp project!
Thanks! We appreciate your hard work
thanks very much man you just saved a soul
I finished this project. Thanks again.
Your explanation is charming. Thanks a lot.
Awesome congrats 🤩 bro...
Love fom India ❤️🇮🇳
THANK YOU SO MUCH!! YOU ARE VERY HELPFUL
Thank you for the video, concise explanation and easy to understand
Thank you for the content! Do you use extensions in VS (bootstrap)?
Good 👍
Thank you bro!
Great project. Thank you.
Thank you so much😍😍
nice.....portfolio........
Legend as always
Man this is crazy!
Awesome 👍
Sir please make a multi page E-commerce website please
Quite helpful. Thank you.
Superb sir
you made me your fan as well as a subscriber
Am gonna share this video
thank you sir.
THANK YYOUUU, uwaaa aku kebantu bangetttt
Thankyou Bhai ❤
keep them coming🔥
what a beast XD ty man
Thanks man.
Hey Mate! Which Bootstrap course u r gonna recommend me on youtube and also which theme are you using in this video?
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.
Very helpful video Really appreciated Bro Keep it up Like it
lookin greattt
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?
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'".
Nice video, what extensions are you using for it to suggest the bootstrap classes
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.
Columns should goes inside row class and row should be in container class.
If still not solved...chances are your bootstrap is not linked properly
@@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...
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?
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!
Wonderful Explanation. Thank you very much. Practicing this tutorial. It is really very helpful for the beginners. Best wishes to you.
Glad it was helpful!
@@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.
🔥🔥🔥🔥🔥🔥🔥🔥🔥🔥🔥🔥
i have had issues applying the scrollspy feauture please i need help
Where can I find the images used on this website since your github link is giving me a 404 error!
The services part is not appearing in the center instead it's fixed at the bottom of the page....help me out please
It's okay if I just link the bootstrap 5 instead of downloading it?
Terima Kasih
lu berhasil kah bang?
can it be detected as plagiarism if i copied the code?
Thanks for this I'm learning frontend design again, this is very helpful for me starting again, can i use this for my portfolio?
Yes you can!
how to control the length of custom cards in the work section? they are not displayed with the same height for different images
Did you ever figure this out. Im having the same issue.
Which font you use in your vs code that looks Awesome at the class and href element????
Operator mono
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.
Yes I have this problem.
my collapse bar in the nav wont work, any reason why this might be the case?
Make sure to link Bootstrap JS
all the details shown as one column how to show it as double column
if someone knows why my toggler button is not working, everything else is working perfectly .
why the github link is not working
Pls can I also use this portfolio for my frontend web work.
Yes
15:08
At 10:53 ,then I opened the live servor my back ground does not change ..please help
Make sure the path to the image is correct.
I had the same issue. Its because I didnt link the css to the html
Paste this into your index.html
how do you change your vs code font style? and also tell me that font name
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.
what font do you use in vscode, for writing code?
Operator mono
@@SA7MAN thanks, is this theme dracula? seems different from mine
Can you give this ui desing 😊😚
24:40
44:48
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.
(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
@@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?
@@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.
Aos is not working....please help me out..what could be the reasons
Do as I did. If still not working download the complete project from my github account.
1
@SA7MAN
My CSS file effects are not reflecting I followed all the instructions for linking
Check the path to the css file. Make sure it's correct.
@@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
@@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.
@@snehasharma6761 Or you can download the project from my Github and compare your code. I hope will help.
@@SA7MAN ok I'll try and let you know
bootstrap 4 or 5?
5
36
bro plz give me this project images
github.com/SA7MANKHAN/joncarter-portfolio
Link to the project also in the pinned comment
@@SA7MAN thanks mera bai love from bangladesh😍😍😍
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??
The `navbar-dark` won't let custom `.navbar .nav-link { ... }` property to work. @20.10
your github link is not working
Good 👍
Thanks
35:06
1:18:58