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?
- Push your code to github
- Folder navigation
- Organize your project structure
- Learning from documentation
- Customize your projects
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
The earlier you can start committing your code to Github the better, you will thank yourself later on!
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.
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.
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).
cd folderName will move navigate you down the folder tree to a folder located beneath the current directory.
cd ./folderName will move you across into a folder located on the same level as the current directory.
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
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:
imgtags 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
- 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.
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.
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.
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.
First I create a
src folder which will contain the primary functionality of the app. This will always contain:
- 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.
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.
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.
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.
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.
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.
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.
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!