The Odin Project -Intro to CSS

Hi there ?,

I'm a front-end developer with 3 years of experience. I've always wanted to bridge the gap in my knowledge and become a full-stack developer. I've made several attempts to start The Odin Project but haven't been able to consistently follow through. This time, I'm determined to stick with it and improve my skills.

To track my progress, I'll be publishing a series of blog posts detailing my learnings from each Odin Project chapter. Consider these as my development diaries.

I will be adding the topics I learned and share stuff I didn't knew before.

I'm starting with CSS as HTML and all the introductory stuff I have gone through previously or atleast I'm aware of.

Topics Learned

• Selectors

1. Universal Selector
2. Type Selector
3. Class Selector
4. ID Selector
5. Grouping Selector
6. Chaining Selector

• Combinator I did know about how to use combinator but I wasn't aware of that specific term. Also the definition that it's about a relationship between selectors other than grouping or chaining them.
• Descendent Combinator

Basic CSS Properties

• color, background-color
• Typography

1. Font family and generic font family

• Image height and width
  So, another thing I learned here is that, It's advisable to always specify both width and height attributes for images in HTML. This ensures that the browser reserves the appropriate space for the image during page rendering, preventing unexpected shifts in content layout when images load. To maintain the original aspect ratio of an image, you can change only the width attribute and set the height to 'auto'. This will automatically adjust the height based on the image's proportions.

• External CSS

• Internal and Inline CSS

I recall an instance when my tech lead added inline CSS to our HTML. I hesitated to question his decision, as he was a seasoned professional and I was still relatively new to the field.

However, I now understand that a more effective approach would have been to suggest that we minimize the use of inline CSS. By limiting inline styles to only those absolutely necessary for the rule to function, we can avoid over-applying specificity and maintain a cleaner, more maintainable codebase.

I'm also planning to publish a weekly podcast recapping the things I learned.

The above is the detailed content of The Odin Project -Intro to CSS. For more information, please follow other related articles on the PHP Chinese website!