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…


This content originally appeared on DEV Community and was authored by Harikrishnan Rajagopalan

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.


This content originally appeared on DEV Community and was authored by Harikrishnan Rajagopalan


Print Share Comment Cite Upload Translate Updates
APA

Harikrishnan Rajagopalan | Sciencx (2024-09-08T04:52:27+00:00) The Odin Project -Intro to CSS. Retrieved from https://www.scien.cx/2024/09/08/the-odin-project-intro-to-css/

MLA
" » The Odin Project -Intro to CSS." Harikrishnan Rajagopalan | Sciencx - Sunday September 8, 2024, https://www.scien.cx/2024/09/08/the-odin-project-intro-to-css/
HARVARD
Harikrishnan Rajagopalan | Sciencx Sunday September 8, 2024 » The Odin Project -Intro to CSS., viewed ,<https://www.scien.cx/2024/09/08/the-odin-project-intro-to-css/>
VANCOUVER
Harikrishnan Rajagopalan | Sciencx - » The Odin Project -Intro to CSS. [Internet]. [Accessed ]. Available from: https://www.scien.cx/2024/09/08/the-odin-project-intro-to-css/
CHICAGO
" » The Odin Project -Intro to CSS." Harikrishnan Rajagopalan | Sciencx - Accessed . https://www.scien.cx/2024/09/08/the-odin-project-intro-to-css/
IEEE
" » The Odin Project -Intro to CSS." Harikrishnan Rajagopalan | Sciencx [Online]. Available: https://www.scien.cx/2024/09/08/the-odin-project-intro-to-css/. [Accessed: ]
rf:citation
» The Odin Project -Intro to CSS | Harikrishnan Rajagopalan | Sciencx | https://www.scien.cx/2024/09/08/the-odin-project-intro-to-css/ |

Please log in to upload a file.




There are no updates yet.
Click the Upload button above to add an update.

You must be logged in to translate posts. Please log in or register.