Photo by Lee Campbell, acquired from Unsplash.com
I started my journey into web development by making use of the learning materials from Treehouse. The videos are well made, they tackle the content well, and they add a fun spin to learning web development that really helps to create a more exciting and engaging learning experience. However, they do lack the most important part of learning how to make the web ? actually building things.
I encourage everyone around me to start learning web development. In doing so I have generated a few go-to projects that I send to people to really help them start honing their skills when starting on their journey. My hope is that this guide of projects helps new developers looking for some structure to their learning, or established developers reaching out to a friend with loose curriculum.
Project 1 ? One Page Responsive Layout
Objective: Recreate a pixel perfect design, and solve responsive design problems.
With new learners, one of the biggest hurdles is being aware of their skill level while still trying to a find a project that will challenge ? and interest ? them.
A small screen of the Conquer Bootstrap template
The Conquer template is a really great starting place for new learners. They have the opportunity to build something they can feel proud of while still being challenged. The Conquer template utilizes bootstrap, but it is important to avoid using this to build the project.
This template offers many different layouts and challenges that a web developer may encounter in the real world. This forces new learners to think for themselves and delve into new technologies like flex box and floats to gain confidence in CSS layout techniques. Adding an element of Responsiveness is a stretch goal for this project that will really let the developer flex their muscles! ?
Project 2 ? Multi-Page Responsive Website
Objective: Recreate a pixel perfect design, and solve responsive design problems.
The next step is to create a static, responsive, multi-page website. There are many free templates available online, but it can be difficult to find one you will be proud of after taking the time to build it. At this point, I would recommend spending a bit of money on a design. Remember, you are trying to become a web developer not a designer. Don?t expect to be able to learn both skills at once; there are many developers who just aren?t designers and vice versa. The point is to focus on web development!
Home page of the foundry template for a Travel site
Theme Forest is a great marketplace for designs. You have the option of buying design bundles which provide many choices in layouts while still being affordable. There are many bundles out there, but the one I landed on was Foundry. This bundle is $19, but includes 25 designs (and counting). My personal favourite is the travel template, but there are many to choose from.
For this particular project, build at least 3 pages ? but if you?re enjoying the process, just build more!
If you would like more projects for your dollar, Behance also has a great package with close to 200+ designs.
Project 3 ? Small JavaScript Quiz Game
Objective: Create a JavaScript/jQuery quiz game that takes multiple answers and shows a result to the user.
Once you start learning JavaScript, it can be really difficult to know how to apply your knowledge and decide on a project within the scope of your ability. Creating a small quiz game is a really great place to start. It drills in DOM manipulation, as well as being a creative way to show your personality. You?ll have to deal with surprisingly complex logic, and the scope of quiz complexity is really yours to reign in and/or expand upon.
JavaScript Quiz Game to find you the grilled cheese of your dreams.
Start with creating a simple game that asks 4 multiple choice questions. Using those questions, assign them a value which will point to an outcome. You?ll learn a lot about data management and creating a scoring system in programming. Don?t spend too much time focusing on the design of what you?re creating. I would even suggest getting familiar with a CSS framework that takes care of the styling for you during this project. Remember, if your goal is to become a better web developer, leave the designing for the professionals.
Project 4 ? Re-create Giphy with its Own API
Objective: Create a web app which uses a search input and Giphy?s API to display giphs on a page.
Once you have the hang of DOM manipulation and working with vanilla JavaScript or jQuery, I recommend you start learning to template data and show it on the DOM.
My horribly designed Giphy web app. You can do better, or use a CSS framework. ?
An excellent beginning application to build is a basic re-creation of the the giphy website, using the giphy api itself. I recommend their API for beginners because there is no need to request any kind of API key, and you won?t have to worry about much configuration when trying to request data.
Using their API you are able to build a small web app which does the following;
- displays trending gifs on app load shown in a column/grid
- has an input which allows you to search for specific gifs
- at the bottom of the results, there is a ?load more? button, which gets more gifs using that search term.
You?ll hit a lot of new challenges in this project, one of which will be working with asynchronous requests. You can choose to use vanilla JavaScript for this challenge, or if you?re more comfortable with jQuery use the it?s ajax method. The goal is to begin working with asynchronous code.
As your application begins to get more complex, you?ll also need to think about where you put data within your app and how you organize it. For this, I recommend making use of a architectural pattern called name spacing to help battle scope and conflicts with closures.
Project 5 ? Punk Beer Web App
Objective: Use the punk beer api to create a unique project that uses templating to show data on the page. If you?re ambitious, use a front end framework like React.
Finally, your last project will be to continue to work with an API. The punk api (similar to the giphy API) doesn?t require a key to use and provides a lot of information in its responses.
I would recommend creating a similar app to giphy in layout, but one which allows you to have a ?shopping cart? or ?favourite? functionality. You should then be able to see a separate list of the items you favourited. This will of course not be saved to any database, but will bring a new set of challenges with managing application state.
Beer web app with favouriting functionality.
I would recommend diving into a front-end framework to expand your ability and general understanding over modern web development. Because I work heavily with Facebook?s React I would recommend starting that, and using react create app to get started.
This might seem like a giant leap at first, but focus on building this web app piece by piece. Create the app in the following order;
- Template data on the page from a generic API request
- Add a search bar, which makes a separate query to a database on request
- add favourite functionality which allows you to favourite a card
- create a separate route (using react router) which allows you to see all the beers you?ve favourited in the session.
Solving these problems one step at a time will help you feel less overwhelmed and more like you?re heading in a specific direction. Lastly, I find it best to eliminate styling from the equation when developing web apps and using a CSS framework. I chose to use Bulma for my example, but there are many options out there for you to explore!
Go Forth and Build
If you are a student who is following along with the Treehouse front-end web development track you will see where these projects fit in within the flow of of the curriculum. If you are trying to create your own curriculum, I hope these 5 projects will give you a bit more structure to your learning with tangible goals. Plan out each project in advanced, and do an overview of what you may need to learn to achieve creating each website/web app!
Most of learning web development is applying the knowledge you?ve gained. It can feel very comfortable to keep pressing play and continue to watch tutorials and videos. In my experience, the most rapid learning has been achieved while struggling with an actual project. It is important to dig into some code yourself, and build something with the skills you?ve learned to really let the learning take root!
A special thank you to David Missio for his editing assistance.
