In today’s video we will create a partial replica of apple’s website using html and css which was redesigned for the launch of the new iPhone 11 pro. We will add several animations, including the use of keyframes, and we will also make the website responsive.
Don’t forget to leave a thumbs up if you found the video useful. Also, click on the bell icon to turn on notifications. This way you’ll be notified the moment new videos are uploaded.
Subscribe โบ https://bit.ly/2Q3pCiB
[ PROJECT FILES ]
GitHub โบ https://bit.ly/35gwFs2
SF font โบ https://bit.ly/2HDGkx2
[ SOCIAL MEDIA ]
Instagram โบ https://www.instagram.com/juliocodes
[ HOSTGATOR ]
Get affordable domain and web hosting with HostGator. Save up to 60% off of your entire purchase with the coupon code below.
HostGator โบ https://bit.ly/2ZfR0u3
Coupon code โบ JULIOCODES60
Video tutorial โบ https://youtu.be/5B_LQqR0zsE
[ MY GEAR ]
Programming/Video editing laptop Specs & extras
Laptop: Dell XPS 15 7590
Processor: 9th Generation Intel Core i7-9750h
RAM: 32GB (Upgraded)
Graphics Card: Nvidia GeForce GTX 1650 4GB GDDR5
Storage: 500GB M. 2 PCIe NVMe SSD (Upgraded)
— Extras —
Monitor: Dell Ultrasharp 27″
Keyboard: Logitech MX Keys
Mouse: Logitech MX Master 3
Microphone: Blue Yeti
[ DISCLAIMER No. 1 ]
In order to speed up the development process CSS prefix are not used. In order to ensure cross browser compatibility please use prefixes where necessary.
[ DISCLAIMER No. 2 ]
This video description contain affiliate links, which means that if you click on one of the product links, Iโll receive a small commission. This helps support the channel and allows me to continue to make videos like this. Thank you for the support!
source
https://youtube.com/shorts/iAqnLi0Sb3E?si=aYsxM58vP8HYKhcs
Julio nice tutorial๐๐๐๐
you used JS too. title says only html and css
19:46 You should be careful when typing nav list nav list mobile cuz I have faise at that
18:23 Link not list
15:08
What app is that?
Can you make rolls Royce menu?
3:29 : Sir I am not able to make a class here
well explained video,
I got 4-5 error, but still I figure out what was wrong in the code,
Thank you,
I learned a lot from this.
Where is Source code ?m
Amazing, I did not type code I just watched and learned some techniques. Keep going.
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.
how did you get the icons ??
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…
The dropdown menu didnt work
it said in the debug console: Uncaught TypeError TypeError: selectElement(…).addEventListeners is not a function
@26:00 How did the text go to the top?
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.
Bro your voice is so cute. Lol
nice work! and i did click the affiliate link , support ++ : )
i noticed that u work at 4AM!
How do i download icons and fronts
Like wtf
Does this guy even say what program he uses? Absolute beginner frustrations. Beginners do not watch this video please
Does man like julio respond??๐
Thanks for a nice tutorial, I learned a lot.
Hi Julio,When I follow this video in dreamweaver. I have some problem of they show on withe.
CSS1. 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
My god you nailed it
Thank you so much bro, I learned A LOT
Please provide the source code for this project. I already check your GitHub repository, but the all file is just empty.
Hi Julio, how do I run your files on macbook terminal?
Mobile navbar styling at 38:00
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?
Thank you very much for the video. Great stuff. How do I get the apple website background images in different sizes?
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.
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 ?
What is the your coding font
create one that have all those animations sort of things like we see on the iphone webpage of apple portal …
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
That was good man
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 ๐
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.
pwp jos