HTML/CSS

Latest Posts

How To Create a Fixed Header on Scroll

Jarod Peachey
12/27/2020

One of the great things about Javascript is the DOM, or Document Object Model. The DOM is what allows Javascript to access the HTML element on the page, and modify or remove them.

Combined with event listeners, we can do some awesome stuff with Javascript. One of these things is animating a sticky header when the window is scrolled.

![enter ima...

Custom Scrollbar in CSS With Cross-Browser Support

Jarod Peachey
12/27/2020

CSS offers the ability to add custom styles to the scrollbars on your webpage using the -webkit-scrollbar pseudo-element. However, this method only supports browsers such as Chrome. Firefox and Edge, among others, do not support this pseudo element.

Luckily, browsers are starting to support the scrollbar-color and scrollbar-width CSS prope...

Slide-Out Mobile Menu Using React Hooks

Jarod Peachey
12/27/2020

If you're a front-end developer, I can almost guarantee that you've worked with a mobile menu at some point in your career. If you have, you know first-hand that, sometimes, crafting mobile menus can be a little difficult.

Just this month, I was working on a website of mine, and I came across one of these issues. I wanted to create a mobile menu...

Full Width Responsive CSS Triangle Using `clip-path`

Jarod Peachey
12/27/2020

I like triangles.

To be honest, who doesn't?

But what I like even more is using CSS to create a triangle that is full width, scales properly, but doesn't take up 90% of the screen.

The other day I was looking for a solution to this, and I couldn't find exactly what I was looking for.

So, in this article, we're going to be creating a CSS trian...