DEV Community

Cover image for Becoming a front end web developer in 2021
Shruti Kapoor
Shruti Kapoor

Posted on

Becoming a front end web developer in 2021

#programming #career #learning #webdev

You are here, therefore you belong ❤️

I know that a lot of people want or know someone who wants to start learning web development or coding in general. Perhaps you are too afraid to take this bold move, perhaps you think that coding is hard and not sure if you are the right fit. Maybe you are too scared to open the code editor and start coding because you are afraid you may get stuck and lose motivation, or you don't know where to get started in the vast sea of knowledge. I am here to tell you - You got this! We will get through this together!

In this article, I will dive into the resources, a proposed plan of getting started, and a list of resources to help you learn to become a web developer. This plan is going to be focused on getting you a job, and therefore project-heavy.

Debunking some myths that hold you back

  1. You do not need an expensive laptop or setup.
  2. You do not need to spend tons of money to get started.
  3. You do not have to go to college to become a web developer.
  4. You do not need to be a certain years old to get started.
  5. You do not need to know all the technologies before applying for a job.

Getting started: things you need

  1. Equipment
    • computer
    • internet connection
    • code editor. Some options are:
      • Sublime Text
      • Atom
      • Visual Studio
      • Webstorm
      • Brackets
    • web browser. Some options are:
      • Google Chrome
      • Mozilla Firefox
      • Safari
      • Edge
  2. Finances
    • both free and paid options available
  3. Time commitment
    • As much or as little as you want
    • Recommended: 2 - 4 hours / week

  4. Self-care

    • Write down your list of affirmations. Some affirmations that will help you through this journey:
      • You are already smart enough to be a web developer.
      • You are capable of amazing things.
      • You can make things happen.
      • You can do anything you set your mind to.
      • You are competent.
      • Your creative power will help you succeed in this journey.
    • Break day: Give yourself at least one day a week to rest and recharge. I love break days! These are my days to "nurture myself" and have "me time". I usually paint, go on a hike, do something creative, create a DIY project, hang out with friends, nap, sleep in, watch F.R.I.E.N.D.S, drink chai all day long or watch a cute feel-good movie.

  5. List of accomplishments: As you progress through this journey, keep a written list of things you have accomplished. Items on this list could be as small as completing a chapter on time, or solving a hard coding problem. Everything counts! This list is a proof that you are growing!

  6. Inspiration sources:

    • List of people who inspire you.
    • Write down what about these people are you inspired by.
    • Reach out to a few of these people to let them know of the journey you are embarking on, and see if they would be willing to help out. Most people are happy to offer any help and support they can.

  7. List of "cool project ideas": These will be your inspirations for building cool things. The idea can be anything - an app you always wanted to build, an improvement you wanted to see in an app, a funny meme bot you wanted to generate. We will be using this list of ideas to build projects. Some examples are:

    • dog image generator
    • Music player app
    • Pomodoro timer
    • random joke generator
    • cat picture generator
    • an app to show time in different parts of the world

  8. Support group:

    • reach out to your group of friends who make you feel proud of yourself and let them know of the journey you are embarking on. These people will be your cheerleaders throughout this process.
    • other new developers in the industry. you can find people with similar interest on the same journey as you by attending local meetups in your area. A popular online version of meetups group is Discord. Check out this list of Discord servers for developers joining discord servers or facebook groups.
    • 100 Days of Code is an amazing community of individuals who are getting started with coding. This is how I kept myself motivated when I was learning to code, applying for jobs and preparing for interviews.

Resources

  1. Online resources

  2. Bootcamps

  3. Books

  4. Podcasts

  5. Blog sites with awesome articles

  6. Checklists and roadmaps

Paid Resources

  1. Online resources

  2. Books

Bootcamp process

  1. SKILL: Learn the fundamentals from a resource of your choice:

    1. HTML
    2. CSS
    3. JavaScript.

  2. PROJECT: Build a portfolio web page using the skills you learnt so far - JS, HTML, CSS. The web page should have the following:

    1. Add your name, photo, bio using semantic HTML
    2. Setup sections for projects. We will fill these projects as we go. The projects will have an image, description and a link. Set these up with lorem ipsum text for now.

  3. SKILL: Learn git and version control. Here's an instructional video

  4. PROJECT:

    1. Add your portfolio to GitHub.
    2. Step Up Assignment: Setup Github pages to host your portfolio. Here's an instructional video

  5. SKILL: Step up your JS and CSS knowledge

  6. PROJECT: Make your portfolio mobile friendly and responsive.

  7. PROJECT: Getting ready for job interviews

    1. Practice interview questions on InterviewCake.
    2. Practice interviews questions on Leetcode. Start with easy and slowly work your way up.

  8. SKILL: Step up challenge - learn a front-end framework.

    React, Vue and Angular are the top front-end frameworks in 2021. If you were to pick one, I would recommend React. Lots of companies use React in production.

  9. PROJECT: Implement the framework. - build an inspiration. Add this to your portfolio. Tasks:

    1. Fetch an API of your choice.
    2. Render data in your app.
    3. Implement search functionality.
    4. Implement auto-complete functionality.

  10. SKILL: Step up challenge: Learn a library for the framework.

    1. Learn a state management library. Redux is a good library to learn.
    2. Learn a CSS library, eg: SASS

  11. PROJECT: Implement your next inspiration idea using the library. Add to your portfolio.

  12. SKILL: Learn a testing framework: Build test coverage. Add to your portfolio. Eg: Jest

  13. JOB: Get a freelance job using your portfolio. Some places to find freelance opportunities are Upwork & Fiverr

  14. Find a mentor. Get feedback on your skills and portfolio.

  15. JOB: Apply for a job. You are ready.

  16. JOB: Prepare for interviews

  17. Continue iterating.

Curriculum

HTML

  • [ ] HTML main tags

  • [ ] HTML5 Structural / Semantic elements

  • [ ] HTML Elements and their attributes

    • [ ] Documents <!DOCTYPE> Link
    • [ ] Headings <h1> - <h6> Link
    • [ ] Paragraph <p> Link
    • [ ] Lists <li>, <ul>, <dl> Link
    • [ ] Links <a> Link
    • [ ] Images <img> Link
    • [ ] Table <table>Link

  • [ ] HTML Formatting

    • [ ] <b> - Bold text Link
    • [ ] <strong> - Important text Link
    • [ ] <small> - Smaller text
    • [ ] <i> - Italic text Link
    • [ ] <em> - Emphasized text Link
    • [ ] <sub> - Subscript Link
    • [ ] <sup> - superscript Link
    • [ ] <pre> - preformatted text Link

  • [ ] HTML Comments <!-- --> Link

  • [ ] HTML forms Link

CSS

  • [ ] Adding a CSS stylesheet to an HTML page using <link>
  • [ ] CSS Selectors Article
  • [ ] Color Article
    • [ ] using hex eg: #ff0000
    • [ ] rgb eg: rgb(0,0,255)
    • [ ] common color names eg: red, pink, brown
  • [ ] Font Article
    • [ ] Family
    • [ ] Size
    • [ ] Weight
  • [ ] Text-decoration Article
  • [ ] Text-transform Article
  • [ ] Line-height Article
  • [ ] Letter-spacing Article
  • [ ] Word-spacing Article
  • [ ] Background-color Article
  • [ ] Background-image Article
  • [ ] Margin Article Article
  • [ ] Padding Article Article
  • [ ] Border Article
  • [ ] Width Article
  • [ ] Height Article
  • [ ] percentage, pixel, em
  • [ ] Box model Article
  • [ ] Pseudo class Article
    • [ ] hover
    • [ ] active
    • [ ] visited
  • [ ] Position Article
    • [ ] relative
    • [ ] absolute
    • [ ] fixed
  • [ ] Display Article
    • [ ] block
    • [ ] inline
    • [ ] grid
    • [ ] none
  • [ ] class vs id Article

JavaScript

Fundamentals

Web page and JavaScript

  • [ ] document.getElementById
  • [ ] document.getElementsByTagName
  • [ ] document.getElementsByClassName
  • [ ] document.getElementsByName
  • [ ] document.querySelector
  • [ ] document.querySelectorAll
  • [ ] .createElement
  • [ ] .innerHTML
  • [ ] .innerText
  • [ ] .append()
  • [ ] .remove()
  • [ ] .appendChild
  • [ ] .style
  • [ ] events
    • [ ] .addEventListener
    • [ ] .removeEventListener
    • [ ] event.preventDefault

Web fundamentals

  • [ ] How does the web work? Article
  • [ ] How does a web browser work? Article
  • [ ] HTTP basics Video
    • [ ] headers
    • [ ] request
    • [ ] response
    • [ ] verbs: PUT, POST, DELETE, PATCH, POST
  • [ ] What is an API? Video
    • [ ] What is REST API? Article
    • [ ] What is GraphQL API? Article Podcast
    • [ ] What are CRUD operations? Article
    • [ ] What are cookies?
      • [ ] Getting and setting cookies
    • [ ] What is local storage?
    • [ ] What is session storage?
    • [ ] What is server vs client?
    • [ ] What is a domain name?
    • [ ] What is DNS lookup?
    • [ ] What is web hosting?
    • [ ] What is CORS? Article Article
    • [ ] ARIA - What is accessibility? Article Video

Step up: Pick a stack (Front end vs back end)

Depending on your interest and passion, you may want to focus on front end development or back end development. Front end development is the development of user interfaces, and uses technologies like HTML, CSS, JavaScript. When focussing on front end development, you may want to focus on frameworks and libraries such as React, Redux, SASS.
Back end development is the development of software that facilitates user interface such as building APIs and uses back end technologies such as NodeJS. For back-end development, you may want to focus on databases such as MongoDB and frameworks and libraries such as NodeJS, Express.

To review a full list of step up curriculum, check out the full web development checklist here

Tips for job hunting

  1. Use your network
    • on LinkedIn
    • on Twitter
    • in meetups
    • friends and family
  2. Present your portfolio with your job applications.
  3. Apply to jobs you are not 100% qualified for.
  4. Tailor resume for every job posting.

Interview Resources

  1. InterviewCake
  2. Pramp.com
  3. Leetcode

Who am I? What is my story?

I am Shruti Kapoor, and I work as a Senior Software Engineer at PayPal. I have been a web developer for over 7 years now. I worked the first two years as a freelance developer, then as co-founder and CTO of my web development startup - World Web Warriors, and then accepted a job as a professional web developer at TELUS Communications in Vancouver, Canada for three years. In 2017, I moved to sunny California, USA and started working as a Software Engineer at PIX Systems, San Francisco. These 7 years have been really rewarding. In all of these years, I still vividly remember the moments when I was totally freaked out by the sheer ambiguity of technical problem I had at hand and having no idea of where to start.

Being a web developer can be really hard, and it can feel very lonely. There can be days when you will feel like you don't belong here. Honestly, there have been days when I would question my decision of becoming a software engineer, whether I was good enough. But trust me, it will be these moments that will step you up - not only because it will help you persevere, but also it will be these moments where you will realize the great joy of overcoming your deepest fears and treading deep waters.

Shruti Kapoor
Follow on Twitter
Hang out on Twitch
Get articles like this in your inbox

Top comments (1)

Collapse
 
iamharnad profile image
Krishna Haranath •

very informative

Read next

kanhaiyabanjara profile image

Web APIs

Kanhaiya Banjara -

crazycomplete profile image

crazy-complete: Generate shell auto-completion files with a single configuration file

Benjamin Abendroth -

madsstoumann profile image

Designing Better Tables: Using Popovers for Extra Data

Mads Stoumann -

uhteddy profile image

Introducing svelte-bundle

uhteddy -