Back to Top

Tag Archives: web developer

12 Websites with Stunning Background Images [+ Best Design Practices]

Updated on by

Background images can help attract, engage, and inform visitors on your website. Depending on their design and position, background images can establish a mood, provide context about a brand, and draw visitors’ attention to important elements on a web page.

In this post, we’ll go over the two different types of website background images you can use and then walk through real examples of websites with these types of backgrounds. Then we’ll cover some best practices for using background images in your own website designs. Let’s get started.

Background Images for Web Pages

Before you start your search for the perfect background image, you have to know some basic information about website backgrounds in general.

There are two types of website backgrounds: a body or content background. A body background covers most of or the entire screen. It can be an image, graphic illustration, single color, color gradient, or texture. A content background surrounds text, images, or other content, and can be layered on top of the body background.  

Take the homepage of our blog, for example. The body background is white, whereas the content background is a light blue. The content background helps group the featured image, title, category, and read time of the individual blog posts together. This can help visitors browse the blog easier and make more informed choices of what to click on.

When using background images for your web pages, you can use images as the body background and place text directly over it. This is a common approach for creating a striking homepage. You can also use an image (or several) as the content background, layered over a single color body background. This is a common approach for portfolio sites.

Let’s take a look at some examples of website background designs below.

1. Warszawski UL

website with background image: Warszawski UL features background images with same blue as logo

Warszawski UL is an interactive website that uses scrolling animations and big background images to capture and sustain visitors’ attention. Each image offers a closer look at the interior of the serviced office.

What we like: Each background image included in the homepage slider contains shades of blue that match the color used in the logo and other design elements, making the overall design more cohesive.

2. Corvette Care

website with background image: Corvette Care features background image slider with hover animations

Corvette Care is an image-rich website. Its homepage includes a hero image slider that is triggered when the user hovers over one of the words representing the company’s services. This is a visual way to show that the company not only offers basic maintenance and upkeep — but is also one of the nation’s premier Corvette restoration and performance facilities.

What we like: Rather than show three images side-by-side, this site uses a slider of different background images to represent its range of services, which is triggered by the user hovering over text.

3. Addictions Design

website with background image: Addictions Design uses background images to create virtual showrooms

Addictions Design features many types of background images: some are full-body, layered, and featured in unique sliders. These background images help accomplish the company’s mission, which is to exhibit collections of artisans and furniture firms.

What we like: The background images, particularly the full-body website background image in the hero section of the homepage, make you feel like you’re stepping into one of Addictions Design’s showrooms.

4. ThruDark

website with background image: Thru Dark layers product images over background images of austere landscapes

ThruDark combines background images and videos with a dark color scheme to convey the different climates and activities that its products are designed to work for, whether that’s an expedition in extreme cold tundras or humid jungles.

What we like: Product images are layered over images and videos of landscapes, emphasizing that ThruDark’s clothing and equipment are developed to assist customers in the most arduous environments.

5. Colossal

website with background image: Colossal uses background images to visually explain its mission of de-extinction

Colossal uses bold colors, images, and animations to tell the story of how it will create a path to de-extinction. The page dedicated to its landmark de-extinction project — the resurrection of the Woolly Mammoth — uses background images and animations to effectively explain what this species is and what its goals are for reviving it.

What we like: The background images combined with animations and other effects make this website as engaging as it is informative.

6. INSPiiR

website with background image: INSPiiR uses background images with semi-transparent overlays to make text easier to read

INSPiiR showcases the INSPiiR Saint-Sauveur district with big background images across its site. The site uses opacity to make these background images somewhat transparent and darker, so it’s easy to read the text on top.

What we like: Semi-transparent overlays ensure that the text is still easy to read without obscuring the background images.

7. Morris Adjmi Architects

website with background image: Morris Adjmi Architects features full-body background images with only the logo and menu button in corners

MA’s website is designed to fulfill the studio’s mission of creating buildings that stand out. To this end, the homepage features a hero image slider with an almost austere navigation bar with only the logo and button labeled “menu.” This ensures that MA’s projects are the focal point.

What we like: A minimalist navigation bar keeps the focus on the background images, which feature projects from the studio’s portfolio.

8. hipcool Studio

website with background image: hipcool Studio juxtposes colorful background images against stark white content background

hipcool Studio is a minimalist website that masterfully uses whitespace, clean typography, and a white background color to make images from its portfolio stand out. Since the images are the only source of color (aside from the logo), they draw the visitor’s attention and keep it.

What we like: The site juxtaposes large, colorful background images with a stark white content background to really make the images pop.

9. Goldling Drinks

website with background image: Goldling Drinks features a graphic background image of a golden desert

Like the products, the website of Goldling Drinks is designed to transport visitors into the world of its drinks’ flavor. To do so, it has a dreamy and playful graphic background that captures the “golden hour.”

What we like: The website background is composed of graphic illustrations that evoke the playfulness and complexity of its products and brand.

10. K+

website with background image: K+ uses background images with details that draw focus to text at the center

K+ is one of the best photography portfolio websites. Its homepage features a hero slider with background images that look like full-body images until the user scrolls. The photos are perfectly chosen: the composition draws the eye to the centered text and scrolling arrow and to the logo and hamburger menu button in the corners.

What we like: The background images are colorful and detailed but manage to draw attention to — rather than distract — from the logo, menu button, text, and scrolling icon.

11. JVN

website with background image: JVN features background images showcasing products, ingredients, and results

JVN’s website is focused on the ingredients that make these products different, which is reflected in the copy as well as in the videos and images. The background images showcase the products, their specific ingredients like sugar cane, as well as the results on real people’s hair.

What we like: The header background image juxtaposes a texture that looks like the product with an image of the founder holding the bottled product to showcase it in multiple ways.

12. Parques de Sintra

website with background image: Parques de Sintra uses background images to show different parks and places in town

Parques de Sintra is designed to help visitors discover the many different ways to explore Sintra. To do so, it uses multiple image sliders. In its header section, for example, an animated image slider shows slices of images featuring Sintra’s many parks, monuments, and places. This is a great way to show that one person’s journey through the town may look very different from another’s.

What we like: This website’s paneled hero image slider is a clever way to feature multiple background images without taking up much space.

Website Background Image Best Practices

A background image on a web page has to do more than look good — it also has to enhance the user experience in some way. Let’s walk through some best practices so you can pick a background image that helps convey your brand and provide visual cues to your visitors.

1. Select high-quality images.

In terms of background images, quality refers to composition, resolution, and size. First, background images should have enough negative space and color contrast to make any overlaid text easy to read. Here’s an example:

website background with negative space where text is positioned

Website background images should also be at least 72 pixels per inch (ppi) and 1920 pixels wide x 1080 pixels high ideally, according to NW Media Collective. This ratio of 16:9 is considered ideal because it spans the webpage without compromising the quality of the image.

2. Make text stand out.

If using a background image, then you need to ensure text stands out so visitors can read it. You can do so in a number of ways: by using contrasting colors, or a solid color content background in between the text and background image, or overlays on the images. You can also position the text over the darker, or lighter, parts of the background image.

Notice in the example below that the white content background helps the logo and text stand out against the body background.

website background with detailed image as body and white content background surrounding text

3. Ensure images are responsive.

It’s essential that a background image is responsive so it adjusts to all screen sizes without noticeably impacting your website’s performance. To ensure images are responsive, you should:

  • Set the CSS background-size property to “cover.” This value tells the browser to scale the background image’s width and height so that they are either equal to, or greater than, the viewport’s dimensions.
  • Add a media query. This will tell the browser to serve a smaller background image for mobile devices, which will reduce the payload and therefore improve load times.

For a more detailed look at all the code required to make background images responsive, check out How to Add an Image & Background Image in HTML.

4. Place bold, colorful images in the header.

If you have an image with bold colors or illustrations, consider putting it in the header section of your homepage. That way, you can immediately establish your brand personality and website’s mood, and then place more text-heavy content below. Here’s an example of a video header followed by a more minimalist section:

website background with bold image in header section followed by text-heavy section

Using Background Images in Your Design

Using a website background image can help immediately capture a visitor’s attention, tell a story, and provide important visual clues. Using one will require you to consider file sizes, load times, text color, and other factors — but when done right, background images will make your site more engaging and memorable.

You can read original article by Anna Fitgerald here

about-us-page-examples

25 Awesome Examples of About Us Pages

Updated on by

What are the features that make an About Us page engaging? Read on and be inspired with these 25 awesome examples.

The About Us page of your website is an essential source of information for all who want to know more about your business.

About Us pages are where you showcase your history, what is unique about your work, your company’s values, and who you serve.

The design, written content, and visual or video elements together tell an important story about who you are and why you do it.

How can you make the most of this integral part of your marketing strategy?

In this article, you’ll learn what makes an exceptional About Us page.

You’ll find 25 examples of the best ones out there, too, to inspire your own About Us page design and content.

The Components Of A Great About Us Page

There isn’t a winning template to create a great About Us page. However, there are key components to make a convincing pitch with your brand story.

Your Mission

You don’t need to outright say, “our mission is ____,” but you should convey the mission of your business in your About Us copy. This is key for attracting talent, as well as leads that have Corporate Social Responsibility (CSR) goals.

Your Story (History)

Every business has an origin story worth telling, and usually, one that justifies why you even do business and have clients.

Some centennial enterprises have pages of content that can fit in this section, while startups can tell the story of how the company was born, its challenges, and its vision for the future.

Your Services (And Benefits)

Of course, you have a homepage and dedicated pages for your products, but summarizing your offerings on the About Us page is crucial to tie them in with brand values in your messaging.

Highlight the benefits and showcase what you do (and why it is unique).

Your Social Proof

Reviews, client logos, case studies, and results bring consistency to your About Us page. It’s what really proves what you are saying is real and the impact you can bring to future clients.

With these components in mind, you will have a framework from which to build an engaging and unique About Us page.

However, if you are looking for some inspiration, the 25 examples below will guide your creative process.

1. ToyFight

ToyFight About Us SectionScreenshot from ToyFight, January 2022

ToyFight is an award-winning creative design agency.

You’ll find the About Page at the top of the menu under the Who section.

This page has a unique feel, thanks to the deconstructed action figures representing the founders, Leigh Whipday and Jonny Lander.

The great attention to detail and interactivity also reflect the company’s 16 years of experience.

To sum up, this page stands out by providing the perfect mix of fun and information.

2. Band

Band About Us PageScreenshot from Band, January 2022

Band is a multidisciplinary creative studio based in the Pacific Northwest.

Their About Us page stands out by showcasing some of their unique and creative projects.

No number of words could hope to tell one of their potential clients nearly as much as these pictures can.

In this case, the 25 pictures featured on Band’s About Us page are worth much more than the 170 actual words you’ll read on the page.

The magical visuals and overall simple look and feel make this About Us page one of our top picks.

3. Anton & Irene

Anton & Irene About Us pageScreenshot from Anton & Irene, January 2022

This might be the most distinctive website we’ve come across.

Anton & Irene is a design agency based in Manhattan.

Why are they a distinctive web presence?

Because their page takes parallax scrolling to the next level.

The snowy effects, bold colors, and quirky visuals create a truly captivating experience.

4. Pierro Caron

Pierro Caron About Us pageScreenshot from Pierro Caron, January 2022

Pierro Caron is a French artisan sculptor.

Want to know our favorite part about his page?

The honesty.

Here is a man with great respect for wood and handcrafted sculptures that “tell a story and testify to the richness of one of our most precious resources.”

His website is light, easy to read, and filled with inspiring quotes and photos of his labors of love.

5. Blake Fili Suarez

Blake Fili Suárez About Us pageScreenshot from Blake Fili Suárez, January 2022

Who doesn’t love a good bio?

Especially one that starts with “I was born in good ol’ Madison, Wisconsin. The son of a Librarian and a Researcher.”

It also goes on to tell you how he and his family survived Hurricane Andrew and how his sister was born that night.

Who is this guy?

Blake Fili Suárez is an illustrator and designer with a fantastic sense of humor.

His quirkiness comes through thanks to his humorous tone and goofy picture.

The page, while minimalist in design, offers a glimpse into Suárez’s colorful personality and his impressive block of work.

6. LessFilms

LessFilms About Us pageScreenshot from LessFIlms, January 2022

If you were a “super awesome” video business, what medium would you choose to show people what you do?

Video, of course.

LessFilms is a video production company based in Florida with clients and team members all over the world.

On their about page, you’ll find a humorous 50-second video along with a short list of facts summarizing their love for tacos, travel, and karate – a theme that certainly permeates most of the content on the website.

7. DoomTree

Doomtree About Us pageScreenshot from DoomTree, January 2022

DoomTree’s page starts off as a coming-of-age story about how “a mess of friends” built the record label that made them a household name in Minneapolis.

However, it’s really the audio and the visuals that got us hooked.

Why tell, when you can show, right?

Explore their About Us page to meet the crew, listen to their songs, and get the latest news.

8. Cupcakes And Cashmere

Cupcakes and Cashmere About Us pageScreenshot from Cupcakes and Cashmere, January 2022

On this website’s main page you will find everything lifestyle-related – fashion, food, beauty, home decor, and more.

But it’s the About section that introduces you to the team that makes this website an endless source of inspiration.

The page introduces founder Emily Schuman, as well as her blog, books, and fashion collection.

Want to stay in touch?

No problem – the page also features useful links to her social media pages, as well as her online shop.

9. NOWNESS

NOWNESS About Us pageScreenshot from NOWNESS, January 2022

NOWNESS is a video channel providing the best in global arts and culture.

Therefore, it’s only natural that their About Us page features a compilation of various videos they host.

The content’s diversity and the team’s curatorial expertise are another reason to keep you browsing.

To stay in line with their video-centric aesthetic, the text on their page is short and concise.

However, it still provides enough guidance for browsing the website and even contributing.

Access the awards section and see why NOWNESS is currently a powerhouse in online film and video.

10. Mailchimp

MailChimp About Us pageScreenshot from Mailchimp, January 2022

Millions of people use Mailchimp every day to create, send, and track email newsletters.

That’s the clever part behind Mailchimp’s About Page.

It’s a great example of how to use such a page as a sort of pre-sales platform.

It’s simple, fun and effective, quite colorful, and displays a welcoming mix of diverseness.

11. Tate

Tate About Us pageScreenshot from Tate, January 2022

Tate’s About Us states that their mission is to “increase the public’s enjoyment of British art […] and international modern and contemporary art.”

So said, so done.

How come?

Because this page eases the journey for any reader seeking to take them up on their mission.

Scroll down to find out who they are, how to stay in touch, and everything in between.

12. Yellow Leaf Hammocks

Yellow Leaf Hammocks About Us pageScreenshot from Yellow Leaf Hammocks, January 2022

Yellow Leaf Hammocks is trying to save the world one hammock at a time.

Their goal is to break the cycle of extreme poverty by empowering local artisans in Thailand to earn a stable income.

The brand’s About Page is filled with uplifting stories of impeccable craftsmanship and tight-knit communities.

As a result, it’s just as inspiring as their devotion to sustainable change.

13. Eight Hour Day

Eight Hour Day About Us pageScreenshot from Eight Hour Day, January 2022

You had me at “Well hello there.”

Well, that’s exactly how the About Us section of Eight Hour Day starts – a welcoming greeting.

For that reason, it also made us browse for more.

Why?

Because as much as you love good design and inspiring illustrations, you also want to meet the people that curate all the content for you.

Furthermore, it’s equally rewarding when you realize that they are just as eager to start a visual dialogue with you.

Nathan Strandberg and Katie Kirk are doing what makes them happy, and this is obvious throughout their page.

14. Lonely Planet

Lonely Planet About Us pageScreenshot from Lonely Planet, January 2022

You know you’re about to hop on a journey when a website’s About Us page tells you to “Just go.”

This is a website for travelers, so the layout is perfect for those eager to explore.

As you scroll down, you discover what Lonely Planet stands for, and their visual aid offers a preview of their services.

The perks?

You see everything in one go and decide for yourself what you take on your journey.

Will it be their apps, their printed guides, or their website?

In any case, every resource becomes an inexhaustible well of travel inspiration.

So, are you ready to go?

15. Gummisig

Gummisig About Us pageScreenshot from Gummisig, January 2022

Gummisig is a freelance web designer who likes to talk about himself in the third person.

He also makes great use of oversized text to bring attention to his work in a humorous manner.

Perhaps what’s striking about this page is that it introduces Gummisig’s portfolio, but also reflects his free spirit and commitment.

And while he mentions the household names he worked for in the past, he remains approachable and open to new collaborations.

Scroll down to discover his preferred action items.

Hint: He wants to know your secrets!

Perhaps the most striking feature behind this page is that it acts as a preface to the designer’s portfolio, mirroring his free spirit and a remarkable passion for design.

While he proudly states the companies he has worked for (IKEA is just one of the bigger names to pop up), he does so in a manner that is not boastful.

16. Amnesty International

Amnesty International About Us pageScreenshot from Amnesty International, January 2022

Amnesty International is more than an NGO.

It is a global movement of more than 7 million people that are campaigning for a better world, where human rights are central.

It is no wonder that the pronoun we is prevalent throughout their page.

Filled with quotes, videos, and testimonials, their page makes you believe that you can hope for a better world. And they have the facts to prove it, too.

If you scroll down, you can access all their accomplishments on the road toward better social change.

After you understand their global footprint, you should also imagine – imagine the possibility of a world where human rights are at the center of discussion.

Good enough reason to stay in touch, no?

17. Chattanooga Renaissance Fund

Chattanooga Renaissance Fund About Us pageScreenshot from Chattanooga Renaissance Fund, January 2022

The top part of the Chattanooga Renaissance Fund page aims to attract entrepreneurs into the Chattanooga area of Tennessee.

How?

By describing its history and the companies that already invested there, such as Amazon or Volkswagen, to name a few.

Which begs the question: What prompted these companies to move there?

Find out by reading more about the fund’s members and how they contributed to its growth.

This is especially reassuring because they are also here to help you.

Whether you’re a startup, investor, or third party, the page has a dedicated section for all its users.

All you have to do is prove that you want to turn ideas into existence.

18. DORÉ

DORÉ About Us pageScreenshot from DORÉ, January 2022

This website started off as a photography blog founded by Garance Doré.

Eventually, it became a place for inspiration with a growing team that’s eager to question everything.

Whether it is style, femininity, or modern dilemmas, no topic remains off limits.

Ready to contribute to the discussion? By all means, you are most welcome.

The team reads all your comments and is ready to turn your thoughts into their command.

Not sure where to start?

Scroll down to see their work in videos and use the pictures at the bottom to access their Instagram page.

19. Bulldog Skincare

Bulldog Skincare About Us pageScreenshot from Bulldog Skincare, January 2022

How can you convince men to delve into skincare?

You bring their best friend on their side – a dog.

Meet Bulldog Skincare, the company that aims to make skincare options dedicated to men readily available.

To have you sold, their About Us page greets you with the adorable mug of a bulldog.

This quickly becomes your guide to finding the products that will help you look and feel your best.

As you scroll down, you are growing familiar with the products and are slowly but surely befriending the brand itself and its values.

Their skincare is made from a mix of natural and carefully-selected man-made ingredients.

It’s also vegan and certified by Cruelty Free International.

Their page is so good, it’s no wonder they have a ‘Shop Now’ button every step of the way.

Don’t mind if I do.

20. Couro Azul

Couro Azul About Us pageScreenshot from Couro Azul, January 2022

Navigating through Couro Azul’s About Us page is like a journey through the unknown.

The kind of journey that keeps you scrolling down for more.

The company makes leather upholstery for cars and trains, and its history and trajectory are equally fascinating.

In addition to the visual delight, the page is also interactive and engaging.

Why?

So that you can understand what the company values from a first browse: 100% in-house products.

Their certificate for ecologic distinction attests to their commitment to environmental best practices.

21. Girlboss

Girlboss About Us pageScreenshot from Girlboss, January 2022

The entire Girlboss website is simply inspiring.

The brand aims to redefine success for millennial women – by providing the tools and connections they need to own their futures.

Girlboss empowers them by providing the tools and connections they need to own their futures.

Furthermore, every bit of content you’ll find on this site oozes with passion, humor, and resourcefulness.

These key traits are sewn into the fabric of Girlboss’ global success.

22. Purple, Rock, Scissors

Purple, Rock, Scissors About Us pageScreenshot from Purple, Rock, Scissors, January 2022

If you want people to understand your company’s values, then put them in bold black and white print – just like Purple, Rock, Scissors did.

Their entire website is a technological marvel.

With its quaint background animation, concise content, and creative visuals, this page is definitely an eye-catcher.

There’s also an openness about it that will unfailingly draw you in.

23. Mixd

Mixd About Us pageScreenshot from Mixd, January 2022

It’s not often that you see an About page that puts so much emphasis on its “meet the team” section.

Each member is portrayed with a short description and an almost full-body shot, complete with their social media accounts.

Boasting big, bold elements and sharp colors, this page excels at making a great first impression.

24. 6tematik

6tematik About Us pageScreenshot from 6tematik, January 2022

There are many things we love about this website, but for brevity’s sake, we’ll narrow it down to two.

First, their main page is highly interactive.

The simple act of pushing a key or moving the mouse reveals a key piece of info about the brand. Because of that, it feels like watching a modern silent movie.

The second thing is the way 6tematik introduces us to its team.

Each member is portrayed by a minimalist caricature that is defined by one obvious trait. Some have long pink hair, others a bushy beard or big glasses.

These traits add a touch of personality to each member’s portrait, without giving too much away.

25. Big Cartel

Big Cartel About Us pageScreenshot from Big Cartel, January 2022

Made by artists for artists, Big Cartel is an online platform that makes it easy to build and manage an online store.

The simple yet impactful mission statement and the candid employee photographs make this About page refreshingly different.

Each photo in the gallery is unique and personal.

As a result, you won’t find any staged or boring ID-badge-type photos – just a wonderful display of diversity.

Final Takeaways

After analyzing in detail the 25 examples of About Us pages in this article, these are the final takeaways to keep in mind when crafting yours:

Creativity makes your page stand out.

For many companies, the About Us page is just a formality to fill in the sitemap rather than convey a unique marketing message.

However, some brands go beyond, designing eye-catching imagery and writing humorous copy to stand out from the competition. You need to find your unique angle for your About Us page to actually be read.

Feature the people behind the brand.

Whether you are a solopreneur, a dynamic duo agency, or a full-blown global enterprise with hundreds of team members, letting people shine makes an engaging About Us page.

Some of the examples in this article (such as Big Cartel), feature headshots packed with personality, which convey brand values better than any words.

Tie in social proof with your social responsibility.

Showcase results, but also convey the difference your organization is bringing to the world.

Yellow Leaf Hammocks and Mailchimp are two examples from this article that feature on their About Us page how their products are changing their communities for the better.

You can find original article by Aleksander Kesler here

10 amazing games to learn CSS

Updated on by

Learning CSS can be quite a challenge. There are no shortcuts, and you will have to get your hands dirty and dive into the magical world of CSS.

But! There are some fun ways to learn this monster called CSS. This article will highlight ten amazing games you can play to learn CSS.

1. Flexbox froggy

Flexbox froggy CSS game

Flexbox froggy was one of the first CSS-solving games I’ve played, and I love it. It’s a super fun way to learn flexbox positions across the board.

You use CSS flex to place the frog on the correct Lilly. It has 24 levels, and you can quickly see the results.

2. Flexbox defense

Flexbox defense CSS game

Another super cool CSS game to learn flex is flexbox defense. In this game, you have to move around towers to defend a road from being attacked.

It has 12 levels, and it’s pretty cool to see multiple answers can be correct.

3. Knights of the Flexbox Table

Knights of the Flexbox table CSS game

If you love Tailwind, this one is amazing! It uses tailwind classes to teach you to flex options. A super combination if you ask me, and it’s well set up.

There are a total of 18 levels that you can clear.

4. Flex Box adventure

Flex box adventure CSS game

Another game much like Flexbox froggy, but with a different setup. It also has some other challenges and hints from which you might learn a lot.

It has a total of 24 levels you can clear.

5. Flexbox zombies

Flexbox zombies CSS game

This game is super well set up in graphics! I am blown away by how cool the storyline is.

It has 12 chapters, with each up to 25 levels. It usually costs money to play this one, but it seems free forever.

6. Grid garden

Grid Garden CSS Game

Grid garden is a super fun way to learn CSS Grid. You have to use grid layouts to ensure all the carrots get water.

It has 28 levels to practice a lot of CSS grid options!

7. Grid attack

Grid attack CSS Game

This game is by the same creator as Flexbox adventure and super well-executed like the other game!

You have to use CSS Grid to change the land so the demons will not survive.

It comes with 80 levels, which gives you many options and time to learn CSS grid in a super fun way.

8. CSS Diner

CSS Dinner CSS Game

This game is actually really interesting! It’s a game to learn about CSS selectors and some modern ones.

The game has 32 levels and entertaining animations to showcase what selector you should target.

9. Guess CSS

Guess CSS Game

This game is very similar to CSS Diner, but you have to guess which selector matches the result you see.

This is an excellent concept as you always get to see the perfect result.

It’s also not limited to specific CSS parts and includes many different ones.

10. CSS Speedrun

CSS Speedrun

In this game, you have to write specific CSS Selectors to target5 the highlighted elements.

However, you have to do it as quickly as possible, making this a great challenge for those who like an extra level of hardness to their games.

The game comes with ten levels, but you can play more often and improve your speed.

Bonus

Once you’ve mastered these games, you can enter some CSS challenges and battles to showcase all you learned.

Some great website for that are:

All these websites have a particular example you have to recreate most efficiently most of the time.

There are some excellent communities around these websites, and you’ll have fun solving them.

Let me know what your favorite CSS game is 🙌.

WooCommerce 6.3 to Introduce New Product Filtering by Attributes

Updated on by

The WooCommerce development team released the first RC for version 6.3 this week. The upcoming major release is expected on March 8, 2022, and is set to introduce an exciting, long-awaited feature: a new lookup table that will offer the ability the accurately filter products by attributes.

Shop owners who sell variable items have been frustrated for years by WooCommerce’s broken filtering of variable products. Automattic developer Néstor Soriano explained the problem when the new lookup table went into testing last year:

The problem appears when there are variable products where some variations have stock and others don’t, and the “hide out of stock products from the catalog” option is set. What happens is that when an attribute is selected for filtering, all variable products having a variation that corresponds to that attribute will be displayed, even those not having stock for that variation (as long as at least one variation has stock).

Merchants who have experienced this have become frustrated because customers end up having to search through all the items to see if their selected variation is available. Sometimes they abandon the process after the first few items don’t have the one they are looking for.

The new lookup table in WooCommerce 6.3 solves this problem in a way that should improve performance – by creating a table row for each combination of product and attribute, including individual variations and stock status. This will be immensely helpful for any store owner who sells variable products, such as clothes, shoes, jewelry, etc.

This update will require a database migration. It will also introduce a new “Advanced” section under the Product Settings tab with options for the new product attributes lookup table.

WooCommerce 6.3 has updated to the 6.9.0 version of the WooCommerce Blocks feature plugin and version 3.2.0-rc of WooCommerce Admin.

Shop owners who have variable products may want to give the update a test run during the next 12 days before the release lands. It is available for download from WordPress.org or via the WooCommerce Beta Tester plugin.

 

you can find original article by Sarah Gooding here

4 Exciting New CSS Features in 2022

Updated on by

Foreword

CSS has changed rapidly in recent years, but I think 2021 is a booming year for CSS with many new features.

Such as CSS container query, CSS parent selector, CSS cascade control rules, CSS grid, etc. And all major browser manufacturers are excited about this feature.

It is a boon to our developers, let us thank them for their hard work!

Let’s take a look at what’s new in CSS in 2022.

1. CSS parent selector :has()

Safari 137 is currently the only browser that supports the :has() selector by default.

There are many selectors in CSS, but the :hasselector is special. The CSS :has()pseudo-class selector is somewhat similar to :not(), also known as a structural pseudo-class selector, and is also used in CSS functions. Call it a dynamic pseudo-class function. It allows you to match elements more finely.

The :has()pseudo-class would represent an element if any selector passed as an argument matches at least one element!

Simply put, elements are only selected if the selector is passed to :has()match at least one element. This seems a bit confusing to understand. Let’s look at a simple example:

In the above example, all <img />elements in the <figure>element is selected; while the figure:has(figcaption) img selector indicates that the <figure> the element containing the <ficaption>element is selected All <img /> elements in. Note that here :has()passes a figcaption selector as its parameter.

Here’s what you’ll see in a supported browser:

2. Next CSS Transform

This is similar to CSS media queries. It is not a new feature of CSS. In the CSS Transform Level 2 specification, the “rotate() , scale() , translate()” functions that previously used the transform property were turned into independent CSS properties. And they have all become experimental properties of mainstream browsers that can be experienced in the browser.

The translate, rotate, and scale properties allow developers to specify simple transformations independently, in a manner consistent with typical user interface usage, without having to remember the order in the transformations, making transform(), The actions of rotate() and scale() remain independent and work in screen coordinates. The order in which they are applied is first translation, then rotation, scaling, not the order in which you define them. Having independent transform properties also means we can animate and transition them separately.

3. CSS @container

The CSS Container Query feature is definitely a long-awaited feature, and it’s going full speed ahead in 2022!

Una Kravets shared the container query @container at Google I/O; She calls @container one of the features required by the new responsive layouts.

CSS @container looks similar to @media, but it is more powerful than the media.

View an online example:https://cdn.embedly.com/widgets/media.html?src=https%3A%2F%2Fcodesandbox.io%2Fembed%2Fjf4jf&display_name=CodeSandbox&url=https%3A%2F%2Fcodesandbox.io%2Fs%2Fjf4jf&image=https%3A%2F%2Fcodesandbox.io%2Fapi%2Fv1%2Fsandboxes%2Fjf4jf%2Fscreenshot.png&key=a19fcc184b9711e1b4764040d3dc5c07&type=text%2Fhtml&schema=codesandbox

4. CSS Subgrid of Grid

As far as web layouts are concerned, although Flexbox is great, it still has a lot of limitations in two-dimensional layouts. In the entire technical system of Web layout, only CSS Grid is the only two-dimensional layout. Nevertheless, CSS Grid layouts have been moving forward and have been supported by major browsers.

CSS Grid has been around for many years, and many of the features in this module are supported in major browsers, but in the CSS grid layout system, there should be a subgrid, subgrid.

The earliest definition of subgrids like grid and inline-grid is just a display property value.

div {
display: subgrid;
}

But it was removed later, but we can simulate subgrids by nesting grids.

div {
display: subgrid;
grid-template-columns: repeat(4, 1fr);
}

The problem is that it is difficult to align the nested grid items with the parent grid. In other words, the parent grid and the nested grid are two separate grids with their separate grid parameters. Therefore, to allow the subgrid to continue the relevant parameters of the parent grid, the subgrid is introduced into the CSS Grid system again. Still, the subgrid is no longer the value of display, but the grid template columns or grid- The value of the template-rows property.

Conclusion

Some of the new CSS features listed above, which specific new features will appear in browsers in mid-2022, are not yet known. But, on the other hand, some of the features mentioned above are already available in one or more browsers. So, if you are interested, you can try it yourself.

Let us once again thank those who have quietly contributed to the development of CSS!


you can find original article by Richard Lee here

Amazon SEO: A Comprehensive Guide For Sellers

Updated on by

How can sellers stand out among the competition on Amazon? Find out in this comprehensive guide to doing your own Amazon SEO!

In digital marketing, we talk a lot about what you need to do for your website and how to make it SEO-friendly for users and search bots.

But how much do you know about Amazon SEO?

If you’re an ecommerce business and you’re not on Amazon in 2022, you may not be hitting your sales potential.

Amazon’s a powerhouse, a workhorse, an old reliable when it comes to e-commerce, as most people should be aware of by now.

Everyone wants to get their products on Amazon because that’s where their audiences shop.

And those audiences shop the platform quite a bit.

Amazon generates about $4,722 every second, or about $17 million an hour. The sales giant closed out last year with $469.8 billion in net sales, up 22% over 2020.

That’s why sellers want a piece of the action, and why it can be so difficult to rank your products on Amazon’s results pages.

As with your website, though, you can practice Amazon SEO to give your products a boost.

It’s all about understanding the algorithm, what shoppers are searching for to find what they need, and how you can outperform your competitors.

Here’s a comprehensive guide to Amazon SEO for sellers.

How Amazon’s A9 Algorithm Works

Before we can talk about Amazon SEO and how you can optimize your product listings, it will help to understand how Amazon’s A9 search algorithm works.

It’s similar but not identical to Google’s.

One main difference?

Amazon queries are only commercial, rather than navigational or informational as with Google.

Think about it simply.

You make a search. A9 knows you want to buy whatever you searched.

It matches the query to a group of relevant products, and you are shown those products on a series of pages.

How does Amazon even select those particular products, though?

Again, think about it like Google’s algorithms, but exclusively for ecommerce.

The factors Amazon considers for rankings include:

  • Positive customer reviews (better products will sell more and make more money for Amazon).
  • Historical sales.
  • Relevant keywords included in the product listing.
  • The right prices (not too high, not too low, based on the competition).

It’s important to note here that while the algorithm is always looking for relevance based on a query, historical data matters a lot, too, as pointed out in the above list.

The results that have pleased customers in the past are likely to please customers in the future.

New sellers on Amazon are therefore faced with a dilemma: if Amazon prioritizes products with strong sales, but you haven’t made any sales yet or generated any historical data for A9, how can you ever hope to climb Amazon’s rankings?

The answer lies in performing Amazon SEO, starting with the keyword research that can get you found by the shoppers who matter to you.

Performing Amazon Keyword Research

Just like with Google, an Amazon SEO strategy must be built on keyword research.

Without the right keywords in your rankings, your products will seem irrelevant and won’t show up for users.

I’ll talk about how and where to optimize your listings for keywords in a minute. First, we need to know where to find keywords and how to perform keyword research.

One great way of performing keyword research that every Amazon seller should know about is using the Amazon search box.

It will autocomplete your queries as you type them, essentially doing the keyword research for you.

Take the example from the screenshot below.

Say you’re an online music store and want to start getting my turntables listed on Amazon.

Let me see what people are already searching for to get an idea of how to optimize your listings.

Obviously, [vinyl record turntable] is going to be a strong seed term with plenty of competition.

That isn’t the only search you should do, in this case.

You need to keep searching for all the variations of turntables that you can think of and see what comes up.

Take this next example:

amazon search bar showing product options

This search gives some more ideas because the predictions get more specific.

[Turntables for vinyl records], [turntables for vinyl records with speakers], and [turntables for vinyl records with cd player] are all specific queries.

Those are for the people who are further along in their buying journeys.

They know what they want. They just want to see the options.

Search for all the variations you can think of in the search box to get a decent list of keywords for which you could conceivably rank.

What are some other ways of doing Amazon keyword research?

Basically, all the other ways you know about for doing keyword research for Google.

Use free tools such as Keyword Planner or paid tools such as Semrush or Ahrefs to see the search volumes and difficulty ratings of these keywords.

You can also look at your Google Search Console data if you sell the same products on a website to see how people are finding you on Google.

All of these methods together should present you with a decent collection of relevant keywords that you can use to optimize your product listings.

Amazon Listing Optimization

Once you have your list of keywords, it’s time to use them to optimize your product listings.

If you’re already familiar with writing optimized product descriptions and other content for Google rankings, you’re in luck.

Doing it for Amazon works basically the same way.

You should start with your product titles.

Amazon requires that titles do not exceed 200 characters and that they include words that describe the product accurately.

This is also a chance for sellers to incorporate relevant keywords, but please don’t stuff.

Don’t stuff keywords in the rest of your product description, either.

You should use keywords in your prose, your bullet points, and your tech details where applicable. But use them appropriately.

The key is employing the most relevant keywords that also give you the best chances of driving traffic to your products.

Long-tail keywords are okay, too, since not everyone can rank on those perfect seed terms.

Don’t forget you can add keywords to your product pages’ back end, too!

They can help your visibility on Amazon even though customers can’t see them.

Finally, when you write your product descriptions, don’t be afraid to go long.

Be detailed. Tell a story.

It’s content, and it can help your products rank better.

Amazon Product Images

In any post about Amazon SEO, we have to talk about product images.

Whether you’re doing ecommerce on your own website or through Amazon, the right images can just about make or break you.

People are there to buy a product, and your written description goes only so far.

You can describe a vinyl record turntable all you want.

You can talk about its colors, its look, and its features.

But none of that matters if no one can see the thing!

This is why product images matter so much, and not just any images, but high-resolution images (more than 1,000 pixels one way), preferably ones taken professionally.

Remember, Amazon lets customers zoom in pretty closely on product images these days, so quality really matters here.

It’s worth it to note that Amazon doesn’t necessarily rank you higher based on your image quality.

You can and should add SEO-optimized alt text to your images so Google can deliver them in image search results, but the play here is really adding images that show your product from all angles.

Let your images show all the details because images can be just as strong in making a sale as product descriptions.

The other angle you should take for your Amazon product images is what are called lifestyle images, or images that show people using the products in the intended ways.

Why does that matter?

Anything that gets the customer to visualize using your products in their home is a plus.

They can see the item’s size in relation to real-life objects and get a sense of how it would be to use the item.

Zoomable product images alongside lifestyle images are vital to your success on Amazon.

Reviews & Ratings

I mentioned above that product reviews and ratings have a lot to do with where your products fall in Amazon’s search results.

This makes complete sense from a user-experience perspective.

Just like Google, Amazon’s main goal is to present users with positive, useful experiences.

This is why Amazon reviews and star ratings become vital for strong product rankings.

Think about it logically: will Amazon want to show you a bunch of one-star products on the first results page for a query?

No, that won’t help anyone.

Amazon wants customers to buy things, so it’s going to show products that many people have bought and liked.

What matters here are the stars and the number of reviews your products have.

Which product would you trust more: one with 17 reviews or one with 4,567 reviews?

Which set of reviews will give you a clearer picture of what you can expect?

So, if product reviews influence Amazon rankings, how do you get reviews? Amazon facilitates this for you with its Request a Review feature.

It’s always a good idea to reach out to customers after a purchase to see if they’d like to write a review.

The thing is, good products will tend to bring about reviews anyway.

When you’ve made people happy, they will want to share their satisfaction with others.

Negative reviews can always occur, but the trick is to respond swiftly to see what you can do to make the customer’s experience better from this point.

Measuring Product Performance Through Analytics

The final part of doing comprehensive Amazon SEO involves measuring your products’ performance through analytics.

Again, if you optimize a website for Google rankings, then you know the value in analytics.

When it comes to Amazon, you’ll want to track your SEO so you can continue your strategy for product optimization

Now, if you’re a brand owner, you have access to Amazon’s Brand Analytics.

For all other sellers, though, you have to get into third-party apps that track components such as keywords and product performance.

Most of these tools are all-in-one solutions, meaning you can perform keyword research, get help optimizing your listings, track your products and inventory, look at your finances, get competitor information, and track your Amazon SEO and paid media in general.

If you’re serious about making a living as a seller on Amazon, it will be worth the investment to get into one of these software tools. You just can’t afford to go in blind and risk not making an impact among everyone else vying for a spot on page one.

Which tools are the best?

There are several Amazon analytics tools that consistently rank highly among reviewers.

Some of those are Helium 10Sellics, and DataHawk.

Many of these companies offer either free trials or live demos so you can decide which tool is right for you.

A Strong Amazon SEO Strategy Starts Right Now

Sellers on Amazon have a lot of work cut out for them when they want to make it on the platform.

If you’re already familiar with optimizing content for Google, then you’re part of the way there already.

As long as you know that Amazon rewards sellers who stand out with amazing products that dazzle customers, you know what direction you need to go.


You can find original article by Kristopher Jones here