Friend, you really don't know how much I am grateful to you for giving me this opportunity to practice, and with nothing more than the apple page, thank you very much for not leaving the complete code, and only the base files to follow the video, I think which is a way to practice and not to come for someone's code that took a lot of trouble to develop it, really, thank you very much.
That's pretty cool brother. I had been follow you step by step but some part of the website can't show like yours, such as apple logo ,bag and search buttons and many others like pictures.
Hi Julio,When I follow this video in dreamweaver. I have some problem of they show on withe. -CSS- 1. Blur: On row"33" 2. Cubic-bezier: On row "213"heigh & "260"margin doesn't in function. 3. fadeIn: it's show red 4. when on width 767px screen, menu font disappear. 5.Would you mind provide how to add mega submenu with svg/png? Please for help. Thx
Podrías hacer un vídeo con la parte de la animación del buscador de Apple y todo el resto del código seria increíble. Por cierto buen vídeo Excelente te ganaste un nuevo sub.
The HTML file fails to open - Btw, let us know if you create a tutorial that shows how to create an apple-look-a-like Responsive Nav Bar, and Responsive Nav Footer.
i dont think u can make an image as a background in html. you can set the image but not as a background, if using only html and not inline style or style
Depends on what your needs are. Building websites without frameworks pays more if you want to do it professionally. Either way, knowing how to build responsive websites without the need of a framework should always be a priority. Frameworks can be learned afterwards.
hi, recently I created a responsive website, and its working fine with all the devices, except IOS devices! the only thing which is not working fine is the images, I set the background image = cover and the positions is Fixed, and the problem is the images zoomed to 100 times Mabey, you cant not see the images! do you know the solution? thank you
When does he set the width of the header content? I'm setting "justify-content: space-between" on ".nav-link" and it is filling the whole page horizontally on large screens...
Hi Julio, I follow this your tutorial but I have a problem with the responsive in safari on mac: it work perfectly I increase the window but it doesn't work when I decrease the window. In Inspector web it say that there is this error: Viewport argument key "maximun scale" not recognized and ignored. But everything is ok in Chrome. HELP PLEASE.
Can somebody tell me how he is making changes in the real time which are visible on the right hand side, what is this feature called, is it a part of IDE?
You have to install it in your computer after you’ve downloaded it. You click on the font then a you’ll get a popup with the option to install. Or the alternative is to creat a fonts folder in your project then store the font there and then use the @font-face css rule to include them in your project. This way is better if you plan on sharing/hosting a website.
This is already built into Webstorm. You only have to right click your html file then click on "debug" and it'll open the browser that refreshes automatically.
Anyone having issues where the design works on a desktop, but not on a laptop? I.E. works at work, but doesn't display correctly at home. If I shrink the screen, the two upper left dashes do not fade. As I said, it works on my work desktop.
So my guess is that the issue is with the JavaScript. If it works on the Desktop it's not a coding issue, but more if an conflict or anti virus software/
So, JS works at home if I create a separate file and html page. Tried creating a button and it worked. So, long story short, when I worked on this at work, wasn't able to email a js file. changed it to text, and it didn't translate well. I copied the content of main.js and pasted it into a new file called main2.js. Wala, it worked. Thank you for the video.
Friend, you really don't know how much I am grateful to you for giving me this opportunity to practice, and with nothing more than the apple page, thank you very much for not leaving the complete code, and only the base files to follow the video, I think which is a way to practice and not to come for someone's code that took a lot of trouble to develop it, really, thank you very much.
It's only 16:47 and I'm learned much more, than the past week... I'll keep watching...
Greetings from Costa Rica, your videos have helped me to be a web developer. Thank you and millions of thanks.
Thanks Carlos! Glad to help
Amazing tutorial, very cool, well done and easy to understand!!!
Thank you Julio, I learned a lot!!
Amazing tutorial, very cool, well done and easy to understand!!!
Thank you Julio, I learned a lot!!
Amazing, I did not type code I just watched and learned some techniques. Keep going.
Perfect! I am waiting for your next video!
this is amazing tutorial i learned lots of things like perfect way to use media queries thanks julio God Bless u!
Do you want to be a webdeveloper?
Yes I want...
But I'm already a half web developer.
I have made it for my school project
Was waiting for this....Thank you!
I Was waiting for this.. from so long time thanks bro from North Africa
That's pretty cool brother. I had been follow you step by step but some part of the website can't show like yours, such as apple logo ,bag and search buttons and many others like pictures.
My god you nailed it
Great looking design as always, thanks
Great job Julio!
Thank you JC this was aweasome....a lot of styling involved though
Another nice tutorial. Thank you!
No problem!
Fantastic tutorial, really enjoyed it, more JavaScript please!
Thank you so much bro, I learned A LOT
I'm not first..😘
I'm not last...🤗
But when I get notification...i clicked fast
Like #1.4k
Julio nice tutorial👌👌👌👌
many many thanks julio
Thanks for a nice tutorial, I learned a lot.
nice work! and i did click the affiliate link , support ++ : )
good video bro, hey what does mean cta
That was good man
Please provide the source code for this project. I already check your GitHub repository, but the all file is just empty.
Fantastic One !
Thank you very much Sir for this tutorial 😘😘
Thank you very much for the video. Great stuff. How do I get the apple website background images in different sizes?
Hi Julio,When I follow this video in dreamweaver. I have some problem of they show on withe.
-CSS-
1. Blur: On row"33"
2. Cubic-bezier: On row "213"heigh & "260"margin doesn't in function.
3. fadeIn: it's show red
4. when on width 767px screen, menu font disappear.
5.Would you mind provide how to add mega submenu with svg/png?
Please for help. Thx
Hello Julio! Can you recommend some books and lectures?
Podrías hacer un vídeo con la parte de la animación del buscador de Apple y todo el resto del código seria increíble.
Por cierto buen vídeo Excelente te ganaste un nuevo sub.
In large screen setting, menus are spread out to the whole width of navbar. I'm looking what error I made, but can you help ?
Exactly!!!! And the github of the project is empty... very sad :(
The HTML file fails to open - Btw, let us know if you create a tutorial that shows how to create an apple-look-a-like Responsive Nav Bar, and Responsive Nav Footer.
Hey Julio, I was looking for a video like this! You’re amazing. Bro you know how I can make a website like this on shopify
is it better to set the image in css using background (for the Apple, search and bag logos) or in html with img? Thank you :)
i dont think u can make an image as a background in html. you can set the image but not as a background, if using only html and not inline style or style
Where is Source code ?m
thanx for this video buddy :)
should you use @media queries or bootstrap for responsive web design?
Depends on what your needs are. Building websites without frameworks pays more if you want to do it professionally. Either way, knowing how to build responsive websites without the need of a framework should always be a priority. Frameworks can be learned afterwards.
Hi Julio, how do I run your files on macbook terminal?
hi, recently I created a responsive website, and its working fine with all the devices, except IOS devices!
the only thing which is not working fine is the images, I set the background image = cover and the positions is Fixed, and the problem is the images zoomed to 100 times Mabey, you cant not see the images! do you know the solution? thank you
When does he set the width of the header content? I'm setting "justify-content: space-between" on ".nav-link" and it is filling the whole page horizontally on large screens...
I know its been 6 months and you have definitely figured it out, but it is supposed to be .nav-list
The dropdown menu didnt work
it said in the debug console: Uncaught TypeError TypeError: selectElement(...).addEventListeners is not a function
found out i wrote an S at the end 🤣
Hi Julio, I follow this your tutorial but I have a problem with the responsive in safari on mac: it work perfectly I increase the window but it doesn't work when I decrease the window. In Inspector web it say that there is this error: Viewport argument key "maximun scale" not recognized and ignored. But everything is ok in Chrome. HELP PLEASE.
A problem in JavaScript => Cannot read property 'addEventListener' of null
at . Can anyone help ?
same lmk if u find solution
Nive video. how did you select all please ???
nice video, but i dont understand why u did not put entire project on github
How do you make the page update every second? I would like to know if it is a plugin or please.
what do you mean by every second?
its called live server...... if you are using vs code then add live server extension!
Rly good your a very talented developer! 👍 also what ide are you using?
Thanks! I use WebStorm
I'm having this problem in JavaScript => Cannot read property 'addEventListener' of null
stuck at 56:58
It's having issues with your class selector with the JS. For some reason it's coming back as empty.
3:29 : Sir I am not able to make a class here
Amazing
hi I can not reached your project file for your image
hi what software are you using to do the code?
What is the your coding font
Hello,I was wondering how to put my logo instead of apple logo,when I put my logo it doesn’t show,please help
The img src
make sure its correct
Nisan Abeywickrama I fixed it,the problem was in the class size of 1.4 rem I just increased it
Your browser is always refreshing. How did u do that?
It's a built in feature WebStorm has called Live Edit but you can get it with VS Code too via extensions: ruclips.net/video/wMmu_369n7c/видео.html
Is there a possibility to make the hamburger menu animation with :checked instead of javascript?
Yes, but it would take a lot more cess to trigger the active state on the menu.
@@juliocodesCould you record a video teaching this? because here on RUclips there is no such video, it would be very interesting
super cool:)
Thanks!
how did you get the icons ??
create one that have all those animations sort of things like we see on the iphone webpage of apple portal ...
@26:00 How did the text go to the top?
is this using CSS3 properties?
Where did you get the logo and image ? Please tell me. Thx before
From the Apple website
Can you please post the whole code pleaseeeeeeeeeeee?
Can somebody tell me how he is making changes in the real time which are visible on the right hand side, what is this feature called, is it a part of IDE?
In visual studio install live server, it refreshes it everytime u make a change
Sir please say can I use font awsome insted of apple.svg
Thank you sir
pwp jos
I hope you are very well since I have seen in the news that the United States is hit by the covid-19 Greetings Pura Vida
Thanks, Carlos. Be safe as well!
Can you make rolls Royce menu?
thank you
Bro your voice is so cute. Lol
Buy a domain take it live let's see with hosting and cpanel
Bruv is that a joke u will get licked for coppyrights
Thank you! But how to link the fonts to html ? I downloaded it from Git but it's not working. How can I link it? I am on Windows 10 64bit.
You have to install it in your computer after you’ve downloaded it. You click on the font then a you’ll get a popup with the option to install. Or the alternative is to creat a fonts folder in your project then store the font there and then use the @font-face css rule to include them in your project. This way is better if you plan on sharing/hosting a website.
Thank you Julio .Initially, in my computer it didn't install so I managed it by using @font-face rule.
@@juliocodes Thank u. Firstly I tried first option but it didn't work. Then I managed it by @font-face rule.
I'm having issues with the mobile menu :(
I am the same, have you solved it
@@周强-i4e I had problem with it and removing z-index fixed it.
Thanks alot
No problem!
I dont know why my Html cant read my css file
You can pass the configuration of your Webstorm so that it updates instantly and the autocomplete with the tab, in mine that does not happen please.
This is already built into Webstorm. You only have to right click your html file then click on "debug" and it'll open the browser that refreshes automatically.
Julio Codes how to do that .thing to work ? I cannot figure it out
Thanks
i noticed that u work at 4AM!
I often don't have time during the day so often I'll work when I get the chance, even if it's at 4am LOL
@@juliocodes i also work at 2 - 3 am because of my baby sitting time and day job
how can i download the images ?
No source code is available on the github please add the code {:
you used JS too. title says only html and css
Mobile navbar styling at 38:00
How can i get this code?
i followed along and now i have a portfoilio booster
Please can you help me i have some errors
I have a question how can I get the pictures may you help please
There's a link to the GitHub repo in the description with the starter files and images
@@juliocodes could you send me the link please
@@juliocodes sir project code
how can i make a similar webpage but without resizing the navbar and just keep the burger the whole time
You can just combine the second nav ul into the first one. You’ll have to change up the styles though so it doesn’t get messed up
@@juliocodes im trying to make it... i will show you the code when i finish it... i hope it is good enough for a b+
19:46 You should be careful when typing nav list nav list mobile cuz I have faise at that
I wanted to see the iMac pro page with trackpad linked animations ...
😥😥😭😭😭
The iMac animating I believe that’s a video being controlled on scroll
@@juliocodes did you make a video showing a similar implementation? If so please link ...
Lots of classes..does it really need?..btw thanks
No, but using classes makes it easier to keep track of your selectors and serves as descriptions for whoever is looking at your code.
good job bro 谢谢你
How do i download icons and fronts
I need immediate reply so that I can go through
Can anyone do the mobile view nav bar without js
What app is that?
Visual Studio Code
sir plz give me the source code its request there is no coding on github i m ur new subscriber
Anyone having issues where the design works on a desktop, but not on a laptop? I.E. works at work, but doesn't display correctly at home. If I shrink the screen, the two upper left dashes do not fade. As I said, it works on my work desktop.
So my guess is that the issue is with the JavaScript. If it works on the Desktop it's not a coding issue, but more if an conflict or anti virus software/
So, JS works at home if I create a separate file and html page. Tried creating a button and it worked. So, long story short, when I worked on this at work, wasn't able to email a js file. changed it to text, and it didn't translate well. I copied the content of main.js and pasted it into a new file called main2.js. Wala, it worked. Thank you for the video.
For transitions use this libraries #Gsap #greensock
In the future I will
@@juliocodes hmm