Build a Complete Responsive Website | HTML and CSS Tutorial

[@juliocodes]

Hey there! I've added time stamps in the description. Also, I’m seeing a common issue here that many of you are having with the JS. Take out “s:” and “token:” (if you copied that too). That’s not part of the JS. It’s my IDE making a reference of the values being passed in.

[@PaulCade]

So glad you said that, I saw the "tokens" magically appear and wondered where it had come from, I removed it when it wouldn't work, but I hadn't noticed the "s:" being added in by itself.

[@guccigreatness4925]

when i try to run the js my compiler says 's' is undefined can u tell me what is wrong with the js i wrote

[@juliocodes]

Do not remove the ‘s’ variable, only the ‘s:’ reference. Also, the dimensions are 1920x1080. It’s why the larger wave image might look weird on larger resolutions. You might have to use an image tool to scale the wave to a larger resolution then create another media query for bigger screams to replace the large wave image as I did in previous break points.

[@juliocodes]

Post your JS code

[@PaulCade]

@@juliocodes Julio, with regards to resizing the Waves images for larger screens, how do we stop them disappearing behind the Adventure and Testimonial sections ?? I increased the image size to 2560x300 does it just need to be a little higher or can we code that out ?? Edit: I jumped the gun a little, finished the video and got the answer I was looking for, sorry about that. Take a look see here : www.bam-web-design.com/adventure/

[@dancehalllyrics1303]

For those of you who don't mind using jQuery, this is what the jQuery code for the side nav should look like: $(document).ready(function () { $('#openSideBar').on('click', function () { $('.nav-list').addClass('active'); }); $('#closeSideBar').on('click', function () { $('.nav-list').removeClass('active'); }); }); Remember to add the ids to the div elements nesting the opening and closing icons!

[@kanig5256]

Julio, this is perfect. I love that there was no framework used. I appreciate the consistency of your uploads. Looking forward for more to come!

[@juliocodes]

Thanks!

[@merychippus]

What does framework mean?

[@kanig5256]

@@merychippus like a collection of programs you can use to develop your own application. For example bootstrap is a framework used with CSS. It has pre written libraries that you can use and etc. so when you learn in beginning it is better to learn without framework so you can fully understand before you use them to help you and make stuff easier

[@merychippus]

Kani G Thank you i really appreciate the fast reply.

[@dwanejohnson3772]

This channel is gold

[@wonderson_1]

Simplicity is the ultimate sophistication. Great tutorial.

[@juliocodes]

Thank you!

[@xAndre-SDM]

Finally i will learn how to do the waves. Thanks!!!

[@rg5231]

Amazing tutorial ! The best tutorial out here rn, litterly everything you need to know in 1 vid ! got it all working

[@juliocodes]

Thank you!

[@tiboruc8110]

can you pleaseeee send the code i have not enough time and my project is due for tommorow plss

[@rogerpantil9483]

You have one of the best web tutorials on youtube :D im glad i found your video

[@dfjama]

Didn,'t hesitate to subscribe when I came across this, looking forward to fully watch. Thanks for sharing

[@juliocodes]

Glad to have you here!

[@compteprivefr]

This is so cool but could your next "build a website" video show a bit more on how to set up a build process either with gulp or webpack or use tools like react to achieve designs like this? That would be closer to how it's done in the real world.

[@juliocodes]

The thing is that for a simple project such as this one using such task runners/package managers is overkill. There isn’t much benefit since I’m just using plain HTML and CSS without any additional things. Now, if I was using Sass/Scss and newer JS features (ES6+) then it would be useful to automate certain things such as compiling the files into plain css/ES5 etc... I haven’t gotten around to it yet, but soon I hope to also get into using SCSS and more advanced JS for my projects. Thanks for the suggestion

[@compteprivefr]

@@juliocodes Yes I meant also while including sass and es6, as well as minification/concatenation.

[@srinudanda9115]

Kudos Julio, learned lot of new things and you covered use cases of grid, flexbox and combination of both.Really helpful...

[@TheCzemp]

Great job, very detailed tutorial and no bootstrap, awesome 👍👍👍

[@Astras-Stargate]

Just finished your tutorial-what a beautiful site you have built! Learned some new things that I can't wait to experiment with them. Thank you!

[@juliocodes]

Glad it was helpful!

[@esagecantu]

It was an awesome video. I am still figuring out how to build a simple responsive site. I believe practice makes me a better dev. Thank you.

[@unique_destinations]

Your video just popped up in recommended and it was very helpful , thank you sir !

[@juliocodes]

I’m glad!

[@CODE-hv4rt]

Thank you for the tutorial, very easy to understand, simple and short. keep the spirit, continue to be successful never stop providing the best information

[@juliocodes]

Thanks, will do!

[@samirsamir7779]

waw , another great man I just discovered . I hope you will deliver a ton of your very clear coding knowledge please ! this way is perfect : it means you teach us coding while we can see the evolution of the website ! please keep going and try to deliver us some long videos to teach us all needed tools for a "pro website" (i.e : html , css + bootstrap, js + jquery , php + zend ..etc , mariaDB or mongoDB ...etc ) , thanks for your time and videos Man !

[@germainrodriguez5230]

Just discovered your channel! Please keep making these QUALITY videos!

[@juliocodes]

Thanks!

[@mosescodes3677]

this is awesome bro. please keep em coming up, we love your work sir

[@GammaWraith]

Awesome Tutorial! Thanks man. Thoroughly enjoyed coding this alongside you. Going to build the other pages as well for practice.

[@juliocodes]

Glad you found it useful. Awesome! That’s the best way to learn.

[@networkfreddy2000]

Thank you for your videos Julio..I wanted to teach myself web development and somehow ended up learning flask.django and python first...I took a step back and found your channel. I should have started with you first and mastered html/css/and javascript thank you!

[@juliocodes]

You're very welcome!

[@digigoliath]

Just bumped into your channel. Looks like a great learning project!

[@juliocodes]

Glad you find it useful!

[@rian438]

this is very nice, I am leaning to develop a site using git with gulp and I choose this tutorial because it awesome and simple to follow.

[@wingsofcobra9040]

It was a very nice video, I had some issues first with the javascript and some issues with the perfect styling but it was nice and now my website looks beautiful

[@thomasaggerholm6370]

Thank you! Really great tutorial and easy to follow along! Keep 'em coming :)

[@nicdemus-rc7gc]

Great videos Julio, I only found your tuts a few weeks ago and they are really good, thanks buddy!!! ;o)

[@debrain1647]

Thumbs up 👍 You really took your time 👌 a good teacher

[@mk9834]

This is very lovely! Thanks for your effort, learnt alot from you!

[@DavidNitzscheBell]

Considering this video is from 2019 and you're using Flexbox and CSS Grid, it seems like you're using too many semantically-nil s. header, div, nav, div section, div, div Also, why not combine two statements (font-size, font-family) into one "font: 4rem Aldrich, sans-serif" statement?

[@abdallah3427]

to make it easier for beginners to understand?

[@vlogerman3413]

thankssss men I have been looking forward to this you are the best men this is the right tutorial that I have been looking for although every each Web designer has different style in designing a website but this is a good tutorial so far

[@anuj7286]

you are my best mentor!

[@ДиванныеПацаны]

Hey! I am from russia and i think it is nice web tutorial.Thank you :)

[@juliocodes]

All it takes is dedication and practice. Keep going and you’ll get there!

[@wilderfromero819]

Tnx man, i'll watch this later once i get home. This looks great

[@badhobby503]

I did find it useful! Thanks ever so much! Great thing you started an IG profile also!

[@juliocodes]

Thanks for watching!

[@DJalem]

Another great tutorial that helps me a lot for future projects. Please make a project using tools like (gulp4/webpack, sass, git), if you have already a gulp4/sass boilerplate it would be nice to share with us bro:)

[@xXtiagovistaXx]

Great video! Love these type of videos can you please make more without using any framework/library?

[@juliocodes]

Thanks! And yes, I will always upload these types of videos. However, I’ll also post other videos related to frameworks and libraries every now and then since other subs enjoy those as well.

[@MilanB]

Thank God no framework..:)

[@abangjimmy]

hahaha, that's funny bro

[@llihak]

And no background “music”

[@dariusbrown2816]

Very helpful appreciate the time and effort.

[@felips.g]

I love you videos man! nice channel

[@yeasminakter5322]

Thank you very much for helping us new learnars...arigato

[@jadijohnson2899]

kzbin.info/www/bejne/Y4uuqICil96lapo watch this html css & javascript game project

[@shamimreza5463]

We want more video like this sir.

[@adriandrozman3404]

Great content as always !

[@juliocodes]

Thanks!

[@rockyvlog4087]

thanks for this tutori al,great coding !

[@DavidNitzscheBell]

Border-radius: if you are trying to get the circle effect, you only need 50%.

[@dileepmv7438]

you sure? what if the container is not square?

[@mateenmehmood4778]

//Function expression to select elements const selectElement = (s) => document.querySelector(s); //Open the menu on click selectElement (s: '.open').addEventListener('click', () => { selectElement(s: '.nav-list').classList.add('active'); }); //Close the menu on click selectElement (s: '.close').addEventListener('click', () => { selectElement(s: '.nav-list').classList.remove(tokens: 'active'); });

[@mateenmehmood4778]

not working got parsing error

[@chinyahte8110]

Remove the s: and tokens: from your code and it should work. So instead of this code: selectElement (s: 'close').addEventListener Use: selectElement ('.close').addEventListener

[@nasirshaik2662]

you have gud creativity i like your videos

[@juliocodes]

Thanks, Nasir!

[@osmeig6025]

Impresionante crack! Saludos desde Argentina!

[@musfiqshanto4191]

So, Helpful the Video, Thank U

[@maciejwolejszo]

Hi Julio, amazing Tutorial. I watch this tutorial and after this tutorial I understand most things. I have only one quick question about "linear-gradient". What should be properly defined in the parameters if I want to change the colour? For example brown. Thanks once again for tutorial.

[@juliocodes]

Glad you found it useful. To change the colors you can just replace the rgba() values. You can google the color and a lot of tools will come up that will give you the hex code and rgba

[@creatifytech9347]

That's amazing work!

[@blankblank103]

Liked and subscribed! Good video!

[@juliocodes]

Thanks!

[@digigoliath]

Awesome! TQVM!!!

[@reviewtalk3461]

Well i think you have a good future in KZbin. Show your face and keep providing good works.

[@juliocodes]

Thanks for the kind words

[@luizerajoga1506]

You're very good!!!!

[@Decatilinae]

Hi Julio...love these tutorials... especially the Html and css website build without other libraries... Can I ask if you can upload video with hi resolutions? thanks a lot

[@juliocodes]

Romesh Digitalyogin glad you enjoy them. The video is 1080p, however, since I just recently posted it KZbin is still processing the video. It will take a bit of time before you can watch it full resolution.

[@loveparmar1284]

Just wow Brother!!

[@sammarie8098]

OMG I LOVE YOUR VIDEOS SM!

[@jadijohnson2899]

kzbin.info/www/bejne/Y4uuqICil96lapo watch this html css & javascript game project

[@pourdaryaei]

Thank you very much, that's a great tutorial, keep going'

[@juliocodes]

Thanks!

[@blacklotus1606]

you earned my subscription and praise...amazing job, i am converting everything to react though.

[@juliocodes]

Thanks! Glad you found it useful.

[@rickertluisgonzalesramirez1839]

excellent good project thanks

[@topmaster2843]

Thanks for your video.

[@micholecanalita6132]

Good job as always.. Thanks..

[@miladx2143]

Very helpful 🙏

[@비비-j7y]

Hey Julio, thanks for the video. I have a quick question. Why is it that we make a section with a class of testimonials and then inside of it we make a div with a class of container and inside of that, we make ANOTHER div with a class of testimonial? I understand the container div is to create a flexbox or grid but what about the section? Thank you in advance!

[@guesswho343]

much appreciated dude

[@muthurandom]

Really Good one

[@junaidtariq4547]

Julio can you create one video about how to select typography and color scheme for website and how to use in website :)

[@juliocodes]

Usually I’m not very good with these types of things. I mostly get inspiration from designers on Pinterest or dribbble. Then I take a design, color schemes and make modifications to it. As far as the fonts, I try several ones and choose the two fits best. Can’t good wrong with clean fonts such as Roboto, Nunito, and Monserrat though

[@mosescodes3677]

@@juliocodes !! your modifications here are perfect!! how do you make images look wavy? is that regular CSS?

[@Coloring_Books_Zenthusiast]

@@mosescodes3677 Maybe you should watch the video first...

[@juliocodes]

Images are modified using tools such as photoshop, GIMP, etc..

[@mosescodes3677]

@@juliocodes thank you, sir, maybe I will check that,

[@ceejGU]

Thank you for the tutorial. I learned a lot from the media query portion. one question, do you have any particular resources that you can recommend for learning web development? I'm learning on my own in my spare time but I'm looking for more structure. Thank You!

[@juliocodes]

You could try codecademy.com, they offer many free courses including web dev that can help give you basic to intermediate understanding. If you're willing to pay (about $10) then I can recommend this course from udemy: www.udemy.com/advanced-css-and-sass/?couponCode=LAUNCHSITE4

[@alexyu2605]

Hi Julio, it is a great tutorial, but we are having problems, could you help us?

[@rasulali4690]

Cool, cool, cool, cool, cool, cool, cool, cool, cool, no doubt, no doubt.

[@kasoamallam9336]

Julio, How would you go about with the grid and CSS syntax for the rest of the pages? Have different grid items/layout for each page?

[@shahabjoon201]

Perfect my friend

[@futbol_edit2782]

perfect

[@abulfazlhaidary4625]

Thank you so much for the awesome video.. Just it would be great if your do a little zoom on your screen cause its really hard to see.

[@juliocodes]

Thanks. I've made the font slightly bigger from now on.

[@bhavnishbhardwaj2275]

loved it

[@shashanksharmadon4295]

Nyco.........

[@jondarling7933]

I built this out using Sass and made it my own. Feel free to add any pull requests. Code here: github.com/natas7509/websites/tree/master/NZ-site Site link is in the Readme. Thanks so much Julio! - I'm learning a lot from your tutorials.

[@jumaelahmed9995]

Great!

[@asia22]

So lit, thank you so much ♥🔥♥🔥♥🔥♥🔥

[@MrAngelluis3]

Can you upload the completed repo? Ive followed how you did it and my main message dips onto the outdoors section below

[@angelarubio4084]

Amazing tutorial, thx so much! I have a question why do you have to put width:100% so many times, and not just on the media queries?

[@juliocodes]

If the width is not specified then the elements only take up the space they need which is not suitable to achieve a certain layout. Especially if you want to move things around. The styles were applied initially so no need to apply them again in the media query if it’s staying the same throughout the entire site.

[@asterisked]

Hello Julio! Please, would you mind explaining why do you style the background gradient of the hiking, camping, star gazing grids, with a ::before pseudoelement? Why is the ::before needed? I'm not understanding that bit of the code. Thank you!!

[@jadijohnson2899]

kzbin.info/www/bejne/Y4uuqICil96lapo watch this html css & javascript game project

[@bikramchettri9405]

Thanks for the tutorials

[@juliocodes]

No problem!

[@jadenjames1640]

just subscribed thanks dude

[@juliocodes]

Thanks!

[@arseneawounou180]

Watching this in June 2020

[@maulanahidayat6039]

Nice

[@MrPotingkay]

THANK YOU SO MUCH MAN

[@mdsafikulislam9113]

Love you brother

[@4pettigrews]

Thank you for providing this. There are some good production tips... but when used on a mobile device in landscape mode several parts of this design fail miserably.

[@juliocodes]

It’s mostly due to certain fixed heights on things. That could be remedied with additional media queries based on width and height to detect when a device is in landscape mode. It could be a future video discussion. Thanks for watching.

[@4pettigrews]

@@juliocodes Hi Julio, Yes, i can appreciate what you are saying but you billed this as a "Complete Responsive Website"-which in IMO includes viewing it on a mobile device, which can be in either landscape or portrait mode. As such, the tutorial could have been a little more comprehensive for those that don't know how. That aside, I think it is very cool that you are helping people learn some cool dev chops ;) Cheers!

[@piotrdubiel2697]

Love your tuts! I noticed one thing that can be improved. In case of better performance it is better to use transform (translateX) animation instead of animating right, left etc. properties.

[@juliocodes]

You are right. I’ve actually used the technique in previous videos. I remember watching a video by Colt Steele talking about animation and performance. However, I had some issues with the transition when using translateX so I scrapped it and used right.

[@DhanoaJasjit]

Which javascript library are you using here julio please lemme know my vscode is reading classList as normal text

[@DreaM-hq1pp]

How do I make the nav list responsive? I don't think you mentioned it. PS. Great Turtorial, Julio!

[@dynamo7731]

Thank you

[@NiramlProduction]

Nic

[@victorBrapp]

Nicejob

[@itsmd.25]

Nice Video👍 #ItsMD

[@PabloMartinezfr]

Amazing!!!

[@trieuthuan8995]

Thanks Julio Codes

[@DanielTobiOnipe]

Hey Julio. In the project files I downloaded, the JS and CSS are missing...

[@balintpuddle]

same problem

[@MNafik-jw9wg]

New subscriber in here :)