"If a worker wants to do his job well, he must first sharpen his tools." - Confucius, "The Analects of Confucius. Lu Linggong"
Front page > Programming > The Odin Project -Intro to CSS

The Odin Project -Intro to CSS

Published on 2024-11-08
Browse:204

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.

Release Statement This article is reproduced at: https://dev.to/iamhrk/the-odin-project-intro-to-css-3opa?1 If there is any infringement, please contact [email protected] to delete it
Latest tutorial More>

Disclaimer: All resources provided are partly from the Internet. If there is any infringement of your copyright or other rights and interests, please explain the detailed reasons and provide proof of copyright or rights and interests and then send it to the email: [email protected] We will handle it for you as soon as possible.

Copyright© 2022 湘ICP备2022001581号-3