responsive

페이지 정보

profile_image
작성자한국은행총재 조회 7회 작성일 2021-05-05 23:34:24 댓글 0

본문

Introduction To Responsive Web Design - HTML & 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 4-hour 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 professional-level responsive website.

The teacher is the brilliant Kevin Powell, who’s well-known 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. min-width and max-width
⌨️ (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 flex-direction
⌨️ (01:36:45) 19. flex-direction 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 pseudo-class to wrap-up 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

Responsive design made easy

Conquering Responsive Layouts: https://courses.kevinpowell.co/conquering-responsive-layouts\r
\r
Creating responsive sites can be a bit of a pain in the butt at times, but if you take it from a certain approach, you can make your life a lot easier\r
\r
/// Links\r
Em vs Rem:

min(), max(), and clamp():

exploring gap:

\r
GitHub Repo: https://github.com/kevin-powell/responsive-made-easy\r
\r
Zell's look at media queries with em: https://zellwk.com/blog/media-query-units/\r
\r
/// Timestamps:\r
00:00 - Introduction\r
01:27 - Starting the project\r
11:21 - Setting up the custom properties\r
14:56 - Basic styling\r
24:08 - Starting the layout\r
33:03 - Adding complexity\r
\r
#css\r

Thanks to Vlogbrothers for their sponsorship of this video!
\r
--\r
\r
Come hang out with other dev's in my Discord Community\r
https://discord.gg/nTYCvrK\r
\r
---\r
\r
Keep up to date with everything I'm up to\r
✉ https://www.kevinpowell.co/newsletter\r
\r
---\r
\r
Help support my channel\r
‍ Get a course: https://www.kevinpowell.co/courses\r
Buy a shirt: https://teespring.com/stores/making-the-internet-awesome\r
Support me on Patreon: https://www.patreon.com/kevinpowell\r
\r
---\r
\r
My editor: VS Code - https://code.visualstudio.com/\r
\r
---\r
\r
I'm on some other places on the internet too!\r
\r
If you'd like a behind the scenes and previews of what's coming up on my YouTube channel, make sure to follow me on Instagram and Twitter.\r
\r
Instagram: https://www.instagram.com/kevinpowell.co/\r
Twitter: https://twitter.com/KevinJPowell\r
Codepen: https://codepen.io/kevinpowell/\r
Github: https://github.com/kevin-powell\r
\r
---\r
\r
And whatever you do, don't forget to keep on making your corner of the internet just a little bit more awesome!

Responsive Web Design | 10 Basics

Responsive Web Design is a standard now in web design, but it can be a little confusing for those that are just getting started. What are the fundamentals? what are the "must-haves"? In this episode, I try to answer those questions. Remember to Subscribe https://goo.gl/6vCw64 \r

----------------------------------------------------------------------------------------

These are the 10 basics of Responsive Web Design and links for further reading\r

1. Responsive vs Adaptive web design
https://www.uxpin.com/studio/blog/responsive-vs-adaptive-design-whats-best-choice-designers/
https://www.interaction-design.org/literature/article/adaptive-vs-responsive-design
https://uxplanet.org/adaptive-vs-responsive-web-design-eead0c2c28a8

2. The flow
https://developer.mozilla.org/en-US/docs/Learn/CSS/CSS_layout/Normal_Flow
https://marksheet.io/css-the-flow.html

3. Relative units
https://thecssworkshop.com/lessons/relative-units
https://www.tutorialrepublic.com/css-tutorial/css-units.php

4. Breakpoints
https://responsivedesign.is/strategy/page-layout/defining-breakpoints/
https://medium.com/@uiuxlab/the-most-used-responsive-breakpoints-in-2017-of-mine-9588e9bd3a8a
https://www.w3schools.com/css/css_rwd_mediaqueries.asp

5. Max and Min values
https://www.sitepoint.com/creating-media-queries-for-responsive-web-designs/
https://www.smashingmagazine.com/2011/01/guidelines-for-responsive-web-design/

6. Nested Objects
https://www.smashingmagazine.com/2019/03/robust-layouts-container-units-css/
https://www.quackit.com/css/flexbox/tutorial/nested_flex_containers.cfm

7. Mobile or Desktop first
https://medium.com/@Vincentxia77/what-is-mobile-first-design-why-its-important-how-to-make-it-7d3cf2e29d00
https://www.uxpin.com/studio/blog/a-hands-on-guide-to-mobile-first-design/

8. Webfonts vs System fonts
https://responsivedesign.is/articles/should-i-use-system-fonts-or-web-fonts/

9. Bitmap images vs Vectors
https://filecamp.com/blog/vector-vs-bitmap-images-explained/
https://www.lifewire.com/vector-and-bitmap-images-1701238

10. Make it till it breaks
https://bradfrost.com/blog/post/the-principles-of-adaptive-design/\r
------------------------------------------------------------------------------------\r
\r
////////// Want to support my content and get extra goodies? Become a member and get perks like member-only content, behind the scenes, design files, and more...
https://learn.jesseshowalter.com/membership

////////// Connect with me here
Instagram: https://www.instagram.com/iamjesseshow
Twitter: http://twitter.com/iamjesseshow
Anchor: https://anchor.fm/iamjesseshow
Medium: https://medium.com/@iamjesseshow

////////// Sign up for my Monthly Newsletter
http://jesseshowalter.com/newsletter

////////// Music is from Musicbed click below for a free trial
http://share.mscbd.fm/iamjesseshow

////////// Equipment
https://www.amazon.com/shop/jesseshowaltertv

... 

#responsive

댓글목록

등록된 댓글이 없습니다.

전체 2,895건 1 페이지
게시물 검색
Copyright © www.siss.or.kr. All rights reserved.  Contact : help@oxmail.xyz