Starbucks Landing Page Website Design using Html CSS & Javascript | Step By Step Web Design Tutorial

[@OnlineTutorialsYT]

Revolutionize projects with our advanced source code. Elevate innovation, accelerate development, and gain a competitive edge. Your key to success is here. Transform ideas into reality now. Get now more than 1000+ source code just by clicking on this link : www.patreon.com/onlinetutorials Here you will find each and every Source Code is Unique.

[@Torao-Law]

as a beginner in the world of web programming, iam very grateful for the knowledge you have shared. thank you very much

[@MRC0MM1T]

I told my friends that you are the best web designer on youtube. All your tutorials are just perfect. Thanks a lot

[@OnlineTutorialsYT]

Thanks bro 😀

[@bijoy1241]

Sir ,, I love you and your vedios Please say me first one background music ...😆😅

[@devilways6896]

@@bijoy1241 search on ncs song

[@cmpestudent7602]

This is by far the best tutorial channel in KZbin for web development. I literally learned massive amounts of thing in this 15 min video. Love your videos!

[@kaiser94exodus89]

what did you learn ? might as well jump to the end and copy the code, they don't explain what it does nor what each property is used for so you could not have learned something pertinent. and this is not a criticism to the channel, i encourage the owners to at least explain more about the code, I couldn't have understood anything if i weren't already able to do it.

[@RaveStarTV]

@@kaiser94exodus89 That's because it's not aimed at beginners. If you've already covered the basics of web development and coded a few projects then you'll be able to answer any questions yourself. 1. See something you don't understand 2. Google it and find the docs 3. Read the docs and look at the use case in real-time using this video. Meaning this is a fantastic tutorial for people who are already past the "basics" stage, it solidifies all the knowledge you should have from the ground up to create a high quality, responsive web page. That's what makes this tutorial good.

[@IrmaoUrso]

@@kaiser94exodus89você pode não ter entendido nada, mas quem já é ao menos intermediário consegue entender bem mais fazendo do que quando alguém explica(esse é o meu caso)

[@leonomollo7836]

I am learning so much from this. You are so appreciated, you do not even know!

[@RobbySuliantoro]

TIMESTAMP: 0:18 RESULT 0:50 PREPARATION 0:59 HTML (A1 - BEFORE) 1:31 HTML (A1 - AFTER) 1:32 RESULT STEP 1 1:36 CSS (B1 - BEFORE) 1:59 CSS (B1 - AFTER) 2:01 RESULT STEP 2 2:06 CSS (B2 - BEFORE) 2:19 CSS (B2 - AFTER) 2:21 RESULT STEP 3 2:24 CSS (B3 - BEFORE) 2:33 CSS (B3 - AFTER) 2:34 RESULT STEP 4 2:38 HTML (A2 - BEFORE) 2:42 HTML (A2 - AFTER) 2:45 RESULT STEP 5 2:48 CSS (B4 - BEFORE) 3:01 CSS (B4 - AFTER) 3:03 RESULT STEP 6 3:04 CSS (B5 - BEFORE) 3:22 CSS (B5 - AFTER) 3:25 RESULT STEP 7 3:28 HTML (A3 - BEFORE) 3:59 HTML (A3 - AFTER) 4:02 RESULT STEP 8 4:04 HTML (A4 - BEFORE) 4:17 HTML (A4 - AFTER) 4:23 RESULT STEP 9 4:26 HTML (A5 - BEFORE) 4:38 HTML (A5 - AFTER) 4:41 RESULT STEP 10 4:44 HTML (A6 - BEFORE) 4:57 HTML (A6 - AFTER) 5:00 RESULT STEP 11 5:07 CSS (B6 - BEFORE) 5:15 CSS (B6 - AFTER) 5:17 RESULT STEP 12 5:20 CSS (B7 - BEFORE) 5:28 CSS (B7 - AFTER) 5:30 RESULT STEP 13 5:32 CSS (B8 - BEFORE) 5:48 CSS (B8 - AFTER) 5:49 RESULT STEP 14 5:51 CSS (B9 - BEFORE) 6:04 CSS (B9 - AFTER) 6:07 RESULT STEP 15 6:10 CSS (B10 - BEFORE) 6:47 CSS (B10 - AFTER) 6:51 RESULT STEP 16 6:55 CSS (B11 - BEFORE) 7:05 CSS (B11 - AFTER) 7:07 RESULT STEP 17 7:10 CSS (B12 - BEFORE) 7:33 CSS (B12 - AFTER) 7:35 RESULT STEP 18 7:37 CSS (B13 - BEFORE) 7:47 CSS (B13 - AFTER) 7:50 RESULT STEP 19 7:57 HTML (A7 - BEFORE) 8:17 HTML (A7 - AFTER) 8:20 RESULT STEP 20 8:23 CSS (B14 - BEFORE) 8:37 CSS (B14 - AFTER) 8:39 RESULT STEP 21 8:42 CSS (B15 - BEFORE) 8:56 CSS (B15 - AFTER) 9:00 RESULT STEP 22 9:02 CSS (B16 - BEFORE) 9:07 CSS (B16 - AFTER) 9:09 RESULT STEP 23 9:12 CSS (B17 - BEFORE) 9:22 CSS (B17 - AFTER) 9:24 RESULT STEP 24 9:30 HTML (A8 - BEFORE) 9:47 HTML (A8 - AFTER) 9:50 RESULT STEP 25 9:53 CSS (B18 - BEFORE) 10:10 CSS (B18 - AFTER) 10:12 RESULT STEP 26 10:14 CSS (B19 - BEFORE) 10:36 CSS (B19 - AFTER) 10:38 RESULT STEP 27 10:48 HTML (A9 - BEFORE) 10:53 HTML (A9 - AFTER) 10:54 CSS (B20 - BEFORE) 11:11 CSS (B20 - AFTER) 11:13 RESULT STEP 28 11:15 CSS (B21 - BEFORE) 11:21 CSS (B21 - AFTER) 11:22 RESULT STEP 29 11:23 CSS (B22 - BEFORE) 11:25 CSS (B22 - AFTER) 11:26 RESULT STEP 30 11:29 CSS (B23 - BEFORE) 11:30 CSS (B23 - AFTER) 11:32 RESULT STEP 31 11:38 CSS (B24 - BEFORE) 11:40 CSS (B24 - AFTER) 11:42 RESULT STEP 32 11:51 HTML (A10 - BEFORE) 12:42 HTML (A10 - AFTER) 12:44 RESULT STEP 33 12:48 HTML (A11 - BEFORE) 12:50 HTML (A11 - AFTER) 12:53 RESULT STEP 34 13:02 HTML (A12 - BEFORE) 14:12 HTML (A12 - AFTER) 14:15 RESULT STEP 35 - END

[@nemtas_4_sunny957]

Sorry how can he get @import in first line in style.css?

[@mateuszlukaszczyk5359]

@@nemtas_4_sunny957 font google website, they give you the link

[@batuhanbayr7613]

@@nemtas_4_sunny957 hi ı was taking the same error about that and ı delete it that line but my style.css coe is not working did u solved your problem to ?

[@rogersodero3897]

your tutorial is easy to understand ,finally i have created a landing page. congrts to you.

[@wdee-rh1nu]

Most interesting thing i have ever seen in my life. Dude you need to relocate and with this talent of yours, you'd be worth millions. Love all your designs! Out of this world. Keep it up and thanks for inspiring us all

[@mateuszlukaszczyk5359]

do you really think he s not earning much lol

[@naitikkathiriya]

Please anyone can give me the links of this musics..

[@gamingwithking262]

@A Es one is warriyo by NCS

[@MatheusGoncalves-wl7pp]

Thanks bro, it helped me a lot. I had never used javascript until today, but using these scripts already gave me a good insight into being much simpler than it seems. Now I have a little more confidence to learn to program.

[@faresa8373]

Your tutorials unleashed my creativity, thank you for that!

[@vogeltje407]

I love how the page turned out!! I’d use semantics more though. It’s a bit messy with all the divs.

[@annakarina4599]

wow he's not even talking but I understand everything. Very useful video, thank you very much

[@ankitmehrotra8519]

Bhai cheetah hai tu. I m hooked to ur videos. Mind blowing..

[@BradWarren]

I quite like these tutorials without all the talking.

[@alwinvillero4404]

@@elithelateraluz1849 yeah me too, as long as it is understandable

[@hackerprime9722]

@@elithelateraluz1849 lmao

[@shortlistamazonproducts4955]

Me to

[@willyrajagukguk6665]

I hope my first project score at the school with css get better with this video 😁

[@faisalrehman8175]

Please start doing voice over as well if possible. You are amazing

[@tahaanass3097]

Keep going you are the best ! The way you code your websites is actually proffesional ! I really appreciate your work !

[@Somefolks52]

Looks satisfying when you know what your doing even it takes time... i want to learn coding soon..

[@imaneessatti]

Hello, at 1:31, how can I open in browser in Macbook Air please ?

[@KhongGuan-1998]

the best channel to learn program and he hands it all over for free Menyala Abang ku 🔥

[@vitojulianochannel]

Thank you for making this video, its really useful and make it looks so easy when you create it 😂 thank you from Indonesia 🇮🇩👊

[@andreaswandik615]

Ngapain hayoo 😆😆

[@diegogomes2495]

If anyone is having trouble with the ImgSlider javascript, mine worked after disabling Prettier Extension and deleting all the extra spaces Prettier inserted. Prettier puts an extra space right before the end of self closing tags, didn't find how to disable it though. But now the image slider works fine

[@GAMINGWITHNEONyt]

after disabling prettier also my java script not working . pls help.

[@jtechno3297]

Incredible job, thanks for this video, I'm very proud that I've been improving my English for understand this amazing videos 👌

[@resty1672]

So clear yet efficient,love your tutorials

[@OnlineTutorialsYT]

Part 2: How to Make it Responsive Watch This : kzbin.info/www/bejne/fomuf5iarqmVhKc

[@manishachoubay6337]

yeah I am waiting for it LOve ur videos BTW

[@gldzzpro5793]

you are a legend

[@nemtas_4_sunny957]

Sorry how u can get @import in first line in style.css?

[@mohammadrayhan326]

@@nemtas_4_sunny957 from Google fonts

[@danielortega8773]

What's the name of the song from the beginning?

[@sainathmhetre7920]

your all tutorials are awasome sir

[@OnlineTutorialsYT]

🙂

[@AshurYT]

I'm saying honestly you're one of my favourite ❤️ teacher👩‍🏫 on KZbin I love your tutorials those are really well awesome.... BUT I'M REQUESTING YOU FOR MAKE A VIDEO WITH FACE CAM IN YOUR VOICE PLEASE........🙏❤️ I'm excited to see you and also listen your voice ❤️🔥

[@michaelmccall247]

This tutorial is just the best but I’m having a little challenge with the JS, seems the code is not working. Please can you help look up to this?

[@ahmedirfan8786]

Same here brother. I am facing problem in js

[@windevchannel]

What is it

[@fadoulsaleh4951]

Best tutorial. Finally I can't change the color with querySelector, i don't know why

[@Megakiller-006]

me too I can't..

[@acap1866]

Same goes here

[@danicabernardoisonza]

same here. what's happening

[@лола2-к9ы]

same

[@hasnainbenshahid002a5]

I am regular learner....!! Love you bro..!❤❤

[@BabitaKumari-iy2zp]

Awesome, great, amazing, these words are small for this ❤️❤️❤️

[@BabitaKumari-iy2zp]

He gave me a heart. Now I am Feeling proud

[@shaikhmohammaddanish5549]

Exactly💙

[@ernestguevarra9058]

Thankyou BROTHER THIS TUITORIAL IS VERY HELPFUL

[@sentisong8880]

Anyone else having problems with the document.querySelector? mine doesnt change color..... what seems to be the problem? help

[@webworldzone962]

Nice video..you are doing great..since I also run education channel but also love to see other youtuber who are educating people worldwide. Keep the good work 👍

[@geenim9328]

12:14 I need to come back here later! Thank you so much for this tutorial!

[@kauannovello3063]

The best video of The KZbin

[@propanaheksana5757]

why my starbucks pic wont change i already do the imgSlider??

[@fullmetal2807]

It would be great if you put a divided screen in order to see what is changing while you write the code. Anyway, thanks for sharing

[@goosebumps7352]

Bhai your skills are too good. I am a beginner can you please tell me that how you have such good ideas to build different different designs

[@EXPERIMENTSHOW.]

thank u sooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooo much bro YOU R GREAT

[@ardraw1761]

best coding vid I've ever seen !!

[@AbdullahSafi-z9h]

did u become a developer or not ? it's been 2 years so u must be! update us please.

[@WildHowlYT]

I love the thumbnail of this video 🔥

[@dascorey2392]

please how can i do my images are inside a folder and with the imgSlider('img1.png') is not giving

[@gustavodias1936]

great video, but i have a little bug, when i click on thumb for change img, the size of img change too

[@juzz_your_ari]

i am getting issue with the imgSlider (' ') part ....photos are not getting hyperlinked using single quotes

[@mustafakumru5644]

Thanks for sharing. Your channel is best Web design channel on KZbin.

[@AbdullahSafi-z9h]

did u become a developer or not ? it's been 3years so u must be! update us please.

[@Johnny-bt2rf]

O vídeo é tão bom, que mesmo sendo iniciante eu aprendi sem ele nem mesmo dizer alguma palavra, parabéns!

[@refugionerd79]

fala mano, tambem estou fazendo o projeto vc travou em alguma parte desse projeto, é que o meu css não esta aceitando formatação e estou tentando resolver

[@ndlozymavila5412]

@@refugionerd79 E ai mano, conseguiu retificar o seu css ? A gente poderia trocar umas ideias sobre programacao aumentar o desenvolvimento

[@kiraprime8833]

​@@ndlozymavila5412 pf me ajuda cara kkkkkk essa bosta desse círculo ñ quer funcionar de jeito nenhum, e o código está IGUALZINHO o do vídeo

[@kiraprime8833]

VTMNC descobri o erro aaaaaaa kkkkkkkkk no css ñ tinha colocado a tag height:100%

[@thefivekingdoms]

I stopped where the green div circle covered the large Starbucks image. I don't know why it did that even when I followed all the steps.

[@smtylmz89]

highly boosted me up for returning css'ing :)

[@manuelaluiza6799]

Hi! At 4:47, wouldn't the problem with the position of the cup be because the first tag is not closed? The "content" div

[@andresqueee]

I just watched the video once, and I immediately understood CSS.

[@Sike1111]

It's all about tags, classes, id, css grid and flex box that's it

[@Sike1111]

But learning new tags never tops

[@sohalmahmud9084]

I practiced this but javascript not working for me. I don't understand why it happened. Please, give me some suggestion to complete this.

[@manapkz]

I've got this problem

[@unknownotaku1982]

Bro you are insane could you please create a tutorial on js plz plz plz plz

[@vincentsandiego7435]

hello guys, i'm a beginner from programming im gonna ask a question about his css. what is the "*" do in his css? btw 1:46 mins is the timestamp of the asterisk will be seen. thank you in advance

[@Sike1111]

Hey if you are talking about the word written with font family Listen if your font name contains spaces like Rocket League Then we would write font-family: "Rocket League"; And you can use " This even when you don't have space in your font name so yeah. Generally it is used in that case only because css thinks the first part eg Rocket is another font and League is another and you forgot to add comma between them I hope I resolved your doubt if not elaborate your problem

[@Karina_krk]

do you have github or something like this? pls response

[@tomassanimbo5255]

Ameiiiiiiiiiiii gostei muito da tecnica usada! aprendi e já estou usando muito

[@panchalgamer8334]

Ye vala background me sound he vo ek dam badhiya he pichle video se 😎😎👍🏻👍🏻

[@shrutijain47]

Very nice design!!! You are just great 👍

[@AAR69420]

good tutorial, but can u put the code in ur description? so i can see the deifferences easier without pausing

[@desaiayush]

Thanks a lot!

[@mirzazplayz_rblx]

Amazing I have already built that same previous project it will be easy for me to write it again

[@The_High_one]

how do u get the logo to show on the html part because it doesnt work

[@tanvisartandcraftworld4704]

big fan

[@hadesraptor1336]

which software you use?

[@liwe95]

Thank You Buddy. This Help me to practice HTML & CSS on VSC 👍🏼👍🏼👍🏼

[@muratkoyuncu6284]

hey man thanks for the video it is great source.. However JavaScript doesn’t work for me I cannot make the imgSlider works. It is shown as red color in visual studio "anything" and "color" variation. I tried everything but didn't solve it. Thanks again. Hope you'll help..

[@sk2086ooops]

did you find how to do it? it doesn't work for me either

[@muratkoyuncu6284]

@@sk2086ooops not really no answer whatsoever

[@sk2086ooops]

@@muratkoyuncu6284 ohh

[@ShahidShaikh-sj7qh]

javascript not working my pc

[@nocutnoeditnointro4276]

thank mr is so good👌👌👌👌

[@stephanelouis4992]

Can I have the link of the penultimate music of this video that I liked a lot. And thank you for your videos.

[@rokinos]

How to add a form that appears after clicking on all the buy buttons? to be more precise the form apear only on the first id="my-form" of the page , for example if my first button with id="my-form" and also the second button with the same id ,then the form will apear only on the first button and does't work on the other buttons. thanks in advance!!!!!!!

[@Greatestman23]

JS doesn't work all sentenses right what should l do?

[@davidgr8593]

How can I make this to be responsive?

[@ysad696]

Please tell me how I can create a post on my HTML and CSS website after I have uploaded to the online server please tell me

[@musicwavestation731]

hello i hope u are doing well so i was following u step by step but i got a problem idk why but when i did write star bucks is not just a coffee...... it still shown beside the logo of star bucks not below also to let u know i use studio visual code hope u see my comment or anyone who know how to fix it thnks

[@jtahos]

just finished your tutorial loved it but have one problem how do i make it compatible with chrome, and in my code editor i see a problem telling me that clip-path is not supported in IE , working on a mac so cant check it out on IE , i have looked up the mdn docs for web-kit witch i know fixes these problems but can’t quite understand them can someone please help me with this and maybe give me a quick fix? thank you in advance John

[@gabrielbrown8518]

Nice tutorial!! How can I make this responsive?

[@yaserdemet7886]

How can i get those pictures ? Is there any adress or uploaded github ?

[@reemsoungf8161]

Sir mujhe aek website Desin karwani hai aapse kitna charg lagega electronic shop ke apko kaise contact Karu ?

[@anaghashete9862]

Hello I tried this code for webpage but somewhere it is giving me error in javascript 'cannot set properties of null(setting src) at imgSlider' this is the error msg while coding in onclick function...I tried to solve but I am not able to solve plzz solve this query

[@canibalcorps]

same here

[@alicanyenidogan]

what do you do about i.e? justify-content doesn't work on ie10 and prev versions as far as I know that's why I still use float left. Great content btw.

[@mateuszlukaszczyk5359]

if you use it should work

[@cinarsinan]

Awesome as usual brother

[@mhrsul8272]

Sir,how do you create JavaScript functions like that.., is there anyway to learn them?

[@nutthapongboonthawin5342]

Awesome!, And if I want to do auto slider ? Please teahcing

[@fitzlmadams3056]

Love your tutorials. Could you show how to make the site responsive?

[@mahdisoultana4926]

Thank you very much , for this video pleas ei really like the Music , from were can i hear it

[@jimmybui1995]

Does anyone know what background song is? Thank you so much.

[@impeltechsolutions1211]

I do it the same and i dont see circle, clip-path: circle.... not work

[@thisisyaboi]

What compiler do you use?

[@imrankhanpathan781]

Can I code this in notepad++

[@EduardoOliveira-ct5mz]

Tive um problema com a ela não está aparecento mesmo eu fazendo igual a ele e quando eu a abro a div antes do header e fecho antes da tag de fechamento da section o estilo pega em toda pagina. Alguem pode me ajudar ?

[@universeexplore8335]

I purchased your channel membership. I'm not able to get the source code of this video in here youtube, all links redirecting to patreon you're page. do you want here also needs to pay and patreon too.?

[@OnlineTutorialsYT]

You can get only last 30 new videos source code in community post.... If you want all source code then go to patreon.

[@meriem1708]

thank youuu , you did a great job 🤩

[@eugeneanikella7249]

Man i love what you do

[@naitikkathiriya]

hey man, thank u so much, for this amazing one..it lot of useful. but hey my request to you plz give me the link this trio songs, what an amazing was that, especially second one.. much respect, hope you'll consider friend..✨

[@omageprosper9673]

does anyone know why he linked the import url

[@JeffreyTagne]

Thank you!!! super tutorial grateful for the knowledge

[@alexwang4549]

Do I have to do the @import

[@dailymasculinity]

Having a issue, the textBox and the imgBox are aligned one at the bottom of the other, and not one at the left of the other

[@m.fajarhermawan9126]

thank you for the video as a refrence for me to study

[@andresr.504]

For some reason, my .content is way too small and I have this huge space between the content and the circle... pretty sure I followed you perfectly.

[@cataksworld3753]

sometimes clean your code will work or go through again