DEV Community: Moemin Mamdouh 👨‍💻

How to Escape Tutorial Hell and Start Building Your Own Projects

Moemin Mamdouh 👨‍💻 — Mon, 12 Jun 2023 15:18:20 +0000

Introduction

Have you ever felt like you're stuck in a never-ending cycle of following tutorials, but never actually learning how to code? If so, you're not alone. Many aspiring developers find themselves in this situation, which is often referred to as "tutorial hell."

Tutorial hell is a frustrating and demoralizing experience. It can be hard to stay motivated when you feel like you're not making any progress. But don't worry, there is a way out.

In this blog post, we will share some tips on how to escape tutorial hell and start building your own projects.

Create a roadmap

This is a very crucial first step. Having a structured guide can help you escape tutorial hell by providing you with a roadmap to follow. A good guide will break down the learning process into smaller, more manageable steps. This will help you to stay focused and avoid getting overwhelmed. Are you looking to become a front-end developer? Create a roadmap that breaks down what you need to learn and do not skip any material, even if at some point you have read about said material.

A structured guide will also help you to learn the material in a more efficient way. By following a step-by-step process, you will be able to build on your knowledge and skills as you go. This will make it easier for you to understand and apply the concepts you are learning.

There are many different structured guides available that set a clear structure to follow. Some of the most popular roadmaps and websites include:

The Odin Project: This is a free, open-source curriculum that teaches you the skills you need to become a full-stack web developer.
freeCodeCamp: This is another free, open-source curriculum that teaches you the skills you need to become a full-stack web developer.
Developer Roadmaps: A resource full of roadmaps for all kinds of roles in web development.

If you are struggling to escape tutorial hell, we recommend finding a structured guide that works for you and sticking to it.

Set realistic goals

One of the biggest problems that leads to tutorial hell is setting unrealistic goals. When you start learning to code, it's tempting to want to build the next big thing. But if you don't have the skills and experience yet, you're setting yourself up for failure.

Instead, start with small, achievable goals. For example, you could set a goal to build a simple website or a to-do list app, but always make sure it follows the road map you’ve created. Once you've completed a few small projects, you'll start to build up your skills and confidence. Then you can start working on more ambitious projects.

Don't be afraid to pause and build

The best way to learn is by doing. So don't be afraid to pause your tutorials and start building your own projects. This will help you solidify your knowledge and skills, and it will also help you discover your own unique coding style.

When you're building your own projects, focus on the particular tutorial you're working on. For example, if you're currently working on how to build tables using HTML, focus on building things that involve tables using HTML.

The most important thing is to just start building. Don't worry about making your projects perfect. Just focus on getting something working, and then you can iterate and improve it over time.

Don't be afraid to ask for help

Finally, it's important to remember that you're not alone. There are many other developers who have been through what you're going through. Don't be afraid to ask for help when you need it. There are plenty of resources available to help you learn to code.

If you're stuck on a particular problem, don't be afraid to ask for help on a forum or in a chat room. There are many experienced developers who are willing to help beginners. We've recently moved to Discord to help bring together developers of all levels to help you out in your developer journey, you can join the Discord channel here.

Reading more about other people’s experiences will also help you. You get to take in the experiences of people who were in similar shoes and have succeeded. We regularly interview aspiring developers on our blog, like this one from Andrew J Hughes.

Conclusion

Escaping tutorial hell is not easy, but it is possible. With hard work, dedication, and the right resources, you can learn to code and start building your own projects. In general, it also to helps to:

Find a learning style that works for you. Some people learn best by reading, while others learn best by watching videos or listening to podcasts. Experiment with different learning styles until you find one that works for you.
Don't be afraid to make mistakes. Everyone makes mistakes when they're learning to code. The important thing is to learn from your mistakes and keep practicing.
Stay motivated. Learning to code can be challenging, but it's also very rewarding. Stay motivated by setting goals for yourself and celebrating your accomplishments.

It's OK to not know something — an interview with aspiring developer Joshua Dempsey

Moemin Mamdouh 👨‍💻 — Sat, 16 Jul 2022 19:36:36 +0000

Introduce yourself.

My name is Joshua Dempsey and I live in Scotland, United Kingdom. I’m 26 years old, and I hold a BsC from Abertay University Dundee in Web Development and Design. I’m currently seeking full time work as a web developer, and Codewell will be pivotal in proving to employers that I’m worthy of their time and money. I’ve build lots of “wells” now, and feature them heavily on my website as a portfolio piece.

What's your backstory and how did you get into web development?

I’ve always been interested in computers and websites form a young age, and when I was around 14 I read my uncles book; “HTML Goodies” by Joe Burns. Of course, a lot has changed in 10+ years since then, but that is the acorn that spurred my web development journey. Fast forward from this, and Laracasts and Codewell are my primary means of self learning, as well as using Twitter for getting inspiration and handy code snippets. I gained my degree from Abertay University, but shortly after I developed imposter syndrome and took a jobs in hospitality/retail instead of pursuing one in technology; a big mistake which I’m now trying to rectify.

What’s one thing you wish you had known when you began learning web development?

One thing I’d wish I’d knew was; it’s OK to not know everything! There’s so many layers to various web development stacks, so many new shiny frameworks, so many amazing developers out there on Twitter. This can be very daunting for newbie developers like myself, and sometimes we need to remind ourselves it’s OK to not know something or to ask for help. Applying for jobs used to scare me as I wasn’t sure how to do x, or I wasn’t sure how x feature worked in x stack. Looking back now it’s silly to think that you could possibly know everything, but I think it trips a lot of new developers up and makes them develop imposter syndrome. Seeing developers like Taylor Otwell and Adam Watham post on Twitter saying they’ve struggled to do x or laugh at how long it has taken them to implement certain features certainly helps, and makes you realise even the very best talent is constantly learning and refining their skillset.

Where are you right now in your web development journey? What's next?

I’m at the stage now where I think I’ve garnered a pretty decent skillset. The next step for me is proving this to employers by building a good portfolio and showcasing this. I am also currently carrying out freelance work, whilst working full time in hospitality, to hopefully earn some money and experience at the same time. Codewell definitely helps showcase my talent to employers, as I am not great at design, so having assets and design guides supplied whilst letting me get on with the coding is mind-blowing. It’s completely changed my mindset and allowed me to get on with building portfolio pieces without worrying about design.

What are your goals for learning web development? Is it money, passion, a change in your lifestyle?

I’m not going to lie; the goals for me learning web development is to get paid for something I love doing and to get good working rights and conditions. I currently have a long commute and a job which pays ok but not amazing. The end goal is to get a decent salary and a (partly) remote working position. I don’t think this is bad motivations for learning web development and I imagine plenty of other people are in the same boat.

If you experienced burnout, how did you deal with it?

I don’t know that I’ve experienced burnout per se, but I’ve certainly had days and weeks go by when I just can’t bring myself to code. I think that this has been partly due to depression and partly from loss of motivation or the feeling of being completely overwhelmed. To combat this, I recently purchased a new M1 Pro MacBook, and I’ve started to code a lot more in coffee shops and cafes. This keeps my motivation higher and helps reduce the feeling of loneliness that you get from coding alone in your bedroom. Twitter is a massive resource for me, it’s amazing when I open my timeline and see hundreds of interesting and insightful tweets from some of the worlds best engineers and programmers. Laracasts and YouTube has also been greatly helpful too, not to mention Codewell. Aside from coding, taking walks with friends in the beautiful Scottish outdoors certainly helps, too!

What advice would you give someone wanting to start learning web development but feels overwhelmed with the amount of information out there?

Learn one thing (language/framework/design tool) and build a cool site or tool in it, then expand. It’s OK to not know everything, and in fact it’s impossible to know everything. As long as you have demonstrable experience, employers will realise your ability to learn and to overcome challenges. This is easier said than done, I know myself I was caught up in the “shiny new framework” fad for a few years, but once you get over this everything becomes easier.

Thanks to Codewell for allowing me to complete this guest interview, it’s been a very reflective and thoughtful process to answer these questions and it’s certainly made me learn new things about myself and my journey into web development so far.

Thanks for reading.

Joshua Dempsey,
Scotland.

I redesigned YelpCamp by Colt Steele, and am giving away his Bootcamp for free!

Moemin Mamdouh 👨‍💻 — Fri, 17 Sep 2021 18:04:27 +0000

Hi everyone 👋

Back when I was taking Colt Steele's bootcamp, I noticed that almost all YelpCamp projects were the same, and that's to be expected since people were still learning how to build a full stack application, but i'm a big fan of making it your own so I redesigned it!

I tried my best not to add new features so as to not overwhelm beginners still learning, so this includes all the functionality you will find in the bootcamp.

You can download the custom design for the YelpCamp challenge here for free

🎁 I'm also giving away the bootcamp to one lucky winner, to enter the giveaway, check out this tweet

Note: The link to the challenge will take you to my side project,Codewell, so please treat this post as such, thank you!

6 HTML and CSS Projects For Your Portfolio

Moemin Mamdouh 👨‍💻 — Wed, 21 Jul 2021 22:36:04 +0000

After speaking to seasoned developers, you will quickly realize that the best way to improve your portfolio is by building projects. It is probably the best way to get better, because along the way, you'll be facing challenges that will require research to solve, and that ultimately improves your skills.

We've made a list of 6 HTML and CSS Projects you can practice on and include in your portfolio!

Table of Content

1- Waitlist Page

2- Multi-step Form

3- Fiber Landing Page

4- Spense Landing Page

5- Nested Comments

6- Remix Landing Page with Dark/Light Mode

1- Waitlist Page

You will learn:

CSS Transforms
Flex or Grid
Responsive design

2- Multi-step Form

You will learn:

Creating multi-step forms
Creating custom components
Responsive design

3- Fiber Landing Page

You will learn:

Absolute positioning
Flex/Grid
Creating cards

4- Spense Landing Page

You will learn:

Absolute positioning
Flex/Grid
Creating cards

5- Nested Comments

You will learn:

Positioning
Created nested comments

6- Remix Landing Page with Dark/Light Mode

You will learn:

Creating dark and light mode pages
Work on a full sign up and onboarding process
Creating blog cards
Using variables and mixins to make your life easier

You can also see a walkthrough of Codewell's challenges on Youtube.

8 Websites to Practice Your Frontend Development Skills

Moemin Mamdouh 👨‍💻 — Fri, 04 Jun 2021 22:16:52 +0000

Building projects and solving real world problems is inarguably one of the best ways you can learn how to code. Theoretical is all good, but without applying the knowledge you learn, you will most likely not progress. We've made a list of 8 websites that can help you get better at frontend development through practice.

Table of Content:

freeCodeCamp
Codewell
CSSBattle
Treehouse
Coderbyte
CodePen Challenges
Javascript30
Frontend Mentor

1. freeCodeCamp

Inarguably one of the best resources to learn web development. Over 7000+ tutorials and tons of challenges to complete along the way to test what you've learnt.

The tracks are straightforward and the best part? It's all free.

2. Codewell

If you want to level up your HTML, CSS, and Javascript skills, Codewell offers real world Figma templates that you can use to improve. You can even share your solutions and receive feedback on either the website or on the growing Slack community. Here are 5 projects to tackle on Codewell.

Codewell challenges include:

Figma Template
All assets (images, icons, etc)
PNG files for desktop, tablet, and mobile views
README.md file with the fonts used and how to deploy

3. CSSBattle

This one is specific to CSS, but its gamification system is a great way to track your progress and continue learning, they even give away some merchandise at the end of some battles, which is always a great motivator.

The battles on there aren't necessarily going to tell you how to create web layouts, but they will definitely help you tackle some of the more intermediate CSS properties.

4. Treehouse

At just $25/mo, Treehouse is a great platform to help you learn certain languages like Javascript, or even backend languages like PHP. You can use their in-demand courses which have a wide variety of quizzes and challenges, or go through a track which has a guided curriculum to teach you something specific.

5. Coderbyte

Coderbyte offer:

Coding Challenges
Interview Kits
Courses

They offer free challenges to get a feel for the platform before subscribing to their plans which start at $35/mo. If you're serious about transitioning to a web development career, Codebyte offers you all the tools you need to accomplish that.

6. CodePen Challenges

The great thing about CodePen challenges is that they provide prompts for nearly a variety of languages and technologies. HTML, CSS, Javascript, Flutter, you name it. What's even better is that you get to share your solutions with everyone who's participated in the challenges, give, and receive feedback on your solution.

This may not be a structured way to learn, but looking at other people's code is a great way to get inspired and perhaps learn something you may have not known.

7. Javascript30

A 30 day vanilla JS coding challenge by Wes Bos. You get to build clocks, drum kits, and so much more using just Javascript. It's also free, so there's no excuse to not sign up and get started right away!

8. Frontend Mentor

Solve real-world HTML, CSS and JavaScript challenges whilst working to professional designs.

If you've enjoyed this article, be sure to follow us on Twitter here for more content like this!

Codewell — Free Front End Coding Challenges!

Moemin Mamdouh 👨‍💻 — Mon, 10 May 2021 07:14:20 +0000

Hi everyone! Can't believe about to show off something my friend and I have been working on for the past 3 months, it still doesn't feel real!

I'm a Product Designer who's always been adamant about learning coding but never got around to actually doing it (I'm okay with HTML and CSS skills) but I have noticed that I always design and code the frontend just for fun and in the process, I learn a lot from Google and Youtube.

I'd like to introduce to you Codewell — improve your HTML and CSS skills by practicing on real design templates.

We’re starting off the release with 9 free templates — our goal is to build a growing community of developers eager to learn and share their solutions, and there’s no better way to do that but by making the templates accessible to everyone.

We'd love it if you take a look at Codewell and jot down your thoughts!

Looking forward to seeing you on Codewell!

70 Design Resources for Developers

Moemin Mamdouh 👨‍💻 — Mon, 03 May 2021 13:38:20 +0000

Be sure to subscribe to Codewell's Newsletter or follow us on Twitter for more awesome resources like this!

Colors

ColorHunt: 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.
Color Inspo: 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: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.
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.
Humaaans: Mix-&-match illustrations of people with a design library
unDraw: Open-source illustrations for any idea you can imagine and create.
Charco: A set of 16 handcrafted illustrations for your web & app projects. This set includes categories like 404 error, no internet connection, no service, fatal error, page not found, something went wrong, under construction and many more.
Ouch!: Ouch helps creators unable to draw overcome the lack of quality graphics. Download free PNG and SVG illustrations from top Dribbble artists to enhance your product.

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
Laws Of UX: A collection of the maxims and principles that designers can consider when building user interfaces.
Checklist Design: A collection of the best design practices.
NN/g: Provides research-based UX guidance, by studying users around the world.
DesignerUp: An ecosystem of product design resources to help you become a more mindful designer and create better products.

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: Landingfolio features the best landing page inspiration, templates, resources and examples on the web.
Landbook: Design gallery with the best and most carefully collected websites. We help creatives find inspiration & motivation to do rad stuff.

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.

Accessibility

Contrast Checker: The Lightness slider can be used to adjust the selected color. WCAG 2.0 level AA requires a contrast ratio of at least 4.5:1 for normal text and 3:1 for large text.
The A11Y Project: The A11Y Project is a community-driven effort to make digital accessibility easier.
WhoCanUse: It's a tool that brings attention and understanding to how color contrast can affect different people with visual impairments.
ColorBox: Create amazing color sets superfast.
ColorOracle: Color Oracle is a free color blindness simulator for Windows, Mac and Linux.

Icons

Icons8: Icons, illustrations, photos, music, and design tools
Flat Icon: Icons for use.
The Noun Project: Icons and Photos For Everything
Iconscout: Free Download Icons illustrations stock photos at one place
Iconmonstr: Discover 4496+ free icons in 313 collections
Feather Icons: Beautiful, customizable open source icons
Iconfinder: Free and premium vector icons in SVG, PNG, CSH and AI format
Heroicons: Free, open source icons from the creators of Tailwind CSS.

Fonts

Google Fonts: Library of around 1000 free licensed font families
DaFont: Archive of freely downloadable fonts
FF Fonts: 100,000+ Free Fonts
Dev Fonts: Find and use the coding fonts for free

Design Software

Adobe XD: Share your story with designs that look and feel like the real thing. Wireframe, animate, prototype, collaborate, and more — it’s all right here, all in one UI/UX design tool.
Figma: Figma is a vector graphics editor and prototyping tool which is primarily web-based, with additional offline features enabled by desktop applications for macOS and Windows.
ProtoPie: Don’t let a good idea stay just an idea. ProtoPie is the most intuitive way to prototype and perfect them.
Principle: Principle makes it easy to design animated and interactive user interfaces. Whether you're designing the flow of a multi-screen app, or new interactions and animations, Principle helps you create designs that look and feel amazing.
Invision Studio: Free screen designing tool from InVision
Framer: Framer is an all-in-one tool that helps teams design every part of the product experience. Start in Framer and get to a functional prototype faster than ever—no code required.

Design Resources

Mockup World: The best free Mockups from the Web
Freebiesbug: Hand-picked resources for web designer and developers, constantly updated.
UI8: 4,745 curated design resources to energize your creative workflow
UI Bundle: Discover 535 free design assets for designers and developers
Uplabs: Unlimited UI Kits, Icons, Templates, and much more.
Original Mockups: Free PSD Mockup Templates

Design Articles & News

UX Collective: We believe designers are thinkers as much as they are makers. Curated stories on UX, Visual & Product Design.
Sidebar: The five best design links, every weekday.
Designer News: Designer News is where the design community meets.
UX Movement: A publication of articles to teach you how to design interfaces that provide an intuitive user experience.
Another Design: It includes inspiring work, cool typefaces, people to follow, news to read, tools to try, jobs, and other delicious spam. If you're into that stuff, subscribe!

Books

The Lean Startup: How Today's Entrepreneurs Use Continuous Innovation to Create Radically Successful Businesses
Don't Make Me Think: A Common Sense Approach to Web Usability (Voices That Matter)
Refactoring UI: Learn how to design beautiful user interfaces by yourself using specific tactics explained from a developer's point-of-view.

Figma for Developers: 2 Simple Tips to Level Up Your Figma Game

Moemin Mamdouh 👨‍💻 — Thu, 22 Apr 2021 14:26:24 +0000

Figma is a great tool to help you design landing pages quickly, but it isn't often used to it's fullest potential. This article will go over 3 simple tips that you can use to create better components for your landing pages.

Creating a dynamic button

1/ Type in your text as you normally would.

2/ Click Shift + A on the text layer, this will make it an auto-layout frame.

3/ Adjust the padding and alignment in the 'Alignment and padding' window on the right. Also add in your button's color by adding a Fill.

That's it, you've created a button will retain alignment and padding even if you change the text inside.

Creating a reusable button

1/ Right click on the auto-layout frame you've just created and click 'Create component'

2/ Copy paste the button anywhere in your design.

3/ When you apply any changes to the original component, it affects all child components.

These 2 simple tips will speed up your workflow a lot, not to mention you can use this same technique for any component, not just buttons. Give it a shot next time you're designing something on Figma!

Don't underestimate development time.

Moemin Mamdouh 👨‍💻 — Mon, 19 Apr 2021 13:36:54 +0000

Hi there, dev.to! 👋

I was supposed to launch my side project 20 days ago. I think you can see where i'm going with this, but long story short, i'm falling short of that promise.

A little background: I'm a designer who's working on a side project with a developer friend. We started around early February and estimated that we would be able to launch by the end of March.

Everything was going great, we wrapped up development and pushed to Netlify to test it out with a few users who have signed up to our waitlist. Except:

1- We use Github login, we completely forgot the permissions to be read-only. Lots of users pointed that out.

2- Edge cases for subscriptions were not handled properly.

3- Some edge cases for our downloadable templates required design modification, so back to the drawing board we went.

4- Some of the templates were missing files (woops).

5- Solutions/comments showed the wrong timestamps.

There's a ton of bugs that showed up during early user testing which if you think about it, isn't that bad. We avoided what could have been a disaster if we launched.

The point is, we thought if we wrap up development, that's the project. User testing was always going to be after we launch and receive feedback from actual users, thankfully we did not go that route and it ended up to our advantage, but it's back to development for us.

I'm building this project in public on Twitter if you'd like to follow me on the journey :)