Responsive Apple Website UI | HTML and CSS Tutorial

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.

[ PROJECT FILES ]

[ SOCIAL MEDIA ]

[ HOSTGATOR ]

Get affordable domain and web hosting with HostGator. Save up to 60% off of your entire purchase with the coupon code below.

Coupon code ► JULIOCODES60

[ 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!

[LoquendoElHistoriador]

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.

[royalmusix]

It's only 16:47 and I'm learned much more, than the past week... I'll keep watching...

[Destinymusic]

Greetings from Costa Rica, your videos have helped me to be a web developer. Thank you and millions of thanks.

[subashrai]

Amazing, I did not type code I just watched and learned some techniques. Keep going.

[AlissonMiron]

Perfect! I am waiting for your next video!

[javierreina]

Amazing tutorial, very cool, well done and easy to understand!!!
Thank you Julio, I learned a lot!!

[jeanssmith]

I Was waiting for this.. from so long time thanks bro from North Africa

[anuj]

this is amazing tutorial i learned lots of things like perfect way to use media queries thanks julio God Bless u!

[dfjama]

Great looking design as always, thanks

[cookingwithseema]

I'm not first..😘
I'm not last...🤗
But when I get notification...i clicked fast
Like #1.4k

[thesouthsidedev]

Thank you JC this was aweasome....a lot of styling involved though

[moniromXsong]

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.

[e-raticartist]

Thank you so much bro, I learned A LOT

[Jakersfire]

Fantastic tutorial, really enjoyed it, more JavaScript please!

[tusenkopparkaffe]

Thanks for a nice tutorial, I learned a lot.

[namesurname-kdtk]

A problem in JavaScript => Cannot read property 'addEventListener' of null
at . Can anyone help ?

[rajatverma]

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 ?

[harismuhammed]

I'm having this problem in JavaScript => Cannot read property 'addEventListener' of null

[kennethfong]

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

[ImranKhan-wtki]

Please provide the source code for this project. I already check your GitHub repository, but the all file is just empty.