Build a Responsive Website with Animations | HTML 5 and CSS 3 Tutorial

[@juliocodes]

⭐ Kite is a free AI-powered coding assistant that will help you code faster and smarter. The Kite plugin integrates with all the top editors and IDEs to give you smart completions and documentation while you’re typing. I've been using Kite for 6 months and I love it! www.kite.com/get-kite/?

[@noone-zz6fe]

i'm a simple man i see tutorial without bootstrap i press like :D

[@juliocodes]

Thanks!

[@SushilKumar-ip7tv]

😂m also a s1mple man

[@LOOPNEWSBR]

me too 😂😂

[@TheLittleMaestro2911]

@@juliocodes whats wrong with bootstrap?if that's the case ,, i'm a complex guy than??

[@albertgeorge1619]

@@TheLittleMaestro2911 There's nothing wrong with bootstrap. I use it in every project. But now I feel like I am struggling a lot in overriding default classes of bootstrap and writing my own. So I am going to give it a shot by using pure css without any framework for my next project.

[@tebogomabusela2113]

What a hit🏌🏾‍♂️. I followed the tutorial, in 12 hours I was done. Everything works PERFECT. Great job bro. I am now glued to your channel🤞😊

[@a_basic_beach]

You've really come so far it was nice seeing you go from lessons that had no talking, to going full blown with explanations and your process when it comes to making designs/implementing the code. Your channel has seriously made me better with design and structuring my code better. Thank you so much Julio.

[@codeinswahili9505]

This is one of the best tutorials I have ever seen. You are so articulate. Ever step is explained step-by-step so well. I have learned a lot here. A big THANK YOU. I can't find you on Twitter though

[@pedrogarcia2899]

First tutorial I have followed and everything worked smoothly, you are a living legend bro

[@Zabookee3]

This is honestly one of the best tutorials I've come across. The amount of detail you share is awesome.

[@Neil_Jordan]

Thank you Julio! I completed this proyect :D I think I´m going to do all your tutorials with html css to interiorize your method :)

[@PeterSchmuttermaier]

Awesome. Plain and simple. I'm a complete rookie when it comes to coding, I try to learn via tutorials like these instead of the usual basics. This is my second tutorial and I learned so much here! I was able to replicate the complete website - it took me a couple of days, but it's done and it's beautiful! Thanks!

[@damianodamian7907]

Nice tutorial, finally someone with nice explanations and a good pace not too fast not too slow 👏 My suggestion: from time to time show the final website / result you're trying to achieve....that would help

[@joseincer728]

Thank you so much Julio. You are a fantastic Instructor. The way you explained every step helps a lot; I learned a ton of new concepts from this one video. 🙏

[@dotsonred]

20 minutes in, and I love this tutorial. Thank you so much for the detailed explanations, I learn so much with you!

[@Sammandanu]

Finally I found you!!, A tutorial without bootsrap, Awesome and Thank You

[@juliocodes]

I’m glad you enjoyed!

[@PaulCade]

Another masterful tutorial Julio, I learn a little more each time, thank you so much and keep up the good work, your followers greatly appreciate it.

[@juliocodes]

Thanks for watching Paul!

[@thatwizkidgaming]

Love how you explain bro & break everything down. Makes me feel engaged & fully educated on what I'm doing from start to finish

[@fonteconservadora182]

There's only one bad thing in the video, it ends! Without a doubt the best youtube video. First video of 2:30 hours that I watch complete and still replaying.

[@juliocodes]

Glad it helped!

[@uszi_pl]

best project on KZbin

[@jewelofnile2424]

Jesteś programistą? :p kiedyś oglądałem Twoje polityczne komentarze

[@flower9067]

Just what I searched for...superb

[@yehdaniel8439]

OMG!!!I love how you explain everything step by step , really easy to understand! I've learnt so much from this tutorial !!Nice work done!!!!!

[@juliocodes]

Thanks for watching!

[@sherrywang4726]

This tutorial is the best one I've seen!!!!!!!It really helps me a lot and inspired me with my graduation project which is important for me.Thanks a lot!!!!

[@kuyukki9912]

I was attracted to the wonderful design, motivated to study, and reproduced it while stopping the video.After a week, I couldn't switch the list, and there were some places where the animation effect wasn't added to the image, but I wonder if I could reproduce80%. CSS & HTML is fun.

[@jessica-tv6ep]

This is one of the most awesome tutorials! Love everything about it! Thanks, Julio! You did a great job!

[@123clash5]

This is amazing design!!! Finished the whole tutorial and it was challenging and yet worth it at the same time!!!

[@zackalcaina1896]

This tutorial was the best and most inmmersive one i have received. I felt flowing with the code. :D thanks so much Julio!

[@deepak8586]

Your course is the best thanks a lot Julio for making this available for free!!!

[@chujingxl]

Thank you! This video is very informative. I really like the design and the animation. You are a wonderful teacher.

[@entertheziggy]

i appreciate this man, love following tutorials like these to get my designs better and follow best practices. keep it up!

[@mrClever279]

this is a huge job man, I only learn English, subtitles for your "animation" come out like "enemy", soared because of this for a long time until I understand)) Low reverence! from Russia

[@preetamsharma5220]

Thanks Julio actually I was working on a project and I got stuck in some problem this video helps me out from there .....

[@SnirSigawi]

Suddenly, I love the KZbin algorithm. Love both the tutorial and the aesthetics!

[@reese166]

I really appreciate you! This is helping me so much with my class project 🙏🏾

[@hwangdoo5515]

oh my goodness, god bless you. I'm always waiting for new video tutorial from you, sorry for my bad english

[@juliocodes]

Thanks for the support!

[@Ayush_Bob]

Man totally loved the tutorial and the workflow was also great man when it comes to web development there are many people that will teach you starter stuff but then i was always clueless as how to proceed further this approach of yours really helped me understand a lot of stuff

[@abhisekgupta1543]

I love such tutorials with voice over...helps alot

[@aldocaamal7740]

Great content man, I suck at web design, rarely do more than just making things "look less ugly" on my projects and work, I focus on how to set things working, fix errors and manage the backend/database now; glad found your channel, this should help fill the gaps in web design, cheers!

[@juliocodes]

Don’t feel too bad. I’m not that great with design either. I usually just find something online to go by. Glad you found this content useful. Thanks for watching!

[@namanbansal7277]

Hey Julio Your videos are helping me a lot to learn HTML, CSS, and Bootstrap. your videos give me a lot of practical knowledge, which I am currently lacking in web designing.

[@juliocodes]

Great to hear!

[@alitopedits]

I just finished making this and thank you very much for the tutorial

[@viethungho2363]

Thank you sir, I finished this video. So many things to learn, I thought I knew it all but your reuse classes make me to learn more about CSS.

[@wayteyy]

Why couldn't I have seen this before I bought a shopify theme, ugh very good tutorial!

[@juliocodes]

Glad you liked it!

[@mariuszgolik7040]

Awesome Job Julio ! Best regards from Cracow and Thank You Very Much :)!

[@alimehrab4158]

One of my best video in KZbin. Love You Bro

[@MaxOnMaxxer90]

Big thumbs up for this course Julio! A nice design to replicate and a lot to learn from. Thank you!

[@juliocodes]

Thank you!

[@AhmadAli-wt8zy]

simply amazing,Thank you for pulling everything together in one tutoial.

[@juliocodes]

Glad you enjoyed it!

[@juliamaake8048]

Where have you been all my life. Great tutorial.

[@epicshorsviral]

Yahoo! I did it! Thats a very cool tutorial, thank u a lot for all of u doing man ;) And i think thats cool, when the people who dont know enlgish can understand ur explains)) All is working good, thanks again man ;)

[@shubhraburnwal2903]

Please help me out my sr.reveal is not working

[@dfjama]

Amazing, informative. thanks Julie for sharing this with us

[@nabeelahmed7550]

Good work Julio I am just starting to watch your effort I also subscribed

[@bangTguh2.0]

Great tutorials with a lot of explanation on why we do what. And it would be even better if you show the 'mockup design' once in a while as a reference so we can see what we're going to make. You just get +1 subscriber! (:

[@jennimccarthy8539]

This is great - I learned loads from this one. Could you maybe do a little add-on video of how to make the active menu "bar" slide along depending on which page is active? Love your videos! :)

[@juliocodes]

Glad you found the video useful! Also, if you have multiple pages it's as simple as adding the active class to the selected page and removing it from the previous page within the HTML. For example, home page has the active class then when you create another page you'll have the same navigation so now you add the class to the let's say 'menu' link. If you reload, now you'll have both 'menu' and 'home' underlined so what you do is you remove the class of active from the 'home' link so now it's just the 'menu' underlined. If it's a single page site then this would have to be done with JS by checking which item's currently have the class and if not selected then remove it and add it to the one that is selected.

[@kvncnls]

Awesome tutorial man! Would you happen to have more tutorials on some general/global css styling and html meta tags? I'd like to see a video on the very basic things we need to add to a new site.

[@musicwayman]

This is the best tutorial i've ever seen (and i spend majority of my time seen them), thank you so much for this amazing content! Gladly i would buy you courses if you had them, for now i will subscribe and follow your others tutorials. Keep doing this amazing work!!!

[@juliocodes]

You're very welcome!

[@karinebourasseau4625]

Thank you, Julio for this great tutorial and the detailed explanations!!!! I love so much your tutorials, you are an amazing teacher 👍. Love from France❤️

[@juliocodes]

Thanks, Karine. I'm glad to hear you're enjoying the tutorials :)

[@roccitycyclecam]

much appreciated, this was exactly what I was looking for.

[@tuannguyenthai]

Awesome. You are master HTML5 CSS3 unbelievable

[@juliocodes]

Thanks for watching!

[@pablitooten]

I love so much your tutorials, they are clear and advanced, u are an amazing teacher, thx so much.

[@juliocodes]

Glad you’re enjoying them!

[@ray_liu]

Awesome tutorial, thank you =D 1:58 > Start tutor

[@ifeanyismoothjerry2723]

Definition of beauty and simplicity..

[@juliocodes]

Thanks!

[@benjaminbaguma2242]

Better late than ever, just watched this tutorial, I learnt new things , Thanks Julio Big up

[@KrivovNikolay]

Ты лучший ! Сделал вместе с тобой от 0 до конца ! очень понравилось видео ! продолжай в том же духе! You are the Best! I did it with you from 0 till end! I liked this video! Keep it Up!

[@juliocodes]

Glad you found the video useful!

[@waynehendricks1529]

Thank you Julio. This is an awesome tutorial.

[@andrewsinelnikov2307]

Wonderful protect! Very useful. Thank you, Julio!

[@juliocodes]

Glad it was helpful!

[@andrewsinelnikov2307]

@@juliocodes Good job!

[@nickcast4437]

Oh My God,I simply got no comments how great that is,Julio,that is the best video I have ever seen on the planet,may I also ask you a question,what kind of font is this?

[@googlesboy3420]

great tutorial i learned alot from this .thanks you ❤️

[@fantasymels]

Thank Julio. Really learned a lot from this particular video.

[@juliocodes]

Thanks for watching!

[@TheOfficialAKAY]

This is so good! Hope i can become somewhere close to as good as you are some day! Amazing tutorials!

[@juliocodes]

Thanks! You’ll get there. All it takes is practice.

[@NooMJeSWanG]

That's very helpful Bro, Thank you very much that you spend your time to make the tutorial clip.

[@gabrielmunoz2659]

you are a great teacher, thanks for the tutorial, it's amazing

[@jellycoding]

You really have som good teaching skills. And you really have som good CSS skills. Thanks for this.

[@adifeliz]

Hey Julio... I want to build a website for myself and I like this theme ... I am new ... and responsive website with animation is perfect for me..using this theme will help me alot to start..

[@theegreatestever2420]

WHAAAAAAAT??? THIS LOOKS ABSOLUTELY AMAAAZING and I will definitely be adding this to my portfolio

[@choli5099]

Thanks so much for this video! I just finished it!

[@piratplay4689]

Thanks, bro! This is an amazing tutorial!

[@anchalsingh5597]

Thankuhh sooo much juluo codes for this amazing tutorial it helped me a lott🥺❤️❤️❤️❤️❤️❤️❤️❤️

[@bikramchettri9405]

Thanks for the tutorial. Can you also do some footer parallax effect tutorial & mega menu tutorial?

[@juliocodes]

Funny you mentioned it. I planned on doing a parallax effect with JS that could be used anywhere in the page.

[@Bengadeer]

The fix for my earlier comment: for .menu-toggle : position: fixed; top: 4rem, right: 4rem and drop the transform: translateY(-50%).

Awesome Tutorial! Thanks man.

[@8CountLife]

Thank you Julio this is an amazing tutorial

[@theegreatestever2420]

About to code along to this amazing looking site! Lets go

[@genna927]

Amazing!!! Thanks Julio. You're awesome!!!

[@neelthakkar4492]

#weloveyou keep making content bro. You really made our beginners life easy. Huge thanks😃

[@chelseaehimare597]

Really helped me a lot, thanks!

[@Bengadeer]

Very well done tutorial. I did notice one issue. If you add IDs to the sections so the navbar anchor tags work the burger icon scrolls out of sight when going to another area in the mobile view. Either the nav list needs to move to the right side, or the burger needs to jump to the left when the menu opens.

[@flower9067]

I love this website

[@felipesalazar4000]

Thanks Julio, amazing tutorial!

[@juliocodes]

Thanks!

[@sonoftroy8572]

Thanks for the tutorial Julio Codes! I learned a lot and i'm taking some good notes regarding CSS and my HTML structure, hey, what do you think about using Object Fit for IMG Elements

[@wandat6353]

Thanks for this tutorial and the detailed explanations!!!

[@juliocodes]

Thanks for watching!

[@jintanadowsai4095]

Thank you for the great tutorial. I learned so much more from you.

[@juliocodes]

You are so welcome!

[@thetektap8382]

You are a life saver bro!!! Thanks

[@juliocodes]

No problem!

[@SRSujon-nn5fv]

Thanks Julio. Thanks Pixelgrade

[@amenbefekadu7994]

I really appreciate u work, keep it up

[@seposmd]

Thank you bro! This is one of the best video about web design. I have learned a lot! If I could I would give you a million of likes. Can you recommend what to read about CSS? Can you recommend from where to learn CSS?

[@Andaluz_TV]

Very nice work. Do you happen to have any video where you talk about your environment?

[@ameen_ahmed]

58:17 - My bookmark.... Great video BTW - really long though

[@leonardocamargo5412]

This is a Awesome Tutorial. But, i like to do the project alone before copy the video tutorial. Would be amazing if you create an netlify site only to public the website of tutorial. So, share the website link in description video. For your follows inspect the elements and replicate the project. Thank you!

[@juliocodes]

Hey, thanks for the input. I do have a domain and hosting for a channel website I have in the works where I will be hosting demos of some of these projects

[@itsmeesamir]

What an amazing tutorial 👌

[@informatiquedz9800]

Thank you for this excellent content! it will be nice if we have live version to try before watching the video ;)

[@davebudah]

Thanks man. I'm learning a lot from you.

[@juliocodes]

Glad you find the content useful!

[@Elena-fc3hp]

Thanks Julio very much for this video. It helped me a lot :))

[@juliocodes]

Glad it helped!

[@udaykulkarni5639]

Thanksssss alottttt... You are simply awesome.. request you to make a udemy course..pleaseeeee, btw, did anyone notice the time, he was recording this at 3:50 "AM". Highly appreciate your efforts man :)

[@juliocodes]

I was planning on making a responsive web design course but then life got in the way. There will be one in the future for sure. And thanks! I have been very busy lately which is why there had not been new videos for a couple weeks so I got this done when I had free time even thought it was so late. I always try to put in a lot of effort into these videos.

[@udaykulkarni5639]

@@juliocodes sure man.. We simply want you to know that.. You are doing an awesome job and we would definitely love to have a course and be more than happy to pay for it. :) cheeers ❤

[@e-4shadowgamer854]

Great. You have so mutch of talent.... How many years you are working on out sorcing...