Things I Learned This Week :-
This week, I started exploring CSS (Cascading Style Sheets) and covered several fundamental concepts. Here's a brief overview of what I learned:
Introduction to CSS – Learned what CSS is, why it's essential, and how it helps in styling web pages to enhance user experience. Want to know more? Head over to my keynotes.
Types of CSS – Explored the three ways to apply CSS: Inline, Internal, and External, understanding their use cases and best practices. For more details, refer to my keynotes.
Selectors in CSS – Studied different types of CSS selectors, including element, class, ID, attribute, pseudo-class, and pseudo-element selectors, to target HTML elements effectively. Curious to explore them further? Refer to my keynotes.
Box Model in CSS – Understood how every element is structured using margin, border, padding, and content, which helps in layout designing. Check out my keynotes for more details.
Font, Text & Color Properties – Explored how to style text using font-family, font-size, font-weight, color, text-align, text-transform, and line-height properties. If you're curious to learn more, check out my keynotes.
Specificity & Cascade in CSS – Understood how CSS rules are applied based on specificity, inheritance, and cascade order, helping to resolve style conflicts. Curious to explore them further? Refer to my keynotes.
Sizing Units in CSS – Learned various units like px, em, rem, %, vh, vw, and their impact on responsive design. For more on this, check out my keynotes.
Display Property in CSS – Learned different display values like block, inline, inline-block, and none, crucial for layout and positioning. Check out my keynotes for more details.
Shadows & Outlines in CSS – Practiced adding box-shadow and text-shadow effects to elements, along with using outline for styling element borders. Check out my keynotes for more details.
Steps That I Did :-
Throughout the week, I followed a structured approach to learning CSS, experimenting with different concepts and applying them in practice. Here's how I progressed:
Started with an Introduction to CSS – Learned about its role in web development and the different ways to apply CSS to HTML files.
Explored Different Types of CSS – Practiced writing inline, internal, and external CSS, understanding when to use each method for better maintainability.
Implemented the Box Model – Created sample layouts to understand how margin, border, padding, and content interact and affect element spacing.
Worked with Display Property – Experimented with block, inline, inline-block, and flex display types to see how they influence page layout.
Styled Text and Colors – Applied different font families, sizes, weights, colors, and text transformations, making text more readable and visually appealing.
Practiced CSS Selectors – Used class, ID, attribute, pseudo-class, and pseudo-element selectors to target and style specific elements efficiently.
Added Shadows & Outlines – Experimented with box-shadow and text-shadow to create visual depth and used outline for highlighting elements.
Tried Different Sizing Units – Used px, em, rem, %, vh, vw to make elements responsive and adaptable to various screen sizes.
Understood Specificity & Cascade – Tested conflicting styles to understand how CSS prioritizes rules and how to override styles effectively.
Challenges I Faced & How I Overcame Them :-
Understanding the Box Model
Challenge: The concept of margin, padding, and border affecting the total size of an element was confusing. Elements weren’t aligning as expected.
How I Overcame It: I used DevTools (Inspect Element) to visualize the box model, experimenting with different values to see how each property affects the layout.Working with the Display Property
Challenge: Struggled with when to use block, inline, and inline-block. Some elements weren’t behaving as expected when arranged side by side.
How I Overcame It: I tested each display type with different elements and observed how they changed layout behavior. Using flexbox for layout adjustments also helped.Choosing the Right Sizing Units
Challenge: Deciding between px, em, rem, and % for font sizes and element widths was confusing, leading to inconsistent designs.
How I Overcame It: I researched and tested different units, noting how em and rem scale based on parent elements, making them ideal for responsiveness.CSS Cascade & Overriding Styles
Challenge: Styles were being overridden unexpectedly, especially when using external stylesheets and inline styles together.
How I Overcame It: I learned about the CSS cascade, checking which styles were applied using DevTools and using more specific selectors to maintain control.Selector Specificity Issues
Challenge: Some styles weren’t applying because of conflicting CSS rules, and I wasn’t sure why certain styles were taking precedence.
How I Overcame It: I studied specificity rules, avoided overusing !important, and structured my stylesheets in a more organized manner for better control.
Resources I Used :-
Documentation :- MDN Web Docs
Conclusion :-
This week’s deep dive into CSS has been both exciting and challenging. From understanding the Box Model to experimenting with selectors, shadows, and display properties, every concept brought a new layer of creativity and control over web styling. While some topics took time to grasp, hands-on practice and debugging through DevTools made all the difference.
As I continue my journey, I look forward to exploring advanced CSS techniques, making my designs more dynamic and responsive. This is just the beginning—each challenge I overcome brings me one step closer to mastering web development. 🚀
Stay tuned for next week’s progress, and feel free to check out my GitHub and Week 1 blog for detailed insights! Let’s keep learning together! ✨