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.
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.
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 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/
@@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
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!
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.
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
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 !
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
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
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
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!
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:)
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.
//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'); });
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
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?
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
Romesh Digitalyogin glad you enjoy them. The video is 1080p, however, since I just recently posted it UA-cam is still processing the video. It will take a bit of time before you can watch it full resolution.
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!
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.
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
5:48, here you use the inherit property for box-sizing with the universal selector. Why do you also need to specify box-sizing in the html selector? Doesn't the html already inherit the box-sizing property from the universal selector?
Yes. I guess people just have a way of doing things. I saw somewhere that it ‘looked better’ this way but in reality it’s all the same and an extra step so I went back to just applying the boxing to the universal selector
*I have a problem:* whenever I click on the hamburger menu the one which he creates during 16:56, it goes back. You should be holding it for it to open. And if you leave it, it just goes back. And you should press the "X" button to do this in the first place.
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!
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
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.
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.
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.
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
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.
Post your JS code
@@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/
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!
Thanks!
What does framework mean?
@@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
Kani G Thank you i really appreciate the fast reply.
This channel is gold
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!
You have one of the best web tutorials on youtube :D im glad i found your video
Amazing tutorial ! The best tutorial out here rn, litterly everything you need to know in 1 vid ! got it all working
Thank you!
can you pleaseeee send the code i have not enough time and my project is due for tommorow plss
Finally i will learn how to do the waves. Thanks!!!
Simplicity is the ultimate sophistication. Great tutorial.
Thank you!
Didn,'t hesitate to subscribe when I came across this, looking forward to fully watch. Thanks for sharing
Glad to have you here!
Thank God no framework..:)
hahaha, that's funny bro
And no background “music”
this is awesome bro. please keep em coming up, we love your work sir
Kudos Julio, learned lot of new things and you covered use cases of grid, flexbox and combination of both.Really helpful...
Thank you! Really great tutorial and easy to follow along! Keep 'em coming :)
Great videos Julio, I only found your tuts a few weeks ago and they are really good, thanks buddy!!! ;o)
you are my best mentor!
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.
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
@@juliocodes Yes I meant also while including sass and es6, as well as minification/concatenation.
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!
Glad it was helpful!
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 !
Awesome Tutorial! Thanks man. Thoroughly enjoyed coding this alongside you. Going to build the other pages as well for practice.
Glad you found it useful. Awesome! That’s the best way to learn.
Just discovered your channel! Please keep making these QUALITY videos!
Thanks!
I love you videos man! nice channel
Just bumped into your channel. Looks like a great learning project!
Glad you find it useful!
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.
Great job, very detailed tutorial and no bootstrap, awesome 👍👍👍
Your video just popped up in recommended and it was very helpful , thank you sir !
I’m glad!
Tnx man, i'll watch this later once i get home. This looks great
This is very lovely! Thanks for your effort, learnt alot from you!
Impresionante crack! Saludos desde Argentina!
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
Great content as always !
Thanks!
I did find it useful! Thanks ever so much!
Great thing you started an IG profile also!
Thanks for watching!
Border-radius: if you are trying to get the circle effect, you only need 50%.
you sure? what if the container is not square?
Very helpful appreciate the time and effort.
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
Thanks, will do!
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
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!
You're very welcome!
That's amazing work!
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.
Cool, cool, cool, cool, cool, cool, cool, cool, cool, no doubt, no doubt.
Thumbs up 👍
You really took your time 👌 a good teacher
Very helpful 🙏
Hey! I am from russia and i think it is nice web tutorial.Thank you :)
All it takes is dedication and practice. Keep going and you’ll get there!
We want more video like this sir.
Really Good one
Liked and subscribed!
Good video!
Thanks!
thanks for this tutori al,great coding !
You're very good!!!!
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:)
Thanks for your video.
So, Helpful the Video, Thank U
excellent good project thanks
Nyco.........
Just wow Brother!!
much appreciated dude
you have gud creativity i like your videos
Thanks, Nasir!
Good job as always.. Thanks..
Nice Video👍
#ItsMD
Perfect my friend
Thank you very much for helping us new learnars...arigato
ua-cam.com/video/-ZKwMlbyr48/v-deo.html watch this html css & javascript game project
Awesome! TQVM!!!
So lit, thank you so much ♥🔥♥🔥♥🔥♥🔥
OMG I LOVE YOUR VIDEOS SM!
ua-cam.com/video/-ZKwMlbyr48/v-deo.html watch this html css & javascript game project
Great video! Love these type of videos can you please make more without using any framework/library?
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.
39:50
//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');
});
not working
got parsing error
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
loved it
THANK YOU SO MUCH MAN
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?
to make it easier for beginners to understand?
Hi Julio, it is a great tutorial, but we are having problems, could you help us?
just subscribed
thanks dude
Thanks!
Can you upload the completed repo? Ive followed how you did it and my main message dips onto the outdoors section below
Nice
Thank you very much, that's a great tutorial, keep going'
Thanks!
Thanks for the tutorials
No problem!
Love you brother
perfect
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
Romesh Digitalyogin glad you enjoy them. The video is 1080p, however, since I just recently posted it UA-cam is still processing the video. It will take a bit of time before you can watch it full resolution.
you earned my subscription and praise...amazing job, i am converting everything to react though.
Thanks! Glad you found it useful.
Nic
New subscriber in here :)
Great!
Thanks Julio Codes
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!
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?
Well i think you have a good future in UA-cam.
Show your face and keep providing good works.
Thanks for the kind words
can i find the script of the site please i need it
Amazing!!!
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.
Thank you
Hi Julio Codes, I have done the tutorial and revised it and its perfect, but it doesnt work, could you please help me? :(
Julio can you create one video about how to select typography and color scheme for website and how to use in website :)
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
@@juliocodes !! your modifications here are perfect!! how do you make images look wavy? is that regular CSS?
@@mosescodes3677 Maybe you should watch the video first...
Images are modified using tools such as photoshop, GIMP, etc..
@@juliocodes thank you, sir, maybe I will check that,
for me it shows the logo rather than the menu bar at 2:36, how do i fix this?
5:48, here you use the inherit property for box-sizing with the universal selector.
Why do you also need to specify box-sizing in the html selector? Doesn't the html already inherit the box-sizing property from the universal selector?
Yes. I guess people just have a way of doing things. I saw somewhere that it ‘looked better’ this way but in reality it’s all the same and an extra step so I went back to just applying the boxing to the universal selector
@@juliocodes okay thanks for clarifying that. Just wanted to make sure I understood inherit. Great tutorial btw!
Asking questions is a great thing to do. Thanks!
Nicejob
*I have a problem:* whenever I click on the hamburger menu the one which he creates during 16:56, it goes back. You should be holding it for it to open. And if you leave it, it just goes back. And you should press the "X" button to do this in the first place.
Hey Julio. In the project files I downloaded, the JS and CSS are missing...
same problem
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!
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
Awesome, what code editor do you use?
I use WebStorm
What operating system you use
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?
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.