CSS Media Queries
Css Media Queries are one of the top ways to make your website more responsive. What CSS Media Queries do is change the stylign of an element, depending on browser size!
Here is an example of Media Quieries in action!
Using Margins and Padding!
Spacing your website correctly is crucial to making it look more professional. If you space things too close together, your website can look crowded and overwhelming. If you space things too far apart, your website can look empty or lacking detail! One way to fix that is playing with the margin and padding values. The Margin sets how far apart an element is from other elements. The Padding sets the distance between an element and it's border.
Here is an example of Margins and Padding in action!
Css Units!
In the previous example, we went over spacing things out with margin and padding. In this example we're gonna go over some units commonly used in CSS.
Here you can see all the units commonly used! Credit to W3 Schools for the informative Article!
Front-End Libraries!
Sometimes bare CSS doesn't have all of the tools that a developer may want, or it takes too much time to program. That's where front-end libraries come in handy. You can think of Front-end libraries as expansion packs for CSS. They provide more tools and faster shortcuts to styling your website. Below is a small list of some of my favorite front-end libraries.
- Bootstrap. This is a very useful front-end library that comes packed with an endless amount of css tools to spice up your website. It has lots of information in the docs and vvery useful css shortcuts.
- Jquery. This is a front-end library useful for powering your javascript in your website.
- React. React is another powerful front-end library, even providing some useful features for back-end! I like react because it comes with both css and javascript features, and it's so widely used that there is tutorials for everything!
- Vue. Vue is a smaller front-end library, but still comes with lots of useful front-end features. I like Vue because of how simple it is to learn, use, and implement into my projects!
- Backbone. Backbone is similar to Vue, it's very simple to learn and use. It helps me cut down on loading time on my website, it's very lightweight, and easy to start!