Learn
Create a Carousel using CSS Scroll Snap and JavaScript
This tutorial will help you create a responsive carousel using the CSS scroll-snap property and very little JavaScript for navigation. You can use it for…
Collections Web Design
16 Impressive SVG Animations
Are you familiar with SVG animations? If not, you should really take some time to do so. In case you didn’t know, these awesome animations…
Collections Web Design
22 Amazing Award-Winning Website Designs
You can browse templates all day long, but sometimes you just need to see a website in action to get inspired. That’s why we’ve put…
More Recent Articles
Freelance Design What Do Web Design Clients Need From Designers?
Building a great website requires a team effort between web designers and their clients. That holds true whether you’re a solo freelancer or part of…
Learn How To Create a Responsive Timeline with Image Thumbnails
In this tutorial you will learn how to create a responsive timeline for a set of related events you wish to display in a chronological…
Collections 15 Amazing CSS Paintings
If you’re involved in web development or design at all, you are familiar with CSS. It’s typically used to add design styles to websites. That’s…
Learn Learn How to Create Flip Cards using CSS
In this tutorial you will learn how to create blog post cards that flip on hover revealing the post excerpt on the back of the…
Sponsor The Easiest Way To Collect and Manage Website Feedback
Whether you work for an agency or you are a freelance web designer, developer or both, you are undoubtedly familiar with the common nightmare of…
Collections UX Design 17 Cool Pure CSS Animations
If you’re looking to stun your website visitors, using CSS animations ought to do it! It might sound simple at first, but using animations like…
Web Design This Week In Web Design – July 10, 2020
It’s Friday again, which means it’s time for another edition of “This Week In Web Design”, our weekly roundup of all of the web design…
Learn Web Design Create Simple Parallax Scrolling Effect in Hero Section using Pure CSS
In this tutorial you will learn how to create a simple pure CSS parallax scrolling effect in the hero section of your landing page. Parallax…
WordPress How to Put WordPress Into Maintenance Mode
Among the biggest advantages of a content management system (CMS) such as WordPress is the ability to easily make changes on a live site. While…
Web Design This Week In Web Design – July 3, 2020
It’s the first Friday of July, and in the USA it’s a holiday weekend as we celebrate Independence Day. Fridays around here mean it’s time…Popular Posts
The most popular posts on 1st Web Designer.
Collections The 150+ Best Modern Fonts Collection
Choosing the perfect font for your projects is an important step, as it could make or break your design entirely. The wrong choice of font can break your flyer, poster, business card, blog, just about anything. We know that it takes a lot of time to look for modern…
Learn
The Top 80 Adobe Illustrator Text Effects Tutorials
We are all well acquainted with the power of Adobe Illustrator and how important it is to a designer. Be it creating appealing text effects or creating amazing characters, Adobe…
Collections
Top 50 jQuery Gallery & Image Sliders for 2019
Since usually the best galleries are created in jQuery, we’ve mainly focused on jQuery type sliders, but there are a few simple CSS galleries as well. This collection has been…
Collections
10 Code Snippets for Creating Beautiful CSS Buttons
Web designers no longer need to rely on Photoshop for creating awesome buttons. With CSS3 you can manipulate everything from background gradients to drop shadows and glossy/shiny effects. We’ve organized…