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

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

 

📝 계속 따라서 만들다 보니까 구조와 태그가 눈에 익히는 것 같습니다. 앞으로도 매일 하나씩 따라 만들 예정입니다.

 

🖤 GitHub Link : github.com/jiyeong1004/Pepsi_Website_Landing_Page

jiyeong1004/Pepsi_Website_Landing_Page

---

YouTube : Online Tutorials

< image source >

Image source : https://www.pepsi.com

---

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

---

< 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 : Creative Landing Page Design using Html CSS & Javascript

Part 2 : How to Make Responsive Website