The “C” in CSS: The Cascade

Following up from Geoff’s intro article on The Second “S" in CSS, let’s now move the spotlight to the "C" in CSS — what we call the Cascade. It’s where things start to get messy, and even confusing at times.

Have you ever written a CSS property and the value doesn’t seem to work? Maybe you had to turn to using !important to get it going. Or perhaps you resorted to writing the CSS inline on the element …
The post The “C” in CSS: The Cascade appeared first on CSS-Tricks.

Link: https://css-tricks.com/the-c-in-css-the-cascade/

What’s the difference between ./dogs.html and /dogs.html?

They are both URL paths. They have different names, though.

<a href=”./dogs.html">Dogs</a>
<!– absolute –>
<a href="/dogs.html">Dogs</a>
There are also fully-qualified URLs that would be like:
<!– fully qualified –>
<a href="https://website.com/dogs.html">Dogs</a>
Fully-qualified URL’s are pretty obvious in what they do — that link takes you to that exact place. So, let’s look those first two examples again.
Say you have a directory structure like this on your site:
public/
├── index.html
└── animals/
├── cats.html

The post What’s the difference between ./dogs.html and /dogs.html? appeared first on CSS-Tricks.

Link: https://css-tricks.com/whats-the-difference-between-dogs-html-and-dogs-html/

Helping a Beginner Understand Getting a Website Live

I got a great email from a fellow named Josh Long the other day. He is, in his words, “relatively new to web design" and was a bit stuck on the concept of getting a site live. I should say that I’m happy to get emails like this an I always read them, but I typically can’t offer tech support over email. If I can respond at all, I normally point people to other community resources.
In this …
The post Helping a Beginner Understand Getting a Website Live appeared first on CSS-Tricks.

Link: https://css-tricks.com/helping-a-beginner-understand-getting-a-website-live/

Free Introduction to Web Development Workshop

Brian Holt and the Frontend Masters team are putting on a free workshop today and tomorrow that is live-streamed for anyone that’s interested. This is super cool because, despite the fact that there is a mountain of articles about web development out there, there are only few that start with the basics in a manner that’s easy for beginners to follow.
I’ve been a fan of Brian’s work for ages now, which is part of the reason why I advocated …
The post Free Introduction to Web Development Workshop appeared first on CSS-Tricks.

Link: https://frontendmasters.com/workshops/intro-web-dev/

Another Collection of Interesting Facts About CSS Grid

Last year, I assembled A Collection of Interesting Facts about CSS Grid Layout after giving a workshop. This year, I was worked on another workshop and I’ve learned some more exciting facts about the layout spec we all so love.
Of course, I’m not going to keep my knowledge to myself. I’m happy to share my findings once again with you, the CSS-Tricks community.

Understanding how the `grid` shortcut works
Sometimes, reading and understanding parts of the grid—or actually …
The post Another Collection of Interesting Facts About CSS Grid appeared first on CSS-Tricks.

Link: https://css-tricks.com/another-collection-of-interesting-facts-about-css-grid/

Methods, Computed, and Watchers in Vue.js

One of the reasons I love working with Vue is because of how useful methods, computed, and watchers are, and the legibility of their distinction. Until understanding all three, it’s difficult to leverage the functionality of Vue to its full potential. Still, the majority of people I see confused about this framework tend to also be confused about the differences here, so let’s dig in.

In case you need a quick answer and don’t have time to read …
The post Methods, Computed, and Watchers in Vue.js appeared first on CSS-Tricks.

Link: https://css-tricks.com/methods-computed-and-watchers-in-vue-js/

The JavaScript Learning Landscape in 2018

Raise your hand if this sounds like you:
You’ve been in the tech industry for a number of years, you know HTML and CSS inside-and-out, and you make a good living. But, you have a little voice in the back of your head that keeps whispering, “It’s time for something new, for the next step in your career. You need to learn programming."
Yep, same here.

I’ve served in a variety of roles in the tech industry for close to …

The JavaScript Learning Landscape in 2018 is a post from CSS-Tricks

Link: https://css-tricks.com/javascript-learning-landscape-2018/

CSS Basics: Fallback Font Stacks for More Robust Web Typography

In CSS, you might see a ruleset like this:
html {
font-family: Lato, “Lucida Grande", Tahoma, Sans-Serif;
}
What the heck, right? Why don’t I just tell it what font I want to use and that’s that? The whole idea here is fallbacks. The browser will try to use the font you specified first (Lato, in this case), but if it doesn’t have that font available, it will keep going down that list. So to be really verbose here, …

CSS Basics: Fallback Font Stacks for More Robust Web Typography is a post from CSS-Tricks

Link: https://css-tricks.com/css-basics-fallback-font-stacks-robust-web-typography/

CSS Basics: Styling Links Like a Boss

You are probably well acquainted with how links looks without any styling at all. That blue. That underline. That’s a link in it’s purest form. But what if we want to change things up a bit? Perhaps blue doesn’t work with your website’s design. Maybe you have an aversion to underlines. Whatever the reason, CSS lets us style links just like any other element.

CSS Basics: Styling Links Like a Boss is a post from CSS-Tricks

Link: https://css-tricks.com/css-basics-styling-links-like-boss/

CSS Basics: Using Multiple Backgrounds

With CSS, you can control the background of elements. You can set a background-color to fill it with a solid color, a background-image to fill it with (you guessed it) an image, or even both:
body {
background-color: red;
background-image: url(pattern.png);
}
Here’s an example where I’m using an SVG image file as the background, embedded right in the CSS as a data URL.
See the Pen background color and image together by Chris Coyier (@chriscoyier) on …

CSS Basics: Using Multiple Backgrounds is a post from CSS-Tricks

Link: https://css-tricks.com/css-basics-using-multiple-backgrounds/