Tips for new front-end devs in the personal project building process

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.

What will be covered?

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

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

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.

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.

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.

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.

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

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!