资源 HTML & CSS Full Course - Beginner to Pro (2022) - YouTube
课程 Intro
In this full course, we learn how to build websites with HTML and CSS, and get started as a software engineer.
Additional Information: This HTML CSS full course is a series of HTML CSS tutorials, teaching the major skills that we need to create complex websites. Each HTML CSS tutorial builds on a project and provides some HTML CSS exercises to practice what we learned. By the end, we'll learn the basics of web development and we'll be on our way to becoming a web developer and software engineer.
其他信息:这个HTML CSS完整课程是一系列的HTML CSS教程,教授我们创建复杂网站所需的主要技能。每个HTML CSS教程都建立在一个项目的基础上,并提供一些HTML CSS练习来练习我们所学的知识。到最后,我们将学会网站开发的基础知识,我们将在成为一名网站开发人员和软件工程师的路上。
1. HTML Basics HTML: HyperText Markup Language (tool we use to create websites)
1a. Create a button with the text "Click" inside
Click
1b. Create 2 buttons. 1 with your name and 1 with your favorite food
<button > GZ</button > <button > dumplings</button >
GZ dumplings
1c. Create a paragraph with the text "Hello, World!" inside
Hello, world!
1d. Create a paragraph below the previous paragraph and write something you did today
<p > Hello, world!</p > <p > Today I got up early.</p >
Hello, world!
Today I got up early.
1e. Create a link to google.com (or a similar website for your country)
<a href ="https://www.bilibili.com/" > Open bilibili</a >
Open bilibili
1f. Make the link from the previous exercise (1e.) open in a new tab
<a href ="https://www.bilibili.com/" target ="_" > Open bilibili</a >
Open bilibili
Challenge Exercise
1g. Try to copy this design using HTML (the link goes to amazon.com)
<a href ="https://www.taobao.com/" > Back to TaoBao</a > <p > Nike Black Running Shoes</p > <p > $39 - in stock.</p > <p > Free delivery tomorrow.</p > <button > Add to Cart</button > <button > Buy now</button >
Back to TaoBao
Nike Black Running Shoes
$39 - in stock.
Free delivery tomorrow.
Add to Cart Buy now
2. CSS Basics CSS: Cascading Style Sheets (change the appearance of HTML elements)
Youtube & Tweet
<style > .subscribe-button { background-color : rgb (200 , 0 , 0 ); color : white; border : none; height : 36px ; width : 105px ; border-radius : 2px ; cursor : pointer; margin-right : 8px ; } .join-button { background-color : white; border-color : rgb (41 , 118 , 211 ); border-style : solid; border-width : 1px ; color : rgb (41 , 118 , 211 ); height : 36px ; width : 62px ; border-radius : 2px ; cursor : pointer; } .tweet-button { background-color : rgb (2 , 158 , 255 ); color : white; border : none; height : 36px ; width : 74px ; border-radius : 18px ; font-weight : bold; font-size : 15px ; cursor : pointer; margin-left : 8px ; } </style > <button class ="subscribe-button" > SUBSCRIBE</button > <button class ="join-button" > JOIN</button > <button class ="tweet-button" > Tweet</button >
Use CSS to recreate these buttons from famous websites:
2a. Uber
2b. Amazon
2c. GitHub
2d. Bootstrap
2e. Linkedln
<style > .Uber-button { color : white; background-color : black; width : 105px ; height : 36px ; cursor : pointer; } .Amazon-button { background-color : rgb (255 , 216 , 20 ); width : 160px ; height : 36px ; border : none; font-size : 15px ; border-radius : 18px ; cursor : pointer; } .GitHub-button { color :white; background-color : rgb (46 , 164 , 79 ); height :40px ; width :95px ; border : none; font-size : 15px ; font-weight : bold; border-radius : 5px ; cursor : pointer; } .Bootstrap-button-1 { color :white; background-color : rgb (121 , 82 , 179 ); height :40px ; width :105px ; border : none; font-weight : bold; border-radius : 5px ; cursor : pointer; } .Bootstrap-button-2 { color :rgb (108 , 117 , 125 ); background-color : white; border-color : rgb (108 , 117 , 125 ); border-style : solid; border-width : 2px ; height :40px ; width :105px ; font-weight : bold; border-radius : 5px ; cursor : pointer; } .Linkedln-button-1 { color : white; background-color : rgb (10 , 102 , 194 ); border-radius : 20px ; border : none; font-size : 15px ; font-weight : bold; height : 40px ; width : 250px ; cursor : pointer; } .Linkedln-button-2 { color :rgb (10 , 102 , 194 ); background-color : white; border-color : rgb (10 , 102 , 194 ); border-style : solid; border-width : 2px ; height :40px ; width :75px ; font-size : 15px ; font-weight : bold; border-radius : 20px ; cursor : pointer; } </style > <button class ="Uber-button" > Request now</button > <button class ="Amazon-button" > Add to Chart</button > <button class ="GitHub-button" > Sign up</button > <button class ="Bootstrap-button-1" > Get started</button > <button class ="Bootstrap-button-2" > Download</button > <button class ="Linkedln-button-1" > Apply on company website</button > <button class ="Linkedln-button-2" > Save</button >
Challenge Exercise
2f. Continuing from exercise 1g. recreate this design using CSS:
<style > .title { margin : 20px 0px ; font-size : 25px ; font-weight : bold; } .price { color :rgb (0 , 118 , 0 ); font-size : 18px ; font-weight : bold; } .Amazon-button-1 { background-color : rgb (255 , 216 , 20 ); border-radius : 20px ; border : none; font-size : 15px ; font-weight : bold; height : 40px ; width : 140px ; margin-right : 10px ; font-size : 16px ; cursor : pointer; } .Amazon-button-2 { background-color : rgb (255 , 164 , 28 ); border-radius : 20px ; border : none; font-size : 15px ; font-weight : bold; height : 40px ; width : 140px ; margin-right : 10px ; font-size : 16px ; cursor : pointer; } </style > <a href ="https://www.taobao.com/" > Back to TaoBao</a > <p class ="title" > Nike Black Running Shoes</p > <p class ="price" > $39 - in stock.</p > <p > Free delivery tomorrow.</p > <button class ="Amazon-button-1" > Add to Cart</button > <button class ="Amazon-button-2" > Buy now</button >
3. Hovers, Transitions, Shadows 注意 Transitions 属性不要放到 hover 里, 否则移出时不会有 Transitions 的效果。
<style > .subscribe-button { background-color : rgb (200 , 0 , 0 ); color : white; border : none; height : 36px ; width : 105px ; border-radius : 2px ; cursor : pointer; margin-right : 8px ; transition : opacity 0.15s ; } .subscribe-button :hover { opacity : 0.8 ; } .subscribe-button :active { opacity : 0.4 ; } .join-button { background-color : white; border-color : rgb (41 , 118 , 211 ); border-style : solid; border-width : 1px ; color : rgb (41 , 118 , 211 ); height : 36px ; width : 62px ; border-radius : 2px ; cursor : pointer; transition : background-color 0.15s , color 0.15s ; } .join-button :hover { background-color : rgb (41 , 118 , 211 ); color : white; } .join-button :active { opacity : 0.7 ; } .tweet-button { background-color : rgb (2 , 158 , 255 ); color : white; border : none; height : 36px ; width : 74px ; border-radius : 18px ; font-weight : bold; font-size : 15px ; cursor : pointer; margin-left : 8px ; transition : box-shadow 0.15s ; } .tweet-button :hover { box-shadow : 5px 5px 10px rgba (0 , 0 , 0 , 0.15 ); } </style > <button class ="subscribe-button" > SUBSCRIBE</button > <button class ="join-button" > JOIN</button > <button class ="tweet-button" > Tweet</button >
Use CSS to recreate these buttons from famous websites:
<style > .Uber-button { color : white; background-color : black; width : 105px ; height : 36px ; cursor : pointer; transition : opacity 0.15s ; } .Uber-button :hover { opacity : 0.7 ; } .Amazon-button { background-color : rgb (255 , 216 , 20 ); width : 160px ; height : 36px ; border : none; font-size : 15px ; border-radius : 18px ; cursor : pointer; transition : opacity 0.15s ; } .Amazon-button :hover { background-color : rgb (238 , 200 , 9 ); } .GitHub-button { color :white; background-color : rgb (46 , 164 , 79 ); height :40px ; width :95px ; border : none; font-size : 15px ; font-weight : bold; border-radius : 5px ; cursor : pointer; transition : box-shadow 0.15s ; } .GitHub-button :hover { box-shadow : 0px 5px 10px rgba (0 , 0 , 0 , 0.15 ); } .Bootstrap-button-1 { color :white; background-color : rgb (121 , 82 , 179 ); height :40px ; width :105px ; border : none; font-weight : bold; border-radius : 5px ; cursor : pointer; transition : background-color 0.15s ; } .Bootstrap-button-1 :hover { background-color : rgb (86 , 49 , 128 ); } .Bootstrap-button-2 { color :rgb (108 , 117 , 125 ); background-color : white; border-color : rgb (108 , 117 , 125 ); border-style : solid; border-width : 2px ; height :40px ; width :105px ; font-weight : bold; border-radius : 5px ; cursor : pointer; transition : background-color 0.15s , color 0.15s ; } .Bootstrap-button-2 :hover { background-color : rgb (108 , 117 , 125 ); color : white } .Linkedln-button-1 { color : white; background-color : rgb (10 , 102 , 194 ); border-radius : 20px ; border : none; font-size : 15px ; font-weight : bold; height : 40px ; width : 250px ; cursor : pointer; transition : background-color 0.15s ; } .Linkedln-button-1 :hover { background-color : rgb (7 , 57 , 117 ); } .Linkedln-button-2 { color :rgb (10 , 102 , 194 ); background-color : white; border-color : rgb (10 , 102 , 194 ); border-style : solid; border-width : 2px ; height :40px ; width :75px ; font-size : 15px ; font-weight : bold; border-radius : 20px ; cursor : pointer; transition : border-width 0.15s , background-color 0.15s ; } .Linkedln-button-2 :hover { background-color : #EEF ; border-width : 3px ; } </style > <button class ="Uber-button" > Request now</button > <button class ="Amazon-button" > Add to Chart</button > <button class ="GitHub-button" > Sign up</button > <button class ="Bootstrap-button-1" > Get started</button > <button class ="Bootstrap-button-2" > Download</button > <button class ="Linkedln-button-1" > Apply on company website</button > <button class ="Linkedln-button-2" > Save</button >
Challenge Exercise
<style > a :hover { color :rgb (198 , 96 , 22 ); } .title { margin : 20px 0px ; font-size : 25px ; font-weight : bold; } .price { color :rgb (0 , 118 , 0 ); font-size : 18px ; font-weight : bold; } .Amazon-button-1 { background-color : rgb (255 , 216 , 20 ); border-radius : 20px ; border : none; font-size : 15px ; font-weight : bold; height : 40px ; width : 140px ; margin-right : 10px ; font-size : 16px ; cursor : pointer; transition : background-color 0.15s ; } .Amazon-button-1 :hover { background-color : rgb (240 , 200 , 16 ); } .Amazon-button-1 :active { opacity : 0.5 ; } .Amazon-button-2 { background-color : rgb (255 , 164 , 28 ); border-radius : 20px ; border : none; font-size : 15px ; font-weight : bold; height : 40px ; width : 140px ; margin-right : 10px ; font-size : 16px ; cursor : pointer; transition : background-color 0.15s ; } .Amazon-button-2 :hover { background-color : rgb (237 , 120 , 8 ); } .Amazon-button-2 :active { opacity : 0.5 ; } </style > <a href ="https://www.taobao.com/" > Back to TaoBao</a > <p class ="title" > Nike Black Running Shoes</p > <p class ="price" > $39 - in stock.</p > <p > Free delivery tomorrow.</p > <button class ="Amazon-button-1" > Add to Cart</button > <button class ="Amazon-button-2" > Buy now</button >
CSS Box Model
how much space an element takes up
how far it is away from other elements
4a. - 4e. Modify exercises 3a. - 3e. to use padding instead of height/width
<style > .Uber-button { color : white; background-color : black; padding : 8px 10px ; margin : 5px ; vertical-align : top; cursor : pointer; transition : opacity 0.15s ; } .Uber-button :hover { opacity : 0.7 ; } .Amazon-button { background-color : rgb (255 , 216 , 20 ); padding : 10px 26px ; margin : 5px ; vertical-align : top; border : none; font-size : 15px ; border-radius : 18px ; cursor : pointer; transition : opacity 0.15s ; } .Amazon-button :hover { background-color : rgb (238 , 200 , 9 ); } .GitHub-button { color :white; background-color : rgb (46 , 164 , 79 ); padding : 10px 16px ; margin : 5px ; vertical-align : top; border : none; font-size : 15px ; font-weight : bold; border-radius : 5px ; cursor : pointer; transition : box-shadow 0.15s ; } .GitHub-button :hover { box-shadow : 0px 5px 10px rgba (0 , 0 , 0 , 0.15 ); } .Bootstrap-button-1 { color :white; background-color : rgb (121 , 82 , 179 ); padding : 10px 16px ; margin : 5px ; vertical-align : top; border : none; font-weight : bold; border-radius : 5px ; cursor : pointer; transition : background-color 0.15s ; } .Bootstrap-button-1 :hover { background-color : rgb (86 , 49 , 128 ); } .Bootstrap-button-2 { color :rgb (108 , 117 , 125 ); background-color : white; border-color : rgb (108 , 117 , 125 ); border-style : solid; border-width : 2px ; padding : 9px 16px ; margin : 5px ; vertical-align : top; font-weight : bold; border-radius : 5px ; cursor : pointer; transition : background-color 0.15s , color 0.15s ; } .Bootstrap-button-2 :hover { background-color : rgb (108 , 117 , 125 ); color : white } .Linkedln-button-1 { color : white; background-color : rgb (10 , 102 , 194 ); border-radius : 20px ; border : none; font-size : 15px ; font-weight : bold; padding : 12px 26px ; margin : 5px ; vertical-align : top; cursor : pointer; transition : background-color 0.15s ; } .Linkedln-button-1 :hover { background-color : rgb (7 , 57 , 117 ); } .Linkedln-button-2 { color :rgb (10 , 102 , 194 ); background-color : white; border-color : rgb (10 , 102 , 194 ); border-style : solid; border-width : 2px ; padding : 9px 16px ; margin : 5px ; vertical-align : top; font-size : 15px ; font-weight : bold; border-radius : 20px ; cursor : pointer; transition : border-width 0.15s , background-color 0.15s ; } .Linkedln-button-2 :hover { background-color : #EEF ; border-width : 3px ; } </style > <button class ="Uber-button" > Request now</button > <button class ="Amazon-button" > Add to Chart</button > <button class ="GitHub-button" > Sign up</button > <button class ="Bootstrap-button-1" > Get started</button > <button class ="Bootstrap-button-2" > Download</button > <button class ="Linkedln-button-1" > Apply on company website</button > <button class ="Linkedln-button-2" > Save</button >
4f. Update the Tweet button to use padding instead of height/width
4g. Use the Chrome DevTools to get the exact color for the Subscribe button and update it int the code
<style > .subscribe-button { background-color : rgb (193 , 0 , 0 ); color : white; border : none; padding : 10px 16px ; border-radius : 2px ; cursor : pointer; transition : opacity 0.15s ; vertical-align : top; } .subscribe-button :hover { opacity : 0.8 ; } .subscribe-button :active { opacity : 0.4 ; } .join-button { background-color : white; border-color : rgb (6 , 95 , 212 ); border-style : solid; border-width : 1px ; color : rgb (6 , 95 , 212 ); padding : 9px 16px ; border-radius : 2px ; cursor : pointer; transition : background-color 0.15s , color 0.15s ; } .join-button :hover { background-color : rgb (6 , 95 , 212 ); color : white; } .join-button :active { opacity : 0.7 ; } .tweet-button { background-color : rgb (2 , 158 , 255 ); color : white; border : none; border-radius : 18px ; font-weight : bold; font-size : 15px ; cursor : pointer; margin-left : 8px ; transition : box-shadow 0.15s ; padding : 10px 16px ; vertical-align : top; } .tweet-button :hover { box-shadow : 5px 5px 10px rgba (0 , 0 , 0 , 0.15 ); } </style > <button class ="subscribe-button" > SUBSCRIBE</button > <button class ="join-button" > JOIN</button > <button class ="tweet-button" > Tweet</button >
Challenge Exercise
<style > button { padding : 6px 2px ; margin : 0px 5px ; } a { margin : 0px 2px ; } </style > <button > Back</button > <a href ="https://www.youtube.com/" > 1</a > <a href ="https://www.youtube.com/" > 2</a > <a href ="https://www.youtube.com/" > 3</a > <a href ="https://www.youtube.com/" > 4</a > <a href ="https://www.youtube.com/" > 5</a > <button > Next</button >
<style > button { background-color : rgb (11 , 136 , 6 ); color : white; font-size : 15px ; margin : 10px ; vertical-align : top; border :none; padding : 6px 10px ; } .stretch_button { transition : padding 1s ; } .stretch_button :hover { padding : 12px 30px ; } ._3d_click_button { box-shadow : 5px 5px 10px rgba (0 , 0 , 0 , 0.4 ); } ._3d_click_button:active { margin-top : 15px ; margin-left : 15px ; box-shadow : none; } .margin_and_padding_together { transition : padding 0.3s , margin 0.3s ; } .margin_and_padding_together :hover { margin-left : 5px ; margin-right : 5px ; padding-left : 15px ; padding-right : 15px ; } </style > <button class ="stretch_button" > Stretch</button > <button class ="_3d_click_button" > Shadow</button > <br /> <button class ="margin_and_padding_together" > One</button > <button class ="margin_and_padding_together" > Two</button > <button class ="margin_and_padding_together" > Three</button >
5. Text Styles
<style > p { font-family : Arial; margin-top : 0 ; margin-bottom : 0 ; } .video-title { font-size : 18px ; font-weight : bold; width : 280px ; line-height : 24px ; margin-bottom : 5px ; } .video-stats { font-size : 14px ; color : #606060 ; margin-top : 0 ; margin-bottom : 20px ; } .video-author { font-size : 14px ; color : #606060 ; margin-top : 0 ; margin-bottom : 20px ; } .video-description { font-size : 14px ; color :#606060 ; width : 280px ; line-height : 20px ; line-height : 22px ; margin-top : 0 ; margin-bottom : 100px ; } .apple-text { margin-bottom : 50px ; font-size : 14px ; background-color : #e34140 ; color : white; text-align : center; padding-top : 18px ; padding-bottom : 18px ; } .shop-link { margin-left : 5px ; cursor : pointer; } .shop-link :hover { text-decoration : underline; } </style > <p class ="video-title" > Talking Tech and AI with Google CEO Sundar Pichai!</p > <p class ="video-stats" > 3.4M views · 6 month ago</p > <p class ="video-author" > Marques Brownlee ✓ </p > <p class ="video-description" > Talking tech and AI on the heels of Google I/O. Also a daily driver phone reveal from Google's CEO. Shoutout to Sundar!</p > <p class ="apple-text" > Shop early for the best selection of holiday favourites. <span class ="shop-link" > Shop now > </span > </p >
<style > p { font-family : Tahoma; font-weight : bold; font-size : 24px ; } </style > <p > This is Tahoma Font</p >
<style > p { font-family : Arial; } .title { font-weight : bold; font-size : 24px ; margin : 0 ; } .introduce { color : red; font-style : italic; font-size : 16px ; margin-top : 10px ; } </style > <p class ="title" > Biggest Deals of the Year!</p > <p class ="introduce" > Sales end Tuesday</p >
<style > p { font-family : Verdana; } .title { font-weight : bold; font-size : 20px ; margin : 0 ; } .introduce { margin-top : 5px ; color : #606060 ; } .decription { width : 300px ; } .start_button { padding : 5px 12px ; background-color : rgb (49 , 126 , 18 ); border : 0 ; border-radius : 5px ; color : white; } </style > <p class ="title" > HTML CSS Course</p > <p class ="introduce" > Beginner to Pro</p > <p class ="decription" > In this course, we'll learn the skills you need to become a developer.</p > <button class ="start_button" > Get Started</button >
<style > p { font-family : Arial; } .title { text-align : center; font-weight : bold; font-size : 30px ; margin-bottom : 0 ; } .introduce { margin-top : 14px ; text-align : center; } .link { text-align : center; color :rgb (0 , 147 , 196 ); cursor : pointer; } .link :hover { text-decoration : underline; } </style > <p class ="title" > Shopping for your business?</p > <p class ="introduce" > See how Apple at Work can help.</p > <p class ="link" > Learn more > </p >
Challenge Exercise
<style > p { text-align : center; font-family : Arial; margin : 0 ; } .new { font-weight : bold; color : orange; } .title { font-weight : bold; font-size : 20px ; margin-top : 5px ; } .decription { font-weight : bold; font-size : 35px ; margin-top : 5px ; } .price { margin-top : 10px ; } .buy_button { margin-top : 10px ; color :white; font-family : Arial; border :none; padding : 5px 12px ; border-radius : 16px ; background-color : rgb (29 , 115 , 207 ); } </style > <p class ="new" > New</p > <p class ="title" > MacBook Pro</p > <p class ="decription" > Supercharged for pros.</p > <p class ="price" > From $1999</p > <center > <button class ="buy_button" > Buy</button > </center >
<style > p { font-family : Arial; margin-top : 6px ; margin-bottom : 6px ; } .current { font-size : 32px ; } .usd { color : #606060 ; } .rise { color :green; } .after_hours { color : #606060 ; } .decline { color :rgb (208 , 0 , 0 ); } </style > <p > <span class ="current" > 1049.61 </span > <span class ="usd" > USD</span > </p > <p class ="rise" > +18.05 (1.75%) today</p > <p > <span class ="after_hours" > After hours 1,048.00 </span > <span class ="decline" > -1.61 (0.15%)</span > </p >
<style > p { font-family : Arial; margin-top : 8px ; margin-bottom : 8px ; } .title { font-weight : bold; } .author { color :#888 ; } .at { color :rgb (31 , 169 , 255 ); } .text { margin-top : 18px ; } </style > <p > <span class ="title" > freeCodeCamp.org</span > <span class ="author" > @freeCodeCamp 1h</span > </p > <p > As a web developer, you'll want to make your projects easy to use and navigate around.</p > <p class ="text" > Here <span class ="at" > @chp_it</span > outlines the top skills new developers should have.</p >