Oscuro

Complete Portfolio Website with Bootstrap - HTML/CSS

Daily Tuition
Suscribirse
Vistas 1 054 994
98% 10 424 126

Complete Portfolio Website with Bootstrap - HTML/CSS
In this video, we are going to learn and build how to create a complete portfolio website with bootstrap using HTML and CSS. We will understand everything from scratch.
Comment us if you have any question or
Follow us:
instagram.com/akki.2013/
Donate:-
www.paypal.me/DailyTuition
Learn More From Our Website:-
www.dailywebtuition.com
Attribution
Icon made by monkik from www.flaticon.com
Background Music: www.bensound.com
Photos: www.pexels.com

Source File:
github.com/akashyap2013/PortFolio_Website.git
If you have any question please comment me on my video or you can write it on channel discussion.
Thank You...!

Publicado el

 

4 nov 2019

Compartir:

Compartir:

Descargar:

Cargando.....

Añadir:

Mi lista de reproducción
Ver despues
Comentarios 100
BiLiMsEl GuEyE
BiLiMsEl GuEyE Hace 3 meses
For those who use bootstrap 5.0 and have a problem to put the navbar on the right side, you have to put "me-auto" inside of "mr-auto"
Dhiraj Gupta
Dhiraj Gupta Hace 23 días
thanku
Gabriel Guimaraes
Gabriel Guimaraes Hace un mes
luv u
Ahmad Parvej
Ahmad Parvej Hace un mes
Thank you so much
yazeed altawil
yazeed altawil Hace un mes
Thank you very much!!
Dorin Beery
Dorin Beery Hace un mes
lol, thanks, worked.
raphael edward
raphael edward Hace 6 días
Кт0-нибудь знает о Енoт гл0бал?
HARRYandDAN Studios
HARRYandDAN Studios Hace 12 días
Hey, great video and liked the responsive design, would you know what pack of icons you used for your services part at 1:36:52? thanks
Saifullah Shaquille
Saifullah Shaquille Hace 19 días
When you were adding CSS prefixes vs code automatically suggested those prefixes. Is it the default behaviour of VS code? Or is there any extension for that?
Daily Tuition
Daily Tuition Hace 18 días
It's default behaviour
robiul awal
robiul awal Hace 21 un día
Thanks for this video And sir How can i Contact with you?
Increased Knowledge
Increased Knowledge Hace 21 un día
58:52
Increased Knowledge
Increased Knowledge Hace 21 un día
58:52
arvind singh
arvind singh Hace 22 días
Where is the triangle shape behind the LET ME INTRODUCE MYSELF...😂😂😂😂 Don't fool people my making the thumbnail....👎👎
Daily Tuition
Daily Tuition Hace 21 un día
You are brilliant. Go on
Diana Nur Azizah
Diana Nur Azizah Hace 22 días
Кт0-нибудь слышали о Енот глoбaл?
Gwynnotch
Gwynnotch Hace 23 días
Hi! The active in the navigation bar doesn't work but the hover does, and I already checked it multiple times. Can you help me, please?
Daily Tuition
Daily Tuition Hace 23 días
Use Inspect tool to check class active is adding or not
Adriano Valumin
Adriano Valumin Hace 24 días
what's the theme name that you're using? liked it
Daily Tuition
Daily Tuition Hace 24 días
It's one dark pro
Adriano Valumin
Adriano Valumin Hace 24 días
When you're creating style and you type ".main-area", there's a autocomplete suggestion for the right css locator (not typed before) What's that extension name? That suggests this css "route"
Momen Sawalha
Momen Sawalha Hace 28 días
That's Awesome! can I use the design for my portfolio?
Daily Tuition
Daily Tuition Hace 27 días
You can. Just change the images
ravit shoval
ravit shoval Hace 29 días
amazing video! thanx a lot!! can you please tell me where did you get the first picture from? did you make it by yourself?
Daily Tuition
Daily Tuition Hace 28 días
From freepik website
Mystery Code
Mystery Code Hace un mes
I am a junior web designer, I have created many web design tutorials But your design is awesome 😍
Daily Tuition
Daily Tuition Hace 29 días
Thank you 😊
Adriano Valumin
Adriano Valumin Hace un mes
whats the name of this Icon Theme from vsCode?
Daily Tuition
Daily Tuition Hace un mes
It's material icons
Keenan Du Plessis
Keenan Du Plessis Hace un mes
Creating nav - 20:00 Banner Section (HTML + BS) - 36:30 How to create flex using BS - 41:30 Banner Section (custom CSS) - 44:05 Global CSS file - 50:30 About Us (HTML) - 58:34 About Us (CSS) - 1:04:46 Branding (HTML) - 1:08:32 Branding (CSS) - 1:18:11 Services (HTML) - 1:31:40 Services (CSS) - 1:38:49 Recently done project (HTML) - 1:44:15 Recently done project (CSS) - 1:50:44 Isotope.js (Downloading & using) - 1:55:26 Magnific Popup (Downloading & linking) - 2:08:25 Magnific Popup (HTML & JavaScript) - 2:11:46 Image Hover Effect (CSS) - 2:18:12 Client Section - 2:20:47 Owl-Carousel - 2:23:26 Clien Section (CSS) - 2:34:50 Subscribe Section - 2:40:30 Adding Email placeholder (CSS) - 2:49:40 Footer (HTML) - 2:51:20 Footer (CSS) - 2:56:14 Sticky Navbar - 2:59:26 Making Responsive - 3:06:00
Rohit Gupta
Rohit Gupta Hace un mes
You just got a new subscriber.
Rohit Gupta
Rohit Gupta Hace un mes
Thank you sir, You just got a fan. Keep it up.
Daily Tuition
Daily Tuition Hace un mes
It's one dark pro theme with karela font. I have a dedicated video on vs code theme plz check that in the channel video section
Rohit Gupta
Rohit Gupta Hace un mes
Which font and theme do you use?
Nabhan Léa
Nabhan Léa Hace un mes
WOW I did it You made my day Thanks!
Hannah Salita
Hannah Salita Hace un mes
Hi, I need help! My carousel keeps going at the very top of my page every time I click the photo, what should I do? is there something wrong with my js?
Daily Tuition
Daily Tuition Hace un mes
Plz show me your js code
Raghav Khanna
Raghav Khanna Hace un mes
the background image of my subscribe area is not centered when I apply it through css, it is shifted towards left side of the screen. get update text is centered but everything after that is shifted on left side of page.
Daily Tuition
Daily Tuition Hace 21 un día
Just show me the html and css code
Raghav Khanna
Raghav Khanna Hace 22 días
@Daily Tuition i have applied justify-conent-center but still the email box and bg image is shifted towards left side
Daily Tuition
Daily Tuition Hace un mes
Check the justify content property of css
Prinsu Gaming
Prinsu Gaming Hace un mes
By which keywords you downloaded the stock images from pexels bro ?
Prinsu Gaming
Prinsu Gaming Hace un mes
@Daily Tuition okay trying it bro. Thx
Daily Tuition
Daily Tuition Hace un mes
Just search for vector graphics images on freepik.com website.
Prinsu Gaming
Prinsu Gaming Hace un mes
@Daily Tuition yea please search and ans me bro. Btw ur tutorials are awsome.
Daily Tuition
Daily Tuition Hace un mes
I have to search for it
Rahul Baishya
Rahul Baishya Hace un mes
Anyone having problem with roboto font? I am not able to apply roboto font it takes some other font looks like comic san
Daily Tuition
Daily Tuition Hace un mes
Did you imported the font cdn at the top?
Sehajpreet Singh
Sehajpreet Singh Hace un mes
Can you please tell me which editor you used
Daily Tuition
Daily Tuition Hace un mes
Visual studio code
Special street food
Start Banner area html and css code i copied ur code and put in my writing code... same not running.... really failed.... all all all tutorials unable to continue some some error always
Daily Tuition
Daily Tuition Hace un mes
Plz share the screenshot on my Instagram id. akki.2013
Special street food
this also i am dropping after 46:00 i am not getting the right output... like ..what u getting
Special street food
to continue 40:00 -
Александр Шмель
Не уловил?где брать img наполнители,для папки "img" при создании портфолио.
Special street food
but auto active and scrolling section u didn't made
bazil ali
bazil ali Hace un mes
vbg
thom tranvan
thom tranvan Hace un mes
Xe
Jeisson Olarte Hernández
For align navbar to right just use ms-auto instead of mr-auto
Rahul Baishya
Rahul Baishya Hace un mes
@Daily Tuition yes I am using the latest one, okay will use me-auto
Daily Tuition
Daily Tuition Hace un mes
I think you are using latest bootstrap. Just use me-auto
Rahul Baishya
Rahul Baishya Hace un mes
ms-auto worked for me mr-auto did'nt work
Movingskydiver0
Movingskydiver0 Hace un mes
my horses name is boris
Aran Singkum
Aran Singkum Hace un mes
ขอบคุณมากๆครับ สวัสดีครับ
Dellsony Dissanayaka
in 24.26 min, in the line of 35 of the code. the div tag with mar-auto is not working???
Daily Tuition
Daily Tuition Hace un mes
Yes. Plz use bootstrap 4
Dellsony Dissanayaka
@Daily Tuition there are so many like this... Is there any changed with version we use.? I can't get the same results with the provided code by you. 🤔In many i have to change.
Daily Tuition
Daily Tuition Hace un mes
Use me-auto
Dellsony Dissanayaka
thanks. good job
Smith A
Smith A Hace un mes
If you want to have her in sheer enjoyment and just demanding you to carry on with it, just try reading some of the stuff by Greyzar Drinbo. You will probably go for at minimum half an hour more than you usually do.
Gayle Coleman
Gayle Coleman Hace un mes
The crowded surgeon apparently delight because passenger prenatally brake onto a descriptive lock. safe, beautiful range
jaddsadd ajaff
jaddsadd ajaff Hace un mes
voice is too low difficult to understand
Daily Tuition
Daily Tuition Hace un mes
Use Ctrl+D
jaddsadd ajaff
jaddsadd ajaff Hace un mes
@Daily Tuition windows
Daily Tuition
Daily Tuition Hace un mes
What are you using mac or windows?
jaddsadd ajaff
jaddsadd ajaff Hace un mes
@Daily Tuition how to do multiline command in keyboard?
Daily Tuition
Daily Tuition Hace un mes
Apologize for that
anime girl
anime girl Hace un mes
i am akshay
Daily Tuition
Daily Tuition Hace un mes
Hey
Pivot & Pilot Creative
Great tips for building a portfolio website - thanks for sharing!
Hasan barati
Hasan barati Hace un mes
++
TheVaskrsija
TheVaskrsija Hace un mes
Bravo, this is an excellent template which can be used and turn into e.g. Wordpress Portfolio site , excellent work.
Daily Tuition
Daily Tuition Hace un mes
Thank you
SteldusTV
SteldusTV Hace un mes
My navigation menu do not appear when I scroll down
SteldusTV
SteldusTV Hace un mes
@Daily Tuition Yes thank you, my js file was fine, it was my index, I had misidentified the name of the class
Daily Tuition
Daily Tuition Hace un mes
You are surely missing something in js file
Lia Rozelle
Lia Rozelle Hace un mes
The tenuous december contrastingly gaze because department conversantly seal during a gullible gusty pigeon. verdant, subsequent waiter
Elizz Kravchenko
Elizz Kravchenko Hace un mes
Огромное спасибо
Dea Hestina Angraini
thank you. lets code.....
Keyla Perez
Keyla Perez Hace un mes
Where is the image folder you used in the video? it is not on the github link or on any other linked you placed in the description
Daily Tuition
Daily Tuition Hace un mes
Plz check properly. I had put a link of git in the description
That Gadget Guy
That Gadget Guy Hace un mes
Smh it’s not even affecting my css file Rubbish
Daily Tuition
Daily Tuition Hace un mes
You are definitely missing something
chaitali mukherjee
chaitali mukherjee Hace un mes
what is the platform you used for checking different screen sizes for testing responsiveness
Daily Tuition
Daily Tuition Hace un mes
It's chrome inspect tool
mukesh lv
mukesh lv Hace un mes
much appreciateyour work
Daily Tuition
Daily Tuition Hace un mes
Thank you 😊
Nguyễn Huy Toàn
Nguyễn Huy Toàn Hace un mes
Thank you.
Raghav Khanna
Raghav Khanna Hace un mes
my project area buttons are not working or not filtering images, can anyone help ?
Daily Tuition
Daily Tuition Hace un mes
Just check using inspect tool and remove margin from both sides
Raghav Khanna
Raghav Khanna Hace un mes
i got one problem, my overall size of website is enlarged, like you have margin on both side, my website is enlarged ?
Raghav Khanna
Raghav Khanna Hace un mes
@Daily Tuition it worked, forgot to put bracket in js file, thanx a lot brother. You've boosted my confidence level to pursue career in web development.
Daily Tuition
Daily Tuition Hace un mes
Plz check the class names and js file again
Noella Chat
Noella Chat Hace un mes
This is said well
Raju Thelu
Raju Thelu Hace un mes
super
Koth 7134
Koth 7134 Hace un mes
I'm planning on learning web development soon I just need to finish learning something else first
Al Musave Nihal
Al Musave Nihal Hace un mes
I am unable to create Border of 'Hire me' Button using ur code.
Al Musave Nihal
Al Musave Nihal Hace un mes
@Daily Tuition Ok Thank You Sir.
Daily Tuition
Daily Tuition Hace un mes
No. Just change bootstrap cdn
Al Musave Nihal
Al Musave Nihal Hace un mes
@Daily Tuition If I hav to do so, I hav to change many steps.
Daily Tuition
Daily Tuition Hace un mes
Plz use bootstrap 4
Al Musave Nihal
Al Musave Nihal Hace un mes
@Daily Tuition sir I used ur code. But it's not showing as like your's one. I am using Bootstrap 5.0
Minh Việt
Minh Việt Hace un mes
2:01:37
anonimowy hacker
anonimowy hacker Hace un mes
Thank you very much, thanks to you, my desire for programming has returned.
Daily Tuition
Daily Tuition Hace un mes
Great 👌
Kolevski
Kolevski Hace un mes
I cant seem to get the responsive navbar to be a hamburger menu for smaller devices. Any help? If you could paste a code here or explain the process :)
Daily Tuition
Daily Tuition Hace un mes
I think you are missing the media query code
Pavlos Plays
Pavlos Plays Hace 2 meses
Great video it is realy helpful for beeginers and all can learn styling tricks from that. Great job!
Daily Tuition
Daily Tuition Hace 2 meses
Thank you 😊
Tomasz z Krakowa
Tomasz z Krakowa Hace 2 meses
Very fine was page by one of our local cinema, outstanding CSS...
behind healthy life
behind healthy life Hace 2 meses
You deserve more subscribers than this
Daily Tuition
Daily Tuition Hace 2 meses
Thank you 😊
Shrishti Tiwari
Shrishti Tiwari Hace 2 meses
from where can we get these types of images used in the website
Shrishti Tiwari
Shrishti Tiwari Hace 2 meses
@Daily Tuition Thanks a lot😊
Daily Tuition
Daily Tuition Hace 2 meses
From freepik.com
lata gajbhiye
lata gajbhiye Hace 2 meses
sirhow can i create the email tempate
Gajjar Zeel
Gajjar Zeel Hace 2 meses
I need help with css file i think. It doesn"t work. What ever I write in style file is useless. help me pls! But other than that this video is very helpful.
Gajjar Zeel
Gajjar Zeel Hace 2 meses
@Daily Tuition Thanks for asking but it's fine now. Except that, the design is amazing!!
Daily Tuition
Daily Tuition Hace 2 meses
Plz show me your code
eghack 45
eghack 45 Hace 2 meses
Thx
Syed Imran
Syed Imran Hace 2 meses
bhai please reply me.. image is not coming
Syed Imran
Syed Imran Hace 2 meses
@Daily Tuition Oh it's solved. I was using Bootstrap 5 😅 Thank you so much
Daily Tuition
Daily Tuition Hace 2 meses
Ok. Let me check
Syed Imran
Syed Imran Hace 2 meses
@Daily Tuition yes I added the image but its not appearing and the h3 and h1 tag texts are floating to left. i have sent screenshot to your ig. please check
Daily Tuition
Daily Tuition Hace 2 meses
It's in the description of the video
Syed Imran
Syed Imran Hace 2 meses
sir my site banner texts are breaking into new lines and sticking to the left of the screen
Krishna Hare
Krishna Hare Hace 2 meses
CSS part not working on nav bar. Can anyone please help?
Daily Tuition
Daily Tuition Hace 2 meses
Plz add space between classes
Krishna Hare
Krishna Hare Hace 2 meses
@Daily Tuition when i am using all class name to access an element in css it is not working..e.g. .header_area.main-menu.navbar.navbar-brand{} is not working but it is working when i am only specifying .navbar-brand{} also color: var(--title-color) not working
Daily Tuition
Daily Tuition Hace 2 meses
What is happening?
Dare7
Dare7 Hace 2 meses
What about this? When I add the "Daily" image in the navbar, the first item shifts down a bit...?
e-GENIUS
e-GENIUS Hace 2 meses
Cool i love Dcode
Daloa Darius
Daloa Darius Hace 2 meses
j'ai un souci avec bootstrap v5 pour mettre la photo en avatar. la fonction " circle" ne marche pas . peut- tu m'aider?
Abhishek Shrivastav
Abhishek Shrivastav Hace 2 meses
Daam bro.! I am machine learning guy. but after doing this i really want to switch to development.. Thank to you..
Daily Tuition
Daily Tuition Hace 2 meses
Great
Joshua Miller
Joshua Miller Hace 2 meses
I love the way you stop and explain things instead of assuming the viewer knows what things are for. Thank you so much.
Xuno
Xuno Hace 2 meses
hello sir is it okay to use jquery-3.5.1?
Daily Tuition
Daily Tuition Hace 2 meses
Yes. Just use complete jQuery instead of slim
Total Playing Gamer
Total Playing Gamer Hace 2 meses
Thanks for sharing, eternally grateful to you.
Daily Tuition
Daily Tuition Hace 2 meses
Most welcome 😊
Mini Bolt
Mini Bolt Hace 2 meses
can you explain me why my bootstrap is not working? I mean when I'm using "pt-5" it won't work so I have to declare into CSS
Mini Bolt
Mini Bolt Hace 2 meses
@Daily Tuition Thanks for replying, I have sent you the message on Instagram check it out whenever you can, Thanks
Daily Tuition
Daily Tuition Hace 2 meses
On instagram. Id is akki.2013
Mini Bolt
Mini Bolt Hace 2 meses
@Daily Tuition It was my fault it is already working, thanks. Btw can you help me out with "bg-panel" cause I've done the same thing but my panel is shown in the top part :C If u can tell me where I can send you the code its just that. Thanks for this great tutorial :D
Daily Tuition
Daily Tuition Hace 2 meses
Plz show me the code
RussianSoldier
RussianSoldier Hace 2 meses
Hey thanks for the great video. I am currently stuck at 1:28:20. If I use the exact properties for the bg-panel class as you do the box appears at the top of the page itself and im 99% sure I followed your exact steps. What could I have done wrong? Thanks in advance
RussianSoldier
RussianSoldier Hace un mes
@Beatrice Wambui try to declare the div directly after the mother div
Beatrice Wambui
Beatrice Wambui Hace un mes
@Daily Tuition the code is the same as you have written
Beatrice Wambui
Beatrice Wambui Hace un mes
@RussianSoldier did you manage to solve it because I am stuck at the same place?
Daily Tuition
Daily Tuition Hace 2 meses
Plz show me the code
Emmanuel Addo
Emmanuel Addo Hace 2 meses
i cannot download bootstrap. any help please
Daily Tuition
Daily Tuition Hace 2 meses
What is the problem
Parv Chawla
Parv Chawla Hace 2 meses
Hey, This is probably the best Website I have ever seen so far. Can you please tell me if there's any similar WordPress theme that I can use to create a similar website for myself?
Daily Tuition
Daily Tuition Hace 2 meses
I have a complete tutorial on WordPress theme check the channel video section
RICHA SINGH
RICHA SINGH Hace 2 meses
Hi I am unable to download compressed production jquery 3.4.1 version now 3.5.1 version available. I am unable to see my styling changes in my HTML page. Please can you help me?
RICHA SINGH
RICHA SINGH Hace 2 meses
If I want to sent my portfolio to recruiters how can I send so they can see without changing any design.
RICHA SINGH
RICHA SINGH Hace 2 meses
@Daily Tuition Okay. I’ll show you today evening. You are such a great tutor. Explained everything so clearly. I have one more question if I want to open it my iOS phone. How can open to see the exact view?
Daily Tuition
Daily Tuition Hace 2 meses
I think the problem is in the CSS. Just show me your code
Love Kumar gupta
Love Kumar gupta Hace 3 meses
Custom css file not working
Ruby Lanez
Ruby Lanez Hace 3 meses
I can vouch for *tonytools01 on !!nstágrám* ...he got my limitations resolved easily...very professional
Ruby Lanez
Ruby Lanez Hace 3 meses
I can vouch for *tonytools01 on !!nstágrám* ...he got my limitations resolved easily...very professional
Ruby Lanez
Ruby Lanez Hace 3 meses
I can vouch for *tonytools01 on !!nstágrám* ...he got my limitations resolved easily...very professional
Ruby Lanez
Ruby Lanez Hace 3 meses
I can vouch for *tonytools01 on !!nstágrám* ...he got my limitations resolved easily...very professional
Ringgas W. Sarumpaet
Thank you for teaching, permission to use this web to my portfolio
Daily Tuition
Daily Tuition Hace 3 meses
Yes you can. Just change the images
Nitish Singh
Nitish Singh Hace 3 meses
Amazing tutorial. Could you share some tips on where to get all the images and the backgrounds that you use?
Daily Tuition
Daily Tuition Hace 3 meses
On freepik website
Dawn B
Dawn B Hace 3 meses
I have a hard time understanding this person. It's too bad since he offers so much information.
Vladimir Stamenov
Vladimir Stamenov Hace 3 meses
I can't get the isotope plugin to work. I did it a little bit differently originally, I was using masonry before that. I changed the masonry cdn link with isotope and it was still working (as it is contained in isotope) but I can't get the data filtering to work using your code. I even tried copying you gallery sections html, and the main.js file. At the end of the document I have linked jquery 3.5.1, isotope and main.js in that order but it is not working still (even with your html and js). What could it be???
Daily Tuition
Daily Tuition Hace 3 meses
You have to initialise isotop in js file as well.
Bulcsú Fejes
Bulcsú Fejes Hace 3 meses
Guys, who can advise on promotion through EnotGlobal?
MVPATM165
MVPATM165 Hace 3 meses
Guys who know, is there such software EnotGlobal, did anyone work for them?
Влад Керемет
What else is it possible to bring to the top site now, besides EnonGlobal?
Naman Mishra
Naman Mishra Hace 3 meses
Don't make this if you are trying to make your own portfolio website and do not know how to make responsive design. Only For practice it is good .
844mberer
844mberer Hace 3 meses
Thankyou so much, Sir.
Taking Bigsteps
Taking Bigsteps Hace 3 meses
Your channel is really cool! I just want to ask how to put those contents in nav bars even it can navigate through scrolling. I just want to navigate them also through clicking the options at the top of your websitee
Daily Tuition
Daily Tuition Hace 3 meses
Which content you want to put in the navbar?
Noah Maddock
Noah Maddock Hace 3 meses
Drinking game; Drink for every time he says "Beautiful" or "simple as that"
Diego Francisco
Diego Francisco Hace 3 meses
Thanks for sharing, eternally grateful to you, I am currently leaving university and the web is the most demanded currently, thanks to the tutorial I feel that I can apply for a job
golam rabby
golam rabby Hace 3 meses
sir your letter is so small we canot see it properly please zoom it
Siguiente
GENDER REVEAL TIME....EP 1
12:42
Ozuna - TIEMPO (Video Oficial)
2:54
AMONG US ANIMADO 6
4:11
Vistas 549 541