DEV Community

Cover image for A beginners guide on how to build projects
m0nm
m0nm

Posted on

A beginners guide on how to build projects

So you've completed a udemy course and you decide to make a project for your portfolio, You get an idea for a project and the next second you open up your code editor you get stuck? Maybe you don't even know how to begin ? This is what we're going to find out in this article.

But first thing first, Do you think that the way you approach project building is the same way the pros do ? Probably not right ? What you usually do is just mess around here and there following whatever that demands your attention right now right ? I've been there before and here I'll try to show you how I usually approach my projects and some tips on how to get unstuck.

You need to follow these steps, Let's get started!

Have a Plan

Opening your code editor should not be the first step, You need first to have a clear idea on what you're trying to do, Ask yourself: "What are the major features of this app?", "How will the roadmap of the site look like?", "What sort of technologies I'm going to need?" and so on and so forth..., Grab a piece of paper and envision the final form of your app and write down all technical details you can think of.

You can also look for examples of other people creations so you get an idea on how it usually done. After you're familiar with your app it's time for the next step.

NOTE: Planning for your project should not take you quite a time, Well it depends on the complexity of the project of course BUT Do not mistake procrastinating for planning.

Start with the README

This may seem old, After all this is usually something you do once you finish your project right ? Well i advice to do the opposite way and to write the README first as if you already finished the project!, This will gives you a mental map and an overview of what your todos would look like

for example

MyApp

this is MyApp, it's an app that aims to solve such and such

Features:

  • feature 1
  • feature 2
  • feature 3 ### Sections:
  • section 1
  • section 2 ### Technologies
  • technology 1 ...etc.

Looking at that README you'll have an idea on how and where to start. Compare this to just chaotically writing code here and there.

you can modify the README midway-through or when you finish if that was needed. The purpose of the README is to organize your thoughts and gives you a clear map to follow on.

Now that you're finished with the README file it's time for the next step.

Break it Down

How do you eat an elephant ? One bit at a time.
-- some fella probably

Now what you have to do is todo (notice the pun?), You need to break down your project as parts (optimally not related to each other) and to create a todo list that describes what you need to do for each part.

I personally like to write my todos at the top of the README, They are easily accessible that way. But you can choose whatever suits you.

So for example if it's a web page you're making, The parts you broken down may look like this:

  • Navbar
  • Sidebar
  • Main Section
  • Customers Reviews
  • Footer

And the corresponding todos may look like this:

  • Create a navbar
  • add a dropdown to the navbar's element
  • add functionality to navigation elements
  • create a sidebar
  • toggle sidebar by pressing the menu
  • display products in the main section
  • create a slider that represents the customers review
  • create a customer card
  • create a footer

If any of the todos you made seems complicated then you know what to do right ?

After you've done all the above now you can open your code editor and starts to make a magic show with your hands !

typing cat

Just make it work, Then make it better

Don't be stressed about best practices, clean code, optimization...etc. Just make it work. After you finish up the project you can then refactor the code or even better re-build it from scratch! Unlike the first time you will have an idea on how to build it because you've already built it and because of that now you can focus on code quality.

Some Tips

get good with git

I highly recommend learning a version control tool like git as soon as possible, Git is a valuable tool that will save you a lot of trouble once you're good with it. It is also a required skill to put in your resume

If you're familiar with working with git always make sure you're working in a different branch whenever you're completing your todos. This will save you from accidently messing the main branch. After you finish with a single todo you can merge it to the main branch then.

Dealing with Bugs and errors

Ah bugs, Our hated enemies and beloved teachers. When you confront one i recommend to try to understand the message the error is giving you, Think why it's happening before you stackoverflow it. This is how you become better at programming. But Generally speaking, If you spend more than 20-30 mins trying to fix a bug then i think its time for you to take a walk or make a sandwich. Trust me it's not worth it, Just wait the solution will come to you i promise :)

Also don't make the mistake of jumping from bug to bug like a rabbit whenever they appear, I myself am guilty of this, If you find a new bug when dealing with the current bug just write it down in a note, Don't chase it, Don't be distracted, It will be just a waste of your time and energy.

You can do it

Don't be disappointed if you can't seem to achieve what you want to achieve, You're not stupid, In fact, Everyone is stupid :-) everyone is having a hard time learning concepts, Everyone is banging their head on the wall. If you keep going no matter what, I promise that one day you will laugh about what you thought to be hard now seems so trivial to you!

Conclusion

I hope that this post was helpful to you. If you have some advice or tips make sure to share it in the comment section!

Happy Coding!

Top comments (2)

Collapse
 
leonelcosta profile image
Leonel da costa

good good tips! thanks

Collapse
 
m0nm profile image
m0nm

Thanks for reading! I hope it helps you