Tips for new front-end devs in the personal project building process
Tags: webdev, productivity
Published: 2021-01-22 16:12:04

Building you own personal projects is an invaluable part of the front-end web development learning process,  but it can be daunting for those of us who have grown comfortable living in ***tutorial hell***. The real learning will be done when you start building on your own, taking a project from nothing to a hosted site where anyone can interact with your work.  

When you start building full projects on your own, there will be things that you will want to become comfortable with related to the process of building projects, but outside of the code itself. Here are some tips to help you with this process. ***GET BUILDING TODAY***.  <br />

What will be covered?  <br />

1. Push your code to github
2. Folder navigation
3. Organize your project structure
4. Learning from documentation
5. Customize your projects

*Let's Begin...*

### Push your code to Github <br />

This one is very important to aspiring developers.  
Github is a website that builds on the world's preferred version control system, Git. Git allows us to keep track of earlier versions of our projects among other things, meaning we can revert to earlier versions if our situation requires us to do so.

Using Github as a developer is great at allowing us to store our projects remotely in the cloud and connect/ collaborate with like-minded developers.  You can check it out here at <https://github.com/> to create an account and start building your projects today.

To put it simply, it is the online social hub for the developer community. You can create your own profile, store your own projects and explore projects and packages built by others.  When you start your journey into building your own projects you will see the need to host your code somewhere other than your local device. This has many benefits which I will highlight with a story that happened to me.

I had been learning front-end development for about three or four months and had initially avoided using Github and Git as it seemed very daunting to a beginner. By this time I had built several small projects, some through tutorials and a couple myself and had a lot of valuable code to reference, Of course this is when my laptop inexplicably died on me and I somehow managed to botch the file recovery leaving me with nothing. I was devastated. ***BACK UP YOUR WORK PEOPLE***.

Hosting your projects in a Github profile also has the benefit of proving to potential future employers that you built the projects you claim to have built. They can read through your code, see your commit history and you are able to prove that you are an active developer who can back up what you claim to know.

I am not going to go into using Git in this blog post but you can find a simple guide to using Git commands here
<https://rogerdudler.github.io/git-guide/>.  

The earlier you can start committing your code to Github the better, you will thank yourself later on! 

### Folder navigation <br />

When you start building your own projects you will notice that you will often have to navigate between folders for a few different reasons. One of these reasons being the need to move from one project to another using the terminal. For the purpose of this example I am using the built in terminal in Visual Studio Code.  <br /><br />

<img src="https://media.graphcms.com/dCwQtQ88SZOkbbQ8SUvc" alt="example folder structure in VS Code" height="900px" width="400px" />

***Example***

Here I am currently located in the folder `Project1`. In order to move into `Project2` from here using the command prompt terminal we need to understand the command required to accomplish this.  

The command `cd` (also known as change directory) is used to preface the path you wish to navigate to. You will need to leave a space and add the relative path from the current directory (meaning the path from where you are currently located).

Using `cd folderName` will move navigate you down the folder tree to a folder located beneath the current directory.  

Using `cd ./folderName` will move you across into a folder located on the same level as the current directory.

Finally using `cd ../folderName` will move you up into a folder located on a level above the current directory.

Therefore in our example here I want to move from the `src` folder in `Project1` to the `src` folder in `Project2`. To do this we first have to move up two levels to the `Example` folder using the `../` path two times. Then we can navigate into to `Project2` with the folder name.  <br />

<img src="https://media.graphcms.com/3VSJcTeoQX2icUH4kExF" alt="my terminal" height="500px" width="1000px" />  <br />

<img src="https://media.graphcms.com/R8RFyT7GT5WQkSFDDfa0" alt="my terminal" height="500px" width="1000px" />  <br />

So far we have `cd ../../Project2`. All good? If you hit enter at this point you will see your current working directory as `Project2` as seen below. Almost there.  

<img src="https://media.graphcms.com/cf1PRWMsQbGRP6OqiU8k" alt="my terminal" height="500px" width="1000px" />  <br />

Finally we can run the command `cd src` to drop into our src folder in `Project2`.  Of course you could combine the two different commands into one `cd ../../Project2/src`. <br />

***End of Example***  

So why is useful to us as a front-end developer?. When you start building your own projects you will need to navigate folders regularly. Use cases of this include:
* `src` attributes of `img` tags require a path to locally stored images (e.g `<img src="../../public/image.webp" />`)
* running scripts that require a path to the file you want to run such as `postcss src/styles/app.css`
* moving between projects located on your machine
* using module bundlers such as Webpack will require a lot of setting paths to different locations

It is a crucial component of building projects that you won't have to even think about if you get comfortable with directory navigation early and can save you a lot in development time later on.  

Mastering the terminal may seem challenging or daunting at first and I am by no means an expert, but learning the basics will help you become comfortable with project development.

### Organize your projects

A quick tip for those of you who are not sure how to organize you projects in an organized manner when they start to grow.  

As you start to learn more about other technologies outside of html, css and javaScript that are required for modern web development your projects will naturally grow in size.  

Maybe you have just learned about the javaScript module system and ES modules (the ECMAScript standard for working with modules using the `import` syntax), and now you have 5 javaScript files as opposed to one.

This is where you will want to organize your projects in a logical and clean manner where it is easy to locate your files. There are many different ways you can do this and there is no one-beats-all method. Sometimes it depends on the technology you are using.  

For example if you are using the popular javaScript library <https://reactjs.org/>, then you will probably have a `components` folder.  

But there are some consistencies across most projects and I will share how I might define my own project structure. As long as you structure your project in a logical way and stick to it, then it will only benefit you and others who would work in your project.  

For the purpose of the following example, you can assume the project is just some simple html, css and javaScript using no libraries or frameworks.

***Example***

<img src="https://media.graphcms.com/XOTxOGoR3S9yvGYW1ekl" alt="example folder structure in VS Code" height="900px" width="400px" />

First I create a `src` folder which will contain the primary functionality of the app. This will always contain:
* *javaScript* or *typeScript* or *whatever script*
* tests related to the app

as well as other tech related folders you might require such as a `lib` folder for external libraries or a `components` folder for react.

Secondly a `public` folder is almost always required which I like to split up into an `images` folder and a `fonts` folder if I have locally installed fonts for a given project.  

Finally I have a `dist` folder which will contain the final production version of your app which contains the optimized version of your code.

You could also create a `pages` folder if your app contains multiple or nested pages, otherwise I would keep the `index.html` page at the root of the app.

***End of Example***  

This is just a basic idea of how to keep a neatly structured project where every file has a suitable location, saving you development time and effort and making it clearer to other people that want to read your code or work in your codebase.


### Learning from documentation

This one is slightly dependent on the quality of the documentation but it still serves as a useful tip. A big part of leaving *tutorial hell* is to build a project of your own from start to finish without the need to code along with a video or similar material.  

This does not mean that you are not allowed to use Google for example if you get stuck, forget the correct syntax or something similar but that you are able to use these resources in a better way than just copying the code the instructor gives you.  

***Example***  

You are creating a task to-do list app where users can record and remove tasks, as many beginners will do at some point.  

I have also built similar projects and so everyone can relate.   

You know that you need to store the users tasks if they leave the app as they shouldn't have to create all of their tasks every time they log in but you are not sure how to accomplish this.  

Instead of searching for a video of someone building a to-do list, you could search for something like ***javascript storage methods*** which is specific enough to produce plenty of good results with the top being this article <https://developer.mozilla.org/en-US/docs/Web/API/Window/localStorage>.  

Mozilla Developer Network or ***MDN*** is one of many fantastic developer resources which has information about everything you could possibly need in relation to html, css, javaScript and much more.  

***End of Examples***  

Being able to read through documentation such as this and pick out the parts you need is an important skill. One day you will be building more complex projects that might include a niche case that is not covered by a tutorial or blog post and usually by digging into the technology documentation, you will find a solution to your problem.  

Personally when I am learning a new skill or technology, I like to begin by reading the documentation before I start working with it so that I understand the basics to get me started. Then I start using it in a project with the documentation open in a tab and I can easily reference it as different problems arise.  

Documentation can seem scary or hard to read a first, but you will soon see the benefits of tacking it head-on and it will prove a valuable resource when you are unable to code-along with a tutor.
  

### Customize your projects

Personally, I found that coming up with ideas for my personal projects was difficult and it can be very beneficial to you as a developer if you are able to create memorable or personalized projects that differ in some small way from the many tutorial projects offered on the internet.  

*This is not to say that you need to think up an idea that has never been done.*  
 
Projects such as to-do lists, calculators and weather apps are common for a reason, they teach core concepts and invaluable skills of front-end development and we've all built them at some point.  

Let's say you are interested in building a task to-do list app as a first venture into building your own projects. ***Great***, you've made the first step out of tutorial hell. But maybe you could change it up a little by customizing it to what you know and your personal interests.

***Examples***  

Maybe your someone who is interested in fitness and working out, you could build a to-do list of personal workout exercises with a time for each section of the workout.

Maybe you really like pizza, like me. You could create a pizza recipe list app where users can create pizza recipes with instructions and ingredients. Users could save and rate their successful recipes and delete the ones they didn't like. 

***End of Examples***  

Always aim to try and personalize the project in someway or perhaps you see a project that you would like to emulate.  

You could try to add a feature that didn't exist on the original project leading to a greater degree of learning, fun and sense of accomplishment when you succeed. 

Even if you fail, you will learn a hell of a lot more in the process.

### Conclusion

If you made it this far, ***congratulations*** and thanks for reading. I hope you are able to take something into your own projects and if you have any questions for me please get in touch with me on twitter here at <https://twitter.com/Kieran6dev>.

***GET BUILDING YOUR PROJECTS!***