Table of Contents
Introduction To Responsive Web Design – HTML \u0026 CSS Tutorial
นอกจากการดูบทความนี้แล้ว คุณยังสามารถดูข้อมูลที่เป็นประโยชน์อื่นๆ อีกมากมายที่เราให้ไว้ที่นี่: ดูเพิ่มเติม
This tutorial teaches you to build responsive websites from scratch. It’s a part of The Responsive Web Design Bootcamp at Scrimba: https://scrimba.com/g/gresponsive
However, this 4hour tutorial stands fully on its own legs. It starts with explaining the core concepts needed to start thinking responsively, and then it takes you through every single step in building a professionallevel responsive website.
The teacher is the brilliant Kevin Powell, who’s wellknown for his videos on HTML and CSS here on YouTube. You can check out his channel here: https://www.youtube.com/channel/UCJZv4d5rbIKd4QHMPkcABCw
⭐️ Course content ⭐️
⌨️ (00:00:00) Intro
⌨️ (00:02:59) 1. Starting to think responsively
⌨️ (00:06:01) 2. CSS Units
⌨️ (00:09:16) 3. CSS Units Percentage
⌨️ (00:15:14) 4. Controlling the width of images
⌨️ (00:20:05) 5. minwidth and maxwidth
⌨️ (00:22:54) 6. CSS Units The em unit
⌨️ (00:28:25) 7. The problem with ems
⌨️ (00:30:58) 8. The Solution: Rems
⌨️ (00:35:46) 9. Picking which unit to use
⌨️ (00:39:18) 10. ems and rems an example
⌨️ (00:47:10) 11. Flexbox refresher and setting up some HTML
⌨️ (00:55:02) 12. Basic Styles and setting up the columns
⌨️ (01:02:09) 13. Adding the background color
⌨️ (01:06:21) 14. Setting the column widths
⌨️ (01:10:00) 15. Spacing out the columns
⌨️ (01:14:27) 16. Controlling the vertical position of flex items
⌨️ (01:19:42) 17. Media Query basics
⌨️ (01:29:50) 18. Making out layout responsive with flexdirection
⌨️ (01:36:45) 19. flexdirection explained
⌨️ (01:39:54) 20. Creating a navigation
⌨️ (01:44:40) 21. Using flexbox to start styling our navigation
⌨️ (01:52:19) 22. Making out navigation look good
⌨️ (01:59:38) 23. Adding the underline
⌨️ (02:03:40) 24. A more complicated navigation
⌨️ (02:10:25) 25. Making the navigation responsive
⌨️ (02:17:20) 26. Taking a look at the rest of the project
⌨️ (02:21:34) 27. Setting up the structure
⌨️ (02:29:59) 28. Featured article structure
⌨️ (02:35:07) 29. The home page HTML for the recent articles
⌨️ (02:37:39) 30. Home Page HTML for the aside
⌨️ (02:43:45) 31. Starting the CSS for our page
⌨️ (02:59:15) 32. Starting the layout looking at the big picture
⌨️ (03:07:48) 33. Starting to think mobile first
⌨️ (03:10:37) 34. Styling the featured article
⌨️ (03:17:03) 35. Changing the visual order with flex box
⌨️ (03:22:19) 36. Playing with the title’s position, and the downsides of negative margins
⌨️ (03:27:05) 37. Changing the visual order with flex box
⌨️ (03:31:00) 38. Styling recent articles for large screens
⌨️ (03:38:50) 39. Setting up the widgets and talking breakpoints
⌨️ (03:45:41) 40. Using a new pseudoclass to wrapup the homepage
⌨️ (03:53:12) 41. Creating the recent posts page
⌨️ (03:56:39) 42. Setting up the About Me page
⌨️ (04:00:54) 43. Fixing up some loose ends
⌨️ (04:05:27) 44. Important Note. The viewport meta tag
⌨️ (04:09:10) 45. Module wrap up
⌨️ (04:12:24) Outro
Learn to code for free and get a developer job: https://www.freecodecamp.org
Read hundreds of articles on programming: https://medium.freecodecamp.org
And subscribe for new videos on technology every day: https://youtube.com/subscription_center?add_user=freecodecamp
XÂY DỰNG WEBSITE – HTML5 CĂN BẢN | #38: Responsive Code Để Hoàn Thiện Xây Dựng Một Trang Web HTML5
XÂY DỰNG WEBSITE HTML5 CĂN BẢN | 38: Responsive Code Để Hoàn Thiện Xây Dựng Một Trang Web HTML5
➦ Hoàn thiện Code Responsive
VnHotShare chia sẻ:
Các Khóa Học Kinh doanh, Lập Trình, Photoshop …
Tool Online, Phần Mềm PC
Các Thủ thuật MMO …
Website: www.vnhotshare.top
Fanpage: www.fb.com/totnghieptruongdoi
Email: [email protected]
Hà Nội, Việt Nam
VnHotShare
HocHTML5
HTML5CanBan
Build a Responsive Website | HTML, CSS Grid, Flexbox \u0026 More
In this project we will build a custom website using HTML5 and modern CSS techniques such as CSS Grid, Flexbox, psuedo selectors, animation and more. We will also deploy to Netlify and add form functionality
Code:
https://github.com/bradtraversy/lorukiwebsite
💖 Support The Channel!
http://www.patreon.com/traversymedia
Website \u0026 Brad Traversy Udemy Course Links:
https://www.traversymedia.com
Follow Traversy Media:
https://www.twitter.com/traversymedia
https://www.instagram.com/traversymedia
https://www.facebook.com/traversymedia
Timestamps:
0:00 Intro
2:32 Base \u0026 Navbar HTML
6:05 Base CSS
9:08 Navbar, Container, Flex
16:12 Showcase Area \u0026 Grid
27:28 Card \u0026 Form CSS
33:07 Button Styles
35:45 Skewed Area
39:42 Stats Section
44:16 Utility Classes Margin \u0026 Padding
52:33 CLI Section \u0026 Grid Col \u0026 Row Span
57:25 Cloud Section
1:00:50 Background \u0026 Button Utility Classes
1:04:00 Text Sizes
1:05:28 Languages Section
1:09:49 Footer
1:14:08 Media Queries \u0026 Responsiveness
1:21:34 Features Page
1:29:57 Features Grid With Spans
1:32:15 Docs Page
1:42:44 Alert, Code Block \u0026 Text Color Styles
1:49:02 Make Inner Pages Responsive
1:52:02 Animations
1:56:42 Prepare \u0026 Deploy To Netlify
Build An HTML5 Website With A Responsive Layout
In this video we will build a clean coded responsive mobile friendly HTML5 website for a fictional web design company. We will go over semantic HTML tags like header and footer as well as the basics of HTML and CSS. This is a great project for beginners.
Like this? Check out my 21 hour HTML/CSS course:
https://www.udemy.com/course/modernhtmlcssfromthebeginning/?referralCode=EB0470C43F3C3E9AA306
CODE DOWNLOAD:
http://www.traversymedia.com/downloads/acme_website.zip
SUGGESTED VIDEOS:
HTML Crash Course For Absolute Beginners
https://www.youtube.com/watch?v=UB1O30fREE
Product Landing Page (CSS Grid) https://www.youtube.com/watch?v=61R5kn_kYwY\u0026feature=youtu.be
BECOME A PATRON: Show support \u0026 get perks!
http://www.patreon.com/traversymedia
ONE TIME DONATIONS:
http://www.paypal.me/traversymedia
COURSES \u0026 MORE INFO:
http://www.traversymedia.com
FOLLOW TRAVERSY MEDIA:
http://www.facebook.com/traversymedia
http://www.twitter.com/traversymedia
http://www.instagram.com/traversymedia
NEW DISCORD CHAT SERVER:
https://discord.gg/traversymedia
Bài 10: Navbar – Tạo menu đa cấp với hiệu ứng hover và responsive
🌳 Trong bài này, mình sẽ hướng dẫn các bạn về navbar tạo menu đa cấp với hiệu ứng hover và responsive. Phần lớn nội dung trong bài học sẽ lấy code mẫu từ getbootstrap.com. Tuy nhiên, chúng ta sẽ tùy chỉnh lại phần menu đa cấp với tính năng hover.
🌳🌳 Bài viết chi tiết và code mẫu: https://goclamweb.com/bai10navbartaomenudacapvoihieuunghovervaresponsive/
นอกจากการดูหัวข้อนี้แล้ว คุณยังสามารถเข้าถึงบทวิจารณ์ดีๆ อื่นๆ อีกมากมายได้ที่นี่: ดูบทความเพิ่มเติมในหมวดหมู่INVESTMENT
