[Online Tutorials] Starbucks Landing Page Website 예제 실습

📌 YouTube - Online Tutorials 님의 영상을 보고 따라 만들었습니다.

 

📝 이렇게 좋은 강의들을 YouTube에서 무료로 보고 실습할 수 있어서 좋은 것 같습니다. 따라 만들면서 CSS 구조도 조금 알 수 있었고 HTML, CSS, JavaScript 쪽에도 관심이 생기고 있습니다.

 

🖤 GitHub Link : https://github.com/jiyeong1004/Starbucks_Landing_Page_Website

jiyeong1004/Starbucks_Landing_Page_Website

---

YouTube : Online Tutorials

<image source & Attribution>

Img 1 : https://freepngimg.com/png/77325-frappuccino-drink-chocolate-starbucks-matcha-white

Img 2 : https://freepngimg.com/png/62115-tea-coffee-drink-starbucks-latte-free-download-image

Img 3 : https://freepngimg.com/png/62120-coffee-frappuccino-drink-latte-starbucks-unicorn

---

Image Download Link : https://drive.google.com/drive/folders/1mdjzWjYMOVOmwUVRw5ifdC1YbyQfcqNL

---

< Setting The Viewport >

https://www.w3schools.com/css/css_rwd_viewport.asp

Responsive Web Design Viewport

HTML5 introduced a method to let web designers take control over the viewport, through the <meta> tag.

You should include the following <meta> viewport element in all your web pages:

<meta name="viewport" content="width=device-width, initial-scale=1.0">

This gives the browser instructions on how to control the page's dimensions and scaling.

The width=device-width part sets the width of the page to follow the screen-width of the device (which will vary depending on the device).

The initial-scale=1.0 part sets the initial zoom level when the page is first loaded by the browser.

---

Part 1 : Starbucks Landing Page Website Design using Html CSS & Javascript

Part 2 : How to Make it Responsive