web-design.md

<img src="https://hackernoon.com/banner-image.png" alt="drawing" width="1012"/>

# [web-design](https://hackernoon.com/tagged/web-design)
### Let's learn about [Web Design](https://hackernoon.com/tagged/web-design) via these 473 free blog posts. They are ordered by HackerNoon reader engagement data. Visit the [/Learn](https://hackernoon.com/learn) or [LearnRepo.com](https://learnrepo.com) to find the most read blog posts about any technology.

It's a science. It's an art. It's never perfect.

### [1. Copying text to clipboard with JavaScript](https://hackernoon.com/copying-text-to-clipboard-with-javascript-df4d4988697f)
![](https://cdn.hackernoon.com/hn-images/1*f2eZ4JeqO2TMkuNwwVN4gg.png)
In this article, I will be explaining in depth how the copyToClipboard snippet from 30 seconds of code works. You can find the source code for it and a ton of other useful methods in the project’s repository.

### [2. How to Centre an Element in CSS with Tailwind](https://hackernoon.com/how-to-centre-an-element-in-css-with-tailwind)
![](https://cdn.hackernoon.com/images/5wpKgV75aONqkTJlafw2yQmK9yd2-9n93pxk.jpeg)
In this guide, we'll be covering how you can vertically and horizontally center an element or text with tailwind.

### [3. 10 things I learned making the fastest site in the world](https://hackernoon.com/10-things-i-learned-making-the-fastest-site-in-the-world-18a0e1cdf4a7)
![](https://cdn.hackernoon.com/images/story-image-default.jpg)
This post is about performance techniques, so I hope you won’t mind that the site in question is not quite finished.

### [4. Present Your Way to Success: Key Tips for Landing a Product Design Job](https://hackernoon.com/present-your-way-to-success-key-tips-for-landing-a-product-design-job)
![](https://cdn.hackernoon.com/images/NFIHgLylSjetW6KhhxUWX8oPpqn2-vp93llw.jpeg)
Every design job interview I’ve ever done or given has had one thing in common, and that’s the portfolio presentation. 


### [5. 11 things I learned reading the flexbox spec](https://hackernoon.com/11-things-i-learned-reading-the-flexbox-spec-5f0c799c776b)
![](https://hackernoon.com/hn-images/1*Y1xY5s_DFPRaZzTwpfb_WQ.png)
I’ve always found flexbox pretty easy to work with — a breath of fresh air after years of floating and clearfixing.

### [6. What is the difference between web design and web development?](https://hackernoon.com/what-is-the-difference-between-web-design-and-web-development-cc23171de85c)
![](https://cdn.hackernoon.com/images/6sWrtbrOmsOIbrWzrG88lYfV4ch1-oo035y2.png)
I remember in my early stages of learning <em>web development</em>, that I found myself confused multiple times about the differences between design and development. What are the roles of a web designer? What is involved in working with web design? Are web design and web development the same? Are they interchangeable terms with the same meaning?

### [7. For the love of God, please tell me what your company does](https://hackernoon.com/for-the-love-of-god-please-tell-me-what-your-company-does-c2f0b835ab92)
![](https://cdn.hackernoon.com/images/what-does-you-company-do-clexcrd0d000001s6d8amd7jj.png)
Meltwater is a <a href="https://hackernoon.com/tagged/company" target="_blank">company</a> with a simple product: A database of media contacts. These contacts are otherwise hard to find, as most reporters don’t want every “disruptive” startup out there calling them to beg for a story. Yet for a few thousand dollars a year, Meltwater will give you reporters’ emails and phone numbers — placing you one step closer to that elusive “Featured On:” banner.

### [8. 30 Next.js Interview Questions: Get Ready for Your Dream Job](https://hackernoon.com/30-nextjs-interview-questions-get-ready-for-your-dream-job)
![](https://cdn.hackernoon.com/images/UbCmlThZ9FNYM26PVdlVOybODPs1-vw93qxq.jpeg)
Ace Your Next.js Interview with these commonly asked Next.js interview questions and answers.

### [9. Top 10 Principles of Good Web Design](https://hackernoon.com/top-10-principles-of-good-web-design)
![](https://cdn.hackernoon.com/images/eXbjnJiJe2aOQkBtxJGZZ8FlvYW2-n693o3t.jpeg)
Have you heard about the best trending 10 principles of good web design? Worth reading the blog. Please comment your thoughts

### [10. 12 cool things you can do with GitHub](https://hackernoon.com/12-cool-things-you-can-do-with-github-f3e0424cf2f0)
![](https://cdn.hackernoon.com/images/story-image-default.jpg)
I can’t for the life of me think of an intro, so…

### [11. Invisible Barriers That Prevent You From Learning Web Development and How to Break Through Them](https://hackernoon.com/the-great-filter-of-web-development-and-how-to-break-through-it-9s27q3t0m)
![](https://cdn.hackernoon.com/images/uba73th8.jpg)
The hidden cost of frustrating, demotivating web development MOOCs!

### [12. The advantages of building your website from scratch](https://hackernoon.com/the-advantages-of-building-your-website-from-scratch-da5748a1baaf)
![](https://cdn.hackernoon.com/images/6sWrtbrOmsOIbrWzrG88lYfV4ch1-wg03bnh.jpeg)
Most of the people I talk with regarding the product or website that I am developing, tend to ask if I’m using any frameworks or libraries. When I say none, they usually look very surprised and ask, “Why!? It’s far easier to use a library, and it saves a lot of development time”. They make me question myself again and again, but every time I confirm that I made the right decision. Each and every single line of code that makes my product alive is written by me, by my own way of thinking, and my own creative ideas. It may not be perfect, maybe even off the web guidelines, but this is how you learn!

### [13. How To Create Box Element Using CSS Only](https://hackernoon.com/how-to-create-box-element-using-css-only-7mut3ytc)
![](https://cdn.hackernoon.com/images/gm1i43778.jpg)
Every beginner should first start with the basics. In case of CSS, the basics are learning the box model. Before proceeding with learning any other CSS concepts, this is the one you should master first!

### [14. How to Build a Masonry Layout Using CSS](https://hackernoon.com/how-to-build-a-masonry-layout-using-css)
![](https://cdn.hackernoon.com/images/ugoTV1vwcgR4mN8MMDUUN4vt6p02-2d93qjj.jpeg)
Masonry layout is when items of varying sizes are laid out so there aren't any uneven gaps. 

### [15. Front-End Developers And Designers: Bridging The Void](https://hackernoon.com/front-end-developers-and-designers-bridging-the-void-311w34c7)
![](https://cdn.hackernoon.com/images/MsR1S76Pr8XibciqwaeZRXTFpAz1-ak3l36ef.jpeg)
I’ve come quite a long way as a web developer and happened to work in different teams and with different designers. Regardless of the number of people and type 

### [16. How to Render 3D Model in a React JS Application](https://hackernoon.com/how-to-render-3d-model-in-a-react-js-application)
![](https://cdn.hackernoon.com/images/541r0RExUOQ3nFAQs7oJuST9Axf2-t7a3vtn.jpeg)
In this article we are going to use Three.js to render an iPhone model in a React application. We will use react-three/fiber and react-three/drei.

### [17. Build a JavaScript Loan Calculator With HTML & CSS](https://hackernoon.com/build-a-javascript-loan-calculator-with-html-and-css)
![](https://cdn.hackernoon.com/images/awSK9UBJcfNNXiYmqyT1Ihlw5Hr2-sd139ys.jpeg)


### [18. Using the typeof Operator in TypeScript](https://hackernoon.com/using-the-typeof-operator-in-typescript)
![](https://cdn.hackernoon.com/images/da7H4NzOhAdhje46xkTgaLorF5m2-cw930ye.jpeg)
Let's look at how typeof works in TypeScript.

### [19. A Beginner's Guide to HTML, CSS, and JavaScript](https://hackernoon.com/a-beginners-guide-to-html-css-and-javascript)
![](https://cdn.hackernoon.com/images/70VgeliRxkXfAA1KP7trNJU4c1m1-ma93rje.jpeg)
Unlock Your Web Development Potential with this Beginner's Guide to HTML, CSS, and JavaScript! Learn the Fundamentals and Create Stunning Websites.

### [20. How To Embed Single Photos From Google Photos on Your Website and Notion Page](https://hackernoon.com/how-to-embed-single-photos-from-google-photos-on-your-website-and-notion-page)
![](https://cdn.hackernoon.com/images/mN6XJEu2bsdmoI2uIPpUJbLriVk1-8893pyv.jpeg)
Learn how to embed photos from Google Photos on your website, Notion page, email message, or blog using Labnol's embed link generator or the manual route.

### [21. How to use CodePen Code Inside Your Webpage](https://hackernoon.com/how-to-use-codepen-code-inside-your-webpage-eu413wao)
![](https://cdn.hackernoon.com/images/zmhj30xu.jpg)
With the world rapidly evolving by the minute, staying on top of the in-demand skills’ curve is a voluminous task. Web Development is one such skill that is almost essential to the modern developer. With a market size of about $40Bn in 2020, the need and opportunity for quality web developers are ever so evident.

### [22. A Call-to-Action in pure HTML and CSS](https://hackernoon.com/a-call-to-action-in-pure-html-and-css)
![](https://cdn.hackernoon.com/images/M6G22rxQzLTqx37eMqcSVG1Ybvj2-ro193o1u.jpeg)
Use this boiler plate template to design a call to action in any website using HTML and a little bit of CSS

### [23. Using ChatGPT to Code an Entire Portfolio Website](https://hackernoon.com/using-chatgpt-to-code-an-entire-portfolio-website)
![](https://cdn.hackernoon.com/images/UPj89hwu6vfiCaqSkcDwX8zhXPO2-ugm2h07.png)
Using ChatGPT to create a custom portfolio website in record time! I discuss ChatGPT's strengths, weaknesses, and tip and tricks to use while coding. 

### [24. Getting Started Building a Svelte App with SvelteKit](https://hackernoon.com/getting-started-building-a-svelte-app-with-sveltekit)
![](https://cdn.hackernoon.com/images/da7H4NzOhAdhje46xkTgaLorF5m2-i593y2v.jpeg)


### [25. How to use Publish-Subscribe Pattern with JavaScript](https://hackernoon.com/how-to-use-publish-subscribe-pattern-with-javascript-t9123ui0)
![](https://cdn.hackernoon.com/drafts/4gbru3vb3.png)
The result of the next pen shows the case where I'll use the Publish/Subscribe pattern. Every time you click on the Event button a square is added and  a message with the number of squares is displayed.

### [26. Tailwindcss? I'll Pass](https://hackernoon.com/tailwindcss-ill-pass)
![](https://cdn.hackernoon.com/images/cGfg9TlH1bgGje7eIzVSvxyMCMn2-uv92ler.jpeg)
Tailwindcss is breaking the frontier of CSS libraries and frameworks. Bootstrap is lagging behind and Vanilla CSS is stationary. Is Tailwind CSS worth it?

### [27. 8 Games You Can Play Right In This Article Built With HTML, CSS, and JS ](https://hackernoon.com/8-games-you-can-play-right-in-this-article-built-with-html-css-and-js)
![](https://cdn.hackernoon.com/images/gaZTNviyRwbJIkQm85R8IxM2vOY2-wk83ytd.jpeg)
In this article, I have compiled some of my favorite games built only with HTML, CSS, and JavaScript so that you can get inspiration for your future creations.

### [28. When and Where to Use REM and EM Units in Web Design?](https://hackernoon.com/when-and-where-to-use-rem-and-em-units-in-web-design)
![](https://cdn.hackernoon.com/images/n03fti36w1PkUjekluYgfGmOG782-un93r5g.jpeg)
Get clarity on using REM or EM in web design. This guide explains the differences and helps you choose the best unit for your project's needs.

### [29. A Quick CSS Guide: Crafting Neon Buttons with Glow Effects & Animations](https://hackernoon.com/a-quick-css-guide-crafting-neon-buttons-with-glow-effects-and-animations)
![](https://cdn.hackernoon.com/images/TrD4DzyJu6g677bJSu6xzJ3TxA12-jc83yur.jpeg)
Learn how to create stunning neon buttons in CSS—glow effects, shadows, and animations unveiled for captivating web design.

### [30. The Factory Method pattern in TypeScript](https://hackernoon.com/the-factory-method-pattern-in-typescript)
![](https://cdn.hackernoon.com/images/xJY7Mil1Iaawpy4gQe2JjaeojZY2-tca3p2x.jpeg)
The Factory Method pattern is a design pattern that is used to create objects without specifying the exact class of object that will be created.

### [31. Disabling My Favicon: How and Why](https://hackernoon.com/disabling-my-favicon-how-and-why)
![](https://cdn.hackernoon.com/images/LLNXiPKIsZM5IWTNJfmlBf6EZjZ2-n093du5.jpeg)
It turns out that disabling a Favicon is surprisingly easy and eve a good idea when you don't really want to deal with the hassle of another part of a website

### [32. How To Design a Tribute Page with Basic HTML5 & CSS3](https://hackernoon.com/how-to-design-a-tribute-page-with-basic-html5-and-css3-287v33mk)
![](https://hackernoon.com/images/e178Xecok0TlGP5gaTutNkU1thY2-f61s337u.jpeg)
Let us discuss (or understand) the components of the Tribute page that I built with HTML5 & CSS3 in a step-by-step guide.

### [33. How To Remember Design Patterns](https://hackernoon.com/how-to-remember-design-patterns-ap1z35sl)
![](https://cdn.hackernoon.com/images/GChBEMCtPSd5KyoYNX7LhFVw1cj2-8ccv34ws.jpeg)
Here's a list of some of the book's design patterns, their definition, and what made me remember them. Each one of those principles solves a particular problem.

### [34. Here's What You'd Typically See In A Full Stack Developer Job Description](https://hackernoon.com/heres-what-youd-typically-see-in-a-full-stack-developer-job-description-593b33vu)
![](https://cdn.hackernoon.com/images/iFi5tolUgxW81No4JJjbMu7c37s1-mm1h832i8.jpeg)
If a career as a full-stack developer caught your eye, you’re not alone. It’s one of the most sought-after jobs in the world and many people interested in tech 

### [35. 7 React Admin Dashboard Templates For Your Next Project](https://hackernoon.com/7-react-admin-dashboard-templates-for-your-next-project-gn3x3yse)
![](https://cdn.hackernoon.com/images/7223j3kwu.jpg)
Developing an admin area for your React web application can be very time-consuming. And it is just as important as designing all of the front-end pages. Both admin area of your web-application and the pages themselves must be pixel-perfect, fully responsive and have mobile-first and user-friendly web design. In this article, I listed some of the best ReactJS admin dashboard templates that can speed up your development and save you a lot of time and money, eliminating the costs of creating a web application from scratch.

### [36. Add Event Listener to Multiple Elements in Javascript ](https://hackernoon.com/add-event-listener-to-multiple-elements-in-javascript)
![](https://cdn.hackernoon.com/images/NpN8WH8v6CfA6j7dKAzuoiE5Lit2-r493oaz.jpeg)
If you've ever worked in vanilla Javascript, you might be familiar with adding event listeners to elements using the following formula: 

### [37. Lessons I’ve Learned as a UX/UI Designer in a Failed Startup](https://hackernoon.com/lessons-ive-learned-as-a-uxui-designer-in-a-failed-startup)
![](https://cdn.hackernoon.com/images/5V7lzwYV5bT0V6BNwevrrjRSCFD3-bg736x0.png)
Lessons from a failed website builder startup fro UI/UX designers and developers

### [38. Pixels vs REM vs EM: Breaking down CSS Sizes](https://hackernoon.com/pixels-vs-rem-vs-em-breaking-down-css-sizes)
![](https://cdn.hackernoon.com/images/KDUtb6NJFHTCTCEFxifRpfv9X1z2-0192h1a.png)
Should you use px or rem or em? In this post we'll try to get the answer of this question and we'll see which unit to use when

### [39. Using CSS to Create a GIF Animation](https://hackernoon.com/using-css-to-create-a-gif-animation)
![](https://cdn.hackernoon.com/images/kOGh8yb1TiVOy67Rvji043cXEXj1-8w93rur.gif.webp)
Using CSS animation to generate the content required for an animated GIF

### [40. 8 Tips to Develop a Robust Website Design for Your Business](https://hackernoon.com/8-tips-to-develop-a-robust-website-design-for-your-business-g8a1j31yu)
![](https://cdn.hackernoon.com/drafts/jqa731oq.png)
Website design has utmost importance because it combines everything on a web page and collectively uses all the elements on the website to achieve one objective. 

### [41. 4 Ways to Add Icons from Figma to Your Website](https://hackernoon.com/4-ways-to-add-icons-from-figma-to-your-website)
![](https://cdn.hackernoon.com/images/MsR1S76Pr8XibciqwaeZRXTFpAz1-iv9333x.jpeg)
Discover the most effective methods for adding icons from Figma to your website with detailed explanations and practical examples. 

### [42. Use Twig + Timber To Build Better WordPress Themes](https://hackernoon.com/build-cleaner-wordpress-themes-with-twig-timber-web-development)
![](https://cdn.hackernoon.com/images/IO69gv8W6RUFb2xGQu7nv0kowxQ2-2e93721.jpeg)
Learn about Twig and Timber web development, and how the Hounder team uses these tools to create stunning custom themes in word press.

### [43. Mastering Object Snapping in Fabric.js: Introducing the SnappyRect Class](https://hackernoon.com/mastering-object-snapping-in-fabricjs-introducing-the-snappyrect-class)
![](https://cdn.hackernoon.com/images/eEEgu5i7oPT43ELXf3sIwzEfwUF3-tja3pbi.jpeg)
Explore the power of object snapping in Fabric.js with the SnappyRect class. This code snippet showcases how to create custom guides and align objects precisely

### [44. Top 10 Online Marketplaces to Sell Your Designs](https://hackernoon.com/top-10-online-marketplaces-to-sell-your-designs-991732xx)
![](https://cdn.hackernoon.com/images/yc13w324l.jpg)
Being a designer or web developer is a fabulous possibility to start working as a freelancer. I will bet anything you’ve been reflecting on it thousands of times, that is why you’re here. Don’t drain your energy on infinite searching of the most reliable and beneficial online marketplace to sell your designs, artworks or sell website templates. 

### [45. How To Build a Dropdown Menu With HTML, CSS and JavaScript](https://hackernoon.com/how-to-build-a-dropdown-menu-with-html-css-and-javascript)
![](https://cdn.hackernoon.com/images/a-laptop-displaying-a-dropdown-menu-on-its-screen-ui8fxkqqkooosucg91fdf9er.png)
Learn how to build a fully responsive dropdown menu using HTML, CSS, and JavaScript with this straightforward guide. 

### [46. Learn How to Stop Tracking Files After Adding It to .gitignore in 4 Steps](https://hackernoon.com/learn-how-to-stop-tracking-files-after-adding-it-to-gitignore-in-4-steps)
![](https://cdn.hackernoon.com/images/NpN8WH8v6CfA6j7dKAzuoiE5Lit2-2ug3kpl.jpeg)
When a file is tracked, adding it to .gitignore will not cause it to go untracked. Learn how to untrack a file that you have recently added to .gitignore.

### [47. How to Build a Design System](https://hackernoon.com/how-to-build-a-design-system-8574fbe93734)
![](https://cdn.hackernoon.com/drafts/ckq3xcs.png)
Semantics, syntax, accessibility, tone, and context that provide a base for a shared design language — benefits, drawbacks, and examples.

### [48. Introducing Tailwind CSS: Pros and Cons of Tailwind](https://hackernoon.com/introducing-tailwind-css-pros-and-cons-of-tailwind-hd2k3zt2)
![](https://firebasestorage.googleapis.com/v0/b/hackernoon-app.appspot.com/o/images%2FNDIHgstQxNhYNQKgsXo6NLuPg9m1-wm2d3xqe.jpeg?alt=media&token=81bddab1-f820-4d74-8b7a-67978082e561)
As you might notice, Tailwind CSS has become popular among the developer community. I'm a big Tailwind fan and recently, I've built several React projects with Tailwind CSS. In this article, I'll describe why Tailwind CSS has brought so much value to the front-end development community.

### [49. Dates in JavaScript are Broken. Who Shall Fix them?](https://hackernoon.com/dates-in-javascript-are-broken-who-shall-fix-them)
![](https://cdn.hackernoon.com/images/da7H4NzOhAdhje46xkTgaLorF5m2-mf93yrz.jpeg)
The Javascript Date constructor is known to have a lot of bugs and issues. Let's look at some of its major flaws so you can avoid them.

### [50. 10 Tools to Create Illustration in 2020 for Graphic Designers & Art Lovers](https://hackernoon.com/10-tools-to-create-illustration-in-2020-for-graphic-designers-and-art-lovers-kx3s3x4g)
![](https://cdn.hackernoon.com/drafts/vy2wg33gm.png)
Illustration by Nahuel Bardi

### [51. Create a Gradient Border With TailwindCSS and React](https://hackernoon.com/create-a-gradient-border-blog-postcard-using-tailwind-css-and-nextjs-a-how-to-guide)
![](https://cdn.hackernoon.com/images/Y0kXG115Z7VorP4rguIGxwn3FoD3-fz2376t.jpeg)
This blog post is a small tutorial in which I show you how you can create a gradient border blog card using Tailwind CSS.

### [52. Everything You Need to Know About Promise.all() in JavaScript](https://hackernoon.com/everything-you-need-to-know-about-promiseall-in-javascript)
![](https://cdn.hackernoon.com/images/NpN8WH8v6CfA6j7dKAzuoiE5Lit2-e7b3srl.jpeg)
The Promise.all method in Javascript is a function that accepts many promises and then does something only after they have all been settled. 

### [53. How the eBay Homepage has Changed Over the Past 21 Years](https://hackernoon.com/how-the-ebay-homepage-has-changed-over-the-past-21-years-h4g343m)
![](https://cdn.hackernoon.com/images/t8YfmPLljONPuePCR5fPH7ndZRn2-c928348n.jpeg)
eBay is a multinational e-commerce platform. It facilitates consumer to consumer and business to consumer sales through its website. eBay was founded in 1995 by Pierre Omidyar. 

### [54. 8 Responsive Web Design Best Practices to Know in 2021](https://hackernoon.com/8-responsive-web-design-best-practices-to-know-in-2021-p38x33p1)
![](https://cdn.hackernoon.com/images/RX8xMnl8Q5fsB6oGTIzeeX6BLfh1-nsfu32t6.jpeg)
I still struggle with making websites responsive, but here are 8 responsive web design best practices helping me master this element of web development.

### [55. How to Make Buttons Stand Out with CSS](https://hackernoon.com/how-to-make-buttons-stand-out-with-css)
![](https://cdn.hackernoon.com/images/SfLKUONj1dNQfd8Bo4oz4aGegv73-s593fvz.jpeg)
The first thing you’ll notice when you add a button to your website is that you’ve taken a trip back in time to 1999. The default button style is very old-fashioned and I can’t think of a use case where you’d want to keep it as it is. The good news is that there are loads of CSS styles that can make your buttons pop.

### [56. Layout Patterns: How to Unite Layout Artists and Designers](https://hackernoon.com/layout-patterns-how-to-unite-layout-artists-and-designers)
![](https://cdn.hackernoon.com/images/MsR1S76Pr8XibciqwaeZRXTFpAz1-jv93pin.jpeg)
This article will help improve the interaction between designers and layout artists to minimize errors and increase productivity. Do not take the article as the only correct approach.

### [57. 5 Fun Ways Designers Can Help Product Teams Be More User-centric](https://hackernoon.com/5-fun-ways-designers-can-help-product-teams-be-more-user-centric)
![](https://cdn.hackernoon.com/images/P7L5SBc8GeVuDnSZSzTHWx8Te0J2-7093lhx.jpeg)
Product designers and researchers are the voices of the users. Check out the 5 fun and inclusive ways to help product teams build more user empathy. 

### [58. Reasons Behind Creating A Website with Black Background](https://hackernoon.com/reasons-behind-creating-a-website-with-black-background-e1d23yd4)
![](https://cdn.hackernoon.com/images/2m2ky3ywo.jpg)
Black has always been—if not the most popular design color—the color which designers talk about the most. It is sophisticated, energetic, mysterious, elegant, powerful, stylish, and the complete opposite of the default white.

### [59. The Best Way to Visualize Someone's Credit History](https://hackernoon.com/the-best-way-to-visualize-someones-credit-history)
![](https://cdn.hackernoon.com/images/vxVSPGKwioacsSd1Iw5XdYEklLD3-whf2wnw.png)
This is the best way to innovate credit history visualization for fintech applications.

### [60. Exploring the Trending Web Designs of 2023](https://hackernoon.com/exploring-the-trending-web-designs-of-2023)
![](https://cdn.hackernoon.com/images/NFaq5GaUOJRPtoafmm7Shx9r2933-s693swn.jpeg)
Explore 2023's web design trends, from minimalism to 3D elements. Stay up to date with the latest innovations shaping web design.






### [61. Why SaaS Pricing Pages Fail ](https://hackernoon.com/why-saas-pricing-pages-fail)
![](https://cdn.hackernoon.com/images/haIreD2bRcV2aVB90KGUiGgLPFJ3-6502v3y.png)
A feature on the table and then locking it behind ‘upgrade to unlock’ two days later is a hostage situation.

### [62. Web Design Principles That Will Take Centre Stage in 2023](https://hackernoon.com/web-design-principles-that-will-take-centre-stage-in-2023)
![](https://cdn.hackernoon.com/images/sQ92Mpf2ePeaaNhuqIIynonruY72-5da3oil.jpeg)
A cursory look at the web design principles will become the norm in 2023. 

### [63. TypeScript Interfaces and Types: A Comparison](https://hackernoon.com/typescript-interfaces-and-types-a-comparison)
![](https://cdn.hackernoon.com/images/NpN8WH8v6CfA6j7dKAzuoiE5Lit2-xk93pij.jpeg)
Let's take a look at how Typescript Interfaces and types differ.

### [64. 9 Web Apps You Won't Believe Were Made with Webflow](https://hackernoon.com/9-web-apps-you-wont-believe-were-made-with-webflow)
![](https://cdn.hackernoon.com/images/EQE4btnh5YZLc9ybRlVhg3Xthkk2-wq93aoj.jpeg)
9 web apps made with Webflow is a no-code tool suitable not only for classic websites but also for advanced web apps.

### [65. How To Make A Great Looking Website Even If You Can't Design](https://hackernoon.com/how-to-make-a-great-looking-website-even-if-you-cant-design)
![](https://cdn.hackernoon.com/images/MUo6MihNAVUIcUvRBbcToKZ7MKh1-e793mlp.jpeg)
Making websites work and making websites look great are two different skills. Even so, here are some basic guidelines that ensure that your website looks great.

### [66. 5+ Web Development Subscriptions for Your Next Project](https://hackernoon.com/web-development-subscriptions-for-your-next-project-qe5ah31zw)
![](https://cdn.hackernoon.com/drafts/70r301i.png)
Just in case something is missing on this list, please let me know in the comments section.  

### [67. What is a Color Picker Tool and How Does it Work?](https://hackernoon.com/what-is-a-color-picker-tool-and-how-does-it-work)
![](https://cdn.hackernoon.com/images/O6cGdKVM77VtTdgZ9yACmWzxild2-1o92g7d.jpeg)
A color picker tool is a software application or online tool that allows users to select colors from a digital display or image.

### [68. Efficient Server Side Pagination using Mongodb](https://hackernoon.com/efficient-server-side-pagination-using-mongodb)
![](https://cdn.hackernoon.com/images/XRseoEyY6wRnwUzFmOH8Zbem5vU2-zo93lzr.jpeg)
How to implement server-side pagination in MongoDB using aggregation pipeline instead of client-side pagination and why you should do it server-side instead.

### [69. How the YouTube Homepage has Changed in the Past 15 Years](https://hackernoon.com/how-the-youtube-homepage-has-changed-in-the-past-15-years-9cd346o)
![](https://cdn.hackernoon.com/images/t8YfmPLljONPuePCR5fPH7ndZRn2-6k15341m.png)
YouTube is an online video-sharing platform. It was created in February 2005 by Chad Hurley, Steve Chen, and Jawed Karim. In November 2006, Google bought the platform for US$1.65 Billion. The platform allows users to upload, view, share, rate, comment on videos, report, add to playlists, and subscribe to other users. 

### [70. Stop “Running” your Design Sprints: Prioritizing Results Over Process](https://hackernoon.com/stop-running-your-design-sprints-prioritizing-results-over-process)
![](https://cdn.hackernoon.com/images/P7L5SBc8GeVuDnSZSzTHWx8Te0J2-5cl3l13.jpeg)
5 tips on how to run result-focused design sprints from a designer at Meta & Google. Take your design sprints to another level. 

### [71. Enhance Your Website's User Experience with BlurHash Image Placeholders](https://hackernoon.com/enhance-your-websites-user-experience-with-blurhash-image-placeholders)
![](https://cdn.hackernoon.com/images/qEyR6rrtSuQYAumVgjwd7lxvi9L2-98d3pb9.jpeg)
In this article, we’ll discuss what BlurHash is and how to apply it to your images using imgix.

### [72. How to Use Default Parameters in TypeScript](https://hackernoon.com/how-to-use-default-parameters-in-typescript)
![](https://cdn.hackernoon.com/images/NpN8WH8v6CfA6j7dKAzuoiE5Lit2-z0a3ojj.jpeg)
When we talk about default parameters, we are talking about giving arguments values that should be used, if that argument is undefined.

### [73. AVIF Is the Next-Gen Image Format You Will Hear a Lot More About](https://hackernoon.com/avif-is-the-next-gen-image-format-youre-probably-gonna-hear-a-lot-more-about)
![](https://cdn.hackernoon.com/images/qEyR6rrtSuQYAumVgjwd7lxvi9L2-fee354i.jpeg)
The AVIF Format is the next-gen image format based on the AV1 video encoding format, that reduces file size, while improving #CoreWebVitals. Learn how.

### [74. TemplatesKart: Is this the Best Chakra UI Component Library?](https://hackernoon.com/templateskart-is-this-the-best-chakra-ui-component-library)
![](https://cdn.hackernoon.com/images/bmUxO1baVGfJI3QTDkGnShmlyfc2-zsf3gpw.png)
Responsive chakra ui components, templates and projects. Production-ready hand crafted chakra Components and templates. Deliver your projects faster.

### [75. 12 Animated JavaScript UI Design Components to Inspire Your Next Web Design Project  🎨✨](https://hackernoon.com/12-animated-javascript-ui-design-components-to-inspire-your-next-web-design-project)
![](https://cdn.hackernoon.com/images/da7H4NzOhAdhje46xkTgaLorF5m2-aj93ztw.jpeg)


### [76. How I Built an Online Radio with Soundcloud and NextJS](https://hackernoon.com/my-online-radio-reached-100k-plays-in-2-months-heres-how-i-created-it)
![](https://cdn.hackernoon.com/images/gaZTNviyRwbJIkQm85R8IxM2vOY2-kf03gml.jpeg)


### [77. How to Navigate Between Views in Vue with Vue Router](https://hackernoon.com/how-to-navigate-between-views-in-vue-with-vue-router)
![](https://cdn.hackernoon.com/images/NpN8WH8v6CfA6j7dKAzuoiE5Lit2-nk93pmb.jpeg)
After creating an application in Vue, you'll often want it to consist of multiple views or pages. 

### [78. The Most Amazing Bootstrap 5 CheatSheet💥](https://hackernoon.com/the-most-amazing-bootstrap-5-cheat-sheet-uf1s33rh)
![](https://hackernoon.com/images/bFFEe4dIUoXgbouiLfgW9PI9b8q1-vf7n33yx.jpeg)
The Bootstrap 5 Cheat Sheet is an interactive list of Bootstrap 5 classes, variables, and mixins. This helps upgrade your Bootstrap 4 project.

### [79. Why IDs Can be Problematic in CSS ](https://hackernoon.com/why-ids-can-be-problematic-in-css-gt103uh6)
![](https://firebasestorage.googleapis.com/v0/b/hackernoon-app.appspot.com/o/images%2FAKlFGRugPAVEbycNZrKcr9JVbe93-8k4q138k.png?alt=media&token=e1c2df27-9748-47d7-aad8-b776cbf8298a)
OUTLINE

### [80. Web Development Trends 2021 For Startups ](https://hackernoon.com/web-development-trends-2020-for-startups-yw2k3y2y)
![](https://images.unsplash.com/photo-1522542550221-31fd19575a2d?ixlib=rb-1.2.1&q=80&fm=jpg&crop=entropy&cs=tinysrgb&w=1080&fit=max&ixid=eyJhcHBfaWQiOjEwMDk2Mn0)
A website is a doorway to success. For business owners, web design is really important. It shows to everyone in the world what your business is all about.

### [81. 10 Static Site Generators to Watch in 2020](https://hackernoon.com/10-static-site-generators-to-watch-in-2020-wt373yyi)
![](https://cdn.hackernoon.com/drafts/21sb30xn.png)
Using a Headless CMS to generate and handle static sites has gained popularity, especially because many of the constraints that made it difficult to develop a static site don’t exist anymore.

### [82. 20+ Bootstrap 4 Template for 2020](https://hackernoon.com/20-bootstrap-4-template-for-2020-s14h3v3y)
![](https://cdn.hackernoon.com/images/86u3vf6.jpg)
Bootstrap is an open-source platform and most popular front-end tool for web designing and web development. It’s built using HTML, CSS and JavaScript. Using bootstrap, it is easy to create a responsive and highly customized website. For developing you don’t need to work from scratch. Use the ready-to-use template and save the cost and time of developing website. There are many free and paid templates available in the market to create a website.

### [83. 10 React Admin Dashboard Templates For Your Next Website](https://hackernoon.com/10-react-admin-dashboard-templates-for-your-next-website-bb4a3yi7)
![](https://cdn.hackernoon.com/images/q81nz3yf2.jpg)
React is one of the most popular tools found in the web development library, but like anything you need to learn how to use it properly. React is used with native. The main purpose is to bring the power to react to native mobile app development.

### [84. Understanding innerHTML in Javascript](https://hackernoon.com/understanding-innerhtml-in-javascript)
![](https://cdn.hackernoon.com/images/NpN8WH8v6CfA6j7dKAzuoiE5Lit2-5ba3s3i.jpeg)
In Javascript, we have lots of different ways to manipulate DOM elements. Here, we take a look at one of the simplest ways to do so. 

### [85. 5 Fundamental Steps to Deploying a Website](https://hackernoon.com/5-fundamental-steps-to-deploying-a-website)
![](https://cdn.hackernoon.com/images/18wW9mvQjMPFzh4aj7WWpFyQxOd2-upa3lqu.jpeg)
5 easy steps to deploying a website from getting it properly hosted, to setting up its DNS and finally completing the process by having the infrastructure set 

### [86. These 12 Open Source Projects Will Leave You Amazed](https://hackernoon.com/these-12-open-source-projects-will-leave-you-amazed)
![](https://cdn.hackernoon.com/images/gaZTNviyRwbJIkQm85R8IxM2vOY2-ln030ct.jpeg)
Explore 12 open-source projects to boost performance, security, and productivity for developers.

### [87. Why GameDev Designers Are the Swiss Army Knives of Game Development](https://hackernoon.com/why-gamedev-designers-are-the-swiss-army-knives-of-game-development)
![](https://cdn.hackernoon.com/images/eQHzh6rz7ETBHLjs0KzCl1Dooqp2-uj033jr.webp)
In this article, I will delve into the essential skills required for GameDev and illustrate each with examples from my own experience.

### [88. How to Setup a Contact Form to Your Ghost Blog](https://hackernoon.com/how-to-setup-a-contact-form-to-your-ghost-blog-gh6r3y3z)
![](https://cdn.hackernoon.com/images/NpclsXHLfPf1qjBCjmjlbDg2CFo1-pl82rsp.jpeg)
Ghost is a free and open source blogging platform written in JavaScript and it powers an incredible range of websites; from individual bloggers who are just getting started, to large teams of writers and editors at some of the largest organisations in the world. Currently more than 2 million websites running on Ghost including Getform's Blog that you are currently reading!

### [89. How to Transport Your Components Anywhere With React Portals](https://hackernoon.com/how-to-transport-your-components-anywhere-with-react-portals)
![](https://cdn.hackernoon.com/images/NpN8WH8v6CfA6j7dKAzuoiE5Lit2-mb93pph.jpeg)
To solve this problem, we can teleport the modal out of its own component and into another part of our template using createPortal.

### [90. Everything Wrong With Web Design in GameDev](https://hackernoon.com/everything-wrong-with-web-design-in-gamedev)
![](https://cdn.hackernoon.com/images/7VWVFGxdS2Ms6XA6kt8V5s2N7lQ2-ddr3eyp.png)
Web design in the gaming industry lags far behind other fields.

### [91. Adobe Pigs Out (Again)](https://hackernoon.com/adobe-pigs-out-again)
![](https://cdn.hackernoon.com/images/N0ENUd29UdNJCFcl7GnmZHdk2fA2-m1b3v3k.jpeg)
Adobe fattens up by acquiring Figma, causing disgust and indignation amongst web designers and developers everywhere.

### [92. Future Javascript: Types May Finally be Coming to Javascript](https://hackernoon.com/future-javascript-types-may-finally-be-coming-to-javascript)
![](https://cdn.hackernoon.com/images/NpN8WH8v6CfA6j7dKAzuoiE5Lit2-we93jnd.jpeg)
The type annotations specification specifies how Javascript will, in the future, implement types. Let's look at how types in Javascript will work.

### [93. Create a Morphing 3D Sphere in Javascript with Three.js](https://hackernoon.com/create-a-morphing-3d-sphere-in-javascript-with-threejs)
![](https://cdn.hackernoon.com/images/NpN8WH8v6CfA6j7dKAzuoiE5Lit2-7p93osk.jpeg)
In this guide, I  create a morphing sphere with a cool, wireframe background.

### [94. Add Depth to Your Web Design Using CSS Shadow Generators](https://hackernoon.com/add-depth-to-your-web-design-using-css-shadow-generators)
![](https://cdn.hackernoon.com/images/da7H4NzOhAdhje46xkTgaLorF5m2-oh93zwx.jpeg)


### [95. Boost Your Productivity With These 18 Developer Tools 🚀🔥](https://hackernoon.com/boost-your-productivity-with-these-18-developer-tools)
![](https://cdn.hackernoon.com/images/gaZTNviyRwbJIkQm85R8IxM2vOY2-r303y5y.jpeg)
In this article, I've curated a comprehensive list of some of my favorite developer tools among various domains designed to improve your workflow.

### [96. Building a Web Server with Python and Flask](https://hackernoon.com/building-a-web-server-with-python-and-flask)
![](https://cdn.hackernoon.com/images/iBQ4QtIEHPVhZRHEtIPcYdGgqtM2-yn534y9.jpeg)
Learn to build your own web server with Python and the lightweight Flask framework. Its a beginner-friendly guide with step-by-step instructions

### [97. How I Got My Website To Load in 1 Second](https://hackernoon.com/how-i-got-my-website-to-load-in-1-second-646h32m4)
![](https://cdn.hackernoon.com/drafts/vctj3yqc.png)
The front page of JeremyMorgan.com loads less than a second, most of the time, from various parts of the world.

### [98. Why You Should Convert Your Images To WebP](https://hackernoon.com/why-you-should-convert-your-images-to-webp)
![](https://cdn.hackernoon.com/images/NpN8WH8v6CfA6j7dKAzuoiE5Lit2-e0c3oin.jpeg)
WebP lets you compress your images as efficiently as possible, reducing the size of your web page while preserving quality. You can convert from the terminal

### [99. Fictitious Works Disclaimer Notice: If You Have to Use One, Use This One](https://hackernoon.com/fictitious-works-disclaimer-notice-if-you-have-to-use-one-use-this-one)
![](https://cdn.hackernoon.com/images/kOGh8yb1TiVOy67Rvji043cXEXj1-lp93r3y.jpeg)
A “Works of Fiction Disclaimer” that embodies the concept of having some entertainment value in addition to its desired “suitability to purpose”:

### [100. Sneaky UX Tricks That'll Make Your Users Fall in Love](https://hackernoon.com/sneaky-ux-tricks-thatll-make-your-users-fall-in-love)
![](https://cdn.hackernoon.com/images/5V7lzwYV5bT0V6BNwevrrjRSCFD3-t7036ki.jpeg)
Top UX manipulations (principles) to seduce your users. Easy steps to improve any interface.

### [101. Introducing The Popover API: Elevating Web UI Interactivity with JavaScript](https://hackernoon.com/introducing-the-popover-api-elevating-web-ui-interactivity-with-javascript)
![](https://cdn.hackernoon.com/images/NyXneRHZfvbzsYF1wiwKbsZnJLe2-6e934e6.jpeg)
Learn to enhance web interfaces with the versatile Popover API and JavaScript, optimizing user experience and interactivity.

### [102. Why Good Products Feel Broken](https://hackernoon.com/why-good-products-feel-broken)
![](https://cdn.hackernoon.com/images/haIreD2bRcV2aVB90KGUiGgLPFJ3-bg02xh7.jpeg)
Lost $240K to a slower competitor. Users said our 400ms queries 'felt too fast to be real.' Started adding artificial delays on purpose. Trust isn't speed.

### [103. 6 Tips to Stay Within Budget While Designing a Website](https://hackernoon.com/6-tips-to-stay-within-budget-while-designing-a-website)
![](https://cdn.hackernoon.com/images/Q6vQAZdVuOfn659yMKmiVw76yzw2-s293jw3.jpeg)
How to get prepared before designing the website? Here are 6 easy tips we have benefited from.

### [104. Modern Front End Architecture](https://hackernoon.com/modern-front-end-architecture-iyx3ur5)
![](https://firebasestorage.googleapis.com/v0/b/hackernoon-app.appspot.com/o/images%2FIC3eMdcIZ2O9W7Hr7CVPEzvZPiC2-yb1l3yzv.jpeg?alt=media&token=5442d733-d221-4ac9-a327-cf34fed9e3c0)
When you join the Front End world or you have a lot of years on this side, some questions appear for example: What is the best way to build the front end? How can I keep a front end cleaned and organized? Should I add unit testing? That's difficult to answer but I think I can share some good tips and articles about the Front End side so, let's go!!!

### [105. How to Improve Your Workflow by 10X: 17 Essential Apps](https://hackernoon.com/how-to-improve-your-workflow-by-10x-17-essential-apps)
![](https://cdn.hackernoon.com/images/gaZTNviyRwbJIkQm85R8IxM2vOY2-ek83ybh.jpeg)
I've curated a list of 17 top-tier tools from graphic editor suites and wireframing tools to scheduling apps, collaborative platforms, etc.

### [106. How Instagram's Homepage has Changed Over the Past 10 Years](https://hackernoon.com/how-instagrams-homepage-has-changed-over-the-past-10-years-1g1134el)
![](https://cdn.hackernoon.com/images/t8YfmPLljONPuePCR5fPH7ndZRn2-fok31p1.jpeg)
Instagram or Insta is one of the world’s most used photo and video sharing social networks. It is owned by Facebook and was launched in 2010 on iOS and the Android version was launched two years later along with a trimmed down desktop version. Today, let us see how the homepage of Instagram has evolved over the years.

### [107. Five CSS Tricks With Codepen Examples](https://hackernoon.com/five-css-tricks-with-codepen-examples-9a3b30s7)
![](https://images.unsplash.com/photo-1518085250887-2f903c200fee?ixlib=rb-1.2.1&q=80&fm=jpg&crop=entropy&cs=tinysrgb&w=1080&fit=max&ixid=eyJhcHBfaWQiOjEwMDk2Mn0)
CSS which stands for Cascading Style Sheets is a style sheet language used to describe how HTML elements are to be displayed. CSS is one of the core languages of the web because it is used to style the web. With CSS, you can add fonts, colors, size and spacing. It's basically used to layout the web.

### [108. UX Design vs. Web Design: 5 Differences and 5 Similarities](https://hackernoon.com/ux-design-vs-web-design-5-differences-and-5-similarities-nm1u3tu9)
![](https://firebasestorage.googleapis.com/v0/b/hackernoon-app.appspot.com/o/images%2FAURTLQvt67O9A2fTYbN0UXvtzYI3-2dc3tf5.jpeg?alt=media&token=ae4aa503-752e-4306-a234-335bf6a0e4e0)
Web design and UX design seem to be synonymous. While each design process and body of knowledge does share overlap with the other, they also differ in specific ways. This article will break down what web design and UX design are, five similarities and five differences between the two, and which is better for an agency, depending on the business case. 

### [109. The Web Development Courses to Help you Kickstart a Career in Web Development](https://hackernoon.com/the-web-development-courses-to-help-you-kickstart-a-career-in-web-development)
![](https://cdn.hackernoon.com/images/da7H4NzOhAdhje46xkTgaLorF5m2-5g93zc2.jpeg)
If you want to learn web development and become a web developer, or looking for web development resources like books, online courses, and tutorials, but are not

### [110. 16 Handpicked Open-Source Projects to Improve Your Developer Workflow](https://hackernoon.com/16-handpicked-open-source-projects-to-improve-your-developer-workflow)
![](https://cdn.hackernoon.com/images/gaZTNviyRwbJIkQm85R8IxM2vOY2-s4030y7.jpeg)
In this article, I decided to manually handpick 16 of my favorite open-source projects that can boost your development workflow and allow you to save time.

### [111. A Brief Guide to the Laws of UX for Product Managers](https://hackernoon.com/a-brief-guide-to-the-laws-of-ux-for-product-managers)
![](https://cdn.hackernoon.com/images/9Gby6PELpjQmxFLF10XleF0L1T53-09h3oyl.jpeg)
The Laws of UX categorized under heuristics help us understand the cognitive and behavioral ways that humans generally interact with products. Let’s delve in!

### [112. Bootstrap CSS is Still the Sh*t But We Can Make it Better](https://hackernoon.com/bootstrap-css-is-still-the-sht-but-we-can-make-it-better)
![](https://cdn.hackernoon.com/images/ugoTV1vwcgR4mN8MMDUUN4vt6p02-y993pa1.jpeg)
Tired of using bootstrap CSS but not being confident if the UI your building actually looks good?
Better Bootstrap is a series of design tips with code examples

### [113. How to Create Dynamic CSS Using Vue Reactive Variables](https://hackernoon.com/how-to-create-dynamic-css-using-vue-reactive-variables)
![](https://cdn.hackernoon.com/images/da7H4NzOhAdhje46xkTgaLorF5m2-i093070.jpeg)
If you use Vue, you might be used to having to apply different classes to tags based on the logic in your code. 

### [114. 7 Fun Tailwind CSS Button Designs to Improve Your Workflow](https://hackernoon.com/7-fun-tailwind-css-button-designs-to-improve-your-workflow)
![](https://cdn.hackernoon.com/images/5wpKgV75aONqkTJlafw2yQmK9yd2-ky93oa4.jpeg)
Buttons are the most basic element we love to neglect, but buttons don't have to be boring. Here are 7 spicy button designs using Tailwind CSS. 

### [115. How the Twitter Homepage has Changed in the Past 10 Years](https://hackernoon.com/how-the-twitter-homepage-has-changed-in-the-past-10-years-elk3z0t)
![](https://firebasestorage.googleapis.com/v0/b/hackernoon-app.appspot.com/o/images%2FugoTV1vwcgR4mN8MMDUUN4vt6p02-yxh3z8s.jpeg?alt=media&token=83715060-7ce6-483d-838f-82248a661671)
Twitter is the world’s most loved microblogging social network. Users interact and post messages known as Tweets. Twitter was created in March 2006 and launched later that year in July. Since then, it has evolved a lot. Today we are going to review the changes and evolution of Twitter homepage design in the last ten years. 

### [116. How I Build a Personal Website With Monetization (And Without Coding)](https://hackernoon.com/how-i-build-a-personal-website-with-monetization-and-without-coding-hq723233)
![](https://cdn.hackernoon.com/images/9FoqLXBqkFSxBjQvbeLToKfU4GA2-68w32cn.jpeg)
These are 10 no-coding tools for building, marketing & monetizing a personal website. Here we discuss different business models, marketing strategies, and more.

### [117. Rive Animation for Flutter: A Beginner's Guide to Building Stunning Animations with Ease!](https://hackernoon.com/rive-animation-for-flutter-a-beginners-guide-to-building-stunning-animations-with-ease)
![](https://cdn.hackernoon.com/images/7MHXxJGH4YduN32lsrzKF5xaGq52-s093v4u.gif.webp)
In this article, you will learn how to create simple stunning Rive animations with ease and manage them in your Flutter app.

### [118. The Hi-Five Formula: 5 Simple Tips to Boost Conversions on Your Website](https://hackernoon.com/the-hi-five-formula-5-simple-tips-to-boost-conversions-on-your-website-ls3531pn)
![](https://cdn.hackernoon.com/images/CKm5QWycYDYVoSD7SPg8hYqgO7p1-0n935c0.png)
Earning trust is a privilege. It’s only when we have trust, that can we ask someone to buy, subscribe, or call.

### [119. 12 Awesome Toggle Switch Designs (With Source Code!) 🎨💖](https://hackernoon.com/12-awesome-toggle-switch-designs-with-source-code)
![](https://cdn.hackernoon.com/images/gaZTNviyRwbJIkQm85R8IxM2vOY2-ns83y16.jpeg)
Finding the perfect toggle design can be a challenge. This article addresses the problem by showcasing 12 creative examples with code.

### [120. Enhance Your UI/UX With These 16 Web Designer Resources🔥🎨](https://hackernoon.com/enhance-your-uiux-with-these-16-web-designer-resources)
![](https://cdn.hackernoon.com/images/gaZTNviyRwbJIkQm85R8IxM2vOY2-4e03y3s.jpeg)
In this article, I've curated 16 essential resources across a variety of domains including icons, illustrations, colors, gradients, fonts, mockups, etc.

### [121. Improve Core Web Vitals Using Lazy Loading and BlurHash](https://hackernoon.com/essential-guide-to-improving-core-web-vitals-using-lazy-loading-and-blurhash)
![](https://cdn.hackernoon.com/images/qEyR6rrtSuQYAumVgjwd7lxvi9L2-mp93osu.jpeg)
Lazy loading is an important way to improve your PageSpeed Insights. Combined with #Blurhash, you can improve load times. #lazyloading #corewebvitals #SEO

### [122. Using the imgix API to Build a Responsive Image Gallery in React](https://hackernoon.com/using-the-imgix-api-to-build-a-responsive-image-gallery-in-react)
![](https://cdn.hackernoon.com/images/qEyR6rrtSuQYAumVgjwd7lxvi9L2-vta3pnb.jpeg)
This tutorial explains how to build a responsive image gallery in React using the imgix API.

### [123. Here’s All You Need to Know About the CSS Box Model](https://hackernoon.com/heres-all-you-need-to-know-about-the-css-box-model)
![](https://cdn.hackernoon.com/images/NpN8WH8v6CfA6j7dKAzuoiE5Lit2-ud93osb.jpeg)
The CSS box model is a term thrown around in CSS with very little context but is probably the most fundamental thing you can know in CSS.

### [124. How To Build Your First Website For A Client - Workflow and Tools ](https://hackernoon.com/how-to-build-your-first-website-for-a-client-workflow-and-tools-hq3e35u3)
![](https://cdn.hackernoon.com/images/CKm5QWycYDYVoSD7SPg8hYqgO7p1-ptw37mb.png)
So you want to earn money by making websites? Five years ago, I was in your shoes searching for an article like this one. 

### [125. Using Git Merge to Merge Changes from other Branches](https://hackernoon.com/using-git-merge-to-merge-changes-from-other-branches)
![](https://cdn.hackernoon.com/images/NpN8WH8v6CfA6j7dKAzuoiE5Lit2-nn93smc.jpeg)
Git provides a powerful tool by letting us create branches

### [126. Responsive Web Design: Understand And Apply It Once And For All](https://hackernoon.com/responsive-web-design-understand-and-apply-it-once-and-for-all-mh163w3r)
![](https://cdn.hackernoon.com/images/n0i3ypi.gif)
As a Microverse student for one month, I realized that my first clone webpages didn’t have a responsive layout. I was using pixels in the Navbars, percentages in one section and rem in another, I didn’t have a rule or a standard procedure. The goal was to make it look like the original webpage IN MY SCREEN.

As I advanced through the course, I learned that these units made all the
difference to the webpage’s response in different screen sizes. My code
reviewers would tell me to adjust my webpage because it looked different when they were viewing it.

When I started having these issues, I made a lot of research on the subject,
but I was still a little confused about it. This article’s goal is to create a
simple and direct rule to achieve the required responsiveness any developer needs in their code.

### [127. REST API Design Mistakes](https://hackernoon.com/rest-api-design-mistakes)
![](https://cdn.hackernoon.com/images/framework-cli0cmayh000001s68bvi8yws.png)
REST principles are difficult to follow 100% of the time. However, avoiding the mistakes shared in this piece will make your API cleaner and easier to use. 

### [128. You Should Use This for Your Next Project: Random Image API](https://hackernoon.com/you-should-use-this-for-your-next-project-random-image-api)
![](https://images.unsplash.com/photo-1573867639040-6dd25fa5f597?crop=entropy&amp;cs=tinysrgb&amp;fit=max&amp;fm=jpg&amp;ixid=M3wxMTc3M3wwfDF8c2VhcmNofDEzfHx3ZWJzaXRlfGVufDB8fHx8MTcwMjU1OTQyMnww&amp;ixlib=rb-4.0.3&amp;q=80&amp;w=2000)
Tired of manually searching for photos to spice up your web app development?

### [129. Understanding the Javascript Array Reduce Method](https://hackernoon.com/understanding-the-javascript-array-reduce-method)
![](https://cdn.hackernoon.com/images/NpN8WH8v6CfA6j7dKAzuoiE5Lit2-pg93pt6.jpeg)
The JS reduce method is a recursive way to perform a computation based on every element in the array while considering the previous elements of the array.

### [130. A Step-By-Step Guide to Making a CSS Only Minecraft Chicken](https://hackernoon.com/a-step-by-step-guide-to-making-a-css-only-minecraft-chicken)
![](https://cdn.hackernoon.com/images/NpN8WH8v6CfA6j7dKAzuoiE5Lit2-y493ohl.jpeg)
There is a surprising lack of articles on how to make Minecraft chickens in CSS though.

### [131. How to Boost Efficiency in Designing HTML Pages](https://hackernoon.com/how-to-boost-efficiency-in-designing-html-pages-fv3j3u7u)
![](https://firebasestorage.googleapis.com/v0/b/hackernoon-app.appspot.com/o/images%2FPisLbsZ5fYa7c89JFRNjpWYiWbn1-ddb20fp.jpeg?alt=media&token=7579d00e-258c-4c78-875f-9b51539a4cbf)
When you start your journey in Front-end Development, as you are 
introduced to HTML and CSS preferably in a project-based learning 
system, everything about it is very interesting.

### [132. 10 UI Elements Web Developers Should Know About](https://hackernoon.com/10-ui-elements-web-developers-should-know-about-n1q3t3z)
![](https://firebasestorage.googleapis.com/v0/b/hackernoon-app.appspot.com/o/images%2F3nhao37bBEfHA9RTQ0WNVWfXPD02-7zn3t8b.jpeg?alt=media&token=ebe1db4a-e679-4c47-8941-e40acd5220b7)
For web developers, it’s crucial to have a deep understanding of UI elements and how users interact with them. UI elements lay at the heart of web development and act as a common design language between web developers.

### [133. 1 Click Away From Being Scammed: How I Built a Web Development Business](https://hackernoon.com/1-click-away-from-being-scammed-how-i-built-a-web-development-business)
![](https://cdn.hackernoon.com/images/8LmeQPepvcZC1iNyHQbiXoCEwx62-8x93o7v.jpeg)
I never thought that as a web design agency owner, I would be susceptible to scams. Read more about how I met a scammer and how it almost ended in tragedy.

### [134. Making a Gradient Color Generator App Using JavaScript](https://hackernoon.com/making-a-gradient-color-generator-app-using-javascript)
![](https://cdn.hackernoon.com/images/awSK9UBJcfNNXiYmqyT1Ihlw5Hr2-ae03645.jpeg)
In this article, I have shown you how to make Gradient Color Generator using JavaScript.

### [135. Website Design or its Copy: Which Should Come First?](https://hackernoon.com/website-design-or-its-copy-which-should-come-first-u71134km)
![](https://cdn.hackernoon.com/images/UdOZvTYSxPR5t6IvUbxkYsKa15u2-zw2031y5.jpeg)
A design-first approach or a copy-first approach may seem the easier choice. But the winning combo is  a process of design+copy.

### [136. How to Use Git to See Recent Changes in a Specified Time Period](https://hackernoon.com/how-to-use-git-to-see-recent-changes-in-a-specified-time-period)
![](https://cdn.hackernoon.com/images/NpN8WH8v6CfA6j7dKAzuoiE5Lit2-lk93ot5.jpeg)
Have you ever gone on a long holiday and wanted to check the updates your team has made since 2 weeks ago?

### [137. Top 3 React UI Component & Asset Libraries in 2021 ](https://hackernoon.com/top-3-react-ui-component-and-asset-libraries-in-2021-il2o330f)
![](https://cdn.hackernoon.com/images/CKm5QWycYDYVoSD7SPg8hYqgO7p1-aq8a3778.png)
I’m going to condense down years of trial and error and give you my top three React libraries to help you make beautiful websites and apps.

### [138. How to Hack Bootstrap CSS for Better Looking Websites](https://hackernoon.com/how-to-hack-bootstrap-css-for-better-looking-websites)
![](https://cdn.hackernoon.com/images/MUo6MihNAVUIcUvRBbcToKZ7MKh1-3j93iwc.jpeg)
A tutorial of actionable design tips to achieve satisfaction with the look of your bootstrap themed site.

### [139. Web Devs, Bookmark These 19 Frontend Resources 🎨✨](https://hackernoon.com/web-devs-bookmark-these-19-frontend-resources)
![](https://cdn.hackernoon.com/images/gaZTNviyRwbJIkQm85R8IxM2vOY2-ow83zjk.jpeg)
I curated some of my favorite front-end resources for colors and palettes, fonts, icons, illustrations, stock photos, and videos.

### [140. How to Implement Scroll Snap: A CSS Feature Worth Knowing in 2023](https://hackernoon.com/how-to-implement-scroll-snap-a-css-feature-worth-knowing-in-2023)
![](https://cdn.hackernoon.com/images/Bf6xbPmhtTcARlzNXM2oktEZuh22-erb2nl1.jpeg)
Explore the functionality and benefits of Scroll Snap, a powerful CSS feature that enhances scrolling experience.

### [141. Bye-bye Google Fonts: German Court Rules That Google Fonts Is Not in Compliance with GDPR](https://hackernoon.com/bye-bye-google-fonts-german-court-rules-that-google-fonts-is-not-in-compliance-with-gdpr)
![](https://cdn.hackernoon.com/images/GN0lxBg0lGVYx0G1x4JV3gH2M5m2-9g93lit.jpeg)
Google Fonts is a data privacy concern. Learn why you should care.

### [142. 8 Web Development Notes You Might Find Useful](https://hackernoon.com/8-web-development-notes-you-might-find-useful)
![](https://cdn.hackernoon.com/images/2bL8Ve2IGiP0vEziDpWY80JjirD2-hzh34hf.jpeg)
8 Web Development Notes You Might Find Useful

### [143. Boost Your Productivity Ten-Fold With These 17 AI Tools](https://hackernoon.com/boost-your-productivity-ten-fold-with-these-17-ai-tools)
![](https://cdn.hackernoon.com/images/gaZTNviyRwbJIkQm85R8IxM2vOY2-he83xrn.jpeg)
In this article, I have compiled some of the most useful developer tools, that will help you to speed up your daily workflow and improve your productivity.

### [144. Use <picture> to Dynamically Render Images for Different User Environments](https://hackernoon.com/use-lesspicturegreater-to-dynamically-render-images-for-different-user-environments)
![](https://cdn.hackernoon.com/images/qEyR6rrtSuQYAumVgjwd7lxvi9L2-o0e3psd.jpeg)
Learn how to use the picture element for art direction in responsive design. Dynamically crop, resize, and adjust aspect ratio based on different browsers.

### [145. Wix-Animation Module Implementation: Follow These Tips to Set It Up](https://hackernoon.com/wix-animation-module-implementation-follow-these-tips-to-set-it-up-es1r33c1)
![](https://cdn.hackernoon.com/images/3nhao37bBEfHA9RTQ0WNVWfXPD02-ami33bn.jpeg)
The wix-animations module contains functionality for working withanimations. Learn more.

### [146. How to Update Your Website Without Loosing Your Google Rankings](https://hackernoon.com/how-to-update-your-website-without-loosing-your-google-rankings)
![](https://cdn.hackernoon.com/images/da7H4NzOhAdhje46xkTgaLorF5m2-oq9316t.jpeg)
Congratulations you worked on a new website to replace your dated website and need to launch the update without tanking your search results.

### [147. CSS Layers Tutorial: Understanding CSS Encapsulation](https://hackernoon.com/css-layers-tutorial-understanding-css-encapsulation)
![](https://cdn.hackernoon.com/images/NpN8WH8v6CfA6j7dKAzuoiE5Lit2-no93jwr.jpeg)
In this tutorial, let's take a look at how CSS layers work. CSS layers allow us to finally do real CSS encapsulation, allowing us to import specific CSS easily.

### [148. 4 ways CSS :has() can make your HTML forms even better](https://hackernoon.com/4-ways-css-has-can-make-your-html-forms-even-better)
![](https://cdn.hackernoon.com/images/cmnTEZUbXRUusNv7GD8Q0C1Kgzb2-y0928kf.png)
Learn how the CSS :has() pseudo-class can improve HTML forms through validation hints, conditional content, fancier designs, and more.

### [149. This CSS Cut Out Effect is Guaranteed to Blow Your Mind 🤯](https://hackernoon.com/this-css-cut-out-effect-is-guaranteed-to-blow-your-mind-30253zyr)
![](https://firebasestorage.googleapis.com/v0/b/hackernoon-app.appspot.com/o/images%2FY5pgfcYeb2WkzcbAON1f4rfpLAW2-c61x3w5z.jpeg?alt=media&token=e1b219cd-580c-4bfe-ae59-746abee77cad)
This effect is so cool and just fun to see. What it comes down to is having a background image show through the text.

### [150. What is Remix Framework and Why Use it for Ecommerce Websites?](https://hackernoon.com/what-is-remix-framework-and-why-use-it-for-ecommerce-websites)
![](https://cdn.hackernoon.com/images/ojTVsdZ5n3Xw53zORTRWGKkJ5Vy2-xka3uz7.jpeg)
E-commerce websites require a lot of complex functionality, such as dynamic routing, server-side rendering which can easily be done with Remix Framework.

### [151. Introduction to Design Systems for UX/UI Designers](https://hackernoon.com/introduction-to-design-systems-for-uxui-designers-f1223z7x)
![](https://firebasestorage.googleapis.com/v0/b/hackernoon-app.appspot.com/o/images%2F5oXTQ8W6TqTa1ouikp3LOkznIZj1-ij9g3wxm.jpeg?alt=media&token=590d0aa7-5230-4344-9dd5-338e64094433)
For junior designers - those who have just started studying UX / UI design systems and those who have been working in this field for up to 1-2 years. The main goal of this article is to introduce you to the basic components of system design, to give you a basic introduction to this concept and to revise the material by demonstrating several examples of design systems that are already used by large companies.

### [152. Using HTML And CSS To Create An Image Slider ](https://hackernoon.com/using-html-and-css-to-create-an-image-slider)
![](https://cdn.hackernoon.com/images/GRZpzqpoJyMvFZW6lPH4PI3T5HB2-12b3j51.jpeg)
In this section, we learn how to create an image slider using HTML and CSS that would be great on the front page of your website as a visual element.  

### [153. Top 5 Free HTML and CSS Online Training Courses for Beginners](https://hackernoon.com/top-5-free-html-and-css-online-training-courses-for-beginners-o94e3wkm)
![](https://images.unsplash.com/photo-1508317469940-e3de49ba902e?ixlib=rb-1.2.1&q=80&fm=jpg&crop=entropy&cs=tinysrgb&w=1080&fit=max&ixid=eyJhcHBfaWQiOjEwMDk2Mn0)
HTML and CSS are two pillars of web development, they are used to create web pages you see every day. HTML provides the structure to your web page and CSS provides them the style to look better. If you want to become a front-end web developer or web designer then a good knowledge of HTML and CSS is a must.

### [154. 8 Illustration Freebies For Your New Project or Article](https://hackernoon.com/8-illustration-freebies-for-your-new-project-or-article-hm1z3unt)
![](https://firebasestorage.googleapis.com/v0/b/hackernoon-app.appspot.com/o/images%2FMJpFVUEItkSdoh38rYo60VT7RfH3-nm1k28si.png?alt=media&token=dcb88805-d487-454a-8e0e-05a189ce85b6)
Everyday Designers need

### [155. Git blame - Figuring Out Who Modified a Line With Git](https://hackernoon.com/git-blame-figuring-out-who-modified-a-line-with-git)
![](https://cdn.hackernoon.com/images/NpN8WH8v6CfA6j7dKAzuoiE5Lit2-of93o4l.jpeg)
Have you ever found a bug inducing line change in your code, and wondered who made the change to that line? Fortunately, git has a command for that

### [156. Best Practices for Designing a User-Centric Dashboard](https://hackernoon.com/best-practices-for-designing-a-user-centric-dashboard-ubqb32au)
![](https://cdn.hackernoon.com/drafts/nh6h3y0x.png)
The importance of user experience is more emphasized than ever. As a result, the number and variety of dashboard tools is on the rise. These tools are used as an essential piece in any good customer experience strategy.

### [157. How I Make Money By Monetizing My Twitter with Brave Rewards](https://hackernoon.com/how-i-make-money-by-monetizing-my-twitter-with-brave-rewards-dfbc3z99)
![](https://cdn.hackernoon.com/images/2jqChkrv03exBUgkLrDzIbfM99q2-wd82rrj.jpeg)
Not only does Brave pay me in $BAT for browsing the internet by serving me ads I enjoy watching based on my interests, it literally allows people to tip and automatically contribute to those Twitter users using Brave.

### [158. An Intro to Web Design and UI/UX Trends in 2023](https://hackernoon.com/an-intro-to-web-design-and-uiux-trends-in-2023)
![](https://cdn.hackernoon.com/images/gtWkIzhMArXTjBVEGXFWVFsGrp92-cob3qxt.png)
The trend of brutalism, which breaks the rules and catches people's attention, allows for the addition of interesting elements like screaming fonts.

### [159. Starting Web Development? Remember These 5 Things](https://hackernoon.com/5-things-to-decide-on-before-web-development-nbd1329t)
![](https://cdn.hackernoon.com/drafts/7wbf32by.png)
Originally I shared this story to Syndicode blog, and now I'm making a summary with small additions.

### [160. Tail-kit Introduction: 200+ Free Tailwind CSS Components And Templates](https://hackernoon.com/tail-kit-introduction-200-free-tailwind-css-components-and-templates-d7v31v2)
![](https://cdn.hackernoon.com/images/I6baOfMDJPVeudwIwtHwkMpYTdz2-qj2m3625.jpeg)
Free and open source Tailwind css 2.0 components and templates KIT for React, vueJS and Angular. 

### [161. The Future of Web Development: 5 Things to Expect in the Next Decade](https://hackernoon.com/the-future-of-web-development-5-things-to-expect-in-the-next-decade)
![](https://cdn.hackernoon.com/images/T6rSbAFb1SP87rQxiZsQbbw6cb63-xxb3psr.jpeg)
We'll address web development's future and detail companies' development trends to cope with changes. You'll also find how to position yourself 

### [162. A Developer’s Guide to Accessibility For Mental Health and Cognitive Disabilities](https://hackernoon.com/a-developers-guide-to-accessibility-for-mental-health-and-cognitive-disabilities)
![](https://cdn.hackernoon.com/images/2jqChkrv03exBUgkLrDzIbfM99q2-m102usb.jpeg)
In this blog, we’ll explore common barriers on web pages faced by users with mental health challenges.

### [163. Bootstrap 4 Customization According to Your Design](https://hackernoon.com/bootstrap-4-customization-according-to-your-design-z33q3wxb)
![](https://cdn.hackernoon.com/images/eat266v.jpg)
Twitter Bootstrap is the most popular CSS framework. It has been so since its first release in 2011. Its constantly rising popularity begs the question: what aspect of it allows room for the different look and feel of millions of websites that are built on top of it? In this article, I demonstrate how to modify Bootstrap 4 according to a design that has its own color theme, responsive breakpoints and spacing styles.

### [164. How to Add Form Participation Support to Web Components](https://hackernoon.com/how-to-add-form-participation-support-to-web-components)
![](https://cdn.hackernoon.com/images/form-participation-support-clj3wchoc000001s691r0f7ty.png)
A look at how web components can participate in a form.

### [165. How to Write CSS Advanced Selectors Like a Pro](https://hackernoon.com/how-to-write-css-advanced-selectors-like-a-pro-631q3tdu)
![](https://firebasestorage.googleapis.com/v0/b/hackernoon-app.appspot.com/o/images%2FGbmJOC4QrCe3aP4Dm5CAp8LaL4b2-46d3uov.jpeg?alt=media&token=80daa4cc-bb8a-4418-9686-3d2b0f62de0d)
Having 3 years of experience as a freelance front-end developer, I thought there is nothing new I could learn about CSS. However, studying at Microverse gave me the chance to actually go deep into things that I took my knowledge on for granted like CSS selectors.

### [166. A Beginner's Guide to CSS Grid Layout](https://hackernoon.com/a-beginners-guide-to-css-grid-layout)
![](https://cdn.hackernoon.com/images/36JsQ9cMvBffzf3fNJjP0R8jnwg2-0j93pwr.jpeg)
A Beginner's Guide to CSS Grid Layout

### [167. How to Choose a UI Library for Your Frontend Project](https://hackernoon.com/how-to-choose-a-ui-library-for-your-frontend-project)
![](https://cdn.hackernoon.com/images/xc4tHTeTFVT2acicoza639IgwXu1-gua3sow.jpeg)
Choosing a UI library for your frontend project can be a challenging task. I will try to help you make this hard decision.

### [168. TypeScript vs JavaScript: Understanding the Differences](https://hackernoon.com/the-difference-between-typescript-and-javascript)
![](https://cdn.hackernoon.com/images/NpN8WH8v6CfA6j7dKAzuoiE5Lit2-wg93pnd.jpeg)
 In this guide, I'll explain exactly what TypeScript is and why it's different from Javascript. 

### [169. Why SaaS Products Feel Harder to Use Every Year](https://hackernoon.com/why-saas-products-feel-harder-to-use-every-year)
![](https://cdn.hackernoon.com/images/haIreD2bRcV2aVB90KGUiGgLPFJ3-xs02x8f.jpeg)
Watched a product add 40 features nobody asked for. Users responded by opening text files instead. Activation: 73% → 51%. Feature count: up. Irony: also up. 

### [170. Take Your Tailwind Skills to the Next Level by Using these Resources](https://hackernoon.com/take-your-tailwind-skills-to-the-next-level-by-using-these-resources)
![](https://cdn.hackernoon.com/images/da7H4NzOhAdhje46xkTgaLorF5m2-d503nd3.jpeg)
Must have Tailwind CSS resources to maximize your productivity. VS Code extensions, plugins, component libraries that you must bookmark to code more efficiently

### [171. JavaScript Ordinals: Adding st, nd, rd and th Suffixes to a Number](https://hackernoon.com/javascript-ordinals-adding-st-nd-rd-and-th-suffixes-to-a-number)
![](https://cdn.hackernoon.com/images/NpN8WH8v6CfA6j7dKAzuoiE5Lit2-wr93sby.jpeg)
In Javascript, it's usually considered best practice to work with absolute numbers, as number is a defined type. However, when expressing these numbers in user 

### [172. How to add Video Call and Voice Call Functionality in a Full Stack Whatsapp Clone](https://hackernoon.com/how-to-add-video-call-and-voice-call-functionality-in-a-full-stack-whatsapp-clone)
![](https://cdn.hackernoon.com/images/GPJ76xULl7geuFTrXbplNnbeQCf2-9x92x6i.jpeg)
This blog post demonstrates how to integrate Zegocloud's services for Video Call and Voice Call functionality into a Full Stack WhatsApp Clone.

### [173. How To Export SVG in Adobe Illustrator](https://hackernoon.com/how-to-export-svg-in-adobe-illustrator)
![](https://cdn.hackernoon.com/images/6m00aUYUGVd84DEBn23hIkCgXxz1-v2e31yx.jpeg)
Discover the untapped potential of Scalable Vector Graphics (SVG) in web design. 

### [174. The Placeholder Tools that Boost Productivity for Developers and Designers](https://hackernoon.com/the-placeholder-tools-that-boost-productivity-for-developers-and-designers)
![](https://cdn.hackernoon.com/images/gaZTNviyRwbJIkQm85R8IxM2vOY2-6ja3h37.jpeg)


### [175. 5 Quick Hacks for High Converting Landing Pages](https://hackernoon.com/5-quick-hacks-for-high-converting-landing-pages-o2b03ye0)
![](https://cdn.hackernoon.com/images/97233yrx.jpg)
I’ve seen quite some landing pages come by on indiehackers.com by now and I noticed that I wanted to give/gave the same tips multiple times. So I thought it would be nice to write a small article about this. These are just tips from my point of view and things I like about a landing page personally.

### [176. 5 Steps To Build A Cool Legal Marketplace Startup In 24 Hrs](https://hackernoon.com/5-steps-to-build-a-cool-legal-marketplace-startup-in-24-hrs-8413344h)
![](https://hackernoon.com/images/9FoqLXBqkFSxBjQvbeLToKfU4GA2-gki34we.jpeg)
Learn to build a B2B online marketplace startup without code

### [177. Answers to 5 CSS Questions that May Confuse You](https://hackernoon.com/answers-to-5-css-questions-that-may-confuse-you)
![](https://cdn.hackernoon.com/images/da7H4NzOhAdhje46xkTgaLorF5m2-ys9306m.jpeg)
What is the computed value of the display property for the .child element in the following example?

### [178. How to Building Fancy List Items in Astro](https://hackernoon.com/how-to-building-fancy-list-items-in-astro)
![](https://cdn.hackernoon.com/images/TrD4DzyJu6g677bJSu6xzJ3TxA12-j7f3r9x.jpeg)
This article shows you how to add custom SVG to any markdown list items in Astro, so you don't have to write custom HTML each time you want to make nice lists.

### [179. How MarkUp Reshaped Digital Collaboration for Remote Workers...and Grew 302% in One Month](https://hackernoon.com/how-markup-reshaped-digital-collaboration-for-remote-workersand-grew-302percent-in-one-month-pibf3236)
![](https://cdn.hackernoon.com/drafts/n799l3ywd.png)
When we started MarkUp, a visual collaboration tool for digital content, we expected to see user growth from much of the design and developer communities, because of the problem we are solving in those fields.

### [180. What Are Redis Hashes](https://hackernoon.com/what-are-redis-hashes)
![](https://cdn.hackernoon.com/images/NpN8WH8v6CfA6j7dKAzuoiE5Lit2-dt93pzw.jpeg)
Redis hashes are a type of record stored in a Redis database. They are little like JSON objects and store data as key-value pairs.

### [181. 17 Lesser Known Chrome Extensions You Need Right Now 🤩⚡](https://hackernoon.com/17-lesser-known-chrome-extensions-you-need-right-now)
![](https://cdn.hackernoon.com/images/gaZTNviyRwbJIkQm85R8IxM2vOY2-zc03yop.jpeg)
Discover 17 lesser-known Chrome extensions to boost productivity, manage tabs, automate tasks, and protect your eyes. Enhance browsing today!

### [182. Why You Should Care About Perfecting CSS Animations](https://hackernoon.com/why-you-should-care-about-perfecting-css-animations-hf7y3y2p)
![](https://cdn.hackernoon.com/images/2jqChkrv03exBUgkLrDzIbfM99q2-jv82reo.jpeg)
My story with CSS animations begins when I was trying to figure out how to become a unicorn in the programming world, the mixing between designing a User Interface (UI) for working in the back-end later it was quite impressive and hard for me, a person with a fully theoretical/academic knowledge foundation, but, at one moment, my fairy godmother appeared in front of my eyes, pure CSS animations brought my page to life and started to give me the magic that I was needing for... Creativity.

### [183. 5 Essential Bootstrap CSS Components and How to Improve Their Design](https://hackernoon.com/5-essential-bootstrap-css-components-and-how-to-improve-their-design)
![](https://cdn.hackernoon.com/images/ugoTV1vwcgR4mN8MMDUUN4vt6p02-6i93q7d.jpeg)
Bootstrap CSS has some flaws that can easily be fixed with a little design know how and out of the box Bootstrap classes

### [184. What Makes Next.js so Good?](https://hackernoon.com/what-makes-nextjs-so-good)
![](https://cdn.hackernoon.com/images/0kymacDO55Vh1xdKhOVvdqBUy7G3-is92nbi.jpeg)


### [185. 4 Reasons Why You Should Use Gatsby JS for Your Website](https://hackernoon.com/reasons-you-should-use-gatsby-js-for-your-website-t85k3wc5)
![](https://cdn.hackernoon.com/images/7m1031ml.jpg)
Gatsby JS is a static site generator that is used to create high performance websites. Built on top of React, it weaves together some of the better parts of GraphQL, react-router and webpack for a brilliant developer experience. This means a much faster site, taking a lot less time to build! Perfect for users, business and developers.

### [186. 'Beautiful is Better than Ugly': Using Python to Automate Your SEO Strategy](https://hackernoon.com/beautiful-is-better-than-ugly-using-python-to-automate-your-seo-strategy-qn5v35s6)
![](https://cdn.hackernoon.com/images/NqFBgsMsodTucsTW6YyqzBOeFmI2-8qg52be1.jpeg)
Python is a powerful, simple, and versatile language that can be used to do many things including helping you with SEO. This guide shows how to use it for SEO. 

### [187. Design Battle: Visual Design vs Functional Design](https://hackernoon.com/design-battle-visual-design-vs-functional-design)
![](https://cdn.hackernoon.com/images/fvUVecsJcIafdFxC4UfK1Rh1J5q2-sh93hqa.jpeg)
Sometimes, designers get confused on which design styles to apply to their work. It all depends on what the work is for and who the target audience is.

### [188. Redesigning scrimba.com: A Completely Agile Process [Case Study]](https://hackernoon.com/redesigning-scrimbacom-an-agile-process-from-start-to-finish-case-study-vf2m3ut1)
![](https://firebasestorage.googleapis.com/v0/b/hackernoon-app.appspot.com/o/images%2F299gCp3vIONGqF6sGZxHriZnxkA2-i74f3u7u.jpeg?alt=media&token=61647e5d-c49a-4947-9b4d-eac6a027e6e3)
Scrimba is an online platform to learn to code from real teachers. But unlike the many other competitors, their secret sauce is that they’ve developed a unique technology that lets teachers record their screencasts so students can stop at any point and jump directly into editing the code. In this way it’s similar to being taught with a tutor right next to you. Pretty neat!

### [189. A Great Design Is Only Half The Battle Won: Design Trends 2021](https://hackernoon.com/a-great-design-is-only-half-the-battle-won-design-trends-2021-u62n34q5)
![](https://cdn.hackernoon.com/images/9HUB5XcnrzboujIZVfzkLT9PHqI3-2m5h31js.jpeg)
In this blog, you will learn about the Graphic design trends as we move forward in the year 2021.

### [190. 9 Award-Winning Websites With Stunning Creativity](https://hackernoon.com/9-award-winning-websites-with-stunning-creativity-b67431eg)
![](https://cdn.hackernoon.com/images/6sWrtbrOmsOIbrWzrG88lYfV4ch1-ln93spd.png)
This is a compiled list of some of my favorite designs that push the boundaries of possibilities in web development.


### [191. Is it Necessary for a UX/UI Designer to Know How to Code?](https://hackernoon.com/is-it-necessary-for-a-uxui-designer-to-know-how-to-code)
![](https://cdn.hackernoon.com/images/Hr4zJaE09hYutGUApRLUdnqle5d2-1z938zw.jpeg)
Coding skills aren't a must for UX/UI designers, yet offer advantages: better dev communication, enhanced projects, new ideas, confidence.

### [192. 2023 Graphic Design Trends: A Look into the Future of Visual Design](https://hackernoon.com/2023-graphic-design-trends-a-look-into-the-future-of-visual-design)
![](https://cdn.hackernoon.com/images/xoGWhb2ufgO2UXBTi4NKmlUq0BJ3-mg93pyy.gif.webp)
In this article, we'll take a deeper dive into the seven graphic design trends that are set to dominate in 2023.

### [193. 8 Ways to Improve the CLS Score in Google’s Core Web Vitals](https://hackernoon.com/8-ways-to-improve-the-cls-score-in-googles-core-web-vitals-v62b350s)
![](https://cdn.hackernoon.com/images/QauqWqnHAAVPjJkoNTbT4iqpRf72-rl3q33lk.jpeg)
The Cumulative Layout Shift (CLS) of a website is important to user experience, which is why it’s one of three metrics included in Google’s new Core Web Vitals.

### [194. Get Over 50+ Free Icons for Your Projects Here](https://hackernoon.com/get-over-50-free-icons-for-your-projects-here)
![](https://cdn.hackernoon.com/images/UvRFeQfNAHfRmWtHpo94jvssVGG3-h9a2khk.jpeg)
Designing resources are heavily priced everywhere. But here I am sharing some resources using which you can get more than 10 Million+ Free Icons. 

### [195. 6 Reasons Why You Should Add Social Media Feeds to Your Website](https://hackernoon.com/6-reasons-why-you-should-add-social-media-feeds-to-your-website-pb7731mw)
![](https://cdn.hackernoon.com/images/ugoTV1vwcgR4mN8MMDUUN4vt6p02-nv6p31ut.jpeg)
There are multiple benefits of adding social media feeds to your website, such as increased user engagement, strengthening brand reputation, and more.

### [196. Generative AI is Empowering Developers to Bridge the Digital Disability Divide](https://hackernoon.com/generative-ai-is-empowering-developers-to-bridge-the-digital-disability-divide)
![](https://cdn.hackernoon.com/images/2jqChkrv03exBUgkLrDzIbfM99q2-qf92f8e.jpeg)
With the release of a new coding assistant, developers can drive accessibility, usability, and ADA compliance.


### [197. The Web Design Trends you Must Not Miss in 2022](https://hackernoon.com/the-web-design-trends-you-must-not-miss-in-2022)
![](https://cdn.hackernoon.com/images/da7H4NzOhAdhje46xkTgaLorF5m2-e1930vt.jpeg)
web design is moving into the future, with advanced techniques like retro revolution, fewer images, and Memphis design.

### [198. JavaScript Maps: Everything You Need to Know](https://hackernoon.com/javascript-maps-everything-you-need-to-know)
![](https://cdn.hackernoon.com/images/NpN8WH8v6CfA6j7dKAzuoiE5Lit2-p893pta.png)
You might be using Javascript plain old objects right now when a map may be a better solution to your problem.

### [199. 30 Web Design Trends To Look For in 2021](https://hackernoon.com/30-web-design-trends-to-look-for-in-2021-mne73124)
![](https://cdn.hackernoon.com/images/bFFEe4dIUoXgbouiLfgW9PI9b8q1-9g1c31ux.jpeg)
What are the best website design trends in 2021? We covered most of the significant trends, like frosted glass, comfortable color palettes, and more.

### [200. Here's Why You Should Migrate 
From Wordpress to Webflow](https://hackernoon.com/heres-why-you-should-migrate-from-wordpress-to-webflow)
![](https://cdn.hackernoon.com/images/ugoTV1vwcgR4mN8MMDUUN4vt6p02-yp93j28.jpeg)
Why migrate from WordPress to Webflow, and how can you transition efficiently? Here are a few things to consider.Webflow is the modern alternative of choice.

### [201. Enhancing Web Accessibility in React Applications](https://hackernoon.com/enhancing-web-accessibility-in-react-applications)
![](https://cdn.hackernoon.com/images/1LFWV1HmcxgIDvjV1Yqt5rcv93l2-mc931fr.jpeg)
In this article, we explore what web accessibility is, how it intersects with ReactJs, and the core principles of web accessibility.

### [202. Building a Better Web: A Guide to Accessibility for Developers ](https://hackernoon.com/building-a-better-web-a-guide-to-accessibility-for-developers)
![](https://cdn.hackernoon.com/images/0cmfCm2cRuUs4XG6OC3hS03YQvJ3-9c935h9.jpeg)
Web accessibility is a growing focus for developers, and this guide will show you five ways to incorporate accessibility elements into your web design.

### [203. Optimizing your Vue App Using v-once and v-memo](https://hackernoon.com/optimizing-your-vue-app-using-v-once-and-v-memo)
![](https://cdn.hackernoon.com/images/da7H4NzOhAdhje46xkTgaLorF5m2-se9301c.jpeg)
We'll be looking at how we can optimize performance using two little-known Vue HTML attributes known as v-once and v-memo.

### [204. Design Tokens: the Path for Consistent & Reusable Visual Experiences](https://hackernoon.com/design-tokens-the-path-for-consistent-and-reusable-visual-experiences)
![](https://cdn.hackernoon.com/images/mmQFdqZft4VJSAAuXTqra0RrAqs2-vfc31tq.jpeg)
Unify visual styles, foster collaboration, boost user trust, and bridge Design & Engineering for Consistent Digital Experiences with design tokens.

### [205. How Xbox Changed Their Homepage Every Year for the Past 18 Years](https://hackernoon.com/how-xbox-changed-their-homepage-every-year-for-the-past-18-years-1c1634z9)
![](https://cdn.hackernoon.com/images/t8YfmPLljONPuePCR5fPH7ndZRn2-712p34vn.png)
In this review, we will discuss the evolution of the Xbox website and see how the design elements improved over the years. 

### [206. Top 7 Tips To Become A UI/UX Pro](https://hackernoon.com/top-7-tips-to-become-a-uiux-pro-zyh3tkd)
![](https://firebasestorage.googleapis.com/v0/b/hackernoon-app.appspot.com/o/images%2FKS4MqkEvICWsIcaXJhy3P7rD5jh2-26793u55.jpeg?alt=media&token=11cfd0de-621f-4028-8947-3ef2d36fbc19)
Tips & resources to help you get started

### [207. 8 Great Material Admin Dashboards To Use In Your Project](https://hackernoon.com/8-great-material-admin-dashboards-to-use-in-your-project-vh1j3u62)
![](https://firebasestorage.googleapis.com/v0/b/hackernoon-app.appspot.com/o/images%2F3nhao37bBEfHA9RTQ0WNVWfXPD02-ec73ub1.jpeg?alt=media&token=82c7a4bd-72fe-47c4-830b-0844a72105d0)
Looking through the admin template market you can easily conclude that this market is saturated. It’s observed in the number of templates, the amount of developers and (what is of the most important) a bunch of articles of «Best templates …(and here year, description or whatever goes)». And the amount of template becomes bigger and bigger every year. After reading several articles you may find out that to remember the name of the template you have liked is not (just believe us, really “not”) an easy task (of course, if you keep a template page in a browser tab it’s much easier, but don’t forget that RAM is limited and your browser may already keep 40+ tabs). 

### [208. Web Development Is Still The Wild Wild West in 2023](https://hackernoon.com/web-development-is-still-the-wild-wild-west-in-2023)
![](https://cdn.hackernoon.com/images/OtJzzAct4ogl0v25V43xSyGcJAt1-m993tc0.jpeg)
Web development is still (thankfully) a frontier, where there is little to no official regulation, certification or oversight. Will it always be the wild west?

### [209. Building A Page Scroll in JavaScript](https://hackernoon.com/building-a-page-scroll-in-javascript-1j1g35y1)
![](https://cdn.hackernoon.com/images/GRZpzqpoJyMvFZW6lPH4PI3T5HB2-pg4t34zo.jpeg)
To understand scroll in Javascript, we cover an example to understand scroll position, animate on scroll, and navigation, etc.

### [210. 15+ Rocking Trends Web Designers Should Know in 2022🤩](https://hackernoon.com/15-rocking-trends-web-designers-should-know-in-2022)
![](https://cdn.hackernoon.com/images/bFFEe4dIUoXgbouiLfgW9PI9b8q1-g60368m.jpeg)
Check out the fresh and rocking web design trends in 2022...!!

### [211. I Built a “Personal FAQ” Directory on How to Get Into Product/Tech](https://hackernoon.com/i-built-a-personal-faq-directory-on-how-to-get-into-producttech-x6613unw)
![](https://firebasestorage.googleapis.com/v0/b/hackernoon-app.appspot.com/o/images%2F9FoqLXBqkFSxBjQvbeLToKfU4GA2-b3h3w0x.jpeg?alt=media&token=d379178e-3444-485b-b071-6edfd6201050)
As a product builder, I built micro tools to solve my own problems. For example: article tool, event app, meal box app, finance tracker, SaaS tracker, and habit tracker.

### [212. Git Stash - Everything You Need to Know About Stashing Changes in Git](https://hackernoon.com/git-stash-everything-you-need-to-know-about-stashing-changes-in-git)
![](https://cdn.hackernoon.com/images/NpN8WH8v6CfA6j7dKAzuoiE5Lit2-sv93p9m.jpeg)
Sometimes, when we are making changes to a project in git, we realize we suddenly need to revert back to the last clean working directory version of our project

### [213. How Are HTML Elements Stacked by Default?](https://hackernoon.com/how-are-html-elements-stacked-by-default)
![](https://cdn.hackernoon.com/images/RJQZvFU148YjNOndYa5BZPkZHvc2-4ca2klh.jpeg)
In this article you'll learn what stacking means in the context of web pages, the different types of elements that are stacked, and the default stacking order.

### [214. Why You Should Ditch JavaScript](https://hackernoon.com/why-you-should-ditch-javascript)
![](https://cdn.hackernoon.com/images/1xOaiEL6VrhnKiRtNl7JCDwppI62-ihb3pkc.jpeg)
Yes, it's true; we are breaking the web!

### [215. Top 12 React Datepickers to Consider for Your Next Web Dev Project](https://hackernoon.com/top-12-react-datepickers-to-consider-for-your-next-web-dev-project-u94c37lp)
![](https://cdn.hackernoon.com/images/CPZcQZuKTIRNEmHkkkOCBTvsTyd2-qiim35ng.jpeg)
Check out our range of React datepickers and pick your best date or time picker here.

### [216. 6 Important SaaS Metrics and Their Relationship with UX design](https://hackernoon.com/6-important-saas-metrics-and-their-relationship-with-ux-design-861v343o)
![](https://cdn.hackernoon.com/images/pdL1i5nGI1eSylLtk325jfjJOgD3-tuh3rvq.jpeg)
Churn rate
, MRR
, LTV
, CAC
, CAC <> LTV Ratio
, and Engagement
 are some of the most important SaaS metrics you should be monitoring.

### [217. Adding Light and Dark Modes, with a Toggle Switch, to Your Website](https://hackernoon.com/adding-light-and-dark-modes-with-a-toggle-switch-to-your-website)
![](https://cdn.hackernoon.com/images/oJkZK1nJPOOiADYWc2TT0tjr4al1-x592jbv.jpeg)
I've recently rebranded and redesigned the look and feel of my website. As a part of that redesign, I've implemented both a light and a dark theme. Here's how.

### [218. Javascript Array Concat Method](https://hackernoon.com/javascript-array-concat-method)
![](https://cdn.hackernoon.com/images/NpN8WH8v6CfA6j7dKAzuoiE5Lit2-hh93sn1.jpeg)
The concat method on arrays is used to take two arrays and concatenate them into one. 

### [219. Need Inspiration? Here are 5 Spectacular Online 3D Globe Projects to Do Just That](https://hackernoon.com/need-inspiration-here-are-5-spectacular-online-3d-globe-projects-to-do-just-that-3u4k31ub)
![](https://cdn.hackernoon.com/images/gaZTNviyRwbJIkQm85R8IxM2vOY2-tke319z.jpeg)
The 3D model of the Earth is perfect for designing creative web projects cause it's easy to display data on it. Thanks to many data API's it's easy to access data like population, countries, cities, geo-coordinates, health data, education, etc. Here I have compiled my favorite 3D Globe projects.


### [220. 10 WordPress Pricing Table Plugins that Rock](https://hackernoon.com/10-wordpress-pricing-table-plugins-that-rock)
![](https://cdn.hackernoon.com/images/igt8CfRKG3PcMuovWgbcGOHCkNK2-z793hmt.jpeg)
In this listicle, I would like to cover the features you need for creating a WordPress pricing table. Read on to know the best WP pricing table plugins. 

### [221. Feature, Not Bug: The Terrible Rationale Behind Web3's Product Design](https://hackernoon.com/feature-not-bug-the-terrible-rationale-behind-web3s-product-design)
![](https://cdn.hackernoon.com/images/OwFc24c80LOgSLJfXqJrRGUrSyA3-9c930pz.jpeg)
Let's attempt to look through the rationale behind terrible web3 product design.

### [222. How To Build A Portfolio Website with React, ChakraUi and framerMotion](https://hackernoon.com/how-to-build-a-portfolio-website-with-react-chakraui-and-framermotion-dq1m34zc)
![](https://cdn.hackernoon.com/images/bmUxO1baVGfJI3QTDkGnShmlyfc2-0fo33v4.jpeg)
Create or build a beautiful portfolio website with react, ChakraUi and framerMotion

### [223. Introduction To Styled-Components](https://hackernoon.com/introduction-to-styled-components-lf1333lq)
![](https://cdn.hackernoon.com/images/3nhao37bBEfHA9RTQ0WNVWfXPD02-bw9339y.jpeg)
styled-components is a CSS-in-JS library that helps you to write CSS in a component. Here in this post, I will cover more than basics you need to know.....

### [224. Things You Didn’t Know CSS Grid Could Do](https://hackernoon.com/things-you-didnt-know-css-grid-could-do)
![](https://cdn.hackernoon.com/images/eVN9AN9mDJYmfURNnT9xECAjBRw2-g6831sn.jpeg)
Discover the potential of CSS Grid for modern web layout design. Learn how to effortlessly position items in the center, stack elements and more 

### [225. The Dangers of an ADA Non-Compliant Website](https://hackernoon.com/ada-non-compliant-website-dangers-and-guidelines-explained-if-yours-is-not)
![](https://cdn.hackernoon.com/images/0RiQtNe5nHZyu2hZdH2Gt7GOPgm2-8xb3pap.jpeg)
Owning an ADA non-compliant website could lead to severe penalties if found guilty.

### [226. 28 Creative 404 Pages for Your Inspiration](https://hackernoon.com/28-creative-404-pages-for-your-inspiration-4ned31a2)
![](https://cdn.hackernoon.com/images/gaZTNviyRwbJIkQm85R8IxM2vOY2-tw1131pw.jpeg)
Landing on a default, un-styled ‘page not found’ with no further info and links can be really annoying. A creative and clever error page goes a long way in turning your visitor’s frown into a smile. 😉 


### [227. Create Humorous and Emotion-Driven Designs To Appeal Gen-Z](https://hackernoon.com/create-humorous-and-emotion-driven-designs-to-appeal-gen-z-0wk35vf)
![](https://cdn.hackernoon.com/images/C3Ek2ICes3NhSmEWKAdIrXZF4ik1-ris33n4.jpeg)
The new age call for new age measures. It is time to create designs that are approved by Gen-Z because like it or not, they are the future! 

### [228. How to Design Products For Happiness in 2022](https://hackernoon.com/how-to-design-products-for-happiness-in-2022)
![](https://cdn.hackernoon.com/images/XUXlssl4t8Y4pDFf1tsFXOpRr3A2-ag93lwi.jpeg)
Learn how to design products with happiness in mind by using focus and specificity in order to make the process for both your customers and your team smooth.

### [229. Top 5 UX Design Trends to Keep an Eye On](https://hackernoon.com/top-5-ux-design-trends-to-keep-an-eye-on)
![](https://cdn.hackernoon.com/images/TggSxk7kWsMlczkuVtR0LstDzEG3-9p93okv.jpeg)
In this post, we’ll be exploring some interesting UX design trends to look out for in 2022. But before that, let’s discuss why is UX design important.

### [230. How to Boost Your Workflow With AI: 16 Killer Web Applications 🚀🔥](https://hackernoon.com/how-to-boost-your-workflow-with-ai-16-killer-web-applications)
![](https://cdn.hackernoon.com/images/gaZTNviyRwbJIkQm85R8IxM2vOY2-fo83zrt.jpeg)
I've curated a list of the 16 best AI web apps, that you can use in your daily workflow to deliver maximum productivity and efficiency.

### [231. UIUX Design v/s Frontend Development](https://hackernoon.com/uiux-design-vs-frontend-development)
![](https://cdn.hackernoon.com/images/JrBrFS0AIrQ93b3SkgbY0GAQbnC3-86b3q2e.jpeg)
A description on UIUX design and front end development.

### [232. How to Choose the Perfect Font for Your Website and Advertisements](https://hackernoon.com/how-to-choose-the-perfect-font-for-your-website-and-advertisements)
![](https://cdn.hackernoon.com/images/igt8CfRKG3PcMuovWgbcGOHCkNK2-rf93plz.jpeg)
Finding the perfect font for a project can be a challenge. It can take a long time to select the correct font. To make the right choice, there are a few things 

### [233. Top-8 Web Design Trends of 2021](https://hackernoon.com/top-8-web-design-trends-of-2021-nn4135lw)
![](https://cdn.hackernoon.com/images/n4B6D5RA9iOvueF2aRtNAu47kLq2-30f33sp.png)
Minimalism, 3D graphics, gradients, textures, and animation ― we’ve seen them all in 2020, but the upcoming year is giving the common design trends a new twist.

### [234. No-Code Needs To Adapt To Specialists: An Argument](https://hackernoon.com/no-code-needs-to-adapt-to-specialists-an-argument-uo1w328p)
![](https://cdn.hackernoon.com/images/8LrcfRYMsiSAkTlOxfIKZambCun1-zc5c31fg.jpeg)
Nobody has time for endless tutorials. To go mainstream, no-code tools must adapt to specialists.

### [235. Top 11 Best User Interface Design Benefits for Online Educational Platforms](https://hackernoon.com/top-11-best-user-interface-design-benefits-for-online-educational-platforms-803c31rv)
![](https://cdn.hackernoon.com/images/e4LQkB0qKpOHnRts3rMaOKGjzoU2-y01231vf.jpeg)
It’s no longer news that the methods of sharing knowledge are changing. Well, that’s where online platforms come in. They host many of these educational service providers. They also ensure that students can get access to technologically-advanced education in the comfort of their homes. 


### [236. How I Created a Landing page in Less than 100 lines of Code](https://hackernoon.com/how-i-created-a-landing-page-in-less-than-100-lines-of-code-oz1t31jd)
![](https://cdn.hackernoon.com/images/gaZTNviyRwbJIkQm85R8IxM2vOY2-e53331nw.jpeg)
Recently I bought a personal domain and decided to build a quick landing page to not leave it empty while I work on my portfolio. I thought some of you might find it useful, so I decided to make a tutorial on it.


### [237. My Experience Building a Professional Portfolio with Velo](https://hackernoon.com/my-experience-building-a-simple-professional-portfolio-with-velo-7hl33gq)
![](https://cdn.hackernoon.com/images/rqLhYzJjWATiN82xawdrCnlXZCI3-5sc33v0.jpeg)
In this article, I go over my experiences building an online portfolio using Velo by Wix. Drag, drop, and finally, add some spice with custom code! 

### [238. How to Super Charge Your Web Design Skills This Year](https://hackernoon.com/how-to-super-charge-your-web-design-skills-this-year)
![](https://cdn.hackernoon.com/images/da7H4NzOhAdhje46xkTgaLorF5m2-rn93zeg.jpeg)
This story discusses 22 actionable tips that will help you all to improve your web design skills in 2022. 

### [239. 3 Examples Of Design Applications With Great UX](https://hackernoon.com/3-examples-of-design-applications-with-great-ux-w5233to8)
![](https://firebasestorage.googleapis.com/v0/b/hackernoon-app.appspot.com/o/images%2FYzPubWAAvGauVc6PGRXQIIN60a12-e8ic2894.jpeg?alt=media&token=3326dee4-8745-479b-8a79-cad42ef5a67a)
When it comes to design, it has long been said that simplicity is key. And although I always understood the basis for this saying, I never fully appreciated what it really meant. 

### [240. A 5-Point Growth Strategy for Web Hosting Resellers](https://hackernoon.com/a-5-point-growth-strategy-for-web-hosting-resellers)
![](https://cdn.hackernoon.com/images/wper5ogP7rVcqqAjUj9zLcjutZA3-ic92qnr.jpeg)
This article presents some of the best tips for hosting resellers to find a reliable web hosting provider and also how to earn a steady income

### [241. How To Create A "Night Mode" For Your Website](https://hackernoon.com/how-to-create-a-night-mode-for-your-website-7x2p317i)
![](https://cdn.hackernoon.com/images/A0JT0kWjB2UTOGzv9jXoh17Xc5H2-6oo31jr.jpeg)
Are you interested in learning how to create a simple night mode for your website? In this article, I use jQuery and Bootstrap 5. 

### [242. Why I Switched To Tailwind For Writing CSS](https://hackernoon.com/why-i-switched-to-tailwind-for-writing-css)
![](https://cdn.hackernoon.com/images/mXMYDDAHYlZYmKgLFUixTC24a2k1-pla3j1u.jpeg)
TailwindCSS is a highly customizable, low-level CSS framework. Here are my reasons why I decided to switch from normal CSS to Tailwind CSS for my work.

### [243. How to Use jQuery: An Introduction to the JavaScript Library](https://hackernoon.com/how-to-use-jquery-an-introduction-to-the-javascript-library-0j903159)
![](https://cdn.hackernoon.com/images/A0JT0kWjB2UTOGzv9jXoh17Xc5H2-7m1e319y.jpeg)
jQuery is a JavaScript library that is used on your websites. jQuery is open source material that is used to make Javascript programming easier.

### [244. The Best Chrome Extensions in 2022](https://hackernoon.com/the-best-chrome-extensions-in-2022)
![](https://cdn.hackernoon.com/images/YlcWytkfRIY64lSLBbuvErBdoUg2-m4039mg.jpeg)
I asked, “what are the best browser extensions for browsers?”

I received 50+ replies. Here are the best 10.

### [245. A Recipe For A Checkerboard Styled Page](https://hackernoon.com/a-recipe-for-a-checkerboard-styled-page-cxf3u3z)
![](https://cdn.hackernoon.com/images/gozn3v7h.jpg)
Last week, as part of an assignment for a Ruby on Rails application, I was given the challenge to create a checkerboard styled page. The design is from Nelson Sakwa and the requirements were as follow:

### [246. 5 Best JavaScript Templates for Business](https://hackernoon.com/5-best-javascript-templates-for-business)
![](https://cdn.hackernoon.com/images/V9YyIjSNWnMHBlBO4TSj5cPSIBj2-yu835e7.jpeg)
Templates can significantly speed up the development process. Here are the 5 Best Javascript Templates - check them out!

### [247. Why Your Product Needs to Integrate Using Webhooks](https://hackernoon.com/why-your-product-needs-to-integrate-using-webhooks)
![](https://cdn.hackernoon.com/images/f8MmnSz4wNTrkyqZnPESxfuXyH93-la93qai.jpeg)
Here are 4 reasons why your product should offer a webhooks feature and stop relying on API polling:

### [248. Why You Should Choose SASS](https://hackernoon.com/why-you-should-choose-sass)
![](https://cdn.hackernoon.com/images/XpCcNhSinyMKHrKtb4arbd3Nos33-sl93sh6.jpeg)
Sass is a mature, stable, and powerful professional-grade CSS preprocessor. It is similar to CSS and allows us to design websites in a more effective manner.

### [249. How to a Make Flutter Screen in 2 Minutes](https://hackernoon.com/how-to-a-make-flutter-screen-in-2-minutes)
![](https://cdn.hackernoon.com/images/Ry0vGbeiqbbNAwbLPBRkZrIZz2o2-ara2o8u.jpeg)
I want to show you, how to generate a Flutter screen in a couple of minutes using Codis. 

### [250. NFTs for Authorized User Registration - Part 1](https://hackernoon.com/nfts-for-authorized-user-registration-part-1)
![](https://cdn.hackernoon.com/images/kOGh8yb1TiVOy67Rvji043cXEXj1-ji93lyw.jpeg)
How does using an NFT as part of an MFA login work? Here's how. 

### [251. Web Design Mistakes that Just Won't Die](https://hackernoon.com/web-design-mistakes-that-just-wont-die)
![](https://cdn.hackernoon.com/images/6UvJdfoLIfNt1WHZtM2sUgjmUM73-9n1379p.jpeg)
In this thread, the Slogging community discusses the most common web design mistakes that just won't die.

### [252. A Complete Guide to How the CSS Not Selector Works](https://hackernoon.com/a-complete-guide-to-how-the-css-not-selector-works)
![](https://cdn.hackernoon.com/images/NpN8WH8v6CfA6j7dKAzuoiE5Lit2-yq93oal.jpeg)
In CSS, it's often necessary to signpost that we want to select an element, but not in specific circumstances - like if it has a certain class. 

### [253. How it Feels to Work in CSS and Styling in 2020](https://hackernoon.com/how-it-feels-to-work-in-css-and-styling-in-2020-q72w3z79)
![](https://firebasestorage.googleapis.com/v0/b/hackernoon-app.appspot.com/o/images%2FgaZTNviyRwbJIkQm85R8IxM2vOY2-frh30zb.jpeg?alt=media&token=c41a368b-d524-4ec4-b4b0-4504c90d74cb)
I am using the same format - a dialogue between two developers, one is giving different options to a less-experienced dev. While Jose's article is targeted more on JS tools and the environment setup, I decided to take another route and expand a different topic, that has been both actively discussed and confusing lately - CSS and styling.

### [254. 10 Trendy Web Design Options to Make a Website That Converts](https://hackernoon.com/10-trendy-web-design-options-to-make-a-website-that-converts)
![](https://cdn.hackernoon.com/images/Toybp9Pk88ggesLocaJQwtbcxhT2-fj1jc353q.jpeg)
What are the leading web design trends of 2021 are they worth investing in? From retro fonts to Augmented Reality to 3D modeling — there’s a lot to enjoy. 

### [255. Build Your Own Blog at $5 a Month [A Step by Step Guide]](https://hackernoon.com/build-your-own-blog-at-dollar5-a-month-a-step-by-step-guide-1gnv32yj)
![](https://cdn.hackernoon.com/drafts/g43zu3y0q.png)
Blogging about tech is fun. Having your own blog allows you to help others, polish your skills, and maybe get you a job. Blogging on popular tech sites is great. Obviously you're reading this on Hackernoon, so you know I do it. It's fun. But having your OWN site to manage your content is important as well. This gives you freedom to do things exactly as you want,  try out weird applications and patterns, and experiment.

### [256. 10 JavaScript Apps to Power your Business](https://hackernoon.com/10-javascript-apps-to-power-your-business)
![](https://cdn.hackernoon.com/images/da7H4NzOhAdhje46xkTgaLorF5m2-zd93znq.jpeg)


### [257. CSS Scroll-Driven Animations: A Step-by-Step Guide With No JavaScript](https://hackernoon.com/css-scroll-driven-animations-a-step-by-step-guide-with-no-javascript)
![](https://cdn.hackernoon.com/images/eVN9AN9mDJYmfURNnT9xECAjBRw2-748319z.jpeg)
Learn how to enhance your website with CSS scroll-driven animations, transforming static content into dynamic experiences effortlessly with no JavaScript.

### [258. An Introduction to Domain-Driven Design - Part 2](https://hackernoon.com/an-introduction-to-domain-driven-design-part-2)
![](https://cdn.hackernoon.com/images/WyL2V0Nj20amUlioe5bpd0cPHF92-wn4372v.jpeg)
Model - a set of concepts existing in the head of the customer/project creator and terms that reflect his understanding.

### [259. Canva Business Model Breakdown: Product, Revenue, Competition, and The Big Question ](https://hackernoon.com/canva-business-model-breakdown-product-revenue-competition-and-the-big-question)
![](https://cdn.hackernoon.com/images/Y14t1a3ZEoT7RE6300ayez7dRN83-y3137pc.jpeg)
What is Canva? Canva is a software product that helps designers of any skill level to create media 10x faster.

### [260. Web Design: Creating Classy Links with Animated Transitions](https://hackernoon.com/web-design-creating-classy-links-with-animated-transitions-9dw3ybv)
![](https://firebasestorage.googleapis.com/v0/b/hackernoon-app.appspot.com/o/images%2Fwqn8FTTUlabc0wgqLiB1u2A5wgr1-sb53uqq.webp?alt=media&token=d634f74c-45ce-4d87-91ea-b869c9488294)
Here’s how to use CSS to make your links even more beautiful.

### [261. 8 Great Chrome Extensions for Designers and Creatives](https://hackernoon.com/8-great-chrome-extensions-for-designers-and-creatives-zo2t3wqr)
![](https://cdn.hackernoon.com/images/aHcUME45O0Sw3JLt9OGFJpazIvO2-e41728we.jpeg)
These extensions will be the best assistance to the designers for creating powerful designs and also, to increase productivity. Good digital branding is responsible for the growth of a company. Thus, the creation of amazing designs should never cease.

### [262. Website Redesign Strategy With a 9 Stage Timeline](https://hackernoon.com/website-redesign-strategy-with-a-9-stage-timeline)
![](https://cdn.hackernoon.com/images/Q6vQAZdVuOfn659yMKmiVw76yzw2-26k3guz.jpeg)
The redesign process is explained in detail, with 9 stage timeline. Go step by step with this guide.

### [263. Web Designer vs Web Developer: What's the difference?](https://hackernoon.com/web-designer-vs-web-developer-whats-the-difference-8h2o368p)
![](https://cdn.hackernoon.com/images/5O5F1ZCMRLYcTRCXuHmZRnmps2t2-h11b32hs.jpeg)
So many businesses make the same mistakes when they set out to develop or redevelop their websites. Overcome with the compelling need to do it all as quickly as possible and as cheaply as possible, many companies take shortcuts which, sadly for them, ultimately costs them more in the long-run. Compromising on web design is one of those shortcuts that far too many individuals and businesses take, even though great web design ultimately leads to better performing websites and improved user experiences, as well as improved conversion rates. Well-designed websites create confidence that your business is trustworthy as well. 

### [264. A Guide to Bidirectional Scrolling in Responsive Designs](https://hackernoon.com/a-guide-to-bidirectional-scrolling-in-responsive-designs-rq1p3wgj)
![](https://firebasestorage.googleapis.com/v0/b/hackernoon-app.appspot.com/o/images%2FugoTV1vwcgR4mN8MMDUUN4vt6p02-a41m3w9k.jpeg?alt=media&token=173ceeba-01dc-41ac-9fd1-8ed1d65645f8)
Incessant scrolling while using an application is perceived as a flaw on both mobile and desktop. To address this concern, a shift to horizontal scrolling of elements is in trend now.

### [265. 9 Website Design Tips To Get Things Rolling](https://hackernoon.com/9-website-design-tips-to-get-things-rolling)
![](https://cdn.hackernoon.com/images/ZOclOIAl2ha2t534pZGhyWgk1FA3-f693onp.jpeg)
While website design isn't rocket science, there are a few stellar points you should keep in mind while designing a website.

### [266. 7 Conversion Rate Optimization Tips for Tech Startups](https://hackernoon.com/7-conversion-rate-optimization-tips-for-tech-startups-vm1431gz)
![](https://hackernoon.com/images/xoGWhb2ufgO2UXBTi4NKmlUq0BJ3-47x317u.jpeg)
Having a lot of traffic on your website is great. But your main goal should be to ensure that traffic is leading to conversion, which means conversion rate optimization should be a priority. 

### [267. Everything You Need to Know to Create a Free Website](https://hackernoon.com/everything-you-need-to-know-to-create-a-free-website)
![](https://cdn.hackernoon.com/images/MUo6MihNAVUIcUvRBbcToKZ7MKh1-x793plw.jpeg)
See what you need to know before you decide to get a free website!

### [268. Top 13 Professional Web Design Software & Tools for Beginners](https://hackernoon.com/top-13-professional-web-design-software-and-tools-for-beginners-a82z33kx)
![](https://cdn.hackernoon.com/images/O6cGdKVM77VtTdgZ9yACmWzxild2-26d4285r.jpeg)
To help businesses choose the right web design software, we’ve made a concise and easy-to-understand guide for you.

### [269. A Short History of Graphic Design Jobs](https://hackernoon.com/a-short-history-of-graphic-design-jobs)
![](https://cdn.hackernoon.com/images/j0VcnIj58mOSDbu7dw8c43rhpYC2-8492hi2.jpeg)
Graphic Designers and Artists are in high demand, but with advancements in software and the growth of the internet some fear that these jobs will die off.

### [270. "Growing Businesses Gives Me a Sense of Purpose." says Flow Ninja Founder/CEO ](https://hackernoon.com/growing-businesses-gives-me-a-sense-of-purpose-says-flow-ninja-founderceo)
![](https://cdn.hackernoon.com/images/InxBRjRIs6M1kdhuWcyNHiiUrxm1-os034pj.png)
10 Questions with Flow Ninja Founder & CEO Uros Mikic.

### [271. 45 Stories To Learn About Graphic Design](https://hackernoon.com/45-stories-to-learn-about-graphic-design)
![](https://cdn.hackernoon.com/images/github/graphic-design-43.png)
Learn everything you need to know about Graphic Design via these 45 free HackerNoon stories.

### [272. Amending and Updating a Git Commit](https://hackernoon.com/amending-and-updating-a-git-commit)
![](https://cdn.hackernoon.com/images/NpN8WH8v6CfA6j7dKAzuoiE5Lit2-hg93oqc.jpeg)
Now, you can easily update your commit messages by simply adding --amend to your git command.

### [273. Speed up AMP pages with an Image CDN](https://hackernoon.com/speed-up-amp-pages-with-an-image-cdn-3g2b3w4z)
![](https://firebasestorage.googleapis.com/v0/b/hackernoon-app.appspot.com/o/images%2FaCIjlH1H4dbEIL1I3whRaYLLCS13-zq2i3ewu.jpeg?alt=media&token=1f8e8a99-cedf-44b6-a9fb-aab2c515e987)
It takes a lot of time and effort to build a profitable website that offers great user experience on any given device type. When you start from a clean slate, you have to take care of everything on your own: browser compatibility, performance, responsive design, discoverability and a whole slew of other factors. 

### [274. How to Choose the Right Notification Infrastructure for Your Website or App](https://hackernoon.com/how-the-choose-the-right-notification-infrastructure-for-your-website-or-app)
![](https://cdn.hackernoon.com/images/ja745dL1g2eUtdoAG63yaLSyVSA2-8o93rez.jpeg)
Explore the core components of notification infrastructure and delve into the technical considerations that senior developers and CTOs should keep in mind.

### [275. Seven Deadly Sins You Can Make in Mobile App Design ](https://hackernoon.com/seven-deadly-sins-you-can-make-in-mobile-app-design)
![](https://cdn.hackernoon.com/images/gvq02irtWETgkyw1yfFAeDjK4xG3-02h3v26.jpeg)
There are too many examples when an app brings more annoyance than value. We’ve picked four of them and figured out the design sins they committed.

### [276. Create Spellbinding Parallax Effects with GSAP for Your Website](https://hackernoon.com/create-spellbinding-parallax-effects-with-gsap-for-your-website)
![](https://cdn.hackernoon.com/images/NpclsXHLfPf1qjBCjmjlbDg2CFo1-fn83wex.jpeg)
Learn how to create mesmerizing parallax effects using GSAP and ScrollTrigger to enhance your website's user experience and retention rate.

### [277. 9 Questions To Ask Before Settling on an Outsourced Software Development Team](https://hackernoon.com/9-questions-to-ask-before-settling-on-an-outsourced-software-development-team)
![](https://cdn.hackernoon.com/images/Af8l3P44nSSnjOpDtWo5qQjgiQx2-ma93on7.jpeg)
We live in a time when there are numerous options for outsourcing your development work. But how do you pick an outsourced development team?

### [278. How To Make A Site Bit By Bit [Beginners Guide]](https://hackernoon.com/how-to-make-a-site-bit-by-bit-beginners-guide-6bxr3y5b)
![](https://images.unsplash.com/photo-1499951360447-b19be8fe80f5?ixlib=rb-1.2.1&q=80&fm=jpg&crop=entropy&cs=tinysrgb&w=1080&fit=max&ixid=eyJhcHBfaWQiOjEwMDk2Mn0)
In 2020, anybody can fabricate and structure a site without knowing anything about web improvement, plan or coding.

### [279. Tracking the Evolution of UX Through Google's Homepage, Over the Years](https://hackernoon.com/tracking-the-evolution-of-ux-through-googles-homepage-over-the-years-yn363urs)
![](https://firebasestorage.googleapis.com/v0/b/hackernoon-app.appspot.com/o/images%2FFOSBkxRpMMhr0jzqpLzjyr5LuOI3-f9c3u2o.webp?alt=media&token=903aa11c-1f58-433c-a4ff-ca7d722a5796)
Google is well know for its minimal design of its homepage, but has it always been this way? 

### [280. Graphic Designer Tips: How to Communicate With Your Clients](https://hackernoon.com/graphic-designer-tips-how-to-communicate-with-your-clients-ll3g3163)
![](https://cdn.hackernoon.com/images/2vOzNW3CzhPzZV11OfA2uLyn3Hv1-hx2j31og.jpeg)
Client-oriented approach tips that help to build smooth and productive communication with clients.

### [281. The Difference Between Progressive and Responsive Web Development](https://hackernoon.com/the-difference-between-progressive-and-responsive-web-development)
![](https://cdn.hackernoon.com/images/19RI77FKYbfFZSUdswZsc3eTZs73-2m93phz.jpeg)
While a progressive app mimics the behavior of an app, it isn’t one – it’s a website.

### [282. HackerNoon - A User Experience Analysis: Part 1 ](https://hackernoon.com/hackernoon-a-user-experience-analysis-part-1)
![](https://cdn.hackernoon.com/images/sinW25rWovdN38P2ArzdPSCP3hi1-0ye3t0p.jpeg)
A user experience analysis of HackerNoon, the American online publishing website designed for tech enthusiasts to read, write, and publish. 

### [283. Text Truncation in CSS: Learn Single and Multiple Line Truncation with Ease](https://hackernoon.com/text-truncation-in-css-learn-single-and-multiple-lines-with-ease)
![](https://cdn.hackernoon.com/images/eVN9AN9mDJYmfURNnT9xECAjBRw2-57831sm.jpeg)
Learn how to effectively truncate text using CSS for both single and multiple lines, perfect for managing long strings and maintaining clean layouts.

### [284. Setting Up a Windows Subsystem for Linux](https://hackernoon.com/setting-up-a-windows-subsystem-for-linux)
![](https://cdn.hackernoon.com/images/fSZTVEH3Gcgnyfh4wc1erUt9Szq1-eyg3r24.jpeg)
Discover how installing WSL can revolutionize your development workflow, bridging the gap between Windows and Linux for seamless website development. 

### [285. 5 CSS Tips and Tricks to Try in Your Next Project](https://hackernoon.com/5-css-tips-and-tricks-to-try-in-your-next-project-sp3035y5)
![](https://cdn.hackernoon.com/images/HjmFcObwWgVzap4HlFpzGNpClau2-nd5z2a76.jpeg)
Looking for inspiration on how to add a twist to your project design? Take a look at those 5 CSS techniques and have fun experimenting with some bold ideas! 


### [286. 220 Stories To Learn About Ux Design](https://hackernoon.com/220-stories-to-learn-about-ux-design)
![](https://cdn.hackernoon.com/images/github/ux-design-256.png)
Learn everything you need to know about Ux Design via these 220 free HackerNoon stories.

### [287. 4 Tailwind CSS Options For Premium Templates & Components](https://hackernoon.com/4-tailwind-css-options-for-premium-templates-and-components)
![](https://cdn.hackernoon.com/images/p3qBwUKPv7M11MuaMx6DdPirp2A2-ael35dl.jpeg)
Tired of your website looking like every other Tailwind website? Here are 4 templates that will make you stand out without learning design.

### [288. How To Deal with A Very Bad eCommerce store design?](https://hackernoon.com/how-to-deal-with-a-very-bad-ecommerce-store-design-g8q32t9)
![](https://cdn.hackernoon.com/drafts/xqpv32j0.png)
Physical retail or eCommerce, customers today have an ocean of alternatives in both the online and offline markets. Dozens of super-markets built side-by-side or thousands of eCommerce sites on the internet, all of this mean the same thing –

### [289. How to Get the Fastest Browser Image Loads](https://hackernoon.com/how-to-get-the-fastest-browser-image-loads)
![](https://cdn.hackernoon.com/images/kOGh8yb1TiVOy67Rvji043cXEXj1-58d3rux.jpeg)
Use of the Picture Element allows the browser to select a single optimum image to download and display from among a list of images

### [290. How To Make Marvelous Microcopy: 7 Surefire Tips](https://hackernoon.com/how-to-make-marvelous-microcopy-7-surefire-tips-f3j3tfe)
![](https://firebasestorage.googleapis.com/v0/b/hackernoon-app.appspot.com/o/images%2FB5kOTfUlZBgHHO0Tl4UH6x7O7j32-g953uhi.png?alt=media&token=6b58af73-b1d3-4bec-89b1-bb9ab0734d61)
Good microcopy is one of the fastest ways to improve an interface. Try doing an audit on your UI with these tips to see how it stands up.

### [291. Ever Wondered What Happens When You Type google.com in Your Browser?](https://hackernoon.com/ever-wondered-what-happens-when-you-type-googlecom-in-your-browser)
![](https://cdn.hackernoon.com/images/yTOArOW5rSf3wiKmuD1GuJc22762-cj93h19.jpeg)
Ever wondered what happens behind the scenes when you type 'google.com' into your browser? 

### [292. How I Designed a Cool Landing Page Using HTML5, CSS3 and Bootstrap](https://hackernoon.com/how-i-designed-a-cool-landing-page-using-html5-css3-and-bootstrap-i2j33ju)
![](https://cdn.hackernoon.com/images/e178Xecok0TlGP5gaTutNkU1thY2-ck4533hz.jpeg)
Making project is a fun as well as a challenging task. 

### [293. Removing Items From a JavaScript Array](https://hackernoon.com/removing-items-from-a-javascript-array)
![](https://cdn.hackernoon.com/images/da7H4NzOhAdhje46xkTgaLorF5m2-7z930tk.jpeg)
Let's look at how to remove a particular array item in Javascript.

### [294. How to Set a div to Its Content's Width in CSS](https://hackernoon.com/how-to-set-a-div-to-its-contents-width-in-css)
![](https://cdn.hackernoon.com/images/da7H4NzOhAdhje46xkTgaLorF5m2-8c930ar.jpeg)
In HTML we use block elements to take up the full width of the page. These differ in properties from inline elements, which are typically found within text flow

### [295. A Beginner's Guide: Responsive Images With srcset](https://hackernoon.com/a-beginners-guide-responsive-images-with-srcset)
![](https://cdn.hackernoon.com/images/qEyR6rrtSuQYAumVgjwd7lxvi9L2-el93ulx.jpeg)
Learn how to use srcset to support different device pixel ratios with imgix.

### [296. Laravel 8 Features That You Should Know](https://hackernoon.com/laravel-8-features-that-you-should-know-c91d34le)
![](https://cdn.hackernoon.com/images/MJpFVUEItkSdoh38rYo60VT7RfH3-7g1e29ys.jpeg)
This blog talks about why Laravel 8 deserves another look because of several features that makes it perfect for web development.

### [297. 113 Stories To Learn About Ui Design](https://hackernoon.com/113-stories-to-learn-about-ui-design)
![](https://cdn.hackernoon.com/images/github/ui-design-718.png)
Learn everything you need to know about Ui Design via these 113 free HackerNoon stories.

### [298. A Beginner's Guide to Font Selection: Tips and Top Free Typeface Combinations for Impactful UI](https://hackernoon.com/the-beginners-guide-to-font-selection-tips-and-top-free-typeface-combinations-for-impactful-ui)
![](https://cdn.hackernoon.com/images/PjnirPq7KLXVDAdgG1JJwqR92pG2-s2q3obu.jpeg)
Discover the secrets of impactful UI design through effective font selection. This guide shares tips for junior designers.

### [299. 10 Tips to Make Your Website More Attractive](https://hackernoon.com/10-tips-to-make-your-website-more-attractive-e93x3wcc)
![](https://firebasestorage.googleapis.com/v0/b/hackernoon-app.appspot.com/o/images%2FugoTV1vwcgR4mN8MMDUUN4vt6p02-xu3o3we7.jpeg?alt=media&token=a87a1423-f985-4369-b2bd-a905da26fa14)
There are billions of websites, ranging from the humble static page to the massive e-commerce platform. But whatever the field, not all sites are created equal. Far from it. Indeed, there are big differences from one site to another - disparities that have an impact in particular on the interest of Internet users. 

### [300. How Does the CSS Box Model Work? ](https://hackernoon.com/how-does-the-css-box-model-work)
![](https://cdn.hackernoon.com/images/M6G22rxQzLTqx37eMqcSVG1Ybvj2-b493vpr.jpeg)
Let's think a little bit more about how box models work. 

### [301. Design Digest: Trends, Logo Redesign, and Fresh Memes [Part1]](https://hackernoon.com/design-digest-trends-logo-redesign-and-fresh-memes-part1-4e1n33ve)
![](https://cdn.hackernoon.com/images/3nhao37bBEfHA9RTQ0WNVWfXPD02-n81g33qp.jpeg)
The ultimate design digest with fresh news, trends overview, and the best cases from the Awesomic team. Find out what was popular in March and check out memes!

### [302. The Best Ways to Improve Your NFT Marketplace Performance](https://hackernoon.com/7-ways-to-improve-your-nft-marketplace-performance)
![](https://cdn.hackernoon.com/images/qEyR6rrtSuQYAumVgjwd7lxvi9L2-bi93paj.jpeg)
In NFT marketplaces,  page experience, SEO, and credibility can all determine success. Here are 7 ways to improve performance through visual media optimization.

### [303. Users Make Decisions Based on Predictable Subconscious Patterns](https://hackernoon.com/users-make-decisions-based-on-predictable-subconscious-patterns-l83d3w6v)
![](https://firebasestorage.googleapis.com/v0/b/hackernoon-app.appspot.com/o/images%2FB5kOTfUlZBgHHO0Tl4UH6x7O7j32-m92728q2.png?alt=media&token=87b200d5-f868-4f0b-a151-8f86feb1d3da)
We like to apply labels to users: they’re irrational, lazy, unpredictable, rushed, and so on.

### [304. How My Blog Posts Generate Their Own Images](https://hackernoon.com/how-my-blog-posts-generate-their-own-images)
![](https://cdn.hackernoon.com/images/CNo0uTdT90dcBG86dSWmX8ej60Q2-2m83gtd.png)
Each blog post generates its own unique SVG image from a content hash. No stock photos, no AI generation. Same content always produces the same visual. 

### [305. A Deeper Look into Our Design Process for SaaS Applications](https://hackernoon.com/a-deeper-look-into-our-design-process-for-saas-applications)
![](https://cdn.hackernoon.com/images/da7H4NzOhAdhje46xkTgaLorF5m2-8h93z4m.jpeg)
We develop a custom product design process that takes UX and UI into account and allows us to build effective software products.

### [306. 7 Key Points To Improve UX Design](https://hackernoon.com/7-key-points-to-improve-ux-design-db1t33ux)
![](https://cdn.hackernoon.com/images/SCG7uwsh9QfbE7gj1MYbPh1WeJo1-qt1u33kp.jpeg)
These are 7 crucial key points to improve the UX design of your digital product. To improve UX, you need to know what the “weak spots” of the interface are.

### [307. Using Tailwind Classes to Customize Algolia React Components](https://hackernoon.com/using-tailwind-classes-to-customize-algolia-react-components)
![](https://cdn.hackernoon.com/images/VoliPy4PhDefuF3Ry84BTJ9Bv8V2-efd3i83.jpeg)
Algolia provides a couple of pre-built themes for search experiences as well as the ability to create custom themes.

### [308. User Segmentation: Do’s and Dont’s](https://hackernoon.com/user-segmentation-dos-and-donts)
![](https://cdn.hackernoon.com/images/c4BlFYFz2rffCXiZ2YTMl5vKhK32-7ib3hg4.jpeg)
 In this article, we’ll dive deep into what you should do and shouldn’t when it comes to user segmentation. 

### [309. A First Look into Conditional When and Else Statements in CSS](https://hackernoon.com/a-first-look-into-conditional-when-and-else-statements-in-css)
![](https://cdn.hackernoon.com/images/NpN8WH8v6CfA6j7dKAzuoiE5Lit2-ak93ktl.jpeg)


### [310. Why Proactive WordPress Website Care is Important: A Guide to Long-Term Success](https://hackernoon.com/why-proactive-wordpress-website-care-is-important-a-guide-to-long-term-success)
![](https://cdn.hackernoon.com/images/5wpKgV75aONqkTJlafw2yQmK9yd2-xo93xaa.jpeg)
Discover the importance of proactive WordPress website maintenance for improved performance, enhanced security, user experience, and SEO advantages.

### [311. The Storybook Landing Page: A CSS/JavaScript Animated Splash Screen Landing Page](https://hackernoon.com/the-storybook-landing-page-a-cssjavascript-animated-splash-screen-landing-page)
![](https://cdn.hackernoon.com/images/kOGh8yb1TiVOy67Rvji043cXEXj1-fc93r2d.gif.webp)
A CSS/JavaScript Animated Splash Screen Landing Page

### [312. Free Courses for Learning HTML: 2020 Edition](https://hackernoon.com/free-courses-for-learning-html-2020-edition-9g5l3wea)
![](https://images.unsplash.com/photo-1461632830798-3adb3034e4c8?ixlib=rb-1.2.1&q=80&fm=jpg&crop=entropy&cs=tinysrgb&w=1080&fit=max&ixid=eyJhcHBfaWQiOjEwMDk2Mn0)
HTML and CSS are the pillars of web development. They are used to create web pages.  HTML provides the structure to your web page while CSS provides them the style to look better. I know most people use Bootstrap: a CSS library to make their web pages look beautiful and professional. But, basic knowledge of the CSS concept is very important to understand how bootstrap works. 

### [313. How To Create a Search Engine for Any Table Using a Custom React Hook](https://hackernoon.com/how-to-create-a-search-engine-for-any-table-using-a-custom-react-hook-gxm3u21)
![](https://firebasestorage.googleapis.com/v0/b/hackernoon-app.appspot.com/o/images%2Fs9eUkDomDPhgVT7d6Sz0ksigK823-uu1l3yms.jpeg?alt=media&token=b8d57865-8266-4fa1-a4dd-b73b09989ac8)
I am going to show you guys how to make a basic search engine that would enable anyone to search for specific data in your table that you’ve built using any package or library in React.

### [314. 7 Core Principles for Selling Web Design and Development Services](https://hackernoon.com/7-core-principles-for-selling-web-design-and-development-services)
![](https://cdn.hackernoon.com/images/HMCaLOVFM6Ye2JvLYLqGq3qOgf43-2o83xlo.jpeg)
Check out 7 principles you should have in mind when selling web design and development work. 

### [315. How to Insert an Item Into an Array at a Specific Index in Javascript](https://hackernoon.com/how-to-insert-an-item-into-an-array-at-a-specific-index-in-javascript)
![](https://cdn.hackernoon.com/images/NpN8WH8v6CfA6j7dKAzuoiE5Lit2-0k93p31.jpeg)
We use the splice method to insert an item into an array at a specific index in javascript, which takes 3 arguments - and also lets us delete items too. 

### [316. How to Make a WebSocket Server With JavaScript: I Like My Servers Like I Like My Coffee, My Own ](https://hackernoon.com/how-to-make-a-websocket-server-with-javascript-i-like-my-servers-like-i-like-my-coffee-my-own)
![](https://cdn.hackernoon.com/images/M6G22rxQzLTqx37eMqcSVG1Ybvj2-e293vg6.jpeg)
If you try to do something real-time with REST APIs, you're going to have a bad time.

### [317. Miro and Zoom are Winning (and 5 More Takeaways from 2020's UX Tools Survey)](https://hackernoon.com/miro-and-zoom-are-winning-and-5-more-takeaways-from-2020s-ux-tools-survey-of2i31wg)
![](https://cdn.hackernoon.com/images/B5kOTfUlZBgHHO0Tl4UH6x7O7j32-z54o282g.png)
Over 4,000 designers responded to Taylor Palmer's annual UX Tools survey. Here are some takeaways from the results.

### [318. Some of the Most Common UX/UI Mistakes](https://hackernoon.com/some-of-the-most-common-uxui-mistakes)
![](https://cdn.hackernoon.com/images/65JcEwJM7shIS6JEnPbeeP3W4tn2-hqf3oqd.jpeg)
The software market is suffocated with new mobile and web apps monthly. That’s why the focus has moved on ensuring a client-centered and visible UI/UX design.

### [319. HackerNoon - A User Experience Analysis: Part 2](https://hackernoon.com/hackernoon-a-user-experience-analysis-part-2)
![](https://cdn.hackernoon.com/images/sinW25rWovdN38P2ArzdPSCP3hi1-dc93t6l.jpeg)
HackerNoon (hackernoon.com) is an American online publishing  website, designed for tech enthusiasts to read, write, and publish.

### [320. Every Web Designer Should Know These 13 Beautiful Gradient Tools 💯👍](https://hackernoon.com/every-web-designer-should-know-these-13-beautiful-gradient-tools)
![](https://cdn.hackernoon.com/images/gaZTNviyRwbJIkQm85R8IxM2vOY2-ki83yfk.jpeg)
I compiled some of my favorite gradient makers. I will provide you with the direct links, give you descriptions, and include screenshot of the tools.

### [321. 367 Stories To Learn About Web Design](https://hackernoon.com/367-stories-to-learn-about-web-design)
![](https://cdn.hackernoon.com/images/github/web-design-837.png)
Learn everything you need to know about Web Design via these 367 free HackerNoon stories.

### [322. Maximizing Accessibility in Your Web App with Filestack](https://hackernoon.com/maximizing-accessibility-in-your-web-app-with-filestack)
![](https://cdn.hackernoon.com/images/5unChxTmteXA0Tg5iBqQvBnMK492-rx93une.jpeg)
Make your web app accessible to everyone with Filestack's features and tools for maximizing accessibility.

### [323. Introducing CropScore: An Image Cropper for Content Creators ✂✨](https://hackernoon.com/introducing-cropscore-an-image-cropper-for-content-creators)
![](https://cdn.hackernoon.com/images/gaZTNviyRwbJIkQm85R8IxM2vOY2-lu93hcp.jpeg)
If you are a content creator, the chances are you have come across stretched, shrank, non-centered or pixelated images after the posting of your material. 

### [324. 7 Best Product Design Tools Every Team Should Consider](https://hackernoon.com/7-best-product-design-tools-every-team-should-consider-z84434c4)
![](https://firebasestorage.googleapis.com/v0/b/hackernoon-app.appspot.com/o/images%2Fiqm3hLqubEWtHeRuSuoIzQAsaat2-5eht3u7v.jpeg?alt=media&token=5562818e-0bf7-4fc3-80df-c16eeb147985)
Yes, we've finally reached a point where design is such a huge piece of a product's creation and maintenance that a whole paraphernalia of software will definitely be an essential asset to your projects. Each program will fill different needs and facilitate the best and most efficient work deliveries, be it structure, visual design, illustrations, interactions or animations.

### [325. Custom Logic in Webflow: How to Push No-Code to Its Limits](https://hackernoon.com/custom-logic-in-webflow-how-to-push-no-code-to-its-limits)
![](https://cdn.hackernoon.com/images/5wpKgV75aONqkTJlafw2yQmK9yd2-e103ba8.png)
Discover how to extend Webflow’s no-code capabilities with custom logic, low-code integrations, and performance-first architecture.

### [326. 108 Stories To Learn About Website Design](https://hackernoon.com/108-stories-to-learn-about-website-design)
![](https://cdn.hackernoon.com/images/github/website-design-450.png)
Learn everything you need to know about Website Design via these 108 free HackerNoon stories.

### [327. How to Commit and Push a Blank Directory to Your Git Repository?](https://hackernoon.com/how-to-commit-and-push-a-blank-directory-to-your-git-repository)
![](https://cdn.hackernoon.com/images/NpN8WH8v6CfA6j7dKAzuoiE5Lit2-2793ksf.jpeg)
Usually, blank directories are not pushed when you commit and push new code to your repository. Let's look at how to push a blank directory to your git repo.

### [328. 6 VueJS Admin Templates With Cool UX Design You Should Check Out](https://hackernoon.com/6-vuejs-admin-templates-with-cool-ux-design-you-should-check-out-z51834zt)
![](https://hackernoon.com/images/CPZcQZuKTIRNEmHkkkOCBTvsTyd2-uzjw34jf.jpeg)
Choose the VueJS template, the fastest-growing framework in JavaScript due to its high performance and flexibility. Check all the benefits inside. 

### [329. Optimizing SEO Efforts for Google's Core Web Vitals on WordPress Sites](https://hackernoon.com/optimizing-seo-efforts-for-googles-core-web-vitals-on-wordpress-sites-3g2e31jj)
![](https://cdn.hackernoon.com/images/6Hfcq2KS46ggNUv0Qni0yxtxozD3-5j2e32hf.jpeg)
Speed past your competition by optimizing your WordPress site for Google’s Core Web Vitals, the newest addition to Google's search ranking algorithm.

### [330. 60 Stories To Learn About Design Thinking](https://hackernoon.com/60-stories-to-learn-about-design-thinking)
![](https://cdn.hackernoon.com/images/github/design-thinking-300.png)
Learn everything you need to know about Design Thinking via these 60 free HackerNoon stories.

### [331. A Pledge to Better App Notifications by App Developers](https://hackernoon.com/a-pledge-to-better-app-notifications-by-app-developers)
![](https://cdn.hackernoon.com/images/7OHSNWE6pKYVHaleLrssNcNVlPe2-zei3obd.jpeg)
There is a direct connection between all the unnecessary notifications you get on your phone and the sub-prime financial crisis of 2008: lack of accountability 

### [332. Tech founder, Why Haven't You Become a Designer Yet?](https://hackernoon.com/tech-founder-why-havent-you-become-a-designer-yet)
![](https://cdn.hackernoon.com/images/Wk35npcSuzfUsCN1HfPOa97J91u1-a1c3pmv.jpeg)
No, seriously, why not? It’s cool to be a designer, a creative person who DJs vinyl sets in a funky club at night and starts the morning with a double-filter coffee and a vegan croissant overlooking the sea to get inspired for the next advertising campaign. Not a bad stereotype, right?

### [333. Boosting Website Performance with Server-Side Rendering](https://hackernoon.com/boosting-website-performance-with-server-side-rendering)
![](https://cdn.hackernoon.com/images/z5L7cZprQRgVvL7bpydqTnZfaqu1-9093uqk.jpeg)
Enhance website speed and performance with server-side rendering. Learn implementation tips in this guide for improved user experience and SEO.

### [334. Why You Should Use Web Design 3.0 In 2021](https://hackernoon.com/why-you-should-use-web-design-30-in-2021-d31a34dr)
![](https://cdn.hackernoon.com/images/uKSZKKcFJCakeFdShAiVHxKFulE2-us1m33h7.jpeg)
Web design is an essential part of our life. We have watched what is taking place in the web design world since 2000.  There is drastic evolution in the web design process; millions of web pages are designed with active participation. You might have noticed differences in the average website these days. Some changes have been measured during the last years; the change occurring is known as web 3.0, a new web design era.

### [335. Why Designers and Developers Must Rethink the Web Interfaces for an AI-First Era](https://hackernoon.com/why-designers-and-developers-must-rethink-the-web-interfaces-for-an-ai-first-era)
![](https://cdn.hackernoon.com/images/5wpKgV75aONqkTJlafw2yQmK9yd2-q403bsg.webp)
AI chat is breaking the old page-based web. This article explores the new hybrid interface where conversational AI and structured UI work side-by-side.

### [336. My Experience Using Velo by Wix: Building a Simple Website](https://hackernoon.com/my-experience-using-velo-by-wix-building-a-simple-website-gs4433ht)
![](https://cdn.hackernoon.com/images/Mtl1pk5ux8XlFZji7ZfrmcSwkHI3-va1b33tn.jpeg)
Velo is a great platform, used to create both front-end and back-end website bases, it is full stack which is a huge step up from other Wix services

### [337. Basic Guide to Creating a Page Using Velo by Wix](https://hackernoon.com/basic-guide-to-creating-a-page-using-velo-by-wix-i2933p8)
![](https://cdn.hackernoon.com/images/RoifOyeHnPelQUu5SKamxiCm4py1-1m1a333k.jpeg)
Velo is a brand-new Wix full-stack development platform. This essentially allows you to add custom code to your website.

### [338. 6 Web Design Principles You Need to Know](https://hackernoon.com/6-web-design-principles-you-need-to-know)
![](https://cdn.hackernoon.com/images/c04EFcTv66Zbzhwa4Fz3VAZCs9g2-sd93k7g.jpeg)
Good web design is good business.

### [339. Make Your App or Site Carbon Neutral in 3 Steps](https://hackernoon.com/make-your-app-or-site-carbon-neutral-in-3-steps)
![](https://cdn.hackernoon.com/images/aCIjlH1H4dbEIL1I3whRaYLLCS13-c493l4t.jpeg)


### [340. 15 Common Mistakes to Avoid When Developing a Real Estate Website](https://hackernoon.com/15-common-mistakes-to-avoid-when-developing-a-real-estate-website-hz4j3tbi)
![](https://firebasestorage.googleapis.com/v0/b/hackernoon-app.appspot.com/o/images%2FwnINALaUIpOPZfIV1UQPTyX1YtO2-ncjf3tiw.jpeg?alt=media&token=60ab0051-4782-44ca-919a-f1528b1eeb97)
Are you thinking of starting a new online business but the thought of designing the website is weighing you down? Most of us can relate to that! After all, the first step tends to be the hardest especially when we are talking about real estate websites. 

### [341. Top Five Sites That Use a Personal Domain Name](https://hackernoon.com/top-five-sites-that-use-a-personal-domain-name-i31m3efg)
![](https://firebasestorage.googleapis.com/v0/b/hackernoon-app.appspot.com/o/images%2FvdYL8AKgOYVgOpl5zri0lwpXv7n1-nmp3usy.jpeg?alt=media&token=23a79728-6b4d-454f-8142-24ab4315d6da)
If you want to find a domain name these days, you have to come up with something as unique as a celebrity baby name. Many of us have been able to reserve our personal name domains, and some wonder how far they can push a site that uses their own personal name.

### [342. Using 'Git Pull' for Force Overwriting Local Changes](https://hackernoon.com/using-git-pull-for-force-overwriting-local-changes)
![](https://cdn.hackernoon.com/images/NpN8WH8v6CfA6j7dKAzuoiE5Lit2-jc93o5r.jpeg)
Have you ever been working on a project in git and ran into an error telling you that you can't use git pull because you have local changes?

### [343. A Simple Web Component for Building a Slideshow](https://hackernoon.com/a-simple-web-component-for-building-a-slideshow)
![](https://cdn.hackernoon.com/images/5wpKgV75aONqkTJlafw2yQmK9yd2-mu93om5.jpeg)
Building a web component that renders one picture at a time. 

### [344. Where To Apply The Micro Frontends Approach?](https://hackernoon.com/where-to-apply-the-micro-frontends-approach)
![](https://cdn.hackernoon.com/images/lmcwhIPXHyPIgqoOoDrA9xd8umf1-tpa4352u.jpeg)
Brief thoughts about micro frontends, how they can be best used when building websites and when the best situations to implement them are as well as drawbacks. 

### [345. UX Design 101: Understanding User Flows and How to Create Them](https://hackernoon.com/ux-design-101-understanding-user-flows-and-how-to-create-them-156k3typ)
![](https://firebasestorage.googleapis.com/v0/b/hackernoon-app.appspot.com/o/images%2FB5kOTfUlZBgHHO0Tl4UH6x7O7j32-5w1z28jx.png?alt=media&token=26cf6eea-d8f9-4d32-a401-d436c77f6254)
The ability to create and think in user flows is one of the most important skills in a UX designer's toolkit.

### [346. Flexbox and CSS Grid - "The Dream Team"](https://hackernoon.com/flexbox-and-css-grid-the-dream-team-011u3udz)
![](https://firebasestorage.googleapis.com/v0/b/hackernoon-app.appspot.com/o/images%2FMfV1fH3qRYXisAQlVgULHHetAnP2-3z2r28uv.jpeg?alt=media&token=8d169810-6ded-4183-bc9d-7c4971f5a169)
If right run a search for "CSS Grid and Flexbox," you'll find mostly articles or videos with the title "CSS Grid VS Flexbox". These articles and videos assume one is better than the other. However, the truth is that both are great and one isn't better than the other.

### [347. Why Smart Design Decisions in Payment Systems Can Save You Millions](https://hackernoon.com/why-smart-design-decisions-in-payment-systems-can-save-you-millions)
![](https://cdn.hackernoon.com/images/TJk2cxGlG3VZwx2RSrmlsEsinOg1-ik436c1.jpeg)
Discover how well-designed payment systems can prevent costly mistakes and enhance business profitability. 

### [348. 5 Common Mistakes to Avoid When Designing an MVP for Crypto Projects](https://hackernoon.com/5-common-mistakes-to-avoid-when-designing-and-mvp-for-crypto-projects)
![](https://cdn.hackernoon.com/images/5wpKgV75aONqkTJlafw2yQmK9yd2-v793ood.jpeg)
Invest your time and money wisely, leveraging crucial aspects of product design for efficiency.

### [349. A Simple Guide for CSS Animations](https://hackernoon.com/a-simple-guide-for-css-animations-6a363uby)
![](https://firebasestorage.googleapis.com/v0/b/hackernoon-app.appspot.com/o/images%2FkitWXQhay3Wa91bwCv4tErwpIfr2-3i7l3u01.jpeg?alt=media&token=d810ee3c-bb22-4a0e-ae28-3801406830cc)
Animations are very useful tools to make pages more appealing. I would like to start with what are animations, give some supplementary information, and give some animation syntax examples.

### [350. Optimizing Web Apps for High Traffic: Load Balancing, Caching, Database Performance](https://hackernoon.com/optimizing-web-apps-for-high-traffic-load-balancing-caching-database-performance)
![](https://cdn.hackernoon.com/images/oTZ8b9FUzDSBeVCoipwJ5IEuU823-se93t1r.jpeg)
We live with the constant need for web apps to effectively process high volumes of data exchange. In this, we explore some tried and tested techniques to do so.

### [351. 16 Places to Find Illustrations for Your Projects 📚🎨](https://hackernoon.com/16-places-to-find-illustrations-for-your-projects)
![](https://cdn.hackernoon.com/images/gaZTNviyRwbJIkQm85R8IxM2vOY2-9r03g56.jpeg)
16 sites that offer free illustrations 

### [352. Progressive Enhancement: Basics, Benefits and Web Design Tips](https://hackernoon.com/progressive-enhancement-basics-benefits-and-web-design-tips-01q3tqk)
![](https://firebasestorage.googleapis.com/v0/b/hackernoon-app.appspot.com/o/images%2FfX3IlareH6MtQtG3ISXGn1PzXTo1-s23n3tog.jpeg?alt=media&token=805267c1-d478-4f2c-8cb7-30d639b96232)
The advancement in technology has given rise to a variety of browsing platforms. It is imperative to ensure proper support to the website for fitting in the browsers. Due to this, progressive enhancement is getting higher popularity among web designers and developers to provide a wide range of browsers accessibility. 

### [353. 11 Overlooked HTML Tags That Can Make Your Pages Pop](https://hackernoon.com/11-overlooked-html-tags-that-can-make-your-pages-pop)
![](https://cdn.hackernoon.com/images/IYXqfnSadehiMIPPHRg7yoAmak12-ex03aqv.webp)
Learn about 11 hidden HTML tags that can make your web development easier, improve your website’s functionality, and boost SEO. Great for beginners and experts!

### [354. An Elegant Three Button HTML and JavaScript Audio Animation Player](https://hackernoon.com/an-elegant-three-button-html-and-javascript-audio-animation-player)
![](https://cdn.hackernoon.com/images/kOGh8yb1TiVOy67Rvji043cXEXj1-6p93ruf.gif.webp)
The HTML and JavaScript code used to build an accessible and responsive design animation and audio player for the Web.

### [355. Comparing Web Development Architectures: Headless vs Decoupled vs Traditional](https://hackernoon.com/comparing-web-development-architecture-headless-vs-decoupled-vs-traditional)
![](https://cdn.hackernoon.com/images/ePQndQZnN5VLv3YAqt7I4iFTpNG3-zd93pl7.jpeg)
Get a detailed insight into the differences between traditional, decoupled and headless architecture and decide which architecture may best fit your business.

### [356. 3 Web Design Factors to Ponder Before Starting an E-commerce Venture](https://hackernoon.com/3-web-design-factors-to-ponder-before-starting-an-e-commerce-venture-lw2c316q)
![](https://firebasestorage.googleapis.com/v0/b/hackernoon-app.appspot.com/o/images%2F2npbxc92MlU8q7vlUuQou0Fdir72-zw1x31mu.jpeg?alt=media&token=368141e3-f551-4aad-b622-07bfff62c1ba)
Developing a website for an e-commerce venture is a process that needs to be done with deft care. Starting a website is easy, but to maintain it is the real deal. That's why you need to start the process with all the precautions and preparation as anything can go wrong. Web design and development is very difficult and can look impossible to perfect, especially for the newcomers.

### [357. Proven Methods for Finding UX Research Participants](https://hackernoon.com/proven-methods-for-finding-ux-research-participants)
![](https://cdn.hackernoon.com/images/B5kOTfUlZBgHHO0Tl4UH6x7O7j32-uqt352k.png)
Cutting down on time, effort & money it takes to recruit research participants via quick & scrappy techniques, leveraging relationships & using automation. 

### [358. 17 Killer Web Apps to Increase Productivity 🚀💯](https://hackernoon.com/17-killer-web-apps-to-increase-productivity)
![](https://cdn.hackernoon.com/images/gaZTNviyRwbJIkQm85R8IxM2vOY2-ov03glj.jpeg)


### [359. How to WOW Users With Intuitive UX Design](https://hackernoon.com/how-to-wow-users-with-intuitive-ux-design)
![](https://cdn.hackernoon.com/images/gjjoK5TvP0bjj0Me21Gxh6Vv3dh2-9h13tpw.jpeg)
70% of online businesses fail because of bad usability. The solution to this challenge is an approach known as Intuitive UX Design

### [360. Improving Design Handoffs: A Guide](https://hackernoon.com/improving-design-handoffs-a-guide-ri3z3tjm)
![](https://firebasestorage.googleapis.com/v0/b/hackernoon-app.appspot.com/o/images%2FWvW28jEl4jUjfwJehRmZlkXmrQw2-hye305v.png?alt=media&token=6bf42279-545a-412d-a10c-5778219d79c1)
To build an awesome and successful digital product you need to do a lot of things. Such as planning, market research, build a prototype, design it, code it, ship it etc. For this whole process, you need to go through lots of handoffs and team communications. One of the more painful handoffs is the Design-to-Development Handoff.

### [361. How To Plan Your Next Website Redesign](https://hackernoon.com/how-to-plan-your-next-website-redesign-ou3531jq)
![](https://cdn.hackernoon.com/images/MCfgBiFOpThWNPrXGbzcjKveGfn2-p61331ef.jpeg)
Learn how to plan and execute a website redesign, whether you use a CMS like Drupal or you build a site from scratch.

### [362. Web Design Tips to Make Your Website Stand Out](https://hackernoon.com/10-common-web-design-mistakes-to-avoid)
![](https://cdn.hackernoon.com/images/2P5EA35cKWPHhLpaWtCbnq7ucuq2-9aj3j5i.jpeg)
A good web design helps you keep leads and turn them into profit. This article gives you ten web design mistakes to avoid when designing your website.

### [363. How to Implement Dark Mode: 5 Essential Tips to Remember](https://hackernoon.com/how-to-implement-dark-mode-5-essential-tips-to-remember)
![](https://cdn.hackernoon.com/images/hS37dtFlOtPxuHM03IBKFB7INsO2-hd93i1w.jpeg)
Here are 5 tips you should keep in mind when implementing dark mode in your apps.

### [364. How to Create a Dynamic Yelp-Inspired Loader Animation with HTML and CSS](https://hackernoon.com/how-to-create-a-dynamic-yelp-inspired-loader-animation-with-html-and-css)
![](https://cdn.hackernoon.com/images/C2Edh2NdoUVBNwgozp9BzU9I7Uw1-qn834wg.gif.webp)
Creating an engaging and visually appealing loader animation can significantly enhance the user experience. In this guide, we’ll explore how to replicate.

### [365. 7 Websites to Inspire Your Next Web Design](https://hackernoon.com/7-websites-to-inspire-next-level-web-design)
![](https://cdn.hackernoon.com/images/uRTauF3LioZDGkbCBMkvP0si8Lr2-w893rtq.jpeg)
As a developer or designer, it's always important to stay up-to-date on the latest trends and techniques in your field.

### [366. An In-Depth Look at Image Scaling Concepts](https://hackernoon.com/an-in-depth-look-at-image-scaling-concepts)
![](https://cdn.hackernoon.com/images/kOGh8yb1TiVOy67Rvji043cXEXj1-14163rd6.jpeg)
Considerations upon image sizing for web display

### [367. Web Application Templates with Perfect Design in 2022](https://hackernoon.com/web-application-templates-with-perfect-design-in-2022)
![](https://cdn.hackernoon.com/images/a2n9GodCotfUHvvM9KmOiHPmLci1-hh039kd.jpeg)
This is our rating of the best Web App Templates. Keep reading to know which ones they are and how they can speed up and improve your web development practice!

### [368. Benefits of Admin Templates Explained](https://hackernoon.com/benefits-of-admin-templates-explained-aa3a3ysd)
![](https://cdn.hackernoon.com/images/qzv63k0h.jpg)
When your web development project requires custom, well-designed admin panel or dashboard interface, you might be still on the fence about the tech you are going to use. Should you develop it from scratch, or stick with the chosen CMS, or go for a template? Well, of course, you should go for a template! Because it’s almost always the fastest and the most cost-effective solution when you aim for extensive customization and integration of your admin panel. But don’t just take our biased word for it, read on to see for yourself.

### [369. How to Prepare Your Site for Heavy Traffic](https://hackernoon.com/how-to-prepare-your-site-for-heavy-traffic-r75h3wlf)
![](https://cdn.hackernoon.com/drafts/d81d2eul.png)
1. Monitor your infrastructure. 
First of all, you should know what's happening with your website. If you're experienced with Prometheus/Grafana, you could use them, but if you’re not, it's not a problem;  you can use any monitoring service, such as DataDog or any other SaaS service, and set it up really quickly. If it's still hard, use pingdom or site24x7, at least to check that your website is still available. 

### [370. 10 CSS Tips To Make Your Site Faster](https://hackernoon.com/10-css-tips-to-make-your-site-faster)
![](https://cdn.hackernoon.com/images/NqFBgsMsodTucsTW6YyqzBOeFmI2-0vk329md.jpeg)
Let's see some useful CSS tips to put in place that will improve the speed of your website and improve the user experience while maintaining your design. 

### [371. How Does User Experience Leave A Footprint On Your Business?](https://hackernoon.com/how-does-user-experience-leave-a-footprint-on-your-business-q41q3yyv)
![](https://cdn.hackernoon.com/images/5gnd3y3g.jpg)
Everything boils down to customer experience today. Whether it is a mobile application or a website, there is absolutely no way you can turn a blind eye to UX and UI. 

### [372. How to Dynamically Hide and Show Slot Content in a Web Component](https://hackernoon.com/how-to-dynamically-hide-and-show-slot-content-in-a-web-component)
![](https://cdn.hackernoon.com/images/5wpKgV75aONqkTJlafw2yQmK9yd2-yu93ot5.jpeg)
My attempt at dynamically showing/hiding various slots.

### [373. My First React App, markView: An Interactive Markdown Previewer](https://hackernoon.com/my-first-react-app-markview-an-interactive-markdown-previewer-4h7033jm)
![](https://cdn.hackernoon.com/images/e178Xecok0TlGP5gaTutNkU1thY2-0q833x9.jpeg)
Here is mine documentation for markView: Interactive Markdown Previewer, my first React app. 

### [374. Understanding CSS Specificity Rules](https://hackernoon.com/understanding-css-specificity-rules-81633vu5)
![](https://cdn.hackernoon.com/drafts/jh19w3ymh.png)
In Cascading Style Sheet, CSS, there is a property called specificity. CSS Specificity is the process of determining the most relevant set of CSS property values or styles browsers will apply to an element especially when there is a conflicting set of rules. 

### [375. Illustrations in Web Design: 11 Examples For Your Inspiration](https://hackernoon.com/illustrations-in-web-design-11-examples-for-your-inspiration-172o31r4)
![](https://cdn.hackernoon.com/images/SCG7uwsh9QfbE7gj1MYbPh1WeJo1-54t3wu4.jpeg)
Are you aware of all the opportunities that illustrations give?

### [376. How to Get Started Using the EyeDropper API with JavaScript](https://hackernoon.com/how-to-get-started-using-the-eyedropper-api-with-javascript)
![](https://cdn.hackernoon.com/images/da7H4NzOhAdhje46xkTgaLorF5m2-eb13o94.jpeg)
With the new EyeDropper API in Chromium, websites can let visitors pick colors from anywhere on their screen

### [377. Specific Details of the Design Process](https://hackernoon.com/specific-details-of-the-design-process)
![](https://cdn.hackernoon.com/images/AOQkxIS582NwreOj0Gzy5LPbz5B2-ar334qa.jpeg)
Detailed technical information can make it challenging to organize the visual hierarchy of content and may result in overwhelming the reader.

### [378. Top 10 Gifts for Graphic Designers](https://hackernoon.com/top-10-gifts-for-graphic-designers-ao3o337u)
![](https://cdn.hackernoon.com/images/39oKFGLOyyX5EetJvY7orVo29PD2-6o1l323i.jpeg)
These gift ideas will help you surprise graphic designers and show your appreciation of their work.

### [379. The Dos and Don'ts of Designing Chat Messaging UIs for Your App](https://hackernoon.com/the-dos-and-donts-of-designing-chat-messaging-uis-for-your-app)
![](https://cdn.hackernoon.com/images/gzG25VLfJzghBdT1v97jIfj9DE52-8393r2w.jpeg)
Get valuable insights on designing user-friendly in-app chat UIs. Learn the dos and don'ts, best practices, and tips on simplifying, enhancing UX with color and

### [380. Making a Greener Web With Demand-Responsive Design](https://hackernoon.com/making-a-greener-web-with-demand-responsive-design)
![](https://cdn.hackernoon.com/images/2jqChkrv03exBUgkLrDzIbfM99q2-bh92g2a.jpeg)
The concept of demand-responsive design builds off of the concept of responsive design.

### [381. PHP vs. ASP.NET: Determining Which Stack to Use For Your Next Project](https://hackernoon.com/php-vs-aspnet-determining-which-stack-to-use-for-your-next-project)
![](https://cdn.hackernoon.com/images/da7H4NzOhAdhje46xkTgaLorF5m2-g093ukh.jpeg)
The ultimate goal of the web development project is to build feature-rich web applications or corporate websites but which is better?

### [382. Web Design Ideas For Startups in 2020](https://hackernoon.com/web-design-ideas-for-startups-in-2020-lnam32qw)
![](https://images.unsplash.com/photo-1504805572947-34fad45aed93?ixlib=rb-1.2.1&q=80&fm=jpg&crop=entropy&cs=tinysrgb&w=1080&fit=max&ixid=eyJhcHBfaWQiOjEwMDk2Mn0)
In today’s digital world, businesses have built a dependency on websites and applications. Be it a retail site for buying clothes, food ordering or almost anything you imagine, there’s a website or app for everything! 

### [383. Real Feedback On My Portfolio That May Help You Improve Yours](https://hackernoon.com/real-feedback-on-my-portfolio-that-may-help-you-improve-yours)
![](https://cdn.hackernoon.com/images/gaZTNviyRwbJIkQm85R8IxM2vOY2-z21135f9.jpeg)
Some months ago I posted an article about how I built my first personal portfolio. The feedback was pretty awesome and I got some great ideas.

### [384. Feel the Tailwind: HackerNoon’s new look is ready to take off!](https://hackernoon.com/feel-the-tailwind-hackernoons-new-look-is-ready-to-take-off)
![](https://cdn.hackernoon.com/images/zhLunuihpBhk4IjuH4amrounSwE2-bj238xf.png)
HackerNoon’s new design is live! Enjoy a cleaner homepage, smarter nav, better writing tools, updated profiles, and more ways to customize your experience.

### [385. Crafting Dynamic Text Paths with HTML, SVG, and CSS: A Guide to Responsive and Accessible Graphics](https://hackernoon.com/crafting-dynamic-text-paths-with-html-svg-and-css-a-guide-to-responsive-and-accessible-graphics)
![](https://cdn.hackernoon.com/images/eVN9AN9mDJYmfURNnT9xECAjBRw2-hu831hj.jpeg)
Learn to craft dynamic, responsive text on SVG paths using HTML and CSS.

### [386. Utilizing Custom Fonts in JavaScript Reports](https://hackernoon.com/utilizing-custom-fonts-in-javascript-reports)
![](https://cdn.hackernoon.com/images/bJmCjBFKDCdFyOp2WyArQwy7BiF3-zrb3b9i.jpeg)
Learn how to use custom fonts in JavaScript reports.

### [387. 326 Stories To Learn About Design](https://hackernoon.com/326-stories-to-learn-about-design)
![](https://cdn.hackernoon.com/images/github/design-445.png)
Learn everything you need to know about Design via these 326 free HackerNoon stories.

### [388. Solid Tips On How Get Better At Responsive Web Design](https://hackernoon.com/solid-tips-on-how-get-better-at-responsive-web-design-kmj3wvn)
![](https://firebasestorage.googleapis.com/v0/b/hackernoon-app.appspot.com/o/images%2Fs6UbzE7nwfPS3bLT9dBPqMDbe9t2-une351z.jpeg?alt=media&token=f5c14f91-d0e2-412c-90bd-f80fb9918d42)
Better Responsive Web Design, A Structured Approach

### [389. 4 Reasons Why People Love Web Design And You Should Love It Too](https://hackernoon.com/4-reasons-why-people-love-web-design-and-you-should-love-it-too-gvq31h4)
![](https://cdn.hackernoon.com/images/3nhao37bBEfHA9RTQ0WNVWfXPD02-b5f31h3.jpeg)
It's so important how web UI is designed because people perceive images better and quicker than words. Luckily, most of the IT heads understand the value of an eye-catching UI, but few of them realize the real power of it. Actually, web design does much more than you used to think. 

### [390. The Quickest Way to Test Components That Use Container Queries](https://hackernoon.com/the-quickest-way-to-test-components-that-use-container-queries)
![](https://cdn.hackernoon.com/images/TrD4DzyJu6g677bJSu6xzJ3TxA12-7vb3rgk.jpeg)
Container queries are amazing. They let us build UI that allows a component to look good no matter what size the component is displayed at.

### [391. Forget the Average User. Design for the Edges](https://hackernoon.com/forget-the-average-user-design-for-the-edges)
![](https://cdn.hackernoon.com/images/mDH8XGxjzhVWs2ZOOxVGO84W7Jw1-qva3eu0.jpeg)
The idea of the “average” user is holding design back. When you embrace edge cases, you create better experiences for everyone. 

### [392. Top 12 CSS Selectors You Should Know](https://hackernoon.com/top-12-css-selectors-you-should-know)
![](https://cdn.hackernoon.com/images/1ckd3RxscrdoePETjFNhKmSpe3y1-aw104315.jpeg)
Get started with understanding CSS selectors. In this story, we cover Universal Selectors, Type Selectors, Class Selectors, ID Selectors, and more.

### [393. Basic Web Design Principles to make Your Websites Pop](https://hackernoon.com/web-design-principles-with-examples)
![](https://cdn.hackernoon.com/images/5L1PsURyndeLVm1wIoUdHEN6ZP12-mq039g5.jpeg)
Five pillars of web design

### [394. Seamless Point-of-Interest Cropping: Automating Image Focus Extraction](https://hackernoon.com/seamless-point-of-interest-cropping-automating-image-focus-extraction)
![](https://cdn.hackernoon.com/images/qEyR6rrtSuQYAumVgjwd7lxvi9L2-8sf3p25.jpeg)
Need to crop to the most important part of your images? Try imgix's #EntropyCropping and automate point-of-interest cropping!

### [395. How to Find Ideas for Web Design](https://hackernoon.com/how-to-find-ideas-for-web-design-sl2d33o2)
![](https://cdn.hackernoon.com/images/SCG7uwsh9QfbE7gj1MYbPh1WeJo1-boe35cv.jpeg)
Learn how to look for ideas properly so you don’t waste time and energy in the future.

### [396. Inspiring Nostalgia With Branding: the Conference With the Movie Theme](https://hackernoon.com/inspiring-nostalgia-with-branding-the-conference-with-the-movie-theme)
![](https://cdn.hackernoon.com/images/an-african-monument-as-a-brand-element-clh4db4am000001s694a5h7gm.png)
This is an article about how  we made good use of branding and design to create experiences for 1000+ people.

### [397. Why I Prefer Bootstrap Grid Over CSS Grid ](https://hackernoon.com/why-i-prefer-bootstrap-grid-over-css-grid-dd1x3499)
![](https://cdn.hackernoon.com/images/ugoTV1vwcgR4mN8MMDUUN4vt6p02-aho34bh.jpeg)
How best can one make the Sling Bag title and its details, wrap below the image of the handbag, while on a small screen? 

### [398. How to Design a Powerful LMS Platform: Real Example](https://hackernoon.com/how-to-design-a-powerful-lms-platform-real-example-bx1633w0)
![](https://cdn.hackernoon.com/images/UFmV4KWoavbdnRkx6hj2zXeY7Iw1-3fn338b.jpeg)
They were looking for a custom LMS platform that would be used by teachers, students, and parents.

### [399. What APIs Have Meant for Enterprise Security – And Why We Can Never Go Back](https://hackernoon.com/what-apis-have-meant-for-enterprise-security---and-why-we-can-never-go-back)
![](https://cdn.hackernoon.com/images/WaM9YikXl6X1gmSgV2m0gBfcCNU2-tn93p4w.jpeg)
While APIs are often the unsung heroes that keep workflows running smoothly, their rise in popularity has forever changed enterprise security.

### [400. The Internet I Know Has Changed: Autoplay Video Ads Have Hurt The User Experience](https://hackernoon.com/the-internet-i-know-has-changed-autoplay-video-ads-have-hurt-the-user-experience)
![](https://cdn.hackernoon.com/images/video-ads-dvepwdx6civla1wm9ieasrde.png)
Nowadays, all major websites use video ads so people have no choice but to open these sites. The website creators know about this.

### [401. Can AI Put an End to Mouse-click Programming?](https://hackernoon.com/can-ai-put-an-end-to-mouse-click-programming)
![](https://cdn.hackernoon.com/images/VqrX4bkhupNQMqLTnTauvop4dGB2-utb3ei0.jpeg)
Mouse-click programming has long been a new trend in programming. Simply put, it is a method of coding when ready-made modules of code are being put together to form a new piece of software. It is needless to say that this way of writing programs is far from perfect. To start with, the programmers who do this kind of programming may not even know what is in those modules. This leads to two basic problems: unintentional or intentional bugs, poor code that does not work properly. 

### [402. Top 10 UX Design Principles to Use with Visually-Appealing Websites](https://hackernoon.com/top-10-ux-design-principles-to-use-with-visually-appealing-websites)
![](https://cdn.hackernoon.com/images/4M1v4uN1ptWKawlFypubbTs7up73-bua3jww.jpeg)
UX design principles help build durable solutions through new design patterns, interaction models, and standards.

### [403. Sculpting the 3D World: 9 Simple 3D Design Tips for Absolute Beginners](https://hackernoon.com/sculpting-the-3d-world-9-simple-3d-design-tips-for-absolute-beginners-nf3434eg)
![](https://cdn.hackernoon.com/images/SCG7uwsh9QfbE7gj1MYbPh1WeJo1-r71k36lr.jpeg)
3D Design Tips for Beginners. If you want to become a 3D designer you should know these basic tips that help you to start your design career.

### [404. 7 Websites That are Useful for Web Developers](https://hackernoon.com/7-websites-that-are-useful-for-web-developers)
![](https://cdn.hackernoon.com/images/QepJZAyLUDcMpCXcZjnWeHJM7ad2-oc03ax1.jpeg)
As web developers, daily we try to solve some problems and to solve those problems we may need to have some handy tools/websites where we can look up to.


### [405. How to Add a Darkmode to Your Website](https://hackernoon.com/how-to-add-a-darkmode-to-your-website)
![](https://cdn.hackernoon.com/images/Yno7fzdc7gSyPWah0fpRGIM2AMC3-53c3kx0.jpeg)
Adding dark mode to your own website projects

### [406. 7 Ways to Optimize User Experience on Your Website](https://hackernoon.com/7-ways-to-optimize-user-experience-on-your-website)
![](https://cdn.hackernoon.com/images/H3JGDPQpdIMGk8m2HPtVu0Osggg1-7h93td0.jpeg)
Improve your traffic by focusing on the quality of your user's experiences. The following instructions are the initial stage of that journey.

### [407. The Exciting Journey Of Creating My First Portfolio📂🎉](https://hackernoon.com/the-exciting-journey-of-creating-my-first-portfolio-q4n33yf)
![](https://cdn.hackernoon.com/images/gaZTNviyRwbJIkQm85R8IxM2vOY2-ye2833qo.jpeg)
For the last few months, I've been working on a personal portfolio. I've always believed that a separate portfolio is important for any dev since it connects you to future opportunities and it helps you to grow your network.

### [408. Everything Business Owners Need to Know About Web Hosting](https://hackernoon.com/everything-business-owners-need-to-know-about-web-hosting-39fi3wu8)
![](https://cdn.hackernoon.com/images/im5d3yuy.jpg)
What is the first thing that comes to your mind when you hear the term “Web Hosting”?

### [409. How to Determine Which Blockchain is Best Suited to Build Your Fintech or Insurtech Startup](https://hackernoon.com/how-to-determine-which-blockchain-is-best-suited-to-build-your-fintech-or-insurtech-startup)
![](https://cdn.hackernoon.com/images/selecting-a-blockchain-cld8pwi9m000401s60krad1sr.png)
If you are building a fintech or an insurtech company on the blockchain, there are several considerations to take into account before selecting the appropriate.

### [410. Introducing Amnotzon: Building Ecommerce Sites is Easy with Velo](https://hackernoon.com/introducing-amnotzon-building-ecommerce-sites-is-easy-with-velo-mx1633eu)
![](https://cdn.hackernoon.com/images/oCyQIVJAJmc4P3Id6USm7G9OUZ53-d52w33zn.jpeg)
?E-commerce with Velo is simple! One of the most useful tools provided is “Adi”, an AI that can be used to give you intuitive design suggestions.

### [411. The Essential HTML Basics Guide for Beginners](https://hackernoon.com/the-essential-html-basics-guide-for-beginners-eb3e3umn)
![](https://firebasestorage.googleapis.com/v0/b/hackernoon-app.appspot.com/o/images%2FEgZmQfwcdgPufCLcwJmSyMs42r63-p54w3wiu.jpeg?alt=media&token=38ae9d13-2fcb-4d81-b20b-ee60aceafcfa)
Coming as a beginner into HTML can be difficult, especially for the amount
of default properties and behaviors that are in place and nobody tells you about it. In this article, I am going to show you how these things work, how you can modify their default behavior, and help you get a better understanding of HTML that will be useful any time there is a roadblock in the rendering of your page.

### [412. Secrets Of The Design Process You Wish You Knew Before](https://hackernoon.com/secrets-of-the-design-process-you-wish-you-knew-before-sfn33ch)
![](https://cdn.hackernoon.com/images/B5kOTfUlZBgHHO0Tl4UH6x7O7j32-wj8f28mj.png)
The UX industry puts a lot of emphasis on processes. But is that the best way to think fundamentally about design?

### [413. The Design Industry's Senior Designer Addiction Is Bankrupting Your Company](https://hackernoon.com/the-design-industrys-senior-designer-addiction-is-bankrupting-your-company)
![](https://cdn.hackernoon.com/images/haIreD2bRcV2aVB90KGUiGgLPFJ3-nm02wrd.png)
Your senior designer quit after 6 months. Your junior designer is in therapy. You spent $330k and built zero capability. Here's what went wrong.

### [414. Easy & Clear: Variable Fonts Guide](https://hackernoon.com/easy-and-clear-variable-fonts-guide-8e4a3v84)
![](https://images.unsplash.com/photo-1511548774318-563182fe8d03?ixlib=rb-1.2.1&q=80&fm=jpg&crop=entropy&cs=tinysrgb&w=1080&fit=max&ixid=eyJhcHBfaWQiOjEwMDk2Mn0)
A basic introduction to Variable Fonts.

### [415. Automating the Removal and Replacement of Image Backgrounds ](https://hackernoon.com/automating-the-removal-and-replacement-of-image-backgrounds)
![](https://cdn.hackernoon.com/images/qEyR6rrtSuQYAumVgjwd7lxvi9L2-ocg3pfu.jpeg)
For the ultimate design versatility and precision, use @imgix to automate image background removal and replacement at scale.

### [416. Save time by Generating Sitemaps Dynamically in NextJS](https://hackernoon.com/save-time-by-generating-dynamic-sitemaps-in-nextjs)
![](https://cdn.hackernoon.com/images/aaX2FiR6zKUYHarKyrMCP8EjNpr1-cj93i6b.jpeg)
generate sitemap for next.js under 1 minute

### [417. What is Mobile-First Design and Why You Should Care About It](https://hackernoon.com/what-is-mobile-first-design-and-why-you-should-care-about-it-tp3m34gg)
![](https://images.unsplash.com/photo-1559526324-c1f275fbfa32?ixlib=rb-1.2.1&q=80&fm=jpg&crop=entropy&cs=tinysrgb&w=1080&fit=max&ixid=eyJhcHBfaWQiOjEwMDk2Mn0)
With an ever-increasing variety of mobile devices quickly overtaking desktop browsing in overall traffic, mobile support is no longer a matter of deciding whether or not you should do it but how you should do it. Like almost everything in software development trends, there is always more than one way to do it. But from all the trends out there I believe mobile-first will fit the bill best for most people and I’ll explain why.

### [418. Step by Step Guide to Truncating Text in CSS Text](https://hackernoon.com/step-by-step-guide-to-truncating-text-in-css-text)
![](https://cdn.hackernoon.com/images/truncating-text-clh0btvhi000001s64s3rfohb.png)
Learn how to truncate text with CSS, truncate multiple lines and CSS truncate text with ellipsis.

### [419. 7 Must Use Tools For Newbie Web Developers ](https://hackernoon.com/7-things-that-every-beginner-web-developer-should-know)
![](https://cdn.hackernoon.com/images/Y0kXG115Z7VorP4rguIGxwn3FoD3-eh037kk.jpeg)
During my journey of learning web development I came across this different technology and stuffs which are often used during web development or writing code and

### [420. How to Find Awesome Graphics for Your Design Project ](https://hackernoon.com/how-to-find-awesome-graphics-for-your-design-project)
![](https://cdn.hackernoon.com/images/QepJZAyLUDcMpCXcZjnWeHJM7ad2-k503ase.jpeg)
When we work with website design and development, we often need to add a variety of different graphics. 

### [421. Step Into The Matrix With Our New Update](https://hackernoon.com/step-into-the-matrix-with-our-new-update-c21r3yej)
![](https://firebasestorage.googleapis.com/v0/b/hackernoon-app.appspot.com/o/images%2FSRvUCgJp0OSizpV52uxp6qGWEPF3-l43n3ybh.jpeg?alt=media&token=033e4766-521a-4328-b615-4f88383f1473)
SPOILER ALERT: Reading this article in advance might impact your actual Coinwink Matrix experience and you’ll receive a lower level of satisfaction. Similarly, like someone spoils a movie for you by telling how it ends.

### [422. How Webflow is Redefining Website Design and Development](https://hackernoon.com/how-webflow-is-redefining-website-design-and-development)
![](https://cdn.hackernoon.com/images/Fa9gXvNiZRftg1nLR9SMkWhoem42-rf930s6.jpeg)
We’re here to give control back to our clients. That’s why we use Webflow to create a smarter and better website design that puts you in the driver’s seat.

### [423. Why You Don’t Want to Pay Your Web Developer for Updating your Website](https://hackernoon.com/why-you-dont-want-to-pay-your-web-developer-for-updating-your-website-1w3w3ynu)
![](https://cdn.hackernoon.com/drafts/w05d3yys.png)
Most companies prefer to update their own websites using built-in Content Management Systems. However, once in a while, we meet customers who are resilient to this idea and prefer a web developer handling it for them. 

### [424. Design Your App With the User in Mind](https://hackernoon.com/design-your-app-with-the-user-in-mind)
![](https://cdn.hackernoon.com/images/M6G22rxQzLTqx37eMqcSVG1Ybvj2-l603omo.jpeg)
In this blog, I’ll share some ideas to improve interaction design that will help you cut through the noise.

### [425. How to put a div in the center using Flexbox](https://hackernoon.com/how-to-put-a-div-in-the-center-using-flexbox-ua1h31ng)
![](https://cdn.hackernoon.com/images/A0JT0kWjB2UTOGzv9jXoh17Xc5H2-qf12315g.jpeg)
How to put a div in the center using Flexbox? My name is Nima Owji and I want to show you how to put a div in the center using Flexbox.

### [426. 4 Tips For Redesigning Your logo](https://hackernoon.com/4-tips-for-redesigning-your-logo-ikey3y42)
![](https://images.unsplash.com/photo-1508599589920-14cfa1c1fe4d?ixlib=rb-1.2.1&q=80&fm=jpg&crop=entropy&cs=tinysrgb&w=1080&fit=max&ixid=eyJhcHBfaWQiOjEwMDk2Mn0)
The best logos come across as simple and effortless. This is a difficult concept to wrap your head around when creating your first logo. In fact the number one issue I have had with most of my clients is their urge to overdo the design. Look at the logos of the world’s most successful brands like Nike, Twitter, or Apple. They are extremely simple and recognizable which is why I spend a good part of my time stressing this point to my clients. 

### [427. Elastic Magento: What Can You Fit into a Magento Commerce Website?](https://hackernoon.com/elastic-magento-what-can-you-fit-into-a-magento-commerce-website)
![](https://cdn.hackernoon.com/images/syeJJqs1UoPXrZHuy4G1iXAJ3p82-m793pcr.jpeg)
Discover the power of Magento Commerce and how it can drive eCommerce success. Learn how DefaultValue optimizes websites for growth.

### [428. Uderstanding the Basic Structure of a Website ](https://hackernoon.com/uderstanding-the-basic-structure-of-a-website)
![](https://cdn.hackernoon.com/images/xY2W6etJxjQsHNcq80kJr9RvKmg1-10h352n.jpeg)
Webpages can and do look pretty different from one another, but they all tend to share similar standard components.

### [429. How To Value SaaS Business](https://hackernoon.com/how-to-value-saas-business-pd1j31d7)
![](https://firebasestorage.googleapis.com/v0/b/hackernoon-app.appspot.com/o/images%2FK1LunyHAbWNr7h5tVcI1VNXbXJ83-lz8231yc.jpeg?alt=media&token=36736dc4-7922-46a8-88a5-0ab312916938)
This post focuses on how SaaS metrics relate to customer onboarding, company growth, and the generation of sustainable income needed and sufficient to not only stay afloat in the turbulent sea of web marketing but thrive.

### [430. The Importance of Testing For Accessibility and Tool Recommendations ](https://hackernoon.com/the-importance-of-testing-for-accessibility-and-tool-recommendations-zf7332im)
![](https://cdn.hackernoon.com/images/S116vnqqkCcD37ODWCQr3Ud2i6U2-knq23oc6.jpeg)
Accessibility Testing is gaining popularity as devs becoming more concerned about the accessibility of their products and services. Learn some basics and tools.

### [431. How to Administer A Team of Developers In Crisis Like COVID-19](https://hackernoon.com/how-to-administer-a-team-of-developers-in-crisis-like-covid-19-75ia3yxf)
![](https://cdn.hackernoon.com/images/1tkl3yo1.jpg)
Being a manager at any post comes with a lot of responsibilities and accountability which cannot be shared, you are solely responsible for you and your team.

### [432. Web Development and SEO Are Worth More Together!](https://hackernoon.com/web-development-and-seo-are-worth-more-together-zb1p35hk)
![](https://cdn.hackernoon.com/images/xdfUIvMBMrgdPMyZuAyRBlZColX2-ty89344q.jpeg)
The present era of the digital marketing industry demands both web development and SEO for results. They worth more together rather than focused separately.

### [433. How To Use The Enhanced Search Feature To Drive Higher eCommerce Conversions ](https://hackernoon.com/how-to-use-the-enhanced-search-feature-to-drive-higher-ecommerce-conversions-825333mx)
![](https://cdn.hackernoon.com/images/y46WIJa1bDbnlrXQ2UKo462rrDn1-jxq328l.jpeg)
In this article, I discuss keys techniques to building enhanced search functionality into your website. This includes designing the search bar and more.

### [434. What Metrics Should You Pay Attention to When Optimizing Web Page Performance?](https://hackernoon.com/what-metrics-should-you-pay-attention-to-when-optimizing-web-page-performance)
![](https://cdn.hackernoon.com/images/2jqChkrv03exBUgkLrDzIbfM99q2-tq02p2e.jpeg)
A speedy website translates into higher engagement, lower bounce rates, and ultimately, increased conversions.

### [435. 5 Web Design Tips for Beginners](https://hackernoon.com/5-web-design-tips-for-beginners)
![](https://cdn.hackernoon.com/images/hX1yfsZiaJTx5abi3rNIMJIWvK72-6e03cmq.jpeg)
Here is a list of 5 things you didn't know you didn't know about designing a website.

### [436. WordPress vs Bootstrap: Choosing a Web Design Platform for Your Business](https://hackernoon.com/wordpress-vs-bootstrap-choosing-a-web-design-platform-for-your-business)
![](https://cdn.hackernoon.com/images/uUFbIVsrWFVlMQDKnyE5UDXL77W2-tj93j0m.jpeg)
In this article, we will speak about two competing web design platforms that are extremely popular in the current market: WordPress and Bootstrap.

### [437. The HackerNoon Newsletter: Why SaaS Pricing Pages Fail  (9/14/2025)](https://hackernoon.com/9-14-2025-newsletter)
![](https://cdn.hackernoon.com/images/hackernoon_newsletter_580_nno5nl8obtw4vwluw0dagb4f.png)
9/14/2025: Top 5 stories on the HackerNoon homepage!

### [438. A Guide to Finding and Hiring Quality Freelancers for Web Development](https://hackernoon.com/a-guide-to-finding-and-hiring-quality-freelancers-for-web-development)
![](https://cdn.hackernoon.com/images/azAByOWivJOBmZzVX5O8IADX2ZG3-w393pad.jpeg)
So, you are ready to create a killer web design and build an online presence. You already have excellent ideas for blog posts and landing pages. Now it is time 

### [439. How to Optimize Your Time When Coding Frontend](https://hackernoon.com/how-to-optimize-your-time-when-coding-frontend-tr5q3yza)
![](https://cdn.hackernoon.com/drafts/p1i3ydc.png)
I recently took some serious time to improve my skills in front-end HTML and CSS.

### [440. From Shared Servers to Cloud Computing: A Better Web Hosting Strategy](https://hackernoon.com/from-shared-servers-to-cloud-computing-a-better-web-hosting-strategy)
![](https://cdn.hackernoon.com/images/S20bwqNg2Dc5eOrKxjK2AGe1PCu1-qk1435ut.jpeg)
A look at how digital agencies traditionally handled web hosting, how many handle it now, and suggestions on how to do it better. 

### [441. The Noonification: AI  the Quest for Superintelligence (8/15/2024)](https://hackernoon.com/8-15-2024-noonification)
![](https://cdn.hackernoon.com/images/noonification_952_lnal3z2ohz1l1ze52xn4eryb.png)
8/15/2024: Top 5 stories on the HackerNoon homepage!

### [442. Why Basic UX Principles are Important for Every Developer ](https://hackernoon.com/why-basic-ux-principles-are-important-for-every-developer)
![](https://cdn.hackernoon.com/images/rTGkuSmEEIdJxS4Bj7H8MUxQhOg2-b493wt7.jpeg)
Discover why every developer should grasp basic UX principles to build more intuitive and engaging products. 

### [443. The Best Practice for Container Queries: Place Them in a Parent Element](https://hackernoon.com/the-best-practice-for-container-queries-place-them-in-a-parent-element)
![](https://cdn.hackernoon.com/images/TrD4DzyJu6g677bJSu6xzJ3TxA12-kub3r3v.png)
There's only one best practice that I would recommend when using container queries — that's to place the container in a parent element. 

### [444. 3 Open-Source Web Development Platforms to Consider for Your Next Build](https://hackernoon.com/3-open-source-web-development-platforms-to-consider-for-your-next-build)
![](https://cdn.hackernoon.com/images/MkGC8J9c4bV1949Wablv3h1PC7i2-ne02o8w.jpeg)
If you're looking to create a website for your business, blog, or online portfolio, the easiest option is to use an open-source platform to make your website.

### [445. First Impressions Matter: How to Design a Product Page Effectively](https://hackernoon.com/first-impressions-matter-how-to-design-a-product-page-effectively)
![](https://cdn.hackernoon.com/images/ttY7wyvswPdvuYC7qfVVwGrIYbm2-7pbe35w1.jpeg)
Design the best product page for your eCommerce store to attract more customers to your website and make sales.

### [446. 6 Reasons Why A New Web Design Is Important For Your Company](https://hackernoon.com/6-reasons-why-a-new-web-design-is-important-for-your-company-591i327i)
![](https://cdn.hackernoon.com/images/0A8DBQaWAYQhDl7pZ77CixaYeB83-7n2t3542.png)
Your website plays a critical role in customer acquisition and improves overall sales and revenue. However, understanding this significance and realizing the be

### [447. A Closer Look at the Web Accessibility Initiative](https://hackernoon.com/a-closer-look-at-the-web-accessibility-initiative)
![](https://cdn.hackernoon.com/images/usLqJmqUA2b5joa695sCkWq4hKD3-ha93yok.jpeg)
Discover the significance of the Web Accessibility Initiative (WAI) in creating an inclusive online space for all users.

### [448. Why Healthcare Facilities Need Professional Websites](https://hackernoon.com/why-healthcare-facilities-need-professional-websites-211u31zs)
![](https://cdn.hackernoon.com/images/RsfXB70CMDWwVAfR1MayyBOwkHP2-ji3331f3.jpeg)
Medical centers, hospitals, dental care facilities, and specialists in private practice need a professional website. Learn why. 

### [449. 5 Web Design Mistakes to Watch out for in 2022](https://hackernoon.com/5-web-design-mistakes-to-watch-out-for-in-2022)
![](https://cdn.hackernoon.com/images/q44saPpzlJZ2rVoCgXZvNdemttI2-n10371s.jpeg)
 If you're a growing brand, the last thing you would want to be guilty of is web design mistakes. So check out these 5 web design mistakes to avoid in 2022.

### [450. Google Stitch Is Changing UI/UX Design in 2026](https://hackernoon.com/google-stitch-is-changing-uiux-design-in-2026)
![](https://cdn.hackernoon.com/images/ELnaBFRIfTMkt8qhuBYXxa8B9DS2-5683csq.png)
Google Stitch generates UI from text but Figma is not going anywhere. Here is why AI is accelerating design and not replacing designers in 2026. 

### [451. The HackerNoon Newsletter: Why SaaS Pricing Pages Fail  (9/5/2025)](https://hackernoon.com/9-5-2025-newsletter)
![](https://cdn.hackernoon.com/images/hackernoon_newsletter_993_x8rk0zmgcl1dz9ppwqmbiuwm.png)
9/5/2025: Top 5 stories on the HackerNoon homepage!

### [452. 7 Tips Before Choosing a Web Design Agency](https://hackernoon.com/7-tips-for-choosing-a-web-design-agency)
![](https://cdn.hackernoon.com/images/00TXPmyh1Veszngfd8YUf904vc92-18337f5.jpeg)
The corporate image of a company is everything in today's world. That is why when choosing a Web Design Agency it is important to take into account some basic r

### [453. Why Paid Commercial Web Accessibility Plugins Is Better Than Free Plugins](https://hackernoon.com/why-paid-commercial-web-accessibility-plugins-is-better-than-free-plugins-klk3uuo)
![](https://images.unsplash.com/photo-1523998956902-6d4f549de43d?ixlib=rb-1.2.1&q=80&fm=jpg&crop=entropy&cs=tinysrgb&w=1080&fit=max&ixid=eyJhcHBfaWQiOjEwMDk2Mn0)
Building website these is one thing, building an accessible and useable website is another thing entirely as it requires some expertise and use of accessibility tools.

### [454. Feature/Permission Policies Overview](https://hackernoon.com/featurepermission-policies-overview-8li3tl5)
![](https://firebasestorage.googleapis.com/v0/b/hackernoon-app.appspot.com/o/images%2FaCIjlH1H4dbEIL1I3whRaYLLCS13-qv463uhh.jpeg?alt=media&token=df6c4474-a66c-45fb-bc84-c0bee5ab2616)
It's already challenging enough to create a website that is blazing fast, adheres to all the latest best practices and offers optimal experience for various network conditions and device types.

As the website and its codebase evolves over time, it can become even harder to maintain the desired user experience over time. To prevent UX deterioration, it’s often a good idea to place guardrails which ensure that crucial website elements, such as images, hold to a certain criteria. In this article, we are going to look at a robust mechanism which helps to steer your website in the right direction - an HTTP header called Feature Policies.

### [455. Nesting in Less and Sass](https://hackernoon.com/nesting-in-less-and-sass-cm1c3wq1)
![](https://cdn.hackernoon.com/images/kmvh3y16.jpg)
A code should be organized. That’s the fact and I think is a very good one for the opening of the text about nesting. 

### [456. 5 Simple Rules for Engaging Customer Journey on Your Website](https://hackernoon.com/how-to-create-engaging-customer-journey-with-your-custom-website-designing-se5n316v)
![](https://cdn.hackernoon.com/drafts/c2cf32pt.png)
They say Life is a journey, not a destination. In the digital world too, your business’ success depends on how profound journey you can provide to your consumers. Websites, social media, email, chats, apps, etc. define whether a visitor will be converted as a consumer by the experience you give on each platform.  The website is the biggest online property of your business so you should provide an engaging customer journey on the website. One way to do is to create an excellent design that leaves the users in awe and makes them stick to your web pages.

### [457. Why My Project Lacks Recognition On The Platforms](https://hackernoon.com/why-my-project-lacks-recognition-on-the-platforms-dug3t3u)
![](https://firebasestorage.googleapis.com/v0/b/hackernoon-app.appspot.com/o/images%2F6cuAXHO1PXQD7SCmcBBNkGQL4F32-vvf23tnv.jpeg?alt=media&token=1bf51280-f163-4e33-9c17-f07995679402)
Photo of a brand new car without a plate number.

### [458. A Comprehensive List of Free Fonts for Designers](https://hackernoon.com/a-comprehensive-list-of-free-fonts-for-designers)
![](https://cdn.hackernoon.com/images/2jqChkrv03exBUgkLrDzIbfM99q2-ym92iyq.jpeg)
This comprehensive list includes a wide range of options, from elegant serifs to modern sans-serifs, so you’re sure to find something that fits your project.

### [459. UI/UX Errors: Don’t Blame the User, Re-Evaluate Your Design Strategy Instead](https://hackernoon.com/uiux-errors-dont-blame-the-user-re-evaluate-your-design-strategy-instead)
![](https://cdn.hackernoon.com/images/B5kOTfUlZBgHHO0Tl4UH6x7O7j32-o7137ck.jpeg)
The solution is to redesign the product in such a way that it prevents errors from occurring in the first place.

### [460. 5 Ways to Load Less Imagery to Increase Ranking and Client Happiness](https://hackernoon.com/5-ways-to-load-less-imagery-to-increase-ranking-and-client-happiness)
![](https://cdn.hackernoon.com/images/PG9GJ9It2FOXrr2T8EAC6UYf0Vj1-b5e3euw.jpeg)
Improve your ranking by both search engines and humans by not forcing the client to download unnecessary imagery.

### [461. Editing a Simple Contact Us Form Using the Velo Web Editor](https://hackernoon.com/editing-a-simple-contact-us-form-using-the-velo-web-editor-yjf334e)
![](https://cdn.hackernoon.com/images/oCyQIVJAJmc4P3Id6USm7G9OUZ53-plaj33av.jpeg)
Creating a contact form with Velo is easy as pie! Wix’s website templates give an absolutely usable and extremely competent contact form.

### [462. Working Together: How Designers and Developers Can Collaborate While Building Products](https://hackernoon.com/working-together-how-designers-and-developers-can-collaborate-while-building-products-gs2y3trq)
![](https://firebasestorage.googleapis.com/v0/b/hackernoon-app.appspot.com/o/images%2FSCG7uwsh9QfbE7gj1MYbPh1WeJo1-84d3uhj.jpeg?alt=media&token=0cd11e29-01e0-4015-bb5b-44480cac3ad6)
The success of your website or app strongly depends on the cooperation between the designers and the developers. It’s not about the professional skills of either group. You get a competent designer to make you a beautiful layout which you then pass on to an equally professional and experienced developer. Suddenly it turns out it can’t be realized without major changes!

### [463. A Deep Dive into How Typescript Enums Work](https://hackernoon.com/a-deep-dive-into-how-typescript-enums-work)
![](https://cdn.hackernoon.com/images/NpN8WH8v6CfA6j7dKAzuoiE5Lit2-ip93oaq.jpeg)
Enums, short for Enumerations, are preset constants that can be defined by a developer for use elsewhere in the code.

### [464. How To Design Web and Mobile Apps for Inclusivity](https://hackernoon.com/theres-been-a-lot-of-talking-about-inclusive-web-design-in-the-past-few-years-and-thats-great-as-kpo3aej)
![](https://cdn.hackernoon.com/drafts/gjyj32ns.png)
There's been a lot of talking about inclusive web design in the past few years and that's great, as long as it's not only used as a keyword to boost SEO but is actually being considered by design teams.

### [465. Understanding the Stages of the Sales Funnel and How it Relates to Your Website](https://hackernoon.com/understanding-the-stages-of-the-sales-funnel-and-how-it-relates-to-your-website)
![](https://cdn.hackernoon.com/images/uUFbIVsrWFVlMQDKnyE5UDXL77W2-fd93k9t.jpeg)
The sales funnel attracts consumers to business products or services, and it also convinces them to buy the respective product or service. 

### [466. Every UX Designer Needs To Learn Prototyping](https://hackernoon.com/every-ux-designer-needs-to-learn-prototyping-sm5k32q8)
![](https://cdn.hackernoon.com/images/SVk1E6GoWaNbJKzIqDejvwfsqwf1-94j31ym.jpeg)
This article covers the definition of prototyping for UX design, when to create your first prototype, and the principles of prototyping. 

### [467. Understanding Image Types: A Developer's Guide](https://hackernoon.com/understanding-image-types-a-developers-guide)
![](https://cdn.hackernoon.com/images/qEyR6rrtSuQYAumVgjwd7lxvi9L2-rr93rvy.jpeg)
In this guide, we'll show you all of the major image types on the internet, and when and how to use them for maximum image quality and optimal file size.

### [468. I Added Text to My ‘Pure Icon’ Site after 8 Years. Here’s Why](https://hackernoon.com/i-added-text-to-my-pure-icon-site-after-8-years-heres-why)
![](https://cdn.hackernoon.com/images/QBI79gOovQWG4emm06zWqeGw5UM2-sz0313a.jpeg)
After many years, I went from pure icons to adding descriptive text.

### [469. Salts and Hashes](https://hackernoon.com/salts-and-hashes-o8683y4y)
![](https://images.unsplash.com/photo-1526374965328-7f61d4dc18c5?ixlib=rb-1.2.1&q=80&fm=jpg&crop=entropy&cs=tinysrgb&w=1080&fit=max&ixid=eyJhcHBfaWQiOjEwMDk2Mn0)
For the time being, I want you p33ps to ignore the general meaning of these words used in daily context and give a new meaning to them for the current time being.

### [470. Explaining The Role of Cryptography During COVID-19 [A DIY Guide]](https://hackernoon.com/explaining-the-role-of-cryptography-during-covid-19-a-diy-guide-pr5n30t9)
![](https://cdn.hackernoon.com/images/m1r3kdu.jpg)
Don’t get me wrong, it’s a funny title. It starts with how, whereas when you read it you probably wondered why.

### [471. Lets Make an Internet for Everybody](https://hackernoon.com/an-internet-for-everybody-oa14a30lm)
![](https://cdn.hackernoon.com/images/9i195304s.jpg)
What is web accessibility? And why should you care?

### [472. Inside Graphic Design: A Look at Alepo's Rebranding for the 5G Era ](https://hackernoon.com/inside-graphic-design-a-look-at-alepos-rebranding-for-the-5g-era-fj5g3337)
![](https://cdn.hackernoon.com/images/CIowLdB9zNhAEVYMnZ6SynB6Sa02-hp1433iq.jpeg)
Digital enablement and core network solutions provider Alepo has unveiled its modernized logo and updated branding. 

### [473. Why I Left Big Tech Design to Build AI Infra for Founders](https://hackernoon.com/why-i-left-big-tech-design-to-build-ai-infra-for-founders)
![](https://cdn.hackernoon.com/images/Rdv2tnwxJIcPRzpKVPAuS5kahk63-2y53c1w.jpeg)
Why a designer left Big Tech to build AI infrastructure—and why design is critical to the future of intelligent systems.