Do you want to learn how to build professional websites with HTML5, CSS3, and JavaScript? In this tutorial, HTML5 and CSS Development: Build a Professional Website | Udemy instructor, Jordan Hudgens will take a project driven approach to building a portfolio website.
Explore the full course on Udemy with a discount using the following link: https://www.udemy.com/html-css-code-bootcamp/?couponCode=YOUTUBEHTMLCSS
My name is Jordan Hudgens, and I will be your instructor for the tutorial. I am currently the lead instructor and CTO at DevCamp. In addition to being the lead instructor for devCamp I’ve also been building web applications for over a decade for organizations such as Eventbrite and Quip.
Throughout the video you’ll learn skills such as:
– HTML5
– CSS3
– JavaScript
– Flexbox
– CSS Grid
– Animations
– Navigation
– Fonts
– Images
I also demonstrate the process that I personally use when I build out my own websites. My goal for this video is not only to teach you how to follow along and build the website I show, but to teach you how to build any type of website that you want to create!
There are no technical pre-requisites for going through this tutorial. The ideal student is an individual who wants to learn how to build and style websites, with a focus on real world development. After you have completed this tutorial, you will be able to build real world websites and learn the same concepts taught at the DevCamp code school. Additionally, because this is a project based course, after you’ve gone through the lessons you will have a full website portfolio that you can start adding your own websites to.
Link to the HTML, CSS and JavaScript source code along with the images used in the video: https://github.com/jordanhudgens/portfolio-html-site
#HTML5
#CSS
#Javascript
Follow me on Twitter: https://twitter.com/jordanhudgens
Follow me on Instagram: https://instagram.com/jordanhudgens
Follow me on YouTube: https://www.youtube.com/user/edutechional
#Udemy
#ITeachOnUdemy
Share your story with #BeAble
source
50% unnecessary part 50% for main learning purpose
Great tutorial !
Thanks a lot sir that's really helpful
I don’t understand this. The only part I don’t don’t understand is ending divs. How does he end divs like that and just set them where he wants them to be and making sure that that’s the right place where the div should end
Hi grate work i love it, I'm still finding it hard to make my images float or possession well
audio dont match video lol
I really enjoyed watching your video. Awesome!!!!!
I just want to ask you to please clarify where you copy and pasted all 12 images as it confused me :))
Man love this video its the best took me a couple of days but man its a good feeling knowing you this and understand it also not just copy and pasted it lol
My images don't show up on my site, they are still all white.
I can now say my journey as a coder has just began with this course. Thank Mr. Jordan for this wonderful content. I need link to download the pictures
So how do we make a URL so that others can view our website?
Nice…video
At 27:42 he selects both < and > in the closing </div>. Those squares. How does he do that?
At 27:48 he selects 3 lines of code. I figured out how to select them with keyboard. But how does he move them into their own line? (Vertical line)
amazing tutorial!!!
Everything went well untill i started adding the images, went back and followed to the last detail but still my pictures wouldnt GRID and get into the boxes, they just overlapped everytime.. sucks becosue the tutorial was so good! Dont know where i got it wrong
sorry can I get your WhatsApp number cause I want to ask you alot of questions on app development
can you tell me the program you are working on
If I ever start doing hip hop, my name is going to be nav-wrapper.
Incredibly useful. Thank you.
change speed to 2.0. Thanks me later
Beautifully !
Lost it at the copy and paste 12 times but 😐 now it looks like a mess you shouldn’t have cut it man
50:07
can somone help me in minute 56:49 about the logos quip.png please
1:25:40
Hi all, I'm a complete newbie to building websites. Will this video help me?
Absolutely loved the crash course. Thankyou so much for taking time to create this.
Great tutorial. Just I end up with the same logo on every image. Did I miss a step on it?
If anyone else is stuck at 1:06:00 where the absolute and relative positioning of the portfolio background image and logo image are still not on top of each-other like they are supposed to be, but instead are side by side, make sure you don't have any other existing CSS tags that could be overriding them like a * tag (which you should avoid using if possible)
I think the names of your classes are confusing, excessively long, and make totally unnecessary use of the word "wrapper" making it basically meaningless. Normally in CSS, a wrapper div is one that wraps around everything, just like a container div. Nothing else should have "wrapper" in the name. The naming is also inconsistent. Some of the portfolio div tags start with portfolio, but then you have "img-text-wrapper" and "subtitle" which don't start with portfolio even though they are part of the portfolio elements (also img-text-wrapper is super confusing). These should be called "portfolio-content" and "portfolio-subtitle" or similar
A much more concise way to make sure the text is centered over the profile images at 1:05:30 would be like this:
.img-text-wrapper {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
I am happy to learn with you