Have you ever struggled to set 100% width on an item while also setting some margin for it I'm CSS? Once you know this trick you no longer have to!
👉 The "width" we set on CSS element is applied till the border of the element (content, padding and border)
But what if we want the element to have some margin as well but still fit inside the patent?
You may try to use some 🧠 math like calc(100% - 40px), but with the "stretch" keyword for the width property, CSS automatically does this for you.
🔥 This helps to easily fit an element inside it's parent even when it has some margin!
👍2❤1
🔅 CSS: Enhancing Interfaces with Animation
🌐 Author: Christina Gorton
🔰 Level: Intermediate
⏰ Duration: 1h 3m
📗 Topics: Interactive Web Content, Cascading Style Sheets
📤 Join Web Development for more courses
🌐 Author: Christina Gorton
🔰 Level: Intermediate
⏰ Duration: 1h 3m
🌀 Leverage CSS animations to enhance websites you develop. Examine animation theories, practical uses, and more as you explore the use of movement in UI.
📗 Topics: Interactive Web Content, Cascading Style Sheets
📤 Join Web Development for more courses
👍1
📂 Full description
Push your interfaces further and make websites more engaging by integrating animations throughout the site. In this course, learn how to leverage CSS to incorporate interactive animations that enhance features and layouts. Examine principles and best practices that should guide your use of animation. Find out how to use transitions, keyframe animations, and transforms to give users a better overall experience. Discover the importance of fine-tuning the duration, speed, and choreography of dynamic elements. See how to make buttons, menus, and cards more fun and inviting. Consider theories, practical uses, and more as you explore the use of movement in UI.This course is integrated with GitHub Codespaces, an instant cloud developer environment that offers all the functionality of your favorite IDE without the need for any local machine setup. With Codespaces, you can get hands-on practice from any machine, at any time—all while using a tool that youll likely encounter in the workplace. Check out the “Using GitHub Codespaces with this course” video to learn how to get started.
Push your interfaces further and make websites more engaging by integrating animations throughout the site. In this course, learn how to leverage CSS to incorporate interactive animations that enhance features and layouts. Examine principles and best practices that should guide your use of animation. Find out how to use transitions, keyframe animations, and transforms to give users a better overall experience. Discover the importance of fine-tuning the duration, speed, and choreography of dynamic elements. See how to make buttons, menus, and cards more fun and inviting. Consider theories, practical uses, and more as you explore the use of movement in UI.This course is integrated with GitHub Codespaces, an instant cloud developer environment that offers all the functionality of your favorite IDE without the need for any local machine setup. With Codespaces, you can get hands-on practice from any machine, at any time—all while using a tool that youll likely encounter in the workplace. Check out the “Using GitHub Codespaces with this course” video to learn how to get started.
🔰 Using semantic HTML elements
👀 Most often, people enter into the world of web development (including myself) without a formal introduction of different elements offered by HTML, and discover it rather later.
So it might catch them by surprise the sheer number of different elements that the markup language offers.
❓ Why should you use them?
▪️ To help assistive technologies like screen readers provide a better experience for their users to navigate your page
▪️ Improves SEO
Each semantic element has a specific meaning, and needs to be used in the appropriate context
Using semantic HTML elements is the first step to building an accessible website.
👀 Most often, people enter into the world of web development (including myself) without a formal introduction of different elements offered by HTML, and discover it rather later.
So it might catch them by surprise the sheer number of different elements that the markup language offers.
❓ Why should you use them?
▪️ To help assistive technologies like screen readers provide a better experience for their users to navigate your page
▪️ Improves SEO
Each semantic element has a specific meaning, and needs to be used in the appropriate context
❤2