Hello guys, Welcome to Africa's Largest Video Search Engine, and you are watching CSS Background Images and Responsive Image Properties for Beginners. and this video is uploaded by Dave Gray at 2022-05-17T06:00:26-07:00. We are just promoting this video only for entertainment and educational purpose only. I hop you like our Video Search Engine. [cLyzBfXI0I0]
| Name | CSS Background Images and Responsive Image Properties for Beginners |
| Video Uploader | Video From Dave Gray |
| Upload Date | This Video Uploaded At 17-05-2022 13:00:26 |
| Video Discription | Web Dev Roadmap for Beginners (Free!): https://bit.ly/DaveGrayWebDevRoadmap Learn about CSS background images and responsive image properties in this full tutorial for beginners. Resize your images by browser size and set great backgrounds where text content is still the main focus. ๐ฉ Subscribe โ https://bit.ly/3nGHmNn ๐ This lesson is part of a CSS for Beginners tutorial series playlist: https://www.youtube.com/playlist?list=PL0Zuz27SZ-6Mx9fd9elt80G1bPcySmWit ๐ All Resources for this CSS Tutorial Series: https://github.com/gitdagray/css_course ๐ฌ Course Updates โ https://courses.davegray.codes/ CSS Background Images and Responsive Image Properties for Beginners (00:00) Intro (00:05) Welcome (00:26) Starter Code (01:33) Prevent content layout shift (04:02) Style responsive images (06:23) Remove the default space under images (08:51) Profile picture example (13:32) Hero section (18:37) Fallback background-color (19:31) Setting a background-image (21:01) background-repeat (21:38) background image patterns (23:04) background-size (24:57) Image size considerations (26:24) Make text standout over a background (28:50) Create a background mask layer (31:50) background-position (33:28) linear-gradient backgrounds (36:19) Multiple background image layers (38:51) background-size (39:23) Filling text with a background image (44:35) background property shorthand ๐ผ๏ธ Image Resources: Placeholder Image Generators: https://loremipsum.io/21-of-the-best-placeholder-image-generators/ Sites with Freely-Usable Images: https://unsplash.com/ https://www.pexels.com/ https://gratisography.com/ https://pixabay.com/ Image Editing / Resizing Software: For Windows: https://www.irfanview.com/ As a Service: https://www.canva.com/ Suggestions for Mac: https://www.cleverfiles.com/howto/top-5-photo-editing-apps-mac.html Full Featured Editor for Windows/Mac/Linux: https://www.gimp.org/ Image Compression (shrink file size): https://tinypng.com/ โ Web Dev Tools: ๐ Chrome Browser: https://www.google.com/chrome/ ๐ Visual Studio Code (VS Code): https://code.visualstudio.com/ ๐ Live Server VS Code Extension: https://marketplace.visualstudio.com/items?itemName=ritwickdey.LiveServer ๐ vscode-icons VS Code Extension: https://marketplace.visualstudio.com/items?itemName=vscode-icons-team.vscode-icons ๐ Github Themes VS Code Extension: https://marketplace.visualstudio.com/items?itemName=GitHub.github-vscode-theme ๐ W3C CSS Validator: https://jigsaw.w3.org/css-validator/ ๐ Specificity Calculator: https://specificity.keegan.st/ ๐ HTML Special Characters and Entities: https://unicode-table.com ๐ CanIUse.com: https://caniuse.com/ ๐ References: ๐ MDN CSS Selectors: https://developer.mozilla.org/en-US/docs/Learn/CSS/Building_blocks/Selectors ๐ MDN - How to Apply Colors to HTML Elements with CSS: https://developer.mozilla.org/en-US/docs/Web/CSS/color ๐ MDN - CSS Values and Units: https://developer.mozilla.org/en-US/docs/Learn/CSS/Building_blocks/Values_and_units ๐ MDN - The Box Model: https://developer.mozilla.org/en-US/docs/Learn/CSS/Building_blocks/The_box_model ๐ MDN - Styling Lists: https://developer.mozilla.org/en-US/docs/Learn/CSS/Styling_text/Styling_lists ๐ MDN - Display Property: https://developer.mozilla.org/en-US/docs/Web/CSS/display ๐ MDN - Floats: https://developer.mozilla.org/en-US/docs/Learn/CSS/CSS_layout/Floats ๐ MDN - Columns: https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Columns/Basic_Concepts_of_Multicol ๐ MDN - Margin Collapsing: https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Box_Model/Mastering_margin_collapsing ๐ MDN - White-Space: https://developer.mozilla.org/en-US/docs/Web/CSS/white-space ๐ MDN - Positioning: https://developer.mozilla.org/en-US/docs/Learn/CSS/CSS_layout/Positioning ๐ MDN - Flexbox: https://developer.mozilla.org/en-US/docs/Learn/CSS/CSS_layout/Flexbox ๐ MDN - Basic Concepts of Grid Layout: https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Grid_Layout/Basic_Concepts_of_Grid_Layout ๐ MDN - Grid Template Areas: https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Grid_Layout/Grid_Template_Areas ๐ MDN - CSS Images: https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Images ๐ MDN - CSS Background Images: https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Backgrounds_and_Borders/Resizing_background_images ๐ Chip Cullen - Article on Content Layout Shift: https://chipcullen.com/what-width-and-height-attributes-to-use-with-responsive-images/ โ Follow Me: Github: https://github.com/gitdagray Twitter: https://twitter.com/yesdavidgray LinkedIn: https://www.linkedin.com/in/davidagray/ Blog: https://yesdavidgray.com Reddit: https://www.reddit.com/user/DaveOnEleven Was this tutorial about CSS Background Images and Responsive Image Properties helpful? If so, please share. Let me know your thoughts in the comments. #css #background #images [cLyzBfXI0I0] |
| Category | Education |
| Tags | css background images and responsive image properties | css | css3 | background images | background-image | css images | css background images | css responsive images | responsive images | image properties | background image properties | css image properties | css background image properties | css for beginners | css tutorial for beginners | images for beginners | css background properties | beginners css | html css images | image | img | insert image in css background | css background-image property |
