In this article, you will go through some of the best websites to learn web development through projects and starter files.
My love for web development started in 2004 when Orkut became the trending and widely used social networking website. With no prior coding and design skills, I knew I had to start somewhere.
So I picked up the most famous HTML FOR DUMMIES book by Ed Tittel and Stephen J. James. It helped me learn the basics of HTML and CSS.
Within a few months, I coded my own social networking website. I called it MINGMON (only God knows why).
Oh boy! I was so proud of my achievement.
The social networking website never went gold but it helped me gain a valuable skill.
Little did I know, HTML was soon overshadowed by PHP and I completely went bonkers. Trends change and unfortunately, I wasn’t able to cope with the latest web dev tech.
For 7 years in a row until 2019, JavaScript was the most popular programming language among web developers.
The Internet’s most popular websites like Facebook, Twitter, Gmail, YouTube, and many others rely on JavaScript to create interactive web pages and dynamically display content to users.
However, in 2020, Python, which has been around for almost three decades has been ranked as the number one programming language for web development.
How Long Does It Take To Learn Web Development
The moment we think of learning a new skill, the first question that comes to our mind is “HOW LONG WILL IT TAKE ME TO LEARN IT”.
And the second question – “HOW LONG WILL IT TAKE TO MASTER IT”.
While some experts say that it takes 20 hours to learn a skill and 10,000 hours to master it, most of us have a different opinion.
In a skill like Web Development, where trends and technology change every few years, It is hard to pinpoint the exact number of hours, days, months, or even years it can take to learn.
Moreover, the idea of mastering Web Development when you’re just getting started is counterproductive.
It can be a significant barrier to exploring the skill in the first place.
LEARNING HAS NO DESTINATION, IT’S A CONTINUOUS JOURNEY.
While web development language is one of the major key principles of a good web design, other factors like layout, colors, and graphics are an important part of the front-end development process.
Tools like Adobe PhotoShop and Canva play a significant role in creating engaging imagery. Set aside some additional time (say a month or two) to MASTER THE ART.
Basic Structure of Web Development
The front-end (user interface) and the Back-end (admins interface) are the two structures of Web Development.
The flowchart below illustrates a BASIC WEB DEVELOPMENT STRUCTURE.
It’s natural to feel a little intimidated by looking at the chart. However, take a close look at all the nodes in the diagram to understand what goes into creating a dynamic website.
There are other languages as well but starting with these will help to build and understand the web development process.
The Most Common Struggle People Face While Learning Web Development
While I was researching on the web for this article, I came to know about the struggles and setbacks people face when learning how to code.
Out of all, the most common struggle that was mentioned consistently was how difficult it is to start building projects from nothing.
CSS, being a cornerstone technology of the World Wide Web handles all the visual presentation of a website.
A lot of beginners always skimp on CSS skills as they all want to learn the programming language first, and often for good reason – DESIGNING WEBSITES IS A SKILL ON ITS OWN.
Therefore, creating everything from scratch may seem like a daunting task.
So how can one solve such a problem? The solution is easy – using premade real-world projects or starter files.
The main idea behind building real-world projects is that you get design ideas and instructions. WHAT and HOW to create is up to you.
Key Benefits of Learning Web Development Through Projects And Starter Files
Projects and starter files give you a base to set up your web development foundation. Some of its key benefits are:
- Helps improve your front-end coding skills through HTML, CSS, and JavaScript challenges.
- Helps you create and showcase a portfolio of your work on GitHub to fill out your resume.
- Learning through projects is free as the majority of them are completely open-source.
- Other people and community members use the same projects to learn, therefore you can get solutions and feedback on your code.
- Or you can help others while deepening your own knowledge by giving feedback on their solutions.
Top Websites To Learn Web Development Through Projects And Starter Files
Not everyone has access to the funds and resources to attend coding schools.
Therefore to fill in the gap, the websites listed below are for people who are trying to learn web development on their own.
Some of the projects offered by these websites are what I wished I had when I was learning.
Frontend Mentor
Frontend Mentor provides designs so that you can practice your front-end skills using a real-life workflow.
Currently, there are almost 80,000 members on the Frontend Mentor platform learning how to code through real-life projects and starter files.
Challenges
Frontend Mentor has a number of challenges in the form of design specs and starter code.
Your goal is to make your webpage or web app look as close to the provided design as possible.
For instance, if a challenge is to build a landing page, the Frontend Mentor will provide you with an image of what the final webpage should look like along with all the necessary assets to get started.
This includes the design files, optimized image assets, fonts, HTML files with pre-written code, and other files needed to complete the project.
The main idea behind challenges is to –
- Help you set up projects and learn how to write your own code.
- Train your eye for detail by getting your solution as close to the design as you can.
- Make you aware of the time it will take to build the project. Then see if the time taken matches up to your estimate. Project estimations are a skill that is often overlooked but is important for professional developers.
Solutions
Every CHALLENGE has a SOLUTION. Therefore, the solutions page is there to help you go through other members’ codes, and error reports, and let you post suggestions and feedback.
If you take on a challenge and complete it, like coding a landing page we discussed in the previous section, you can post your code, live site URL, design comparison, and error reports on the solutions page for other Frontend Mentor members.
Learning Resources
Frontend Mentor also has a dedicated resource page where you can get hundreds of online courses, podcasts, and problem-solving interactive tutorials that cover all aspects of web development such as:
- Coding & Code Editors
- Graphics & Media
- Frameworks & Libraries
- Colors & typography
- Reporting & Analytics
While some of these learning resources are paid, a majority of them are absolutely free to use.
Frontend Mentor Pro Subscription
while free challenges are perfect projects to test your skills and improve your front-end workflow, paid subscription plans give you access to all the premium challenges to help you learn and build multipage websites whilst providing the most realistic development workflow possible.
By the end of each challenge, you’ll have a beautiful new addition to your web development portfolio.
“The projects are an amazing way to get started for growing devs and challenging enough for mid-levels as well. Plus, I did manage to score an interview BECAUSE of those projects!” says Tiffany Arellano, Front-end Developer
The Odin Project
The Odin Project was founded in 2013 by Erik Trautman. It’s a free open-source web development curriculum with 340,000 learners and 1500 contributors.
The quality of learning resources and projects on THE ODIN PROJECT can be seen and felt by the success stories of thousands of its members.
Its curriculum is full of web development projects that will help you build a strong portfolio of your work.
You can choose to learn:
- Foundations (Frontend only)- Basics of front-end web development with HTML, CSS, and JavaScript.
- Full Stack Ruby on Rails – The full stack of technology that will make you proficient in both front-end and back-end languages and frameworks, server, network, and hosting environment.
- Full Stack JavaScript – Focus on the connection between the webpage and data with JavaScript and NodeJS.
According to its founder and contributors, the primary goal of THE ODIN PROJECT is to help people go from ZERO PROGRAMMING KNOWLEDGE TO EMPLOYED AS WEB DEVELOPERS.
The Learning Paths And Projects
As listed in the previous section, there are three learning paths in THE ODIN PROJECT to take – Foundations, Full Stack Ruby on Rails, and Full-Stack JavaScript.
Let’s now take an in-depth look at the lessons and projects each path has to offer.
1. Foundations
As a complete beginner, a ride along the foundation’s path will introduce you to all the essential tools needed to build websites.
You will learn how to install and configure a development environment and other software necessary for web development.
In addition, you’ll get to know the basics of Git and set up a GitHub repository to share your work with others.
Later down the road, you will be introduced to the basics of front-end development languages like HTML, CSS, and JavaScript. You will then work on a mini-project and create a webpage that looks exactly like Google’s homepage.
The next section is JavaScript Basics where you will learn how to make dynamic websites and practice your newly acquired skills on numerous projects like Rock Paper Scissors, Etch-a-Sketch, and Calculator.
Last but not least, you will demystify what goes on behind the scenes on a web server with an introduction to the back end.
2. Full Stack Ruby On Rails
The next learning path to take is the Full Stack Ruby on Rails where you’ll learn everything you need to create beautiful responsive websites.
This is by far the most detailed and time-consuming learning path as there are numerous lessons and projects to work with.
You will learn:
- Ruby Programming – There are 37 lessons and 14 projects to help you learn and enhance your skills in Ruby programming, object-oriented design, testing, and data structures.
- Databases – Here you will learn how to organize and capture large amounts of data using raw SQL. This course is divided into 3 lessons and 1 project.
- Ruby on Rails – The lessons and projects in this category will help you take your Ruby skills to the next level. You will learn how to set up and use rails, create forms, authentication, APIs, mailers, and much more. All packed up in 32 lessons and 11 projects course.
- HTML And CSS – This part of the curriculum will help enhance your front-end design skills, User Experience (UX), responsiveness, and more with In-depth HTML and CSS lessons followed by useful projects.
- JavaScript – This module includes projects where you will learn how to manipulate the DOM (Document Object Model), use object-oriented programming principles, and build single-page applications with React.
- Getting Hired – After completing the entire course, this module will help you build your personal website and resume. You’ll learn where to find jobs, how to do great interviews and the best strategies to launch your career.
In 6 different courses, numerous lessons, and projects, you will be able to plan, design, and create websites from scratch.
I highly recommend you take this learning path after completing the Foundations curriculum.
3. Full Stack JavaScript
This learning path is all about getting skilled in JavaScript and NodeJS. It is divided into three modules – JavaScript, HTML & CSS, and NodeJS.
The lessons in JavaScript and HTML & CSS modules are the same as the ones in the Full Stack Ruby on Rails curriculum.
The additional NodeJS module will help take your JavaScript skills to the server side.
In simple terms, you will learn how to execute JavaScript code outside a web browser, typically on a web server. There are 13 NodeJS lessons and 7 projects in this course.
Before you decide on taking this path, make sure to go through the Fundamentals course for the basics.
Codeaway
Codeaway.io is another free website that helps you practice JavaScript skills through projects.
Currently, there are only 3 projects in Codeaway as it is a newly launched directory –
- Chatbox – With this project, you can build a web-responsive chat app powered by a real API to manage contacts, conversations, message statuses, and more.
- Readit – Build a web-responsive Reddit clone where a user will be able to search by keyword, browse posts, and view a post. The backend is powered by Reddit’s public API.
- Restaurant Recommendations – This project builds a mobile application with a rich UI that uses Yelp’s & Google Maps’ API to discover restaurants through searching and exploring neighborhoods.
I highly recommend you bookmark this website as more projects will be added in the near future.
Conclusion
Building websites is not an easy task. One needs to be proficient in a number of programming languages and design tools.
In web development, trends and technology change every few years. Therefore it’s a skill you’ll keep on learning for the rest of your life.
Apart from the programming languages, you need to have a good knowledge of design tools like Photoshop or Canva, Layout, colors, and typography to build engaging websites.
A lot of people struggle with creating websites from scratch, mostly because they skimp on CSS skills as designing is a skill on its own.
However, this problem can be solved by using projects and starter files. They act as a foundation to learn web development by providing you with design specs and instructions.
Frontend Mentor, The Odin Project, and Codeaway are some of the few websites that offer web development learning resources and projects.
The major benefit of learning by working on projects is that they help improve your front-end coding skills.
With a number of HTML, CSS, JavaScript, NodeJS, Ruby on Rails, and other projects, you’ll be able to learn and create beautiful responsive websites.
I am in no way a professional web developer as I am only skilled in HTML and CSS. However, I would love to hear your thoughts and opinions on learning web development through projects and starter files in the comment section below.