Posts tagged as "css"

Design for Developers: Specific Steps to Improve Your Website Design

I've noticed a lot of web developers struggle with design; they think they don't have a natural talent for design and knowing what looks…

Prevent Mouse Scroll from Zooming on Embedded Google Maps

If you embed a Google Map into a website, they'll give you some HTML that looks like this: And the embedded result will look like this. You…

Background Position Fixed and Cover with CSS

I wanted to make a section of a website have a div featuring a background image that had both and , regardless of the image's size. This…

Crossfade Between Two Images with CSS Animations

A website I worked on wanted an animated, flashing neon sign. A gif is the first thing that comes to mind in such a situation, but…

Styling UI Components from Scratch: Buttons & Forms

It's hard to style basic web components if you've never done it before. You want your buttons and forms to look good and also be cross…

How to Build a Responsive Image Gallery with Flexbox

You may have noticed I've updated the site to include a front page with a grid listing all the tutorials . As you resize the screen, it…

Learn Sass Now: A Guide to Installing, Using and Understanding Sass

Sass is a CSS preproccessor that can make writing CSS faster and more efficient. You might have heard of Sass, but not know how to set it up…

Full Screen Navigation Overlay

One current trend in navigation styles that you may have seen is the full screen navigation overlay. With this type of navigation, toggling…

What is Bootstrap and How Do I Use It?

If you have any sort of interest in web development, you've likely heard of Bootstrap . According to the official website, Bootstrap is…

Off Canvas Navigation

One of the more minimalist approaches to responsive navigation is the off canvas navigation method. This method utilizes the ubiquitous…

You Don't Need a Framework: Understanding the Fundamentals of Responsive Design

Responsive web design is an approach to creating websites in which the layout adapts to fit the device's screen - whether it's a phone…

How to Create a Flexbox Grid

The flexbox layout module is good news for web developers everywhere. The part where all major browsers now support it is even better news…

Responsive Dropdown Navigation Bar

Bootstrap and Foundation have fantastic navbars that you can use if you choose to base your layout on their framework. For my own…