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
9:30.. why don’t we need https for our website?
This is a nice azz video. Thanks!!!👌🏾
Thank You Jordan. Great Video
https://youtu.be/TnAUFmdu468
How to upload Sitemap on Google Search Console ????
🇺🇸 I want to learn from the best. 🇺🇸
What do you recommands ❓
do you have a newer video ? or is this tutorial still good to try ?
I got stuck at the css part. I had a friend try and he got stuck at the css part as well. Is there something I should have done to ge to get my styles.css to show color in the browser
Awsome tutorial!!
Thank you so much for a great tutorial! I'm a beginner at HTML/CSS, so this was very helpful. QUESTION: Is there a way I can make the images clickable links? (I've managed to make the text into links, but the fade in/out effect doesn't work when I do that, so I thought maybe I had better luck with the photos)
Man, thanks for the tutorial, you made it simple for us to understand and practice. For those who had some kind of bug, check the name of every class, and if the names are matching in the html and css, i had this problem and took a while to figure it out lol
This is still one of the best tutorials out there. A quick question how would you add a link to a new page on one of the images?
You can’t copy the image folder you have too move the actual folder the of image files into your project folder guys that one stumped me for 30 minutes got caught lackin bois
What is the next step? How do I allow others to visit my website? How can a user click on the portfolio and be sent to another page?
Thx alot for this tutorial, it helped me alot!
i got a problem in copy pasting the files in a portfolio plsss…. help meeee
1:18:13
where can I download the source?
Which language should I choose for back-end of website and which IDE please suggest me
when i try and ceter the logos and text (around the 1:03:00 mark) it only centers the top 3 and the other 9 logos are not centered, they are off the the side. any ideas? thanks
GREAT TUTORIAL!!
My image isn't showing
Been a frustrating 3 days with little time to work on this but I found my error. Thanks for the tutorial. Changing my dislike to a like lol.
good vid
Can you build me a website, how much does it cost ?
Why are my pictures so big to the point that they fit the whole screen. I was able to get it to do it three time next to each other, but the pictures are just so big
Pls stop bombarding ads, we now hate this brand
34:57
I’m trying to add 4 instead of 2 link buttons
Sir are you able to tell how to start from scratch please ?
Please I need a tutorial on how to create mobile app on android and ios
Am I doing something wrong when it comes the .portfolio-items-wrapper {
display: grid;
grid-template-columns: 1fr 1fr 1fr;???? for mine it does not go into columns??
This guy doesn't even know how to live server 😆
Terrible tutorial, explains the obvious and skips the parts that should be explained. Also does stuff much faster because of all he's keyboard shortcuts, making the viewer pause every 2 minutes to try and catch-up. A lot more should be explained as this tutorial is aimed for beginners.
please i need mentor on this
I love the course and everything went well with the exception of the javascript. I erased and wrote it again more than once following everything you were doing however my nodes captured were continually zero. I gave up and moved on. Thanks
Superb content, excellent explanation of HTML, CSS, Javascript concepts.
sir you are disabled
dislikes are disabled, so i come to the comments to express my hatred against this totorial, i had to do many webstie for alen walker. He say he need website i say no problem. I dont know html i check totorial. I do website. I send website. He check on phon and say "OMG" this text very not ok. I say I fix. I no fix. I hire lil forzy gangster (programmer) he fix what this guy did wrong width: 100%;
height: 100%; and it work. but his web no work. i report
I have a question…pls answer: How do you rezise the pictures, so that they are all the same size. I fully watchted your step by step video here, but my images are still different sizes. pls someone help
Wow free course. Me likes. 👍
I need 4 hours to work on this tutorial. At first I didn't know why my logo can't be put right inside the image. So it was because I didn't see that my <div class="logo-wrapper"> I haven't put "-" right in after logo so it became <div class="logo wrapper"> after i add "-" it finally work again…
A written conversation between two people eho are online its quicker than sending an e-mail the other person reads your message as soon as you send it and can answer instantly
Message sent or received using the internet
Connect to the internet