Interactive CSS Grid Layout Generators

For as long as CSS has existed, web developers have struggled to design layouts with it. Positioning elements on a page has never been easy and usually involved a workaround like using floats or tables, instead of having a CSS system designed just for that purpose.

All that changes with the advent of CSS grids, which have only recently been adopted by all major browsers. Finally, there exists an easy way to create two-dimensional layouts on a webpage, and position elements within them. No more convoluted workarounds for such a simple issue.

There’s just one problem with CSS grids: many developers, especially newer ones, are having trouble learning how to use them! If you struggle with flexboxes, then learning grids might seem like an impossible task.

Luckily, other developers are here to save the internet with their grid layout generators. Just point and click or fill out some boxes and you have a frame to work with.

Here’s a collection of a few great grid generators, from very simple layout makers to ones that touch on much more complex features of the CSS system.

CSS Grid Generator

CSS Grid Generator

First up is the simple but effective CSS Grid Generator. No frills or confusing addons, just create a grid, tweak some numbers, and stick the code in your website, simple as that. If you’re new to CSS grids, this is a great tool to get started with.

Griddy

Griddy

Griddy is a helpful CSS grid generator which allows you to add as many elements as you want and size them based on row or column size. You can size them on fractionals (fr), pixels, percent, or auto – and you’re not locked to using one unit for the whole grid. Have two columns using fr and carefully size the others with pixels!

LayoutIt

LayoutIt

With LayoutIt you can easily create grids of any size, and even place grids inside other grids. Add more columns and rows as you need them, inside and outside individual boxes, and get full control over the layouts you create.

Grid Wiz

Grid Wiz

This is a tool for advanced users ready to learn more about CSS grids. Grid Wiz isn’t just a simple generator. You can edit code right in the sidebar and see it update in real time. Then download it, or add Grid Wiz as a dependency and compile it.

cssgr.id

cssgr.id

One of the most flexible CSS layout generators out there, cssgr.id presents you with plenty of options to get started. There are five starter layouts to begin with, and you can add as many items, columns, and rows as you want. There’s even a placeholder text …

12 Outstanding Free Fonts for Minimal Blogs and Websites

There is a seemingly endless supply of crazy fonts to choose from. But few of those fonts are actually good for a blog or website. Minimal and simple fonts make great headers and body text for a website that wants to be clean and readable. With 58% of people visiting webpages on mobile devices, it’s important that web fonts be very legible even at small sizes. These fonts are all geometrically sound, have well-thought-out spacing and kerning, and were often specifically designed for screens.

What fonts look good where is often fairly subjective, but most people can appreciate a good minimal font. We live in a cluttered world with a lot of distractions, so simple fonts are seeing a revival in web design.

Here are 12 of the best free fonts for minimal blogs and websites!

Montserrat

Example of Montserrat

Montserrat is a sans serif font that tends to be on the thinner side. It has a bit of personality, with the inspiration coming from signage in the Montserrat neighborhood of Buenos Aires. Certain characters such as the capital ‘J’, and the capital ‘R’ have special aspects that make this font really stand out, despite being minimalist. You’ll always recognize the use of Montserrat in a webpage, with iconic curves and lines.

Source Sans Pro

Example of Source Sans Pro

Source Sans Pro is another sans serif mainstay that was specifically designed to work well in user interfaces. This makes it the perfect font for blogs and websites. Most of the characters are very simple, straightforward, and balanced. It was inspired by gothic fonts, but spread out the character’s elements vertically and horizontally, to increase readability.

Simplifica

Example of Simplifica

The Simplifica typeface is a somewhat condensed sans serif font. It has very consistent character heights, to increase readability. This font flows easily and legibly across any webpage. It really shows off why the word “simple” is in the name. The tall character heights make for a smashed-together look, but the wide variety of ascenders and descenders provide enough interest to prevent Simplifica from being hard to read.

Blogger Sans

Example of Blogger Sans

Blogger Sans was designed for website headers, and focuses on legibility. Some characters are shorter or more compact, which means this font is great for headings with small line spacings. While many minimalist fonts involve just straight lines, Blogger Sans employs more rounded corners. It’s a slippery slope to Comic Sans from here, so use something like this only when very appropriate.

Caviar Dreams

Example of Caviar Dreams

Caviar dreams is a thinner sans serif font that features a lot of straight lines and a few surprises. The lowercase ‘e’ in particular has a 45-degree angle line that adds a lot of personality to …

Top Web Design Tools and Resources

Are you a web design freelancer, a team, or heading up a design agency? Then, you’re always looking for ways to improve productivity. You also try to advance the quality of your products.

This ongoing quest for improvement is never-ending. It includes tips for keeping abreast of the latest digital technologies. It also involves a constant search for the best tools and resources you can get your hands on.

There’s no shortage of quality tools and resources. Quite the opposite is true. The problem you face is that some are better than others. You have to devote an extensive amount of time searching for those that will serve you best.

This selection of top tools and resources for 2019 should make your search a quick and easy one.

Elementor

Elementor

Its 2 million active installs more than backs up the claim that Elementor is the world’s leading and most advanced WordPress page builder on the market.

Its drag and drop page builder is quick and powerful, its interface is intuitive, and the wealth of features it brings to the table can significantly streamline and shorten web designers’ workflows. With Elementor, creating the perfect website to promote your message is quick, painless, and requires no coding.

Use any of Elementor’s 100+ pre-designed templates to get a project off to a fast start, or design from scratch in which case you have a host of widgets and other design aids at your fingertips to speed the process along.

While you can take full advantage of this web-building tool’s extreme flexibility to create virtually any type of website you want, Elementor works perfectly with any theme and plugin. Plus, several cool new features have been added including pop-up and advanced form builders, hover and scroll animations, MailChimp and HubSpot integrations, and more.

Be Theme

Be Theme

There are few if any WordPress themes on the market that enable you to create a quality website of any type or for any business niche as quickly and easily as BeTheme can do. You don’t have to start from scratch, and you don’t have to use code thanks to Be’s impressive selection of core features.

The star of the show has to be its library of more than 400 pre-built websites. These pre-built websites address all industry sectors and website types. Each website is customizable, can be installed with a single click, and provides a solid foundation for high-quality UI and UX designs.

The shortcode library, a shortcode generator, options panel, a brand-new Header Builder, and the Muffin Builder ensure you will never need to use a single line of code. BeTheme can make building a complex, responsive, SEO-friendly …

Design Studio & Agency Website Inspiration

If you’re taking on the huge task of designing a studio or agency’s website, it’s important that you get everything just right. Professionalism and ease of navigation needs to balanced perfectly against beautiful design and modern trends.

If you need a little inspiration for this undertaking, we’ve got a few amazing websites to show you. These agency sites are exceedingly well made, so see what you can learn from these impeccable designs.

Dogstudio

Image from Dogstudio

Dogstudio nails its branding by designing a website around its wolf-like character. Everywhere you explore, the beautifully animated dog follows you, changing color, rotating, and moving around the screen. It’s an amazing display of interactivity and 3D web animation.

Everest

Image from Everest

Design studios have lots of content to show off, so it’s important to have good navigation. Everest does it right with a beautiful and functional homepage that takes you through the company’s work. Click something you’re interested in and it smoothly transitions to a whole new area to explore.

Rally

Image from Rally

If you’re not sure where to start with a design, try using consistency. This studio’s homepage is made up of a spiral that changes color as you scroll through each project. The colorful ribbon remains on other pages and stretches as you navigate between them.

Okalpha

Image from Okalpha

Websites for agencies are often dark and serious. But that doesn’t mean you can’t have fun with your design! Okalpha’s site is bright and colorful, with a flat look and cartoonish hues. It’s the perfect fit for an upbeat animation studio.

Canvas United

Image from Canvas United

This site is all about clean and interesting UI. There’s plenty of elegant hover and transition animations – even the loading screen includes a beautiful animated logo! The flawless UI design leaves a lasting impression of quality and grace.

Feral

Image from Feral

Many websites opt for digital icons or photography rather than illustrations, but Feral’s website proves that they have a place in web design. Lively sketches are scattered absolutely everywhere, and it makes the site seem unique and personalized.

UIX

Image from UIX

Studios need a good portfolio, and UIX does it perfectly. Widescreen images allow you to get a good look at their work, with quick animations keeping you interested in the content. Short paragraphs and impactful blurbs are broken up with more visual examples. It allows you to get an in-depth look at their design choices and see if the company is the right fit for you.

Prokhorov Design

Image from Prokhorov Design

For portfolio sites, a simple but strong design often works best. This site uses a background of particles that shift into different shapes, while also leaving a comfortable amount of space. Click on a project and the site becomes …

How to Find a Marketplace to Sell Your Designs

Once you have finished your batch of logos, website design, or whatever creative work you made, you need a marketplace to sell it on. There are a vast number of websites out there for you to choose from.

Selling your designs is a very easy way to make some extra money and to expand your brand. Whether you are an illustrator, 3D artist or logo maker, there is a demand for your creative work.

There is no longer a need to build your own website to sell designs. Now, it is easier than ever to list your work on ecommerce websites to help you reach thousands (if not millions) of people. This article will help you find the one that best suits your needs.

Creative Market

Screen from Creative Market

“Empowering creators to make a living doing what they love” is a phrase that Creative Market uses to describe what they offer and this holds very true. Creative Market has a network of about 5.9 million potential customers that could be interested in purchasing your work.

This marketplace is used to sell graphics, WordPress themes, stock photos, and many other digital goods. There are many success stories from sellers using Creative Market to sell their goods and making a lot of money doing so. Stories such as Nicky Laatz, a South African shop owner, who has earned more than $1,000,000 selling her work on Creative Market.

Envato Elements

Screen from Envato Elements

Envato Elements is a digital marketplace that allows creators to sell multiple digital goods such as graphics, fonts, WordPress themes, web templates and photos – along with many more digital items.

The company believes in supporting independent designers and that when the community succeeds, the company succeeds. With this belief they share an even 50% of the net revenue with their designers and sellers. This marketplace is driven exclusively by the community of designers who sell their work with them. Envato Elements is a great way to get paid for your creative work.

DesignCuts

Screen from DesignCuts

DesignCuts is a digital marketplace that is driven by the community. They are very selective in who they allow to sell on their marketplace. Taking a visit to their website, you will see the quote “We’re very exclusive and work with only the best designers in the world, curating the highest quality marketplace around.”

This means it is tough to become a seller on their marketplace. But once you do, you will be part of a small group who has access to a large share of potential customers.

The Hungry JPEG

Screen from The Hungry JPEG

The Hungry JPEG began in late 2014 as a website to help designers and crafters navigate the design …

The Benefits of Attending a WordCamp

Of all the tools web designers use to make a living, WordPress stands out as unique. And it’s not necessarily because of the software itself (which is excellent, by the way).

No, what really separates WordPress from just about everything else out there is the amazing community built around it. It’s made up of an incredibly diverse group – web professionals, bloggers, business owners and educators (to name just a few). They hail from all over the world and pretty much every background you can imagine.

Among the crown jewels of this community are the many WordCamps held annually. These events have taken place in over 60 countries, spanning 6 continents (sorry, Antarctica – your time will come).

If you haven’t gotten around to attending an event, it’s definitely something to put on your bucket list. There are a number of benefits to doing so, including:

A Low-Cost Day Out

Everyone needs some time out of the office – even if it’s work-related (though WordCamps rarely feel like work). And you can’t get one much more affordable than a WordCamp. Prices are generally kept to around $20 USD per day! How many pro-level conferences can you attend for about the price of dinner at a pizza place?

Speaking of which, you won’t go hungry while you’re there. For that more-than-reasonable price, you’ll often get a meal (typically lunch), while snacks and beverages are also included. Plus, just walking in the door nets you a giveaway item, like a custom T-Shirt.

Prices are generally kept low due to the kindness of sponsors – both corporate and individual. As a bonus, they often attend the conference with their own collection of swag to give away.

Depending on the location of the camp, the largest expense for attendees tends to be travel (and, if necessary, a hotel). However, various organizations may provide grants to those in need of assistance, such as the Kim Parsell Memorial Scholarship.

A jar of pennies spilled on a table.

The Chance to Meet New People

Part of the WordPress community’s strength lies in its ability to attract people from all walks of life. Go to a WordCamp and you’re likely to run into experts and novices alike – not to mention everyone in-between those two skill levels.

And you can’t help but find yourself in at least a few good conversations. This is particularly true between sessions and at meal time, when attendees often congregate in a common area. Therefore, you’ll want to be prepared to answer the question, “How do you use WordPress?”

It’s also worth noting that the atmosphere is generally laid back. There is no corporate stiffness to be found …

An Interview with One of the Best Selling WordPress Theme Authors

We recently had the opportunity to interview Qode, author of one of the best selling WordPress themes. Their humble beginnings and rapid success are inspiring to anyone interested in selling digital products.

Can you tell us a bit about how Qode started and the team behind it?

Qode started out as two people with a shared goal – to create quality digital products, but with a focus on beauty and aesthetics. In our early stages, we provided custom web development services. But we soon noticed the rising popularity of WordPress themes and saw an opportunity there, even though the marketplace was already fairly saturated.

Our team was still small, but we were all oriented toward UX and aesthetics. That was our main advantage. We made a decision back then that has become the cornerstone of our company: never to compromise our creative vision, even if it meant reaching fewer people. Instead of going down the commercial path and making the types of themes everyone was churning out, we primarily focused on great design. And I think that’s what distinguishes us from the rest of the market.

Qode Interactive home page

Your Bridge theme is one of the most popular WordPress themes on ThemeForest with over 100,000 sales — an incredible achievement. What do you believe sets Bridge apart from other WordPress themes?

When it came out, Bridge was just another theme by Qode. The thing is, we approach each new theme as a success, even in the earliest stages of design. I think that’s evident in all our themes, from the very beginning.

With Bridge, it turned out people were drawn to its clean and simple style, which was popular at the time. It got that initial boost straight out of the gate and gained enough visibility on the market. So, we adapted and started developing it in that direction. We wanted to offer Bridge to as many people as we could, while still sticking to our principles and making as few compromises as possible.

That’s how the Bridge demos came to be. Bridge currently has nearly 380 distinct demos, and we’re always adding more. It was the first bestseller on the market with so many and might have even set the standard in terms of the number and the quality of demos a WordPress theme can have.

Bridge WordPress Theme

With the huge success of Bridge and your other WordPress products, what are some challenges you’ve faced with that type of growth?

Bridge served as proof that we were doing something right and it motivated us to keep moving in that direction. So when we decided to create new brands and expand our catalog

Getting Clients to Work Your Way

They say that “the customer is always right”. And while that may be true (most of the time), it certainly doesn’t mean that we have to bend over backwards for them in every instance. I should know, as I spent years attempting to contort myself to fit whatever clients wanted.

One area that is particularly tough to manage is when it comes to our process for getting things done. If you deal with multiple clients, each one of them has their own distinct way of working. Some are night owls and feel the need to send email when the moon is out. Others expect a lot of in-person meetings – something difficult for a busy web designer to fit into their schedule.

Trying to accommodate each and every client’s way of working often leads to chaos. It makes getting things done more difficult and will leave you scrambling to find some level of consistency in your workflow.

Sound terrible? Sound familiar? If you’re banging your head against the wall, know that change is possible! Let’s take a look at some ideas for getting clients to work in a way that benefits you.

Create Processes That Work for You

During the early part of my career as a freelancer, I really had no process for getting things done. That is, unless you count waking up and walking over to the home office. There wasn’t any real organization to speak of and I haphazardly went back-and-forth between tasks. Sort of like a single-player game of table tennis.

Not only that, I was often running out to meetings and taking a seemingly endless number of phone calls. This led to a lot of stress, and a pile of work that I couldn’t seem to get through. Eventually, I realized that a change was needed.

So, I started putting some processes in place. Each one acts as a bit of a boundary for both my clients and myself. They’re not perfect, but have produced some positive results. Among them:

Limit Meetings

I now avoid going out to meetings when possible, and they are usually reserved for higher-revenue clients. As most of my clients are based at least a half hour from my office, I found that, when accounting for travel, even a short meeting tended to take up several hours of work time. Replacing meetings with phone calls or video chats (which I limit to specific hours) has saved a ton of time, while keeping the lines of communication open.

Reserve Time for Each Task

Understandably, clients tend to want things done “as soon as possible”. At the same time, it’s not always …

Free Programming Courses from Harvard, MIT, Microsoft and More

Did you know that you can learn computer science and programming online from institutions like Harvard, MIT, Berkeley and Microsoft on edX.org? The nonprofit site offers 2,000 online courses from 140 institutions worldwide. Courses are free to try.

edX Online Courses

Popular Courses

Here are some of the most popular courses and programs offered on edX:

CS50 from Harvard

The most popular course on edX gives you an introduction to computer science and programming. Learn how to think algorithmically and solve programming problems efficiently. Gain familiarity in a number of programming languages including C, Python, SQL, JavaScript, CSS and HTML.

Front End Web Developer from W3C

W3C (World Wide Web Consortium) is the organization that develops web standards. It was founded by the inventor of the web, Tim Berners-Lee. In this 5 course program, learn how to code with modern HTML5 tags, draw and animate fun web graphics, and play audio and video elements. Learn CSS best practices for web page design and the fundamentals of JavaScript to help you develop interactive web apps.

Introduction to Computing in Python from Georgia Tech

In this 4 course program, learn the fundamentals of computer science in one of the field’s most popular programming languages, Python 3, including writing code, executing it, interpreting the results, and revising the code based on the outcomes. Rated as one of the most in-demand and beginner-friendly programming languages, a background in Python will give you a solid foundation to build your career. Short videos (2-3 minutes each) are rapidly interwoven with live programming problems and multiple-choice questions to give you constant feedback on your progress and understanding.

C Programming with Linux from Dartmouth

Did you know that smartphones, your car’s navigation system, robots, drones, trains, and almost all electronic devices have some C-code running under the hood? Along with the C programming language comes Linux, an essential operating system that powers almost all supercomputers and most of the servers worldwide, as well as all Android devices and most “Internet of Things” devices.

In this 7-course program, develop and debug code in the C programming language. Discover the foundations of computer programming and Linux, manipulate the command line, manage processes, files and memory, and compile C code with Linux.

Data Science from Harvard

Data science is one of the hottest fields in programming. Learn key data science essentials in this 9-course program, including R and machine learning, through real-world case studies to jumpstart your career as a data scientist. Also learn statistical concepts such as probability, inference, and modeling and how to apply them in practice. Gain experience with data visualization with ggplot2 and data wrangling with dplyr. Become familiar …

Tools and Guides for Web Design Accessibility

Fifteen years ago, web accessibility wasn’t a thought in many designers’ minds. Online standards did exist as far back as 1996. But they were followed much less often than they are now, leaving many struggling just to use the internet.

Over the past ten years, the web has made huge strides in making sites accessible. But it’s up to you, the designers and developers, to optimize your own websites. Not sure where to begin? These tools and guides for web accessibility will help you design a better web.

Introduction to Web Accessibility

What is web accessibility, why should you implement it, and – most importantly – how can you do so? This invaluable resource introduces you to the basics of accessibility and can help you get started in optimizing your site.

W3C Introduction to Web Accessibility

The A11Y Project

Accessibility isn’t an easy topic to broach. With dozens of standards and hours of reading material, some people just don’t bother. The Accessibility Project aims to make the topic much more approachable, with easy-to-read articles, bite-sized tips, and plenty of helpful guides.

Contrast

High contrast colors are very important for those with visual impairments. There are tools to check your site’s color contrast, but that disrupts your design flow. This macOS app scores colors instantly. No more guessing or spending minutes inputting hex codes.

Contrast accessibility tool.

Stark

What if there was a tool that let you design with accessibility in mind from the beginning? Stark is an Adobe XD and Sketch plugin that does just that. Check contrast, run colorblind simulations, and get quick color suggestions. Now you can create a site that’s beautiful and accessible even during the mockup phase.

tota11y

Tota11y is an extremely useful tool that activates from your browser bookmarks and notifies you of accessibility violations on a page. It’s open source and comes with many plugins that all detect a range of issues. Activate it on your site and see if you pass!

Accessible Color Matrix

Picking a palette? This tool shows you how your palette will work in action, and notes when it doesn’t meet the contrast requirements. Now no one will struggle to read text on your site.

Accessible Color Matrix tool.

WAVE Web Accessibility Tool

WAVE is a webpage checker that runs a page through a variety of standards, reporting back errors, alerts, and correctly implemented features in an interactive panel. While it’s no replacement for human testing, it can help set you on the right design path.

Web Accessibility Checker

This accessibility checker reports issues on a page in a simple list segmented by known, likely, and possible problems. This one also comes with extra features, like the ability to upload …