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
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.
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.
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—the good, the bad, and the ugly—with 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.
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.
Fun gaming projects
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.
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
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.
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.
- 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!
With this simple code block, you can access and console log information from the Star Wars API! May the Force be with you!
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'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!
- Affiliate link: tinyurl.com/ScrimbaHATT
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.
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.
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
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.
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.
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!
- 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
- What to Expect When You’re Expecting a Developer Job
- From Skillset to Networking: Tactics for Standing Out in a Challenging Job Market
- Mastering CSS Fundamentals: Knowing When To Transition from Basics to Frameworks
- How to Transition from JR Dev to an In-Demand Developer: Your Path to Getting Hired
- How to Get Started Learning Web Development from Scratch
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!
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!
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!