HTML5 & CSS Development: Learn How to Build a Professional Website | Udemy, Jordan Hudgens
Vložit
- čas přidán 18. 02. 2019
- 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: www.udemy.com/html-css-code-b...
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: github.com/jordanhudgens/port...
#HTML5
#CSS
#Javascript
Follow me on Twitter: / jordanhudgens
Follow me on Instagram: / jordanhudgens
Follow me on CZcams: / edutechional
#Udemy
#ITeachOnUdemy
Share your story with #BeAble
Love the fact that you said learning is best done by doing a project and then learn the fundamentals along the way
Yeah, that's how I've learned lots of programming stuff, he isn't wrong.
First time seeing a tutorial that combined HTML, CSS and JS in a step by step version! AND adding the notes at the beginning for keeping track of TODOs!
Somebody do reply.... is this video wholesome, or just a glimpse of the course? Will it be helpful, or full course is to be watched?
@Darkstar that was helpful, thanks
@@mounilgarg256 Great work!!! I learnt a lot but please i need to know where to find the logos you used,i got confused a bit at that point... Please do you know where i can get the logos
@@mounilgarg256 v n
0
gtgG GK gggggtgHH gbggggggggtghbggg tgtbgggbggbghtgggggggggggggggggghghbgcvgh yangggg bbbghgb HH gggggb HH gggg gBgtggg HH gbggggggggggtgggggthbgggbgbgbgggggbgggggghggtggtgtggggg HH ggg gggg GB gg ggg g HH bhhggggg ggg yg ggg ggg gb
This is by far the best tutorial that combines HTML, CSS, javascript, and in orderly steps too. I even had to create the same TODO you had made, very descriptive I must say, thank you so much Jordan Hudgens!
Ive taken the time to learn HTML and CSS before but I gave that up, now I came back and watched your video and mastered it. Thank you so much for your time and effort for making this video!
This approach, coupled with a tutorial covering the basic html tools, is super effective :)
Become comfortable with VSCODE. It is your friend.
If you like animation with image lets can see this..
& you can follow
czcams.com/channels/QwmuHAkpfwnPh-G80WpbHw.html
animation making using html & css.
czcams.com/video/29M2GiV2OJE/video.html
If you like animation with image lets can see this..
& you can follow
czcams.com/channels/QwmuHAkpfwnPh-G80WpbHw.html
animation making using html & css.
czcams.com/video/29M2GiV2OJE/video.html
When I refresh the "About" page, the border-bottoms (the bottoms meant to appear on mouse hover) for all navigation links appear and disappear promptly. It does not happen for the Home page. How can I stop it from happening?
The best tutorial on starting a simple static website, the only thing that would have made this a 10/10 would be to include simple responsive behavior. Thank you!
Jordan, Thank-you so much for sharing your 100’s of hours of accumulated knowledge in this excellent tutorial video. I come from the Embedded C language environment , I have to say I find the syntax and keyword quantity to be a little daunting. Sharing your design ,development and results approach is enlightening, will help the learning curve. 🤯 Thank You
Thanks, I built this one for a school project. The final result is astonishing.
Dude I'm only 23 minutes in and man I love the way you're teaching, like you said in the start about learning better with projects is so accurate! Thank you!!!
the meat man
C🎉
Hirj 😊❤❤😊e❤
you taught direct to the point what I need. not to fast not too slow. very good teacher! I want more JS tutorial please
5 years later and this is still one of the best tutorials out there on website development
OMG! I have been searching for this for months and finally got it. The few seconds I thought this was going to be like others but thanks to him it wasn't. I can't tell you how happy I am to find this course.
Great work!!! I learnt a lot but please i need to know where to find the logos he used,i got confused a bit at that point
@@davidchudi-obi9199 In video description you can find link to his github where you can download everything what you need to build this website (code, images, logos,...)
This is one of the best CZcams tutorial videos I've ever seen, thanks very much sir and keep going, dude. You are super talented and professional and the best teacher. I wish i have zillion email accounts to like your channel.
Great great great!!!! I was so overwhelmed from the amount of softwares and tools other videos told me to use
You made web development so simple for me
Thank you
The way he formats his code is beautiful. It will really help in the future.
I cannot thank you enough for your tutorial! As a disabled Military Veteran, I do not have the opportunity to go out and engage with people in the world that I once could. As a way to fill my time indebted to your kindness,...
Great course, it only became more and more frustrating when the teacher didn't adapt his pace to the matter becoming more and more complex. But yeah, I've built this website with his instructions within one day and understood enough to modify it and make it my own. Really cool stuff!
*Covid-19:* _Making Programmers Since 2020_
legend
Word up!
best comment ever.
@@bowiedante1106 nice
Are u feel jelusy
I didn't sleep the whole night.. And now I already have my personal portfolio.. I used thi tutorial as my base... Thank you thank you so much!!
Thank you so much!. The best tutorial ever. Simple and to the point.
Thank you so much for this awesome tutorial ! Helped a lot as a beginner !
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
Wow, great tutorial! I've never worked with HTML or CSS before, but now I love it! Many thanks!
Great tutorial! I was a website dev for a couple of years about 5 years ago - but forgotten so much - so this was a great refresher, plus I paid more attention to html layout, classes & CSS. Plus, the short mention about the usefulness of frameworks. You are a great instructor!!!!!
Thanks dear
your methods are unorthodox, but it's ok to learn
Just wanted to say keep up the videos this is amazing for someone like me learning how to make a website. your not being enough to where I want to fall asleep and your not really slow. You are also good at explaining things
Okay so... I suck at anything involving coding, building websites, et cetera BUT you helped me make my very own website!!!!!! Sometimes it was a little too quick for me, but I just went back and tried again, and - WOW! Amazing. Love your tutorial. Thank you so much ♥
Awesome tutorial. From knowing zero about HTML and CSS to making a fully usable website, that was a great experience! Love the way you teach.
Thank you so much for your tutorial! You did an excellent job of explaining everything!🙏🏽
facebook.com/ezywebbuilding/?modal=admin_todo_tour
dude plz support our new page
Just finished building mine! Really excellent tutorial, thank you so much! Excellent teaching style and very informative.
Off I go, a-building!
Thorough and concise tutorial. Easily understandable if someone has basic HTML and CSS.
18:00 start of the Css file.
Thanks buddy 😊
OMG 😲, this is one of the best CZcams tutorial video I've ever seeing, thanks very much sir and Good bless you.
2 years later and your content is still relevant....big thanks
This course really helped me a lot. Thank you very much Udemy and Jordan Hudgens
Thanks for a great tutorial Mr. Hudgens. After this course I'll be looking for your course at Udemy.
Thank you so much, I love the way you teach
Oh gosh I'm going to give it a try!!! Just did a full watch through, next up the hands on!!!!
How did it go?
this helped me a lot to come back to coding haven't done coding in years soo its a big recap for me thank you!
I thoroughly enjoyed this tutorial even though I had an issue with th Javascript part
Thank you, this really helped me out to understand more the grid system on css!
When i did Web development, they never taught us about the grid feature... this was the first time im hearing bout it...
One of the best videos i have ever encountered. Got the concepts now.
One if the best course I have ever came across in last few years
Amazing content! Definitely feeling more confident after following through with this tutorial
If you like animation with image lets can see this..
& you can follow
czcams.com/channels/QwmuHAkpfwnPh-G80WpbHw.html
animation making using html & css.
czcams.com/video/29M2GiV2OJE/video.html
If you like animation with image lets can see this..
& you can follow
czcams.com/channels/QwmuHAkpfwnPh-G80WpbHw.html
animation making using html & css.
czcams.com/video/29M2GiV2OJE/video.html
I have been going crazy in the ccs portion, the styles wouldnt work.
i found out i forgot to add a semi colon at the end!!! dont forget
😂😂😂😂
to the end of what please?
if you're using vs code, every time you add an atribute it shows it blue but if you forget the ; the following like will turn white (instead of blue-this way you can spot missing semi colon faster) :)
@@poppybalfour how do you preview html in vs code?
@@NelsonNelliville hi! I dont quite understand the question, usually I would open the html file with my browser then ctrl+s in vs code to save changes and f5 in broser to refresh and I can see the changes applies but its not a preview.
Amazing tutorial..Thank you!! Straight forward functional approach to teaching this. These are the tools, here's how to use them, and why. Easy to follow and really cool project!
This is exactly what im looking for. Thank you!!!!
God bless you, my brother. This is art is a masterpiece.
@John Power It's pretty clear what he meant - this tutorial is magnificent!
This is absolutely amazing. Ive been struggling to find the right coding video where I learn by doing, im a beginner programmer so this video was an incredible start for me. I finished the whole thing in 2 days, took my time to re-listen and understand the concepts as i implemented them.
Wow u must be lucky,
im struggling with background image, every time i put in, for e.g url (folder/xyz.jpg) and become large almost the whole screen, all thing are cleared spelling and all that, even subtitle text are ok with grid line showing proper. I think my image size are big, i dont add nothing in logo img.
@@mohammadsszai3019 you have to adjust the size on css :)
@@AyshaFilms ok i will check it like this> for e.g
image-size: 55px;
I have done 4 months of study at my local i.t learing institue and end up with this asking about image size and searching udemy. These center took my money and time too! Thanks ayesha
why are you using div container for the nav instead of and
Such an amazing tutorial I'm so thankful!!!! I finished to the end with no issues on my Mac! Awesome
For beginners, emmet is the thing that auto generates code for you:
Type ! then press enter, it will create the html skeleton.
.something will create a div tag with something class
Thanks for the information :)
Excellent tutorial! I learned more here than in any other places.
I totally agree.
Absolutely loved the crash course. Thankyou so much for taking time to create this.
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
Learned a lot while working on the project with Jordan Hudgens. Thanks a ton. One query: can I convert the site into a responsive one? Tried everything but somehow unable to implement it. Thanks in advance.
this is a great tutorial and I really was able to get into the mindset of how to plan out the website and then code accordingly. The only issue I have is that for some reason i cannot get the javascript to work for the darkening of the image on the mouseover.
I’m having the same issue
also have the same issue
hi, am glad someone talked about it, am also experiencing the same issue, its driving me crazy.
Share your script. I will sort it out.
Dhiraj k can I send it to your email
Thanks A million times. I have waited long enough for this kind of video
Excellent teacher with the right teaching methodology, and very well organized and presented.
instead of using this long way i think you should use
Home
about
Home
Who else noticed this guy loves s so much...Great tutorial tho
Way too much. He ignored other commonly used tags
This tutorial is amazing and easy to follow. Good work Jordan. Looking forward to learning more from you 👍
Thank you very much. This clearly gives (to a beginner) an approach to start with. Very helpful.
A quick life hack, watch it at 2x speed. which is still clear enough 😁. Thanks for this video. I learned a lot. 🧡
i like this vedio thank you keep posting intrested .
THIS TUTORIAL BLEW MY MIND! I WOULD DEFINITELY LIKE TO SEE MORE TUTORIALS FROM YOU!
You are a great teacher, everything is straight forward. Thanks for this video
WTF?? not even 1k Views for such great video??
Eh, that's not true. There's a different reason why.
im a week into coding and this all seems so foreign to me. just doing it to get a feel for how things are built. hopefully sometime down the line i can understand most of this on my own!!
how're you doing now?
@@DanielSousa-dx3rn i’ve started learning javascript!!
Hey first time coding, was this tutorial helpful?
i didn’t really understand too much, but it was good practice while still learning
update: coming back to this video and i pretty much understand everything that's going on here! keep going guys yall can do it
Very well taught. Great job Mr. Hudgens. Learnt a lot from this.
Thank you so much, you have explained the css concepts very well !
At 1:01:29 i use position:relative of course, but i continue use display:inlineblock in class portfolio-item-wrapper, to center the text inside the img, i use this in the subtiltle class:
position: absolute;
top: 0;
height: 100%;
width: 100%;
display: flex;
align-items: center;
justify-content: center;
it worked but i dont know should i use this method or not
Thank you for this! I was solid until you began Javascript. That'll take a couple of times to understand!
Kepe at it, you'll do fine!
I know. That's around the time my brain began to melt.
I loved this entire experience. Learnt a lot . Thanks Jordan
Thank you very much, Jordan. This was easy to follow, and has given me confidence and the inspiration to update a website I made about 20 years ago just with self-taught HTML.
20 years?! Amazing to hear!
Great Tutorial!, I have used programming languages b4 so I was able to follow along your Javascript. I wanted to know how JS integrated with HTML and CSS because I have made a website with HTML and CSS but not JS. This tutorial helped me out, thanks! Would appreciate it if you made a video talking about the integration of JS with a non-interactive site made with HTML and CSS.
thats the dumbest question ive seen someone ask
I bought your Ruby on Rails course in Udemy. You are an exceptional teacher, thank you
Was a great tutorial , reading JavaScript / HTML/CSS books for more clarification . This , along with the books will help in my upcoming boot camp class , thanks again...
excellent video, ideal for beginners, the Js part its very complicated... but its just 3 minutes... Thanks Again!!!
9:00 thats when he actually starts to code
Thx
Thank you 💞
who else learning during quarintine
best time to learn a new skill
@@Technomancer31 yep
quarentine is a wonderful opportunity to do procrastinated tasks
Yes yes yes, Quarantine is the best time to maximize your life haha
Takepoop Takepoop high five, my friend 🙌🏻🙌🏻
Thanks a million.....most definitely have a clearer understanding
one of the best video to understand html/css in short time. Well done Sir. keep it up.
i remember playing with the Inspect tool and "changing" websites when I was a kid lol
I’m 28, when I was a kid there was no live editor like Chrome’s inspect tool. It definitely helps understand things.
Brother, what a sterling tutorial. I've never built a website before. This really helped!
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
Man wtf ! show us where to paste them, for me is not working, is not working the fond solid when i put the mouse on About or Home.....
I feel too many tag in the HTML and it gets very much cumbersome to handle them all
Same here. I shut down the video after I got drown in DIVS
@@EmadElSammad czcams.com/video/h3PJjP0nE98/video.html you'll thank me later.
czcams.com/video/h3PJjP0nE98/video.html you'll thank me later.
most web development comes with div and nav just for conatiner.
Cathrin E. Gordon Actually you’re right. It’s a good trick. Wish you have told me earlier haha. Also, thanks for the guy who recommended me to install “prettier” It helped a lot
Thank you so much- learned a great amount of coding knowledge from this video.
Great tutorial! This is the way to learn what's so abstract in step by step learning! Thx!
I'm literally that kind of students who learns by taking small projects
If you like animation with image lets can see this..
& you can follow
czcams.com/channels/QwmuHAkpfwnPh-G80WpbHw.html
animation making using html & css.
czcams.com/video/29M2GiV2OJE/video.html
my images are not shoeing and I used images from my system..how do I correct it
I finally figured it out. I was missing a closing div and another nav link wrapper between my index and about page. Now I have my space between. Having finished this part, I'm saving this part of the lesson on my folder system under lessons/flex box. I took screenshots and word docs of the code/css and browser. Now, if I ever want to make use of a flex box, I have it ready and where I can find it. I'm looking forward to seeing this animation with use of java script.
this is really a fantastic course for creating my own website and i gain a great sense of accomplishment!
I did not know how much free material I could get from CZcams. I wish I had known this before I had completed my Master Degree A few years ago. Who agrees with me 100%?
Definitely bro, nowadays you can get the same information you could get in college for free on your computer.
'how to be developer and body builder'
yes, web development makes you sixpack not just in your head but your body too. keep healty during this condition!
No ads? Instant like. And I agree a project works more so for web dev than software design or data structures. I mean all programming works better w example but I think html is easier to learn by doing than c++
I'm currently watching this best video right now and I already deleted all of my online games so I can focus on becoming a web developer with all your help sir. Thanks for this, I'll edit this comment once I learn html css and javascript.
Thanks for putting together this wonderful learning event. The process went on smoothly, except for grids that despite my several checking and rechecking never seemed to work. So, despite having the same codes on the visual studio code screen, the end result did not match your results. Any suggestion you might have? thanks again.
Had the same issue and fixed it. If your code truly matches then this error won't occur. For me I had to fix the syntax used to nest (
I’m having an issue where my images won’t load and google says error file not found but I don’t know what I’m doing wrong?
Turns out the file I added as an image was worded differently than the tutorial so write it exactly as you save it, not the way the tutorial has it.