Introduction
Want to learn a new skill to advance your career in 2024 for FREE? In this article, tech industry experts Matt Lawrence and Mike Karan offer the roadmap you need to learn the lucrative skill of web development! Whether you aim to progress in your current job, switch careers, or simply seek a new productive hobby, learning web development is an outstanding skill to acquire!
Topics covered in this article include:
YouTube coding tutorial channels
Informational coding websites
Online coding schools
Places to practice
Additional resources
YouTube
I'm sure you already spend a lot of time watching YouTube videos for entertainment. But did you know that there are enough educational videos created by tech industry experts to teach you how to become a web developer?
YouTube is a great FREE resource for learning web development, especially if you are just getting started!
Whether you're exploring the basics of coding or delving into the complexities of deploying fully functional websites, there's a YouTube video for that!
To get you started in the right direction, let me first offer you guidance on YouTube websites that have greatly benefitted me during my self-taught coding journey.
HTML
Brad Traversy of Traversy Media is a great place to start when learning HTML and creates many fundamental web development crash courses! So be sure to check out his many FREE YouTube tutorial videos.
HTML, or HyperText Markup Language, is the backbone of any web page. It's the standard markup language for creating web pages and applications. Think of it as the skeleton of a webpage, providing the basic structure. It uses tags to organize and structure content on the web, such as headings, paragraphs, images, and links. Without HTML, a webpage would essentially just be a text file. Learning HTML is the first step in web development, as it forms the basis for displaying information on the Internet. Brad Traversy's tutorials provide an excellent starting point for understanding and mastering HTML.
CSS
Despite his modest demeanor, Kevin Powell is widely recognized in the tech community as the "King of CSS 馃憫!" Boasting over 700 videos and nearly 1 million YouTube subscribers, Kevin covers all the essential CSS concepts鈥攖he good, the bad, and the ugly鈥攚ith the flair of a Hollywood western gunslinger!
CSS, or Cascading Style Sheets, is a fundamental tool in web development that is used to style and layout web pages. It allows you to apply different styles, like colors, fonts, and spacing, to HTML elements on a webpage. Without CSS, your website would just be a plain, unstyled document. By learning CSS, you gain the ability to create visually appealing and user-friendly websites. It's what takes your website from functional to fabulous, controlling the visual aesthetics such as the layout, color scheme, and font formatting. Just as Kevin Powell brings to life the complexities of CSS in his tutorials, mastering CSS will bring your web pages to life.
UI/UX Design
A programmer can not survive with CSS skills alone! A key aspect of web development also involves design, and Gary Simon has you covered! From UI/UX design fundamentals to the actual code required to implement them in your websites, Gary will expertly guide you in becoming a proficient web designer!
UI/UX Design fundamentals include:
Color Contrast: The difference in color that makes an object distinguishable.
Typography: The style, arrangement, or appearance of typeset matter.
White Space: The empty spaces in a design are used to highlight elements and improve readability.
Alignment: The arrangement of elements to line up along a common edge.
Scale Proximity: The size of elements in relation to each other and their placement to create a sense of cohesion.
Visual Hierarchy: The arrangement of elements to indicate importance or sequence.
UI/UX Design, or User Interface/User Experience Design, is a crucial aspect of web development that focuses on the user's visual experience and interaction with a webpage or application. This design discipline aims to create a seamless, intuitive user journey by carefully considering each visual and interactive element on the page. It involves understanding how users interact with a website, what their preferences are, and how to make the website not just functional but also enjoyable to use. The fundamentals of UI/UX design, such as color contrast, typography, white space, alignment, scale proximity, and visual hierarchy, are all tools that designers use to create this user experience. These principles guide the design process to ensure that websites are not only aesthetically pleasing but also user-friendly and intuitive. With Gary Simon's guidance, you can learn to incorporate these principles into your own web projects, creating sites that users will love to visit and explore.
JavaScript
The simplest way to get started learning JavaScript is through Web Dev Simplified! Kyle Cook makes the complex simple with his articulate and beginner-friendly teaching style! Be sure to check out this growing YouTube channel, which consists of over 600 videos and has 1.48 million subscribers and counting!
JavaScript is a powerful programming language primarily used to enhance websites' functionality and interactivity, making them more dynamic and engaging. While HTML provides the structure and CSS adds the style, JavaScript is what makes a website truly interactive, handling everything from animated graphics to fetching live data from the web. It's the language that powers complex web applications and is an essential part of the modern web development toolkit. Learning JavaScript opens up a wealth of opportunities, allowing you to build everything from simple scripts to complex web applications. Kyle Cook's tutorials on Web Dev Simplified provide a straightforward and accessible introduction to this versatile language, making it an excellent starting point for anyone new to JavaScript.
Fun gaming projects
Who says learning to code can't be all fun and games? Once you've mastered the fundamentals of web development (HTML, CSS, and JavaScript), head on over to Ania Kub贸w's YouTube channel to learn how to combine your skills by creating video games!
Ania excels at creating concise coding videos that enable you to build functional "bare bones" video games! This teaching approach allows you to concentrate on the coding fundamentals while leaving you with plenty of room to enhance the projects with styling.
Here is Ania's freeCodeCamp YouTube tutorial that teaches you how to code Tetris in JavaScript: Code Tetris: JavaScript Tutorial for Beginners
Now, so you can comprehend the value Ania provides us with fundamental focused coding for video games, take a look at my enhancements to her Tetris JavaScript project:
My enhancements include styling, sound effects, music, line counting, levels, bonus points, and more!
Although admittingly, it is not a perfect production-ready version of Tetris, I can't think of a better and more satisfying way to learn web development!
Here is a link to my completed Tetris game: tetris-laroccade
Here is a link to my TXG coverage article: Ania Kubow: Building Tetris with JavaScript
Additional channels Matt & Mike suggest
In addition to the YouTube channels that have personally aided my learning, I highly recommend exploring further channels that Matt and Mike suggest. These channels offer a blend of crash courses, simple projects such as creating to-do apps, and valuable insights into foundational coding concepts.
YouTube channel suggestions:
Fireship.io: An excellent resource for developers, offering insightful and concise coding tutorials.
Net Ninja: A channel that provides comprehensive web development tutorials.
Theo: Theo's channel is a great place for developers looking to expand their knowledge through in-depth tutorials.
Hyperplexed: Hyperplexed excels in creating cool UI elements through iterative learning and experimentation.
JoyofCodeDev: This channel is a must-visit for anyone looking to learn more about SvelteKit.
codewithantonio: Antonio provides tutorials and guides on Next.js, a popular JavaScript framework.
Informational coding websites
Another excellent FREE resource for learning web development is informational coding websites. Matt raises a valid point when he explains that we don't always have the time or situation where watching videos is a practical way to learn. Text-based learning offers a convenient and unobtrusive way to explore at your leisure as you scroll through various pages, enabling you to continue browsing and learning at your own pace.
Great informational coding websites to get you started include:
CSS Tricks: This site is a treasure trove for anyone wanting to master CSS. It offers articles, videos, and an exhaustive list of CSS properties, providing you with numerous techniques and insights.
MDN Web Docs: Provided by Mozilla, the organization behind Firefox, MDN Web Docs is a comprehensive resource offering detailed documentation on HTML, CSS, JavaScript, and web APIs. It's a trusted source of information for developers of all levels.
W3Schools: Ideal for beginners, W3Schools offers easy-to-follow tutorials and references on various web development languages. Its interactive examples make learning a more hands-on experience.
Web.dev: This resource by Google focuses on building modern, high-quality websites. It offers guides, tutorials, and best practices on web development, enhancing your understanding of creating efficient and user-friendly websites.
Each of these websites provides a unique approach to teaching web development, catering to different learning styles. Explore each one to find the resource that resonates most with your learning preferences.
You can also browse blogs created by other developers in the community that are sharing their insights. Popular blogging platforms include:
Hashnode: A free blogging platform that allows you to publish articles on your domain and provides the tools necessary to reach and grow your audience.
Dev: A social platform for programmers and developers where you can share and discover articles, engage with others in the community, and get feedback on your work.
Medium: A popular online publishing platform featuring a diverse range of stories and ideas from a community of writers, experts, and storytellers.
馃摑 I have also written over 100 articles on my personal blog, covering a wide range of topics relevant to self-taught developers interested in transitioning into the tech industry. You may find these resources helpful!
If you would like a fun, beginner-friendly coding project, you can check out my article: JavaScript: How to Use the Star Wars API for Beginners
With this simple code block, you can access and console log information from the Star Wars API! May the Force be with you!
async function fetchPlanets() {
const results = await fetch("https://swapi.dev/api/planets/?page=1");
const data = await results.json();
console.log(data);
}
fetchPlanets();
Online coding schools
If you've made it this far into this article, there's a good chance that learning web development is right for you! At this point, I would advise checking out the following online coding schools.
The advantage of these schools lies not just in their structured learning curriculum but also in the community they foster. As you embark on your learning journey, you'll have the opportunity to connect and network with fellow students from around the world, exchanging ideas, collaborating on projects, and supporting each other through challenges.
Additionally, these platforms often come with a wealth of relevant resources, such as interactive coding challenges, real-world projects, and expert mentorship, all designed to enhance your learning experience and prepare you for a successful career in web development.
freeCodeCamp: A non-profit organization that consists of an interactive learning web platform, an online community forum, chat rooms, online publications, and local organizations. It aims to make learning web development accessible to anyone.
Codecademy: An online interactive platform offering free coding classes in 12 different programming languages. It provides a personalized learning plan, daily lessons, and practical projects.
Coursera: An online learning platform offering massive open online courses, specializations, and degrees. It collaborates with universities and other organizations to offer online courses, certifications, and degrees in a variety of subjects.
Udacity: A platform offering "nanodegree" programs and free courses in programming and data science. The nanodegree programs are built in partnership with tech companies and are designed to be completed in under a year.
Khan Academy: A non-profit educational organization providing free online courses for students. It offers practice exercises, instructional videos, and a personalized learning dashboard in various subjects, including computer programming.
Scrimba: An online platform offering interactive coding courses and tutorials. It uses a unique, interactive screencast where users can pause videos and make changes to the code.
Each of these online schools provides some sort of FREE learning resources. Places like Codecademy, Coursera, Udacity, and Khan Academy have a variety of free individual courses on different subjects you can take before making a financial commitment.
I've completed the Responsive Web Design course offered by freeCodeCamp, and I'm looking forward to completing the JavaScript Algorithms and Data Structures, as well as Front End Development Libraries. They consistently update their curriculum and provide numerous other free courses, all of which come with a certificate upon completion.
I'm also an avid Scrimba member and am currently working through their Front-End Developer Career Path certification. In addition to their unique screencast technology, I've found that networking with their community members has been a truly enjoyable experience!
Scrimba offers many FREE courses, and you can also network with their community without cost. But if you do decide to take paid courses, be sure to use the following affiliate link, which will provide you with an additional 10% off of their current offers!
Interactive
iCodeThis
Once you have a good foundational knowledge of HTML, CSS, and JavaScript, it's time to put the theory into practice! A great way to get daily hands-on practice for FREE is by completing daily coding challenges, and the iCodeThis website is just for that!
iCodeThis is a platform created by JavaScript enthusiast Florin Pop that includes a FREE tier that covers everything you need! iCodeThis is a community-driven platform offering daily coding challenges for front-end skill enhancement. It encourages regular coding practice, provides an in-browser IDE, and showcases your completed projects on your profile. The platform also hosts a Discord community for collaboration and a leaderboard for a bit of competitive fun! It's an effective platform for both beginners and experienced developers to learn, practice, and exhibit their coding prowess.
TypeHero
TypeScript, a popular superset of JavaScript, is a powerful language that adds static typing to JavaScript, enhancing code quality and maintainability. This open-source language is widely used in web development, making it a valuable skill to acquire. If you're serious about pursuing a career in web development, having TypeScript in your skillset can give you a significant advantage in the competitive tech industry. Now, let's talk about a free platform where you can improve your TypeScript skills.
TypeHero, a free platform created by TypeScript developers, offers interactive coding challenges across various topics and difficulty levels, promoting a collaborative learning experience. It encourages developers to share solutions, engage in discussions, and even create their own challenges. The platform also features curated learning tracks to systematically improve your TypeScript skills and an active Discord channel for community interaction and support. Ideal for both beginners and experienced developers, TypeHero provides an enriching environment to learn TypeScript, improve coding skills, and connect with a like-minded community.
ChatGPT
With the integration of AI into our daily lives, access to information has been revolutionized. Previously, developers depended on Google, Stack Overflow, and other documentation for coding solutions. However, AI technologies like ChatGPT have transformed this static information access into a dynamic exchange with a knowledgeable, ever-ready programming partner! This AI discusses programming theories and best practices and aids in actual code writing. The event of AI is truly an educational game-changer!
Do you want a real-world practical example of what you can achieve by working with AI? Well, I am a person who practices what they preach! To learn React, I am building a Star Wars Ahsoka website by pairing programming with Rix, an AI assistant created by Hashnode, and I'm documenting the process in an article series! AI is assisting me in writing the code and answering all of my React coding questions, which is greatly beneficial to my education! For example, I was going to create multiple mapping functions to iterate over different object arrays for characters, planets, weapons, and more. I wasn't sure if this was the best approach, so I conversed with the AI assistant, which explained its best coding practices to write one mapping function to use on all of the object arrays. Then, it helped me to revise the mapping function! My AI assistant further assisted me in restructuring my React project into multiple files to separate my data, functions, and components, including teaching me how to export and import them!
馃挕 TIP: Mike emphasizes that receiving feedback, like code reviews, can be greatly beneficial in your code learning journey! Reach out to online communities, and make sure to use AI technologies to offer you valuable constructive criticism.
Additional resources
Here are additional resources that are recommended by both Matt and Mike to greatly assist in your code-learning journey:
Free Templates
Frontend Mentor
The Odin Project
JavaScript 30 by Wes Bos
Free templates
Free templates provide a hands-on approach to learning web development. With an already-built site like those offered by HTMLrev, you can study a completed project, replicate it, and even try to improve it. This process allows you to apply your learning in a real-world context and develop critical problem-solving skills. HTMLrev's templates are free, built with recent technology, and come with live previews. These templates expose you to different designs and code structures, enhancing your web development competency.
Frontend Mentor
Frontend Mentor is a platform offering professionally designed challenges for hands-on HTML, CSS, and JavaScript practice. You choose a challenge, code the design, and get feedback from a community of over 750,000 developers. This process helps refine your skills and build a portfolio. The platform also provides opportunities to practice new tools and trends and potentially creates job opportunities through its hiring platform. While FREE to use, a PRO subscription is available for further skill enhancement.
The Odin Project
The Odin Project offers a free, comprehensive curriculum for those aiming to become full-stack developers. It provides a complete roadmap to becoming a developer, with projects integrated throughout for hands-on learning and portfolio building. The platform boasts a supportive community and a Discord channel for assistance. Being open-source and community-driven allows you to contribute to the curriculum, enhancing your understanding and GitHub skills. Since 2013, the Odin Project has helped many students become developers through its meticulously curated and up-to-date content.
JavaScript 30
JavaScript 30 is a free 30-day challenge that helps you improve your JavaScript skills by building 30 different projects using vanilla JavaScript. It offers immediate access to all tutorials upon sign-up, providing a practical, engaging, and community-driven learning environment. Ideal for both beginners and intermediate developers, JavaScript 30 focuses on strengthening JavaScript fundamentals and fostering hands-on experience. The platform's success lies in its real-world project creation and commitment to accessible learning.
Be sure to listen to the episode!
Episode 280 Get Started in Web Development for Free
Be sure to check out HTML All The Things on socials!
Scrimba Discount!
Learn to code using Scrimba with their interactive follow-along code editor.
Join their exclusive discord communities and network to find your first job!
Use this URL to get 10% off on all their paid plans: tinyurl.com/ScrimbaHATT
This article contains affiliate links, which means we may receive a commission on any purchases made through these links at no additional cost to you. This helps support our work and allows us to continue providing valuable content. Thank you for your support!
Sponsored content: This article was kindly sponsored by the original publisher, allowing me to share my expertise and knowledge on this topic.
My other HTML All The Things articles
Front-End Development: Setting Up Your Environment and Essential Learning Topics
From Skillset to Networking: Tactics for Standing Out in a Challenging Job Market
Mastering CSS Fundamentals: Knowing When To Transition from Basics to Frameworks
From JavaScript to TypeScript: Enhance Your Skills and Your Web Development Career
Mastering JavaScript Fundamentals: Unleashing Your Framework Readiness
How to Transition from JR Dev to an In-Demand Developer: Your Path to Getting Hired
Conclusion
Learning web development is an invaluable skill to acquire, whether you aim to progress in your current job, switch careers, or simply explore a new, productive hobby. And with all of the FREE resources, getting started is easy!
For video tutorials, YouTube channels like Traversy Media, Kevin Powell, Web Dev Simplified, and Gary Simons's design course are fantastic for learning HTML, CSS, JavaScript, and UI/UX design. Then, you can put the coding concepts you learned to good use by learning how to make video games with Ania Kub贸w's tutorials!
When you don't have the time for educational learning by video, websites like MDN Web Docs, W3Schools, and CSS Tricks are excellent for text-based learning.
After exploring these resources and discovering if becoming a web developer interests you, online coding schools provide a structured learning curriculum, and you can even earn certifications for FREE!
But learning how to code is not just theory! Check out the practice coding platforms such as iCodeThis, JavaScript 30, and TypeHero that offer challenges to get the hands-on practice you need to turn your growing programming knowledge into skill!
As Mike wisely advises, be sure to get feedback on your code often, which will greatly assist your growth as a developer. You can reach out to online coding communities and your social networks and even use AI technologies to provide you with the constructive criticism you need to become the best developer you can be!
Let's connect! I'm active on LinkedIn and Twitter.
