DEV Community: Snowie Wong

6 Frontend Award Websites For Developers To Get Inspired or Recognized

Snowie Wong — Sun, 09 Apr 2023 02:41:05 +0000

[Amazed face when seeing fancy websites and superb animations, lol]

As web development continues to evolve quickly, it can be difficult for us to stay updated with the latest trends. In this post, I will introduce 6 frontend award websites to visit for inspiration or possibly get recognized for your work. Plus, you may be able to learn a thing or two using browser’s Developer Tools to inspect/spy on the award-winning websites.

1. Awwwards

Awwwards is one of the most prestigious frontend award websites. It recognizes and awards websites that demonstrate excellence in design, creativity, and innovation. Awwwards has a jury made up of professional designers, developers, and agencies from all over the world who review and rate each submission. The awards include Honorable Mention (HM), Site of the Day (SOTD), Developer Award, Site of the Month (SOTM) and Site of the Year (SOTY). As winning awards on Awwwards is a great way to get recognition from the industry's top professionals, visiting the site is also an excellent way to learn from the industry masters!

Submission Fee: $65 USD (Standard Plan)

Link: https://www.awwwards.com/

2. CSS Design Awards

CSS Design Awards (CSSDA) is another well-known frontend award platform that honors and showcases websites that pushes the boundaries of UI/UX and innovative development. Similar to Awwwards, CSSDA is also backed by an international panel of expert judges. It provides 8 award opportunities per submission, such as Website of the Day (WOTD) determined by the scores from the official judging panel, as well as UI Design, UX Design and Innovation Public Awards determined by votes from both the public plus the score by the judges.

Submission Fee: $50 USD for 1 person (+1 collaborator)

Link: https://cssdesignawards.com/

3. FWA

Favourite Website Awards (FWA) is a reputable award website that has been established for more than two decades. With an international team of over 500 judges, participating in FWA is a great opportunity to get recognized and promote your work to a wider audience. Apart from websites, FWA also awards on other types of work such as Apps, VR and AR projects. The available awards include FWA of the day (FOTD), FWA of the month (FOTM), People’s Choice Award (PCA), and FWA of the year (FOTY).

Submission Fee: £70.50 GBP

Link: https://thefwa.com/

4. CSS Winner

CSS Winner is a popular frontend award website that recognizes and celebrates outstanding website designs. Comparatively, the submission fee is a lot cheaper so it’s more friendly to freelancers, solo-designers, or solo-developers. With thousands of daily visitors around the world, it’s a great platform to boost your reputation as a front-end developer and open up new opportunities. The available awards include Nominee Award, Star Award, Site of the Day and Site of the Month.

Submission Fee: $9 USD, rejected submissions will be refunded

Link: https://www.csswinner.com/

5. SiteInspire

SiteInspire is a curated gallery of the finest website designs from around the world, with over 8000 sites featured currently. It showcases the latest design trends and provides inspiration for designers and developers. The websites are chosen and curated by Howells Studio. It features websites that run a spectrum from fun and novel to clean and simple.

Submission Fee: Free

Link: https://www.siteinspire.com/

6. CSS Light

CSS Light is a platform that showcases and promotes new talents and trends in the world of designing. It mainly focuses on a wide range of websites possessing unique skills in aesthetics, creativity, presentation, and coding. Submissions accepted would be listed under the Gallery section and the selected ones will be awarded with Featured of the Day.

Submission Fee: Free

Link: https://www.csslight.com/

That’s all and I hope you find this article useful! Please note that the submission fee and information listed above is based on what I saw lately, so be sure to check those out on the actual websites if you’re interested in submitting your work. Good luck and hope to see your names there soon! :)

9 Useful Chrome Extensions for Web Developers / Web Development

Snowie Wong — Tue, 21 Feb 2023 02:23:21 +0000

Hi there! Today I'm going to share with you 9 useful Google Chrome extensions that I use in my daily life as a web developer.

1. Wappalyzer

Have you ever wondered what's the tech stack of the website you're looking at? Wappalyzer is the perfect tool to analyze the technologies used on the websites, like whether the site has used Page Builder or not, and viewing information like the programming languages, JavaScript libraries or even payment processors used in the site.

This information is extremely valuable, especially when you are trying to learn how others build the websites you or your clients love, preparing for job interviews, or keeping up with the latest trend in technologies.

Link: https://chrome.google.com/webstore/detail/wappalyzer-technology-pro/gppongmhjkpfnbhagpmjfkannfbllamg

2. AdBlock

Time is valuable and this extension simply keeps you away from ads :)

Link: https://chrome.google.com/webstore/detail/adblock-%E2%80%94-best-ad-blocker/gighmmpiobklfepjocnamgkkbiglidom

3. ColorPick Eyedropper

This tool is super useful and simple to use. Click the Eyedropper then click on any area on the website, it will show the exact color code used on that pixel. I always use it to check if my code applies the correct color, or to get the colors that I like from other websites, then save them in Coolors for future inspiration.

Link: https://chrome.google.com/webstore/detail/colorpick-eyedropper/ohcpnigalekghcmgcdcenkpelffpdolg

4. WhatFont

Similar to ColorPick Eyedropper, WhatFont is another handy tool used to check fonts applied on websites. One of the best ways to check your work or spy on the font family you love and save them down secretly :P

Link:https://chrome.google.com/webstore/detail/whatfont/jabopobgcpjmedljpbcaablpmlmfcogm

5. GoFullPage

GoFullPage is an extension that helps capturing full page screenshots of websites. Sometimes I use that to capture some screenshots and show my work progress with my team and clients when the UAT site is not yet ready.

Link: https://chrome.google.com/webstore/detail/gofullpage-full-page-scre/fdpohaocaechififmbbbbbknoalclacl

6. Awesome Screenshot and Screen Recorder

This extension is absolutely awesome! It allows you to capture screenshots of visible parts, full page or just the selected area of the website. You can even choose to capture the screenshot after delay, which is extremely useful when your website has a looping animation that you only want a screenshot with a complete state of the animation. It also allows you to do screen recording and share it with a link. Useful for showing work progress or getting resources for building a portfolio.

Link: https://chrome.google.com/webstore/detail/awesome-screenshot-and-sc/nlipoenfbbikpbjkfpfillcgkoblgpmj

7. Lorem Ipsum Generator

This helps you to generate Lorem Ipsum conveniently, then you don't need to google 'Lorem Ipsum Generator' again and again when you don't want to use Emmet in VS Code.

Link: https://chrome.google.com/webstore/detail/lorem-ipsum-generator/pglahbfamjiifnafcicdibiiabpakkkb

8. Image downloader - Imageye

Image downloader helps you download all images used on that webpage, so it's really helpful when your clients are too lazy / busy to export their image assets.

Link: https://chrome.google.com/webstore/detail/image-downloader-imageye/agionbommeaifngbhincahgmoflcikhm

9. JSON Viewer

Reading raw JSON data returned from RESTful APIs could be a test on your eyesight. That's why JSON Viewer exists to help you read the JSON data in a readable format. Plus, you can change it to dark mode to make your eyes happier.

Link: https://chrome.google.com/webstore/detail/json-viewer/gbmdgpbipfallnflgajpaliibnhdgobh

That's all and I hope you guys enjoyed the list. Do you have other useful Chrome extensions in mind? Leave a comment below and let us learn about the hidden gem :)