Published on

The Free Resources I Used to Learn Web Development Fundamentals and Land An Internship

Authors

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, and div

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.

Want more of the ideas and thoughts in my mind?