- Published on
The Free Resources I Used to Learn Web Development Fundamentals and Land An Internship
- Authors
- Name
- John Mavrick
- @johnmavrick_yt
The journey toward my first internship was quite overwhelming.
I was completely new to web development and had no clear path to understanding the foreign concepts and practices that awaited me.
Hopefully, these resources can act as a lighthouse to help navigate the unknown information sea, to bring you to the shore of mastery.
I'll share the tips and learnings I used to learn web development in a comprehensive, multi-blog reflection. Future blogs will discuss future steps along the way like
- what projects I made and why
- formulating the ideal resume and cover letter structure
- applying for positions and growing my network
- preparing for both behavioral and technical interviews
so consider following if you want more realistic advice that helped me tremendously.
This is the self-directed experience that worked for me to learn fundamentals. Yes, there might be better resources you can try to look for, but more value will be found in just starting.
Ultimately, they all teach the same principles.
What is important to learn?
To learn only what is relevant, go to your preferred job searching website and look at the frequently listed requirements for internship positions.
Most will include the languages HTML, CSS, JavaScript, and a front-end framework like React. If those words are foreign to you...
HyperText Markup Language (HTML) is a language used to define the structure of a website using different kinds of elements.
Cascading Style Sheets (CSS) help decorate said elements through styling rules.
JavaScript includes traditional coding language features to add complexity and logic, like data management and algorithms.
Lastly, front-end frameworks help standardize and organize the codebase and overall development process. React specifically introduces component-based and functional programming to keep code reusable and organized.
How did I learn?
I learned JavaScript, then HTML and CSS, then React.
After learning each language, I created a program to apply what I learned and understand my gaps in knowledge.
I'd say the key to learning was making projects with a friend also learning web development. It helped me have someone to
- help with topics that I struggled with
- bounce ideas for new projects and features to add
- hold me accountable in my learning journey through supportive competition
We created a notion page, set goals on how much we would learn, and would give each other updates on any obstacles we encountered.
After finding your own web dev buddy, let's start diving into the resources 😎
Learning HTML and CSS
Resource: freeCodeCamp Responsive Web Design
I learned through the legacy version of the course, but there is now a 2022 version with more content.
What do you learn? The specific kinds of HTML building blocks used to structure websites
- Headers
- Images
- Interactive inputs and buttons
- Containers like
header
,navbar
, anddiv
And how to utilize them to create
- Structured web pages
- Input forms
Applying CSS styles onto elements to
- Add emphasis on text through size and color
- Decorate HTML elements through spacing and colors
- Add motion and life through animations
Organizing the display of a website's contents
- Dynamically based on screen size using CSS Flexbox
- Into rows and columns using CSS Grid
How does it teach you?
- Interactive coding examples where they give you hints on how to implement the code yourself
- 5 take-home projects with requirements that provide styling freedom
What did I like about it?
- During each exercise I got to experiment and see how the code affected the website in real-time
- Each new concept was being introduced and built on top of previous exercises to see how the puzzle pieces fit together
- The projects cover a breadth of website kinds, from e-commerce landing pages to personal portfolios
Learning JavaScript
Resource: javascript.info
I only finished Part 1 but would recommend Part 2 and 3 as it covers important webpage-related concepts
What do you learn? How to use the fundamentals of most programming languages
- Syntax
- Variable types (strings, arrays, objects) and their built-in methods
- Basic elements of programming (if statements, for loops, classes)
Unique characteristics of JavaScript
- Arrow functions as a new way to write functions
- Preventing null errors through coalescing operators and optional chaining
Advanced topics
- Asynchronous programming using promises or async/await
- Handling JavaScript Object Notation (JSON)
How does it teach you?
- Bite-sized lessons for each concept that you can refer to in the future
- Embedded code snippets that you can run or edit to further experiment
- Practice questions at the end of lessons to test your comprehension
- Public comments from other learners to fill in gaps in knowledge
What did I like about it?
- I found it easy to make it a habit to cover x topics every day
- I appreciated the organization and fundamentals covered by the website
- A hilarious guide on writing clean code
Learning a Front-End Framework (React.js)
Resource: Scrimba - React Tutorial with Bob Ziroll 2022
I would recommend the interactive version on Scrimba, but there is also the YouTube version
What do you learn? How HTML, CSS, and JavaScript are used together to create actual programs
The fundamentals of react
- Coding in functional components to promote reusable code
- Pass down data into children components using props
- Displaying dynamic data using arrays and the
map
function - Keeping track of dynamic variables using state
- React Hooks to maintain state and run code based on the component lifecycle
How does it teach you? Coolest course implementation yet:
- Scrimba seamlessly combines a watchable video with a code editor that lets you edit the code on the display
- Simply click on the code in the video, and you can edit it
Taken from the course description:
- Access to 30+ free courses
- Uniquely interactive content
- Challenge weeks - code to win!
- Join a friendly community
What did I like about it?
- A nice break from text and writing based learning
- Comprehensive walkthrough on fundamental concepts to help answer interview questions
- Countless mini-exercise projects to implement new concepts after learning them
Advanced Topics
The following are additional practices, tools, and frameworks I use for my internship and personal projects, and are the next steps to take after learning the fundamentals:
- Once you learn JavaScript, consider learning TypeScript for more strict typing
- Once you get comfortable with CSS, learn frameworks Tailwind or SaSS for further enhancements
- Once you get comfortable with React, learn Next.js for more front-end tools like SEO, static site generation, and serverless functions for API calls. It also comes with a simple process to deploy your application using Vercel
- Once you get comfortable with state management, learn React Redux and Redux Toolkit
- Once you learn asyncronous programming, learn REST APIs to communicate with other websites and servers
- Once you understand local data management, learn a back-end storage like Firebase or PostgreSQL
I only knew some of these prior to my internship, but being proficient in modern technologies will help you stand out from people who don't specialize and get their hands dirty.
If you already know these things, then you can spend less time learning and onboarding to spend more time accomplishing ;)
Takeaways
By exploring and learning the fundamentals, you equip yourself with the necessary skills to build projects you're passionate about.
If you found the resources or my personal advice helpful, consider following me on Twitter or Medium to be notified of future writings :)
If you want more content outside of web development, subscribe to my newsletter for more general insights and thoughts.