Valentine’s Day Gift Ideas for Web Developers in 2018

Wearable Tech

They will appreciate any wearable technology, but here’s a few that will especially bring a smile to their face this Valentine’s Day.

Apple Watch

If your special someone is a die-hard Apple user, the Apple watch will tie into their lifestyle seamlessly.

The Apple Watch can be used to make payments easily with Apple Pay, it runs several apps available for iPhone, it can use Siri and it has a built-in fitness tracker.

In addition, it can be used as a shutter button for your iPhone, it displays photos and has even reportedly saved lives with its heart rate sensor.

At an incredibly thin 10.55mm, the Apple Watch Series 1 packs the hear rate sensor, an activity tracker and a haptic engine.

The Apple Watch Series 3 is 11.4mm thick and includes an internal GPS. Along with, there are two varieties, with or without cellular capabilities.

Keep in mind, the Apple Watch comes in two different sizes, 42mm and 38mm. However, the 42mm will give you more bang for your buck as it’s only ~$20 more.

On the other hand, if your special someone has a smaller wrist, the 38mm option may be a better fit.

Here’s a review on the Apple Watch.

Buy the Apple Watch Series 3 (42mm) GPS only on Amazon

Buy the Apple Watch Series 1 (42mm) on Amazon

Buy the Apple Watch Series 1 (38mm) at Amazon

Android Wear Watches

Unlike the Apple Watch, Android has a multitude of different watch brands to choose from.

Much like the Apple Watch’s Siri personal assistant, these Android watches all feature Google’s own “OK Google” personal assistant.

Here are the most popular Android watches.

LG Watch Style

The LG Watch Style is thin – 10.79mm thin to be exact, with a 1.2in screen size.



Use the rotatable crown to quickly navigate the interface and change the watch settings.

Buy the LG Watch Style on Amazon

LG Watch Sport

In comparison to the LG Watch Style, the LG Watch Sport features a thicker appearance (roughly 3mm thicker at 14.2mm.)

In addition, it features a slighter larger 1.38in screen size.



This watch is geared more for active people, or those into fitness. Featuring a built-in GPS, SIM card slot and heart rate sensor.

Buy the LG Watch Sport on Amazon

Asus ZenWatch 3

Asus went with the traditional luxury watch approach, featuring an Italian stitched leather strap, stainless steel colors and diamond cut bezel.

This watch fits much like a traditional watch at only 9.95mm thin.


Along with its luxury style, the Asus ZenWatch 3 allows for customized watch faces and smart features such as an activity tracker, calendar and message display.

Buy the ASUS ZenWatch 3 on Amazon

Bluetooth Speakers

Bluetooth speakers or headphones are a must have for any web designer.

Playing Chillstep or Lo-Fi Hiphop music in the background helps with creativity.

There’s even a study proving this – listening to “happy music” contributes to higher creativity.

Let’s take a look at the most popular bluetooth speakers.

Amazon Echo

For web developers and techies in general, the smarter the device the better.

Check out Amazon Echo’s most popular features:

  • Handsfree calling and texting
  • Spotify streaming
  • TuneIn radio and iHeartRadio and Pandora streaming
  • Plays audiobooks from Audible
  • Can be used as an alarm clock to wakeup to music
  • Can speak news and traffic updates
  • Weather forecasting
  • Sports updates
  • Amazon order tracking and placement
  • Read out recipes


Here’s a video demonstrating the Amazon Echo’s basic features.

Google Home

As for most smart bluetooth speakers, the features here are much the same as that of Amazon Echo’s.

Check out some of the basic features of Google Home.


The Cheaper Alternative

If you’re looking for the cheap option of the Amazon Echo or Google Home, you’re in luck.

They both have cheaper options with much of the same features.

Watch this great video comparison of the Amazon Echo Dot and Google Home Mini.


Buy the Amazon Echo Dot on Amazon

Buy the Google Home Mini

Graphic Tablet

When sketching out concept designs, website mockups, drawing and even signing contracts… Graphic tablets come in handy.

Here are the most popular drawing tablets I found for you.

The Huion H420

Huion’s H420 is a 10×7.5in drawing tablet that exceeds expectation for a cheaper graphic tablet.

With 600 reviews and an average 4 star rating on Amazon, this is a good cheaper $30 alternative to the bigger brand Wacom.

This tablet includes a cleaning kit, 10in wool liner bag, replaceable pen tips, usb cable and anti-fouling glove.

It’s main specs:

  • 10×7.5in
  • 2048 levels of pressure sensitivity
  • 4000 LPI resolution

Here’s a video review of the Huion H420 drawing tablet.

Wacom Intuos Draw CTL490DW

In comparison to the Huion H420, here’s the cheapest Wacom tablet – the CTL490DW for $79.

Though, it is a more well-known brand – at only 6×3.7in it is much smaller in comparison.

and its specs:

  • 6×3.7in
  • 1024 levels of pressure sensitivity
  • 2540 LPI resolution

Check out this video review of the Wacom Intuos Draw CTL490.

Huion KAMVAS GT-191

In case your special someone is also into art, graphic design or serious doodling… The Huion KAMVAS GT-191 may be better suited for them.

Here’s a list of specs:

  • 19.5” screen
  • 1920×1080 screen resolution
  • 8192 levels of pressure sensitivity
  • 5081 LPI resolution


In this article, I went over some of the more utility gift items you could get a web designer or developer for Valentine’s Day.

As a designer, you just never have enough tools to work more efficiently. These gifts are sure to bring a smile to their face this Valentine’s Day.

Leave a comment of your greatest gift idea and share this post with friends.

5 Simple Things Designers Need When Building Your Website In 2018

In this post we will go over the 5 simple things designers need to know when building your website in 2018. With these 5 simple steps you will save time, money and improve your branding. In this post we will go over things designers need to know when building your website in 2018.

1. Know Your Website’s Target Audience

Your website is a modern day business card. It should appeal to the customer you want to work with. In order to best serve our clients, we need a clear vision of your customer base. Are your customers looking for a hipster coffee place or a luxury cafe? Knowing your target audience will help us improve your brand’s website development.

2. Business Competition and The Industry

animation for market research when building your website in 2018

In order for us to build a website geared towards your specific customer, any information provided to us about your customers will help perfect the end result. Visit your competitors websites and let us know what you like and dislike about them.

If your company is a completely different niche, chances are there is no business quite like it. If that’s the case, we still require some information about the business and potential prospects.

3. Company Information, Branding and Color Scheme

It is crucial to provide all information regarding branding, hours of operation, location details, contact information and color scheme of your brand. In the case of missing business information, we can do our best to find that info online. Contact information is a crucial part when building your website in 2018 for increased customer acquisition.

4. An “About Us” Page is Necessary When Building Your Website in 2018

Most people will look for an “About Us” page when landing on your website. This page usually gives a brief overview of what you and your business are all about. In short, the content on this page can be a make it or break it with your customers.

When reading your About Us page, customers are scanning for authenticity and authority in your business industry. To summarize, your customers are looking for reasons to trust in you and your business. We have our own About Us page you could check out — some more great examples can be found at Eight Hour Day and Apptopia

It’s up to you wether or not you want to get into fine details. However, customers want to know your story from start to finish — so don’t be afraid to tell them your story.

5. Know Your Layout and Site Structure

Which page do you want to set as the front page? Do you want to show visitors your recent posts? Do you want to display posts from a specific category? If so, from what category and what order?

…As you can see, It can get a bit intense when it comes to site structure and branding with your website. Try your best to give the finest details where they matter so that we can do our best to get your vision right the first time. This could include giving us a doodle, sketch, mockup or anything that can help us achieve your vision.

Doodle of a lightbulb with a ball of blue clay on top

Please, leave a comment if you have any of your tips to share! Check out some more common questions your designer might ask about your business.

12 Exciting New Magic CSS3 Selectors You Need To Know In 2018

Here is a list of 12 CSS3 selectors you need to know in 2018. These simple, yet useful CSS3 selectors will save you time when designing for the web and ultimately make your life easier.

First, we will start out with interval and multiplier selections.

#1 :first-of-type – CSS3 Selectors You Need to Know in 2018

CSS3 introduced the incredibly useful :first-of-type selector. In the case you ever wanted to select the first paragraph of a block of text, you’ll know what I mean. Of course you could also use p:first-child but where’s the fun in that?

For example:

#contents > p:first-of-type {
  border-left: solid #000 3px;
  padding-left: 15px;

#2 :only-child and :only-of-type – CSS3 Selectors You Need to Know in 2018

:only-child is one of the CSS3 selectors you need to know if you want to make single elements really stand out. For instance, if you have a container holding only one paragraph and you want it to have a larger font to show importance. This would be the pseudo selector you want to use in that case.

Both :only-child and :only-of-type will check for if the target element has only one child of a specific element, class or ID. However, :only-of-type will work when there are more than a single type of element inside a container.

To illustrate:

#contents > p:only-child {
  font-size: 3em;

#3 :nth-child – CSS3 Selectors You Need to Know in 2018

Family Guy's Peter Griffin pulling blind curtains

:nth-child makes it easy to iterate through X amount of elements. If you wanted to make every other paragraph styled differently, use :nth-child(2n). There are other methods of selection using :nth-child, such as :nth-child(n+2) or :nth-child(n-2). :nth-child(n+2) would select all elements after the first.

:nth-child(n-2) would select all elements until the last. :nth-child(-n+1) or :first-child would select the first element, whereas :nth-last-child(1) or :last-child would select the last element. See more examples of the nth-child selector at CSS-Tricks.

It may take some playing around with these selectors until you finally get them down. However, these selectors are a great time saver and therefore one of the most important CSS3 selectors you need to know.

For instance:

#contents > p:nth-child(2n) {
  background-color: #EEE;

#4 background-size – CSS3 Selectors You Need to Know in 2018

CSS3 introduced the background-size property to allow for an easier method to make images responsive to their containers. I found that in most cases, “background-size: cover” works exceptionally well in responsive design. Here is a list of other possible background-size values introduced in CSS3.

  • Cover: Scales the image as large as possible and maintains image aspect ratio (image doesn’t get squished). Images will expand to cover the entire container.
  • Contain: Scales the image as large as possible and maintains image aspect ratio (image doesn’t get squished). However, the image is letter-boxed within the container.

For example:

#banner {
  background-image: url('');
  height: 250px;
  width: 100%;

#5 box-shadow Property – CSS3 Selectors You Need to Know in 2018

box-shadow is a great addition to the style of elements in CSS. By simply adding the box-shadow property you can create all sorts of cool effects. Using box-shadow, you could easily add a hover effect to an element or add an inset to give the appearance of depth.

For example:

#contents {
  box-shadow: 0 1px 10px rgba(0,0,0,0.35);

box-shadow uses 4 arguments to define the position of the shadow and the blur amount. That first argument “0” represents the X-offset, the second argument “1px” represents the Y-offset, the third argument “10px”represents the blur amount and the last argument is the defined color for the shadow.

It’s a great effect, even Google’s taken a liking to using box-shadow in their material design.

Google's material design animation using CSS3 selectors you need to know

#6 text-shadow Property – CSS3 Selectors You Need to Know in 2018

Text shadow isn’t too useful in normal web design practice. However, it is one of the CSS3 selectors you need to know just in case. A great example of a use case and the text-shadow CSS property is when you have light text on a light background. By using a dark text shadow, the text will still remain legible due to the outline.

Another cool use is of text-shadow is to create a blurred text effect or colored text outline effect.

For instance:

#contents {
  text-shadow: 1px 0 1px #000;

As has been noted, text-shadow follows the same argument format as box-shadow. In both cases, the spread does not have to be defined. For the same reason, you could simple define the X and Y-offset and a color.

#7 RGBA Colors – CSS3 Selectors You Need to Know in 2018

In CSS3 we now have the ability to have alpha transparency in colors. Thus, using RGBA you can have text colors that blend in better with the background color of the parent element. In addition, background colors can also easily be blended into the parent’s background color using the RGBA alpha channel. What’s more, RGBA colors can also be used with border and outline colors as well.

For example:

#contents {
  color: rgba(0,0,0,0.85);

In fact, when following Google’s material design approach, they recommend using a text color that is about 85% darker or lighter than the content’s background (depending on light or darkness). This color recommendation makes reading content easier on your eyes. Using RGBA in the text color like the above example, makes this task easier to accomplish.

#8 ::before and ::after – CSS3 Selectors You Need to Know in 2018

CSS3 added support for pseudo classes, in addition to pseudo-elements established in CSS2. However, because some browsers don’t support the ::before and ::after pseudo-class notation yet it’s best to use the pseudo-element variant. Moreover, all elements contain a reserved portion of space before and after an element’s display. :before and :after give the ability to target those areas.

For instance, say you wanted to add some text to the end of every paragraph or heading – Simply target the :after pseudo-element and use the CSS content property to write out the text.Ffor instance:

#contents > h1:after {
  content: " -";

In the example above, you can see how easy it is to include your website name in the content of every H1 title of your content.

On the other hand, one caveat to the CSS content property, is it does not allow any HTML.

#9 CSS Attribute Selectors – CSS3 Selectors You Need to Know in 2018

It is now possible to design based on element attributes. First, simply place an attribute in square brackets after an element tag, class or ID. Further, combine it with :before and :after to extend the selector even more.

For example:

#content a[href^='https://']:after {
  content: ' (secure link)';

As a result, this will append a string of ” (secure link)” to all links that begin with “https://” — notifying visitors that the link is an external link leading to a secure connection site.

#10 Transform Property – CSS3 Selectors You Need to Know in 2018

a transform effect of a blue rectangle rotating clockwise using CSS3 selectors you need to know

CSS transforms allow movements in the X and/ or Y axis. In any case, a great use case of CSS transforms is triggered animation for an on click or hover event. Hover.css has a great showcase of all the different effects possible using the CSS transform property.

As I have noted, here are some popular functions for the CSS3 transform property:

  • translateX()
  • translateY()
  • scale()
  • skew()

Further, see the full list of available CSS transform values at MDN Web Docs.

#contents button {
  transform: rotate(5deg);

#11 transition property – CSS3 Selectors You Need to Know in 2018

Out of all CSS3 selectors you need to know, transitions will become your best friend when creating animated elements. Summing up, CSS transition controls the speed of which your animation plays from start to finish and it’s one of the easiest selectors to remember.

CSS3 transitions require the property, followed by the value of speed in seconds.

For example:

#contents button {
  transition: background 0.2s;

In addition to CSS3 transitions, there exists the transition-timing-function property. In brief, values for transition-timing-function include:

  • linear
  • ease
  • ease-in
  • ease-out
  • ease-in-out

In this case:

#contents button {
  transition: background 0.2s, color 0.2s;

Another way of including a transition-timing-function with your CSS3 transition can be accomplished by placing the transition-timing-function value after the targeted property value.

Note: Add more than one property to transitions by separating them with commas.

In another case:

#contents button {
  transition: background 0.2s ease, color 0.2s ease-in;

#12 :empty – CSS3 Selectors You Need to Know in 2018

:empty introduced an easy way to style elements that have no content in CSS. In most cases, it would be more efficient to use client side or server side logic to avoid rendering the element altogether. However, in the rare case you cannot :empty is a great fallback.

To illustrate:

#contents p:empty {
  display: none;

#13 :not – CSS3 Selectors You Need to Know in 2018

Without a doubt, the :not selector is truly in a league of its own. First, the CSS3 :not selector finally gave us a way to target the element, class and ID exceptions. For instance, say you had a content area with elements which were mostly given a “success” class. Due to this, the base text color may have been set to green. Now, you can target other elements that were not given that class and change the text to red in response to an error.

For example:

#contents > :not(.success) {
  color: red;

To take it further, this could be extended with the attribute selectors. For instance, if you had a bunch of class names that may have started with “col-“.

In this case:

:not[class*='col-'] {
  background-color: #FFF;

This will give all elements that don’t contain a class starting with “col-” a white background.

15 Web Design Trends 2018 (Stuff You Should Know)

Here’s a list of 15 web design trends you will see in year 2018. Everything needed to prepare for new card design, minimalist web design and scroll stories.

Let’s get this show on the road

1. Big Images

You may have seen a blog or two with HUGE cover images – such as my blog’s posts ?.

Some may call them hero images…

In this day age, people are more visual beings. As a web designer, take advantage of this by giving your viewers great visual content.

man standing on a mountain, staring off to a mountain
Photo by Joshua Earle.

By using larger images, you grab the readers attention and give them a preview of what the article’s about.

Take your viewers to a whole new world with your images.

Photo by Mahkeo.

Here are some examples of using big images in web design.

A screenshot of using a hero image on their landing page

Above is a screenshot of

Sweet Basil’s website takes advantage of the screen real estate, by using real photos of their restaurant as advertisement.

See how uses big images in the screenshot below.

A screenshot of displaying a large hero image in their web design

2. Video

Now that video has taken over the internet, designers have began incorporating it into their banners, hero images and backgrounds. has great examples of websites with video as part of their design.


A gif animation displaying the video background hero image of

Above is a screenshot of

And here’s another great example I found of a web design with video for you.

A gif animation displaying the video background on
Above is a screenshot of

Find free stock videos for your website at Free stock videos – Pexels Videos. These videos are all free to use for personal or commercial use (attribution not required.)

3. Custom Illustrations

Below is a screenshot of

A screenshot showing custom illustration of

Notice, you can use digital art to attract your visitors to a button. Art can be used to convey your company’s mission, while gaining attention from the community.

Here’s another great example at

A screenshot of showcasing custom illustration.

Both of these website examples have used digital art, as well as animation in their web designs.

This type of web design causes a natural discussion about your website and can even give you free publicity.

4. Scroll Stories

An animating gif of showing how scroll stories can be used in web design.

Above is an animated gif of

And here’s another animated gif of

An animated gif of using scroll stories in web design.

If these example gifs are taking to long to load, just follow the links and check them out yourself.

Keep in mind, these scroll story type web designs may take up more bandwidth than an average site for your user.

Learn how these are made:

If you want to build scrolling web designs, check out scroll They have a JavaScript library that you can use, along with multiple scrollmagic examples to learn from.

5. Fancy Typography

Below is a screenshot taken of

A screenshot of showcasing bold typography on the web.

Here’s another example from the same site:

A screenshot of showing how big typography can be used in web design.


Lastly, check out how the website uses typography in their design.

A screenshot taken of showing typography on the web.

6. Gradients

As seen in the screenshot below, uses gradients in their website’s homepage.

A screenshot of's landing page.

Similarly, check out how uses web gradients in the screenshot below.

A screenshot of's use of gradients in their web design.

As seen with bold gradients can be used to make certain elements pop and place attention on them.

Learn how to use gradients in your web design at and

Personally, I have used to learn web gradients. With that being said, I feel it could be a great resource for you to start with too.

7. Vibrant Colors

In 2018, vibrant colors in web design will become way more popular amongst designers.

Below are some awesome examples of web design using vibrant colors.

A screenshot of vibrant colors on KIKK Festival's web design.

Above is a screenshot of the KIK Festival’s website at

The KIKK Festival uses artful vibrant digital illustrations on their website, as symbolism of the artistic community they represent.

And another great example is

Below is just one of their chapter illustrations. Notice how they use vibrant colors to portray their messages in a storybook fashion.

A screenshot of and their use of vibrant colors in web design.

Each chapter represents the delusions, illusions and confusions of young adults.

8. Card Style Information Panels

If you’ve ever been to Wired’s website, you may have seen their use of cards to display their articles.

Check this out:

A screenshot of in 2017 showing card design on their website.

Above is a screenshot of how uses card design on their website.

They aren’t exactly the modern designed cards you may be used to seeing on the web, but they are cards nonetheless.

You may be thinking, that’s a great way to layout content for an online media company.

And you’d be right.

Here’s another great example:

Look at how uses card design for their blog articles.

A screenshot of using card design in their website.

This goes to show how useful cards can be for displaying content, while maintaining a minimalist design.

How Social Networks Use Card Design

You may or may not have noticed it, but all of the popular social networks are using card design in one way or another.

Check this out:

A screenshot of a tweet using card design on

Above is a screenshot of how Twitter uses cards for displaying individual posts.

Notice how they incorporate things such as their branding, post title, post excerpt, source URL, timestamp, Like count and even a user list of sharers.

And look at how Facebook Pages use cards:

A screenshot showing card design at Facebook pages on

Above is an example of how Facebook uses card design throughout their site’s design.

Facebook Pages use cards to display content everywhere – The header, content area and even the sidebar.

When most social networks use card design, there’s a safe bet cards are great for scannability.

9. Minimalism

I know minimalism web design has been around for awhile now, but it will get even more minimal in 2018.

Take a look at these more recent examples of minimalist web designs.

Screenshot of minimalist web design on
The above screenshot is of

Screenshot of using minimalism in their web design.

Above is a screenshot of – A digital marketing agency.

Notice their web design still conveys what they do, while being minimalist.

And below is an example of how they use minimalism on their website’s “Services” section.

Screenshot of minimalism design use in their Services section.

Minimalism works because it forces you to be more detail oriented in your design.

You may think minimalism is for artsy fartsy type web designers only…

Not exactly

With time and dedication, I know you can learn minimalist design too.

If you’re interested in learning the basics to minimalist web design, check out this minimalism basics article by TutsPlus.

Also, here’s a great video by TutsPlus I found for you to learn the core concepts of minimalism in web design.

10. Flat Design

Before Flat 2.0 was announced, in 2013-2014, Apple and Google began using flat design in their products.

Google even developed their own design language for flat design called Material Design for developers in 2014.

Flat design really took off after mobile operating systems began using it in 2016.

And you know what?

After being refined all these years since 2014, Flat 2.0 will be a key component in web design of 2018.

For instance, take a look at how clean looks.

Screenshot of and use of flat design on their website.

It’s a very friendly yet simple design.

Here’s another example –

Screenshot of using flat design on their website.

Notice, their message is clear.

By using flat design, Happy Maps was able to give you clear instruction, while using less than 40 characters in their copy.

Now, you may think Flat design is awfully similar to minimalist web design. You may be right, or these designers may just have combined the two trends.

Anyhow, Flat design is all about using basic color palettes with shadows and highlights for depth. Which leads me to my next two web design trends…

11. Shadows

Take a look at how uses shadow to draw in attention to fill out their email form.

Screenshot of use of shadows in their web design.

12. Highlights

When light bounces off an object, it will normally catch your attention and put your focus onto the object.

Well, you can use highlights in your web design to get that same effect.


Check out how uses highlighting to put emphasis onto their “Learn More” button.

Screenshot of using highlights in their web design.

Use highlights to draw attention to an element, like the example below.

Screenshot of using highlights and gradients.

As seen in the screenshot above, uses purely a highlighted border to draw attraction to their “Live demo” button.

13. Attention Span Content Widths

The width of your web design content matters.

Here’s why:

Nowadays, you and I scan for content and it’s becoming harder and harder to keep focus on longer strips of text.

To get around this, keep a width constraint on your content. I found 780px to be a good width.

Diagram of attention span content width constraint on the web.

Site’s like and use constrained widths for their blog article content.

Below is a screenshot of Medium’s blog.

Screenshot of using a content width constraint.

And here’s a screenshot of Copyblogger’s blog.

Screenshot of using a width constraint in their blog article content.

14. Hover Effects

Hover effects in web design can be used on anything from whole boxes of content to buttons, to simple text links.

You could use hover effects to make animations, display tooltips or even make whole drop down boxes.

Check this out:

A dribbble design of a hover effect in a web form input.

Above is an example of using a hover effect to display the input field of a web form.

And here’s an example of using a hover effect to display a tooltip.

Animated gif of a hover tool tip effect in web design.

15. Actionable Landing Pages is a great example of an actionable landing page.

For example, there’s a clear message advertisement in the center, following with a list of simple two word buttons below.

See for yourself:

Screenshot of showing an actionable landing page on the web.

If you visit their website, you’ll notice they even use a background video, as I described in my post – 6 Common Magazine Design Trends Found in Today’s Web Design.

So you want to increase conversion on your landing page?

All you need to do is give your viewers simpler actions to take. Give them a select few obvious options to choose from.

That’s how these actionable landing pages work so well for conversion.

Take a look at in the screenshot below.

Screenshot of using an actionable landing page in their design.

See how they give you two very clear choices on their landing page. Either start with a personal or business account.

In addition, theres an alternative message below that reads “Gift money with ease” following with a simple link to “Gift money now.”

By not making the viewer think, they are more likely to follow through with one of these options.

Wrapping Things Up

That’s it

In essence, you have now learned the 15 web design trends to prepare for year 2018. Keep these trends in mind when designing for the web in the new year.

Feel free to share this article and let me know in the comments below if you have other trends that we should see in year 2018.

5 Minute Guide to Learning Flexbox (Why You Should Stop Using Floats)

Flexbox Basics

Flexbox (or Flexible Box Layout Module) was designed to give web designers an easier way to build their html layouts. Here I will give you basic flexbox layout examples to learn from and build off. Learn the differences between flexbox vs grid.

This is not a complete guide to flexbox, but in this article I will teach you the properties you must know.

In addition, I wrote an article on the 12 Exciting New Magic CSS3 Selectors You Need To Know In 2017 you may also find useful.

As you may already know, before flexbox, web designers relied heavily on floating divs with percentage widths to achieve their desired layout – as explained in this Tutsplus article.

Flexbox Container

First, in order to declare an element as flexbox, add “display: flex” to its properties.

#container {
display: flex;


Second, in the container, define how you want the children to align using the “align-items” selector.

#container {
align-items: flex-start | flex-end | center | stretch | baseline;
display: flex;

Here are visual representations of the different align-item values:

visual display of flexbox align-items flex-start value

visual display of flexbox align-items flex-end value

visual display of flexbox align-items center value
align-items: center will keep each child centered vertically throughout the row of columns.

visual display of flexbox align-items stretch value
align-items: stretch will stretch each child to the container’s height. Stretch is the initial value for align-items.

visual display of flexbox align-items baseline value
align-items: baseline sets the children to align themselves to keep the start of the content aligned together at the top.

Play around with these settings in this flexbox playground I setup for you. Also, be sure to change the container’s align-items value to one of the values shown above. To do this, click on the “Edit on Codepen” link in the upper-right hand corner of the preview box below.

See the Pen Flexbox Item Align Example by Thomas Hare (@tommyhare) on CodePen.0

See more details about align-items at the Mozilla Developer docs.
Also: Traditional uses of float, clear and vertical-align don’t have affect on flex items.


Now, when you need custom alignment on a specific child in a container, use align-self. Align-self will overwrite the container’s  align-item value on the specific child.

#container > #child-3 {
align-self: flex-start | flex-end | center | stretch | baseline;

See more information about align-self at the Mozilla Developer docs.


Keep in mind, you may need to bookmark this page to refer back to these values. Provided that, it can be daunting to try and remember these values.

Luckily the distributed alignment values below are the most common used.

Distributed alignment values:

#container {
justify-content: space-between | space-around | space-evenly | stretch;
  • flexbox space-between items will give you an even spacing between elements in your container.
  • space-around will give you even spacing around elements in your container, including space around the container’s left and right sides.
  • space-evenly items are evenly distributed in the container, giving the exactly same space between elements.
  • stretch items stretch to keep equal height children inside the container.

Positional alignment values:

#container {
justify-content: center | start | end | flex-start | flex-end | left | right;

Baseline alignment values:

#container {
justify-content: baseline | first baseline | last baseline;

Read more about justify-content at the Mozilla Developer docs.

Benefits to Using Flexbox

A major benefit to using it is for easy alignment. Notably, it takes the guess work out of element positioning.


Take this type of flexbox layout example
display of the structure of sidebar and content

You can create this layout with the code below.

Here is the HTML:

<div id="container">

<div id="header"></div>

<div id="article">
<div class="content"></div>
<div class="footer"></div>

<div id="sidebar"></div>

<div id="footer"></div>


…and the CSS

body {
padding: 10px;

#container {
display: flex;
flex-wrap: wrap;
#container > div {
margin: 10px;

#header {
background-color: #3F4CFF;
height: 80px;
width: 100%;

#article {
width: 68%;
#article > .content {
height: 400px;
background-color: #3F4CFF;
#article > .footer {
background-color: #3F4CFF;
height: 60px;
margin-top: 10px;
#sidebar {
background-color: #3F4CFF;
flex: 1;
width: 35%;

#footer {
background-color: #3F4CFF;
height: 80px;
width: 100%;

The output of this should resemble this:

See the Pen Flexbox Item Align Example by Thomas Hare (@tommyhare) on CodePen.1

Because this is a newer web technology, it may or may not render correctly in your browser. See if your browser supports Flexbox.

As of December 2017, Mozilla Firefox and Google Chrome are the two major browsers to support the CSS Flexible Box Layout Module.

What’s the benefit?

Because I am using flexbox, the sidebar width and height do not need to be set.

Both height and width of the sidebar scale with the main content.

Before, by using the CSS float method, this wasn’t possible and it was a pain to get the sidebar to match the main content’s height.

For example:

Say you had a larger sidebar and a page with a small amount of content, the page would end up looking something like this:
display of the structure of sidebar and content

Flexbox VS Grid

To begin with, the CSS grid was first introduced as a W3C Working Draft on November 6, 2012. Now, nearly 10 years later it’s classified as Candidate Recommendation since 

Further, checking on caniuse CSS grid layout, it’s supported by mainly Mozilla Firefox and Google Chrome.

One of the main differences with CSS grid is the ability to map out both columns and rows. In the same fashion, create a grid display by adding “display: grid” to the container element’s CSS.

Like this:

#container {
display: grid;

Here’s an example of what CSS grid layouts have the ability to build. Notice, there are both rows and columns.
CSS grids will give you more control over your content layout.
Example of flexbox vs grid layout - demonstrating rows and columns

Basic CSS Grid Attributes

  • CSS grid template rows will define height of rows.
    Example: grid-template-rows: 100px auto 100px;
  • CSS grid template columns will define width of columns.
    Example: grid-template-columns: 200px 100px 200px;
  • grid row gap will give you spacing between rows.
    Example: grid-row-gap: 25px;
  • grid column gap will give spacing between your columns.
    Example: grid-column-gap: 10px;
  • grid gap will set both row and column gaps.
    Example: grid-gap: 15px;


This is a visual representation of what grid-column-row and grid-column-gap affect in a grid display.
CSS grid grid-column-gap and grid-row-gap reference graphic

If you would rather just declare one same CSS grid gap for both columns and rows, you would use the grid-gap attribute instead.

Grid Item Alignments


This selector will give you the ability to align your content horizontally inside your container’s cells.
a visual representation of how the CS grid justify-items selector works

#container {
display: grid;
justify-items: start | end | center | stretch;


Much like justify-items, this selector will give you the ability to align your content. However, rather than aligning your content horizontally, you are now aligning vertically. Much the same, the terms for alignment work in the same manner, just vertically.
a visual representation of how the CSS grid align-items selector works

#container {
align-items: start | end | center | stretch;

Building Layouts With CSS Grid

A simple 3 column grid’s CSS would look something like this: This will create column widths of 25% – 50% – 25%.

#container {
display: grid;
grid-template-columns: 25% 50% 25%;
grid-gap: 10px;

#container > div {
background-color: #444;
color: #FFF;

This CSS grid code will give you a layout like this:
a visualization of the CSS grid template columns attribute

Summing Up:

Flexbox was created to make layout design easier for web designers. Along with, lots of CSS frameworks like Bootstrap V4 are beginning to adapt it.

With that being said, it’s a valuable skill for you to learn.

Use this article to develop a quick understanding of how it works and how to design layouts using flexbox. Equally important, you will learn the difference between it and the CSS grid layout – find out basic use cases for each in your projects.

Leave a comment on your thoughts about the direction of Flexbox. Do you believe other browsers will adopt flexbox or phase it out in favor of the more precise CSS grid?

6 Common Magazine Design Trends Found in Today’s Web Design

#1 Layered Content Boxes in Web Design

Web design with a content box overlapping a background image

As shown in the example web design above, the content is contrasted over the underlying parent’s background color/ image. As a result, the website content stands out while still gaining influence from the background.

Why use this:

In clarify, stacking content on top of the related image allows you to pair the visual element with the content and provides a seamless relationship for your reader.

#2 Drop Caps for Web Design

Use of drop caps in web design

To give example, the screenshot above was taken from the “I” category at Daily Drop Cap – A free for personal use drop cap resource. Additionally, both images and/ text effects can be used in drop caps in your web design.

For instance, use drop caps to position more of your design elements into your text. In addition, drop caps assist with the flow of colors and textures throughout your web design.

#3 Web Design With Skewed Borders

Web design skewed border design using CSS

Skewed borders are edgy and easily capture your reader’s attention. In particular, use skewed borders on images or content boxes in your web design. To clarify, this can be accomplished with CSS by using the transform property on the ::after selector of an element.

For fear that content will run past the skewed edge, ensure enough padding is set in order to keep content from crossing the slanted border(s).


.block {
background-color: #F00;
height: 200px;
margin: 50px auto;
position: relative;
width: 780px;
.block::after {
background: inherit;
bottom: 0;
content: '';
height: 100%;
position: absolute;
-webkit-transform: skewY(5deg);
transform: skewY(5deg);
-webkit-transform-origin: left bottom;
transform-origin: left bottom;
width: 100%;
z-index: -1;

In the above code, the transform property of skewY(5deg) is what controls the degree of the skew.

#4 Staggered Left/ Right Content in Web Design

For the most part, staggered left to right content keeps the reader’s engagement by limiting their ability to stray from your website. For instance, much like a timeline, you follow the path all the way down to the end.

Left to right staggered content in web design

As seen above is a Screenshot of Neil Patel’s blog at

As the founder of multiple analytics and marketing websites such as and, Neil understands web metrics and A/B testing. Taking that into consideration, you will understand the staggered content organization method is worth considering.

How this works:

As shown in the diagram below, this staggered left/right content organization method follows the “Gutenberg Diagram.”
As can be seen in the diagram, your reader’s eyesight travels from the top left to the top right, returning immediately back to the bottom left and ending at the bottom right.

Heatmap for a web design showing how readers scan websites

According to this article on eye-tracking study results, your reader’s eyesight moves in an “F” pattern, going from the top left, over to the top right and  back to the bottom left.

#5 Columns of Text in Web Design

Columns of text for use in web design

As shown above, columns for text separation has been used in all kinds of magazine page design. In brief, use this type of layout to split your content and make reading through your content easier.

Why this works:

Ultimately, this works because most readers will not try to read a big wall of text. In fact, your visitors will likely leave your website because of it. Separating your text into chunks makes your content easier to digest and scan through for your readers.

#6 Text Over Image Backgrounds

On account of magazine design, overlaying text on top of a background image is simple to do in a graphic design software. Using CSS, you can achieve the same effect in your web design.

Here’s how:

A screenshot of, showing text over and image background web design

As seen in the above image, is a screen shot taken from By using this text over background image technique, they are able to put emphasis directly onto their brand tagline. In addition, by using a related background image, they can easily convey more about their business.

Of course, ensure your background provides enough contrast to your text. By doing this, you ensure your visitors are able to read your text easily. I have found that when you add shadow to your text it increases visibility. Do this by adding a bit of CSS to your overlay text.

Here’s the code to do that:

#banner .overlay-text {
text-shadow: 0 0 5px white;

In the above code, I simply added a white text shadow with a 5px spread to the overlay text. To explain, you should use a white shadow for darker background images and a black shadow for lighter background images. In addition, text shadows will also make your text appear visually sharper. You can read more about the CSS attribute “text-shadow” at

Final Words

All in all, common trends for magazine page design have been picked up and are now being used by web designers. Overall, these 5 common magazine design trends are the most popular techniques being used in Today’s web design.

To conclude, use the techniques outlined in this article to achieve easy to read content that flows much like a magazine. In effect, you will retain more readers and gain more shares on your web design.

Using Stylus to Build a Web Framework Like Bootstrap and Foundation

What is Stylus?

To begin with, Stylus is a CSS preprocessor like SASS or LESS with much of the same basic functionality. However, using Stylus offers a cleaner – easier to read and understand syntax.

To begin with, I believe the best way of learning, is through building. Which is why I will be walking you through the process of building a simple CSS grid framework using Stylus to generate it.

History of CSS Web Framework Design

In the past, we built CSS frameworks using lots of copy and pasting of much of the same code with slight variations. Without a doubt, this made updating and managing the frameworks repetitive and time consuming.

However, now with CSS preprocessors and the help of automation tools like NPM, Gulp and Grunt we can automate the process and rebuild them within seconds.

Blueprint (The First Web Framework)

To begin with, Blueprint was created by Olav Bjørkøy and released on August 3, 2007. Blueprint includes a 24 column “span” grid layout. Blueprint didn’t support mobile displays by default.

YAML and Cascade CSS Framework Soon Followed Behind

Comparatively, Cascade was one of the first CSS web frameworks to support responsive design. However, it required multiple different CSS files which increased page load time.

A sketch of a CSS web framework like Bootstrap.

Popularity of Bootstrap and Grid Frameworks

Grid frameworks allow designers to easily layout content on web pages. In addition, grids can be resized depending on different screen sizes with the use of media queries introduced in CSS3.

Media Queries and Grid Frameworks

As you may know, Bootstrap CSS framework offers classes ranging from “col-xs-X” to “col-xl-X”. (X representing the column size.) By way of example, these column names start with “xs” and “xl” to dictate extra-small and extra-large screen sizes.

But why use these class names?
By using these descriptive class names you can easily dictate the width of elements for all different device sizes.

How to Use Stylus to Build a Grid Based Web Framework Like Bootstrap or Foundation

Creating a Basic CSS Grid Framework Using Stylus

In order to create a CSS grid using Stylus, you must first understand how the Stylus for statement works. By way of example, here’s how you would build a basic grid using the Stylus the “for” statement. Granted, due to this being just a basic grid, there is no support for responsive column sizes just yet.

//Default grid settings
columns = 12
gutter = 15px

//Set all elements to border-box
*, *:before, *:after
box-sizing: border-box

float: left
padding: 0 gutter
width: 100%

float: left
margin-left: -+gutter
margin-right: -+gutter
width: 'calc(%s + %s)' % (100% gutter*2)

[class^='col-'], [class*=' col-']
border: solid rgba(0,0,0,0.15) 1px
float: left
padding-left: gutter
padding-right: gutter

for i in (1..columns) {
.col-{i} {
col-width = 100%/(12/i)
width: col-width

This type of CSS grid utilizes a row to negate the left padding of the first column and right padding of the last column. Coupled with, the [class*=col-] part of this is saying all class names that begin with “col-“ will be affected with the internal styles.

We’re ensuring the box-sizing is set to border-box to keep the border, margin and padding within the inside of the columns. Float is necessary to keep elements in a row to fill the 12 column space. I set padding on the left and right of columns to the gutter-size. It’s important to keep these values matching the negative margin set in the .row class.

As for the “for i in (1..columns)” part… this is saying for every iteration from 1 until the defined column count (12), create that new column size.

sparking blue electricity traveling through a maze

A Deeper Understanding of the Stylus For Loop

In the for statement near the bottom, we have a loop running from 1 to 12 as dictated by the “(1..12)” part. Equally important, there is a class using that iteration “i” for the column size “.col-{i}” – Which will be cycled through from 1 to 12 as “col-1” to “col-12” representing each column’s width.

Stylus allows for variables and logic, so we create a variable called “col-width” to equal the fraction of the 100% total each column should be. Being that, we simply set the width to that variable’s value.

Building a Responsive CSS Grid Framework Using Stylus

Furthermore, now that we have a basic understanding of how a CSS grid is built, we can move on to advanced grid development.

As you may know already, Bootstrap uses: col-sm-, col-md- and col-lg- class prefixes to control column sizes across devices.

col-sm-(size) will be set to the column size specified as long as the screen size is above 768px.
col—md-(size) will be set to the column size as long as the screen size is above 992px.
col—lg-(size) will be set to the column size as long as the screen size is above 1200px.

A sketch of a CSS framework like Bootstrap on paper.

Building Media Queries for Responsive Column Sizing

For instance, this is the foundation of any mobile responsive CSS framework – Media Queries. By the same token, this code can be added to the basic framework code to give a fully functional CSS framework much like Bootstrap.

//Setup screen sizes
screen-sizes = (sm md lg)
sm-min-size = 768px
md-min-size = 992px
lg-min-size = 1200px

//Cycle through screen sizes
for screen-size in screen-sizes
@media screen and (min-width: screen-size+'-min-size')
for i in (1..columns) {
.col-{screen-size}-{i} {
col-width = 100%/(12/i)
width: col-width

In addition to cycling through column sizes, we are now cycling through the screen-sizes as well. Nonetheless, this will be the basis of our responsive media queries.

A boy staring at a pin board full of notes, graphs and sketches.
This can be tricky to understand, but it makes adding screen sizes to your framework easier than ever. For every screen-size array value, simply add the same screen size value + “-min-size”.

In addition, each media query is using the screen-name array value to retrieve the defined {screen-size}-min-size value.

Building CSS Stylesheets From Stylus Using Gulp

If you are a beginner in Gulp and using NPM packages, I recommend first reading Automate Your Tasks Easily With Gulp and Gulp for Beginners. These two articles will give you the basic understanding of the technology to follow through this next section.

Installing the Necessary Gulp Plugins

npm init will generate our package.json file.
On a mac or Linux machine, simply open up a terminal and change directory to your working folder. Then, paste npm i -S gulp-stylus gulp-postcss gulp-autoprefixer gulp-sourcemaps to install all necessary Gulp plugins.

Setting Up the Gulp File for Automation

'use strict';

let gulp = require('gulp');
let stylus = require('gulp-stylus');
let postcss = require('gulp-postcss');
let autoprefixer = require('autoprefixer');
let sourcemaps = require('gulp-sourcemaps');

gulp.task('default', ['slate']);

gulp.task('slate', function () {
return gulp.src('./styl/slate.styl')
What These Gulp Tasks Do:
  • pipe(sourcemaps.init()) is telling the Sourcemaps package to intiate.
  • pipe(stylus()) will convert the target styl file to a CSS file. Read more about gulp-stylus.
  • pipe(postcss([require('autoprefixer')])) is responsible for adding piping other CSS generating Gulp plugins to a single CSS file. Notice, the autoprefixer plugin is piped through. Specifically, this plugin simplifies the process of adding the ‘-moz-‘ and ‘-webkit-‘ prefix to stylesheet attributes. Read more about gulp-postcss.
  • pipe(sourcemaps.write('./')) is telling the Sourcemaps package to create a source map for the stylesheet. Consequently, since we are compiling stylus files to CSS there is no way for us to find the error in our code easily using a browser inspector. For this reason, Sourcemaps builds a link to the styl files and instead pinpoints the line of code in the styl file when inspecting instead. Read more about gulp-sourcemaps.
  • pipe(gulp.dest('./css')) is telling Gulp where to place the compiled CSS file. In this case, we are placing the stylesheet in a folder called “css”.

How to Begin Using Our New CSS Framework

Just like linking to the Bootstrap CSS file, we will link to the outputted CSS file saved in the “css” folder. Further, using our generated class names like “col-xs-12 col-md-6” we can begin creating our mobile responsive columns.

Now that you have a basic understanding of how CSS frameworks are made and how to start using Stylus, you can begin adding new features. Make your new framework as simple or advanced as you’d like!

Most importantly, share your new creation so that other web designers may use it and have fun

Feel free to leave a comment and share this article with your friends so that they can learn how to start using Stylus to build their very own CSS framework too!

Responsive Design | Why Does My Website Need To Be Responsive?

Responsive design creates a seamless flow for different device screen sizes.

Why Do We Need Responsive Design Now?

Lineup of different device screen sizes

In the past, web design was either built for desktop, laptop or phone screen displays. There was no easy way for websites to render screen-specific design instruction. However, in June 2012 media queries became a W3C standard after web browsers added support.

Each website would check for the device type and redirect to a mobile version such as “”. Now, it’s easier than ever to write media queries in CSS to handle all different screens sizes. “CSS” — or Cascading Style Sheets are files that tell the web browser how to render a website. CSS media queries could be added at the end of the basic site style to give special directions for phones, tablets and small to large desktop/ laptop screens.

Mobile First Website Design

Mobile first web design allows web designers to future-proof design more efficiently. For example, there could be a page content width constraint of 1200 – 1400 pixels, with sections of content adding up to 100% (as seen in the above image). Using percents instead of pixels allows stretching of content to fit into the 1200 – 1400 pixel constraint.

Responsive design site content layout construction

An example of responsive design would be taking the above picture’s middle two sections and making them full width only on smaller screens, such as phones.

Mobile first is an important part of responsive design. It makes it easier to readjust the website components to fit larger screens than it is to shrink content to fit smaller screens.

Keep in mind the page constraint would be set using a “minimum width” media query. As long as the width of the page is set to 100% before the media query, the page should stretch the full device width until it hits 1200 – 1400 pixels.

Viewport And Responsive Design

In addition, the viewport meta tag assists with the display of a responsive design. This is very important because smaller displays require a greater zoom for legible text.

<meta name="viewport" content="width=device-width, initial-scale=1.0">
Without the above line of code, a mobile responsive website may not render the proper font size on smaller displays.

Rest assured, Divto is the leader in responsive web design and conversion. Check out our mobile conversion service and feel free to contact us for any inquiries.

Web Developer Confessions: How To Stop Doing The Most

WordPress is an Established Content Management System That Aims to Speed Up Your Web Development Time

Spend less time developing websites using WordPress and not writing every website from scratch. I have made the mistake of custom writing every application and writing a custom database for each site. Having a login portal allows yourself and your clients to edit basic content on each website. Along with, an admin panel saves you – the developer, hassle of doing edits yourself. Every WordPress installation includes an admin panel with a login portal. This admin panel can be used to edit widgets, install plugins and edit content. To summarize, WordPress allows creatives to push out their ideas and allows developers to get things done.

Creative Flow

spend less time developing websites using WordPress - Innovation
Time you spend creating custom solutions will cut deeply into your creative time. After all, a great idea doesn’t come along every day. Use your creative juices to cut down development time even further. Furthermore, think of ways around a problem you are facing with your web project. Spend less time developing websites and use WordPress to install a plugin that provides the functionality that you need. Then customize it to fit your theme.

Chain Linking

WordPress is great when it comes to linking content together. For example, a custom post type could be used for creating event listings, e-commerce products, subscriptions and more. Most plugins will be able to use these custom post types in addition to normal posts.


Spend less time developing websites using WordPress and make it simple for everyone to share your website’s content.

RSS is a severely underrated technology. RSS stands for “Really Simple Syndication” and it lives up to its name. For example, services such as or Digg Reader will allow visitors to view and share your website’s content on different social media platforms. WordPress automatically creates RSS feeds for your posts, custom post types, post categories and even comments.

Building Your First Website – An Introduction to web development

Building your first website can be a daunting experience. You aren’t sure where to start or what to learn. Start building websites by learning the basics of html and css to begin your web development journey.

What Are Websites Comprised Of?

In other words, what is required to display content on a web page? By and large, these are the tags that you will have to write for every html5 website, you might as well get to know them. The most basic website is comprised of one html file.

Ultimately, this file will contain three parts: The doctype declaration and an html wrapper which holds the head section and the body section of your website.

Creating The HTML File For Building Your First Website

Create a new folder and name it anything. Inside the root of that folder, make a new file with the extension “.html”, for example “index.html” or “home.html” – give it any name you’d like, but be sure to include the “.html” extension. Be aware that web hosts will search for a “default.html”, “home.html” or “index.html” by default.

A very basic html file will look like this.

code for the bare-minimum tags needed for building your first website

As shown above, notice how the code is structured. In brief, it would be fairly hard to read code that doesn’t contain separation. Rather, tabs or spaces are used to create separation between elements. This is not at all required for the browser to render the content, however it is good practice. In the long run, code separation and structure will help you if you ever have to come back and extend from your code. At the same time, clean code separation and structure will also help other developers scan through and read your code.

The Head Section

A basic head of any html5 website will contain a meta tag, a title tag and most times a style tag. Tags are written as <tag-name>

code for building your first website with no content

Website Titles

Notice the <title> tags? Any text that you place inside here, will be displayed in the tab of the browser. For reference, it looks something like this.

a browser tab with title text

The meta “charset” is the key meta tag.

The meta charset tag will tell the browser which character encoding set must be used to render your website. In any event, it must be included in your website. Following, the most commonly used character set for the web is “UTF-8”.
All meta tags are written inside the head section as <meta charset="utf-8">.

Piecing Your Website Together

Generally speaking, building your first website becomes easy after you piece these main components together. Moreover, what about adding content? Notice the <p> tags inserted inside the body tags. In addition, this is called a paragraph tag – and as you probably guessed, it is used to render your website’s textual content.

complete code for building your first website

Adding Content To Your Website

Accordingly, the body of content that is displayed on your website will go in-between the <body> tags. In essence, this is where you place your body of text and media.

Furthermore, check out other resources to learn about all of the different html tags you can use to structure content on your website.