The Difference Between `width: auto` and `width: 100%` in CSS
Introduction: In CSS, setting the width of an element is a common task when it comes to designing web pages. There are different ways to define the width of an element, but two commonly used values are auto and 100%. While they may seem similar, they have distinct behaviors and …
Learning CSS Grid
CSS Grid can be scary. It looks complicated and you might not even know where to start. If you want to get started quickly with CSS grid, I highly recommend Grid Garden. It an interactive learning module for CSS grid. It covers a lot of important concepts about CSS grid. …
Using Font Files Downloaded From Google Font
When you download a font family from Google Fonts, it contains multiple files, each corresponding to a different style. It is common to just import a regular 400 with the font face declaration. The better practice is to use the method called style linking. In @font-face, we can use the …
Adding CSS Support for TypeScript React
Let’s extend the previously build Webpack TypeScript React project to include CSS support. For a small application or widget, it is better to bundle CSS with JavaScript code. This post focuses on getting Bootstrap and styled-jsx working for a React project with TypeScript. Styled-jsx enables us to inject CSS style …