Forem: moeminm

Building in Public - Free Front End Coding Challenges

moeminm — Wed, 03 Mar 2021 14:37:49 +0000

Backstory

If you've read my blog post 7 Websites To Find Front End Projects For Your Portfolio — you've probably seen Good Code on the list. That's my side-project that I've created a year ago but had to pause work on because of my military service.

I'm now done with my military service and have resumed work on the project with so many exciting features and a rebrand.

Insights from Good Code

A few stats that I would like to build a hypothesis around and validate the idea.

👉 With zero Marketing efforts, Good Code has been continuously receiving traffic.

👉 With zero Marketing efforts, Good Code templates are downloaded at least 5 times a day.

👉 With zero Marketing efforts, people are posting their solutions on Good Code for other people to view.

These insights are all great metrics to ascertain that the idea is validated and there is a market for this service, which is why I've decided to work on creating a full-fledged project with all the features necessary for the target user to benefit from.

Features Being Developed

👉 Complete redesign and rebranding.
👉 Ability to post your own solutions and receive back right on the website.
👉 Slack channel for more communication amongst beginner developers.
👉 Subscription for full-fledged themes (think onboarding, registration, dashboards, etc) and source files.

Rebranding Snippets

Landing Page

Challenge View

Updates

If you're someone who's constantly looking for more projects to work on, Codewell will provide lots of free high quality Adobe XD templates that you can use to sharpen your HTML and CSS skills. If you'd like to stay up to date with all the features being built and be notified when it goes public, be sure to subscribe to the newsletter here and follow me on Twitter .

Yet Another 15+ Free Design Resources For Developers!

moeminm — Sat, 14 Nov 2020 14:15:46 +0000

You know the drill by now, let's get right into. Previous post if you haven't seen it.

Icons

Streamline Icons: Download 30,000 free PNG icons for website, web app, software, web design. Buy our SVG vector icon pack, the world’s largest icon library for professionals.
Iconfinder: Iconfinder is the leading search engine and market place for vector icons in SVG, PNG, CSH and AI format. Use my link if you would like 50% off on your first month. To be perfectly clear, I do get a percentage as this is a referral link. There is also a free tier for you to use, with over 300k+ icons.
Feather: Feather is a collection of simply beautiful open source icons. Each icon is designed on a 24x24 grid with an emphasis on simplicity, consistency and readability.
Iconscout: Browse 2 Million+ high quality Icons, Illustrations and royalty-free stock photos at one place. Download Now!
Material Design Icons: Material icons are delightful, beautifully crafted symbols for common actions and items. Download on desktop to use them in your digital products for Android, iOS, and web.

Tools for Mockups

MockupWorld: The original biggest Source of free photo-realistic Mockups online
CleanMock: Create stunning mockups using latest device frames like iPhone X & custom backgrounds that make your mobile or website design standout, right from your browser quickly & for free.
Angle: Vector iPhone, iPad, Android perspective mockups for presenting your Apps, Websites and Cover images. Customizable colors, clay, shadows and backgrounds, with a Library of Components for Figma and Sketch.
Shotsnapp: A simple tool to quickly create beautiful mockup presentation for your digital app and website design

Wireframing

Wireframe.cc: A powerful, intuitive app for creating and sharing wireframes.
Flowkit: Userflows right inside your favorite design tool. Available for Figma, Sketch, and Adobe XD.
Whimsical: Communicate visually at the speed of thought – collaborative flowcharts, wireframes, sticky notes, and mind maps.

Accessibility

Colorable: Contrast is the difference in luminance or color that makes an object (or its representation in an image or display) distinguishable.
Colors: Accessibility is important! Mix and match these color classes to create a variety of accessible themes.
ColorBox: Create amazing color sets superfast
Accessible Brand Colors: This tool shows you how ADA compliant your colors are in relation to each other. By adding your brand’s colors on the right, you can generate a chart to see how they can be used together for accessibility, and find similar colors that work better.

Curating these lists take time, I'd love it if you could show some support by buying me a cup of coffee, it would mean a ton! And as always, if you have any resources you'd like me to add in the next issue, do let me know.

Step by Step PRACTICAL SEO Guide for Better Organic Traffic

moeminm — Thu, 12 Nov 2020 11:17:47 +0000

You can find the links to all tools used at the end of the article.

Paid advertising is great and all, but it stops once the money stops. I'm going to show you a step by step guide on how to do keyword research and use that to your advantage to create compelling articles that could potentially grow organically.

To do this, I'll use Splitbee as an example, it's a web analytics tool.

🎯 Identifying your competitors

You need to first have an idea of who your competitors are in the market. A quick search on Google shows Clicky to be a similar service. Great, you've identified one competitor, we need more. Head over to SimilarWeb, search for your competitor's website, and scroll down to competitors. Pick 3-4 competitors and write them down somewhere.

📝 Finding the keywords

You have 3-4 competitors written down, time to know what they're ranking for. Head over to UberSuggest, search for your competitors' websites, scroll down until you see 'View all SEO keywords this domain ranks for" click.

Now click on 'Export to CSV'. You now have a list of keywords in a searchable file. Do this for all your competitors.

🔍 Narrowing down the keywords

You'll most likely have hundreds of keywords in 1 CSV file. Import your CSV file into Excel. Apply conditional formatting to these columns:

1- Volume > 1000

2- Position < 20

3- SEO Difficulty < 40

You're basically narrowing down to keywords that receive traffic, are ranked either in the first or second page, and are not too difficult to rank for. Do you just go ahead and create an article with all the keywords you've just narrowed? No. There's still more work to do!

✔️ Validating the keywords

After you've narrowed down the keywords, it's time to validate the keywords via Google Trends and/or Google Keyword Planner. Go to Google Trends and search for the keywords you've just narrowed and make sure to set the region to Worldwide. For example, I now have a keyword 'web stats site'. Is it receiving enough interest? Google's metric is /100. Most popular is 100, least popular is 0, and 50 is half-half. My keyword is spiking, at times it's 90, others 40, and sometimes 0. That's okay, we can gamble.

I now have 1 validated keyword, it's receiving > 1000 traffic per mo, it's relatively low positioned, and isn't difficult to rank for.

🖊️ Writing your articles

Now....do you just use the keyword 'web stats site' in your title? No. Be creative. Write a blog article about 'Analyzing web site stats with Google Analytics'. Sometimes the keywords don't make sense, run it through Ubersuggest again and look through the 'Keyword Ideas' section, maybe you'll find a better keyword.

I hope this was a somewhat helpful article to get you into keyword research and planning. It's a great boost and I think you should take advantage of it to boost your organic traffic!

Tools used in this article:

1- UberSuggest

2- SimilarWeb

3- Google Trends

4- Google Keyword Ad Planner

Let me know if you have any questions and I'll be more than glad to help! You can read more at my blog over at https://blog.moeminmamdouh.com/

7 Websites To Find Front End Projects For Your Portfolio

moeminm — Wed, 11 Nov 2020 10:48:41 +0000

Why make such a list?

Often more than not, when I visit a developer's portfolio, they all showcase the same projects. Calculators, Recipe Finder, To-do, these are all great projects to get into web development, but employers are not looking for these sort of projects any more. The list below will showcase unique ideas that you can build out and showcase on your portfolio.

1- Frontend Mentor

With Frontend Mentor, you're getting the following in the zipped file:

✔️JPEG design files for mobile & desktop layouts

✔️ Style guide for fonts, colours, etc

✔️ Optimized image assets

✔️ README file to help you get started

✔️ HTML file with pre-written content

with the added option of a Sketch file, but for a subscription of $8/mo, it also includes access to all premium templates/challenges. You can also submit your code for other members of the community to view and review.

2- Piccalilli

A smaller selection of challenges but still a viable one nonetheless. Piccalilli has only 8 challenges but the solutions are posted for everyone to view. The fact that the solutions are available is great as reference to people still new to web development, but it's always important to keep in mind that there is no one solution in web development.

3- Codewell

This one is a bit of a shameless plug, but I'd like to include it, it might help someone out there. This is a personal project of mine.

✔️ Figma files

✔️ Assets (Icons and images)

✔️ Design exported in PNG for Deskto, mobile, and tablet

✔️ README file

4- Frontloops

This one is paid, but it provides you with the following:

✔️ 30 challenges with assets for practicing

✔️ 30 code solutions

✔️ 1st solution free

✔️ Technical hints and advice

5- Build Dribbble Shots

This one is my favorite, it honestly is. Dribbble is notorious for having designs that aren't that usable, but there are still some established designers on the platform who know what they're doing. I believe building out Dribbble shots will challenge your CSS layout skills as well as your design skills.

6- CSS Zen Garden

This one is old, but still a great way to showcase your CSS skills. The idea here is that everyone is provided with the same HTML file, but it's up to you to use CSS to make it your own. You can see all the submitted designs on CSS Zen Garden's website, you'll see some amazing stuff.

That's it, feel free to comment below places I might have missed and I'll add it to this article right away.

7- Dev Challenges

20 More Free Design Resources for Developers

moeminm — Sun, 08 Nov 2020 10:16:31 +0000

In continuation of the previous post, here are 30+ more free design resources for developers.

Stock Images/Videos

Mixkit: Awesome Stock Video Clips, Stock Music, Sound Effects & Video Templates. All available for free!
Pexels: Free stock photos you can use everywhere. ✓ Free for commercial use ✓ No attribution required.
Unsplash: The internet’s source of freely-usable images. Powered by creators everywhere.
Burst: Browse thousands of beautiful copyright-free images. All our pictures are free to download for personal and commercial use, no attribution required.
Coverr: Beautiful Free Stock Video Footage.

Typography

Typewolf: Typewolf helps designers and developers choose the perfect font combination for their next design project.
Google Fonts: Making the web more beautiful, fast, and open through great typography.
FontsArena: Free fonts, free alternatives to premium fonts, done-for-you-research articles. Open startup.
Speak Human: Generate human centric microcopy for all purposes.
Font Foundry: A digital type foundry crafting retail fonts and custom typography for various brands. Sharing a passion for premium typefaces, calligraphy and lettering.

Books

Utility

Checklist Design: A collection of the best design practices.
AI Image Upscaler: Enhance image resolution with AI.
Glyphy: Copy and paste glyphs with ease.

Cool IndieHackers Products

Scale[One new high-quality, open-source illustration each day. Use our color-picker to adapt the illustrations to your brand identity!)
Free Favicon Maker: Generate favicons and watch a live preview in your tab.
Colors and Fonts: Find colors and typography combinations ready to copy paste in one click.

As always, if you have any resources you'd like me to post in the next issue, do let me know and I'll have it included if it's suitable.

See you next time!

How To Drive Traffic To Your Side Project

moeminm — Wed, 04 Nov 2020 23:47:05 +0000

You've been working on your side project for nearly 6 months now, launch date's today. You're super excited to show the world what you've been working on, you hit the launch button and...no traffic or users at all.

It's a common problem. Us IndieHackers know where to advertise our products, but not all of us know how to post our products. I've split up this blog post to two categories:

👉 How to get a huge traffic boost for a short period of time with little to no work.
👉 How to get steady traffic by using long-term strategies.

Huge Traffic Boosts

This is a great way to not only gain traffic, but also to validate your idea (if you haven't already). There are hundreds of directories all over the internet that you can post your side project to and in return get huge traffic boosts. Let me go over where to post your side projects, the pros and cons of posting on said websites, and how to post on said websites.

Where To Post Your Side Projects

Reddit
HackerNews
ProductHunt
Betalist
Betapage
Sideprojectors, yes, you can showcase your projects on Sideprojectors.
Launched
SaaSHub

There are hundreds more websites you can submit your side projects to, but let's keep it simple for the sake of keeping this blog post short and sweet.

Pros and Cons of Posting On Directories

Pros:

Free huge traffic boost and all that comes with it. Be it sales, newsletter subscriptions, etc.

Cons:

Short term traffic. You could very well succeed on Reddit, HackerNews, and ProductHunt and you'd be set for a good week or so, but it'll be drought season afterwards.
Wrong audience. You're not necessarily targeting the 'optimal' audience by posting your side project on all these websites.

Should you do it? Short answer, yes. Long answer, yes. Despite the low quality of traffic, you'll still be seeing a good portion of your target audience on these platforms. You're not really paying to submit on these platforms, so do it, if it works, good on you. If not, you should have a backup plan (second category in this blog post).

How To Post On These Platforms

I've been waiting for this section. Let's assume you're releasing a website performance monitoring tool called Monitr. Things you should not do:

❌ Do not post your URL on all platforms meaninglessly.

Yup, that's it. So how do you share your product? Well, on websites such as ProductHunt, BetaPage and so on, there really isn't much you can do other than post the URL, but on community-based websites such as IndieHackers, Reddit, and HackerNews, there's so much room for creativity.

i.e. A post about website performance and its role in improve organic traffic with a link at the end of the article. More often than not, well thought out articles will rise to the top and your link will gain exposure. If not, you've added value to the community and you aren't really spamming your link. The mods will not be on your back.

Repurpose the content, you've written the blog post, will you go post that 1000+ article on Facebook/Twitter? No, try to make a simple graphic that will hook people and add your website's link within that graphic and the first comment. People on Facebook generally have low attention spans, so if you don't really grab their attention in the first few seconds they see your post, they're gone.

The point of this sub-section is to tell you to learn the platform before mindlessly spamming your links.

Steady Traffic Using Long-Term Strategies

My #1 lesson learned from my side projects which you can read all about here. What do I mean by long-term strategies? SEO.

SEO is a waiting game. You post your content, and you wait to rank on Google, but you don't just go posting about anything, you need to be smart about what you're writing about.

Pick high volume, low competition keywords.

For example, my last article 20+ Free Design Resources for Developers targeted the keywords 'free design resources'. According to Google Keywords, it receives 1k-10k search queries per month and has low competition, and well, it was a great pick. I'm currently the 10th result on Google for that keyword.

Write valuable posts

If you provide value, you will get noticed. I went ahead and posted my free design resources article on IndieHackers, dev.to, and HN just for the fun of it. I get around ~250 visitors from posting on there. Great, I head to bed, wake up and check my notifications only to find this:

So what's so surprising? Well, the traffic sources. I only posted on 3 websites. But I open up the acquisition tab and to my surprise, my 2nd most traffic source is from a website that featured my article that I didn't even know about.

174 visitors came from traffic sources I did not submit my article to. The article was picked because it received attention on the 3 websites I posted to. Here are the stats for the article on IndieHackers and dev.to

So I post the article hoping for some short term traffic, but what I didn't know is that it brought longer short term traffic. But wait, wasn't this a short term strategy? Yes, but also no.

You're also building backlinks this way. When a high domain authory website such as daily.dev features your website and links back to your website, that is great news.

Setup Search Console and Keep Track Of Your Organic Traffic

Search Console takes longer times to crawl new websites so you may find the results to be a little off at the beginning, that's fine. Set it up anyway, it's a very helpful tool. You get to see what keywords you're gaining impressions for, how many clicks you're getting, and what keywords are getting those clicks.

SEO is a long and tiring game, but once you start seeing results it's a great feeling. You no longer have to worry about constantly trying to find sources of traffic, they just roll in. Let me know your traffic game in the comments below and I hope you enjoyed this article!

20+ Free Design Resources for Developers

moeminm — Tue, 03 Nov 2020 13:02:38 +0000

Design resources are all over the internet, this list intends to curate some of the best out there for you to find easily. I plan on releasing a monthly version of this blog article with 20+ resources in every issue.

Colors

Color Hunt: Free and open platform for color inspiration with thousands of trendy hand-picked color palettes
Coolors: Create the perfect palette or get inspired by thousands of beautiful color schemes.
Colorinspo: Thousands of beautiful color palettes you can use it directly by one click.
Grabient: Beautiful and simple UI for generating web gradients.
Khroma: Khroma uses AI to learn which colors you like and creates limitless palettes for you to discover, search, and save.
Pigment by ShapeFactory: A unique way to generate fresh and vibrant colors based on lighting and pigment, instead of math. Find a beautiful, free color palette in seconds to kick off your next project.

Illustrations

Blush: Easily create and customize stunning illustrations with collections made by artists across the globe.
Open Peeps : A hand-drawn illustration library.
Avataaars: Create avatar illustrations in Sketch App with this free library. Combine clothes, hair, emotions, accesories, and colors. Video 📺
Open Doodles: A Free Set of Sketchy Illustrations.
Lukaszadam: MIT licensed SVG illustration images in different shapes & styles. Completely free for commercial projects - no attribution required. Open Source Illustrations.
Pixeltrue: Free SVG Illustrations AND Lottie Animations are available for free for personal and commercial use (MIT License).
Uplabs: UpLabs is the place to find high-quality design resources for designers, creative agencies and developers.

Learning Design

Growth Design: Growth & UX case studies in a comic book format. Improve your product skills with real-world examples.
Design Better: DesignBetter.Co is the essential guide to the best design practices from top design experts. Learn how to build a world-class design organization and more.
ReallyGoodUX: Screenshots and examples of great UX from real mobile and web products. Discover the best UX examples—including onboarding tours and walkthroughs, new feature and rebrand announcements, UX copywriting, signup flows and more.
Laws of UX: A collection of the maxims and principles that designers can consider when building user interfaces.

Inspiration

Mobbin: A hand-picked collection of the latest mobile design patterns from apps that reflect the best in design. Get inspiration from over 250 iOS apps and 25,000 patterns (screenshots from iPhone 12) available on the platform. Sign up to save your favorite patterns.
Onepagelove: One Page website design gallery showcasing the best Single Page websites, templates and resources.
Landingfolio
Landbook: Design gallery with the best and most carefully collected websites. We help creatives find inspiration & motivation to do rad stuff.

That's it for this issue! Be sure to leave a comment if you feel like there's a resource that should be in any upcoming issue.

How I Failed 2 Side Projects In Under a Year And Lessons I Learned

moeminm — Mon, 02 Nov 2020 10:47:27 +0000

I feel like I should start off the blog post by mentioning that I am a Product Designer with little to no development skills, so I heavily rely on no-code tools to get my side projects up and running.

The idea of creating something that thousands of users could potentially use was just so exciting to me. Over the course of just shy of a year, I worked on 2 projects that made me less than $20, combined, so I feel like it's safe to say I can share my experience with you guys and hopefully you'll learn from my mistakes.

designtarget

Oof, designtarget was a wild ride. On 18-8-2019, god knows what happened but I just hopped on Namecheap and purchased the domain designtarget.org with no prior experience in web development. I was just so into the idea of creating the 'ultimate design directory' that I really didn't think anything through. How would I monetize the platform? Do I even have a list of resources that I can work with? Where will I market the website? So many questions, and little to no answers.

I remembered seeing an ad for a visual editor plugin on Wordpress called Elementor, it seemed intuitive so I go to Namecheap's cPanel and install Wordpress, purchase a year's subscription to Elementor and I get building. Literally next day I was done, I didn't think the design through, I just wanted to get an MVP out right away, and this atrociousness was born, but I was proud of it. I had no web development knowledge and I made a website, and it felt great.

Naturally, I wanted people to see what I had built, so I go on Reddit and post the website on /r/webdev - no it wasn't a Saturday(you can only post your work on Feedback Saturday on /r/webdev), yes the post was locked. But that doesn't matter, why you ask?

8.5k visitors in less than 2 hours of being on reddit when I wasn't supposed to. I knew I was onto something, but a little after the hype died down, it dawned on me, I just missed a huge chance to build an audience. I rushed creating the website that I missed some essentials such as creating a newsletter sign up or even just a blog.

Fast-forward a few months, I eventually create a newsletter, Instagram page, and even a blog.

📧 ~300 newsletter subscribers.

📸 ~400 Instagram followers.

and most importantly, my blogs were ranking on Google. I don't have Search Console screenshots but I had ranked around ~11th or so for a few articles.

I had solved the traffic problem of any side project, but monetization was where this project went downhill. I simply had no monetization plan whatsoever. And this is where the story of designtarget, ends, well, I sold off the project for a measly amount but that was it.

Lessons learned:

👉 No matter how excited you are, keep cool and think things through.

👉 Traffic is easy, business is hard.

👉 Think things through, but also do not spend much time working on an MVP.

👉 It is fine to not know what you're doing.

Good Code

This one is close to my heart, it really is. You can read my post on IndieHackers to know why I stopped working on Good Code.

The idea originally came to me when I discovered Frontend Mentor, by then I had learned HTML, CSS, and a little bit of JavaScript and wanted to improve my skills. I liked FEM, but the free templates were just not the level of design I wanted to work on, queue Good Code.

This time, I was ready, monetization plan was straight-forward, content was ready, community building was in place, newsletter was in place. I cook up a static version of the website using HTML and CSS and release it on Github Pages, you can view Good Code here and straight to reddit I go (and IndieHackers this time as well).

September 3rd, to September 15th. I was onto something, again. Shortly after launching, I view my Gumroad page only to find 2 customers have purchased templates for a total of $10. My first internet money!

I also had people posting their solutions on the subreddit I created just for this website, it felt great.

I really wanted to continue working on Good Code, as it stands, it's only hosted on GH Pages, so there's a good chance there could have been more sales had it been on an actual domain. I might resume working on Good Code in a future date, but for now, I'm pausing for reasons listed in the IndieHackers post.

Lessons learned:

👉 Spin ideas. I could have just released this as just another website selling Adobe XD templates, but I feel like the 'improve your HTML and CSS skills' twist was what brought this to life.

👉 Create a community for your side-project.

👉 Don't be afraid to shut down.

To wrap things up, had I not started designtarget, I wouldn't have learned how to code (albeit being bad at it), had I not learned how to code, I wouldn't have started Good Code and made my first $ from a side-project, who knows what my next had I not started is going to be, but I feel like it might be success.

You can read more articles over at https://blog.moeminmamdouh.com/

16 Resources I Use To Rapidly Design & Prototype a Website

moeminm — Wed, 30 Sep 2020 07:00:21 +0000

Hi there everyone 👋

I constantly pump out a lot of templates for my side project and I often get asked how do I do it so quickly, the answer is resources. As a designer, you naturally gather resources for anything design-related over your career.

I'm here to share 50+ resources that help me immensely when wanting to rapidly design a website.

Landing Page Inspiration

Welovewebdesign
One Page Love
Landing Folio
Pageflow

Illustrations

Blush.Design
Open Peeps
Humaaans
unDraw

Icons

Heroicons
Boxicons
Feather
Iconfinder

Colors

Coolors
Flatuicolorpicker
Palette.app
Grabient

So how do you use these resources? 🤔

It really depends. You don't just download an illustration and just put it in your Figma file. Combine it with Scribbbles for example to make it more appealing.

You don't just go to Coolors and use every single color you find there, you use the 60 30 10 rule.

About Me

I'm a Product Designer currently learning how to code and working on Good Code, a website where you can download free Adobe XD templates that you can use to sharpen your HTML and CSS skills :)

I made a website where you can download free Adobe XD templates to improve your HTML and CSS skills!

moeminm — Mon, 28 Sep 2020 09:44:44 +0000

Hola amigos! 👋

I'm a designer who's always been interested in making their projects real. Unfortunately, I sucked at frontend and I still do, so I used Frontend Mentor to try and improve my HTML and CSS skills. The challenges were great but unfortunately the free templates were limited.

Cue Good Code, free Adobe XD templates that you can use to improve your HTML and CSS skills. The number of templates is currently limited but I plan on adding more with different variations (i.e. landing pages, pricing pages, etc.).

Let me know what you think of this and what improvements can be made, always looking to make any of my projects better!

Link to Good Code: https://moeminm.github.io/goodcode