Skip to main content

Frontend Career Path

  • Create a separate email for career
    • ex: yourname.c@gmail.com
    • Use this only for job applications and no other services
    • resume
    • linkedin
    • job sites
    • This way, job email requests don’t get cluttered in other service emails
  • Use NovoResume for resume pdf
    • Limit resume to a single page
    • Keep the bullet points short and to the point
    • Use Bold (Ctrl + B) to highlight key terms in bullet points
    • Keep the resume focused on one role (preferably frontend-only for freshers)
  • Use VS Code as editor
    • Learn basic shortcuts if possible (search on youtube)
      • cut, copy paste, select words, move by words, select line, cut line, past line, copy line down
    • If computer is slow
      • Create GitHub Account (try to use a different email account other than career email account)
      • Create a repository
      • Open this with GitHub Codespaces
      • or
      • Create GitPod account (try to use a different email account other than career email account)
      • Connect to GitHub account
      • Open this repository from GitPod
  • Learn HTML
    • Codevolution - HTML Crash Course
    • Scrimba HTML interactive course
    • Topics
      • html, head, body, div, p, span
      • forms
        • input - text, number, email, password
        • select
        • checkbox
        • radio
        • button
        • form
      • b, hr, br, nbsp
    • Practice simple applications without any styling or interaction
      • Portfolio
      • Showcase of a shop page with product list
  • Learn CSS
    • Codevolution - CSS Crash Course
    • Scrimba CSS interactive course
    • Topics
      • link tag
      • css box model
      • inline vs block elements
      • border, padding, height, width, margin, outline, border-radius
      • box-sizing
      • text-align
      • background-color, color
      • font-size, font-weight
      • position - fixed, relative, absolute
      • top, right, left, bottom
      • overriding css properties
      • css variables
    • Practice styling the application created in html tutorials
      • Add colors, different font-sizes for headings, sub-headings, positioning, circular buttons, etc
  • Learn Chrome developer tools
    • Inspect elements
    • Look at box model in dev tools
    • change properties directly in dev-tools and observe the box model
  • Learn CSS Flexbox
    • Codevolution - CSS Flexbox
    • Topics
      • display: flex, inline-flex
      • justify-content
      • align-items
      • gap
      • flex-wrap
      • flex-grow, flex-shrink, flex: 1,
      • justify-self, align-self
    • Pracice
    • Create a college website
      • navigation header
      • courses offered
      • application form with form elements and submit button
  • Learn Git and GitHub
    • YouTube Tutorial
    • Article Tutorial - Link
    • Search for any short tutorials (max around 30min)
    • only learn the following for now
      • git init
      • git commit
        • commit properly at stages like save points
        • use proper commit messages
          • ex: “add skills section”, “add styles”, “fix header responsive layout”
      • git status
      • create branch - git checkout -b
        • learn basics of feature branching and main branch
        • merging branches
      • git merge
      • git push
      • git fetch
      • git pull
      • learn basic merge conflict resolution
    • GitHub
      • Create account (try to use a different email account other than career email account)
      • Sign into github account in local
      • git push
      • creating pull request from feature branch to main
      • approve and merge pull request
      • delete feature branch
  • Create Portfolio website
    • Use proper commits for this project
      • first html
      • css base setup
      • commit after styling each section
    • Simple layout with only 4 colors
      • background color
      • primary text color
      • highlight color for texts
      • left section for intro along with contact details
        • email
        • github link
        • linkedin link
      • right section for skillsl list
      • below
      • achievements
      • below
      • Projects list (with skills used as chips)
      • below
      • Education
    • Deploy to Netlify
      • Create Netlify account (try to use a different email account other than career email account)
      • Connect GitHub to Netlify (search for guides on youtube)
      • Deploy the site
      • update site url in netlify settings
      • example: “yourname.netlify.app”, “yourname-dev.netlify.app”
    • Add this porfolio link to Resume, LinkedIn, GitHub profile and all other job portals
  • Responsive web design
    • Learn css media queries
      • @media, min-content, max content and overriding the properties
    • Practice
      • Responsive nav bar
      • Responsive card element
      • Find any youtube tutorial and try to recreate the same layout
      • Try to implement different main page layouts
  • JavaScript (TO BE UPDATED)
    • Codevolution Tutorials
    • Practice simple coding problems
      • Create an account in CodeWars (try to use a different email account other than career email account)
      • try to solve one problem per day
      • if not able to solve, look for solutions on youtube, try to understand the approach and try to implement again from scratch without looking at the solution
  • Personal Projects (TO BE UPDATED)

  • Job Sites

    • LinkeIn
    • Naukri
    • CutShort
    • InstaHyre
    • Wellfound
    • Indeed
    • Recro
    • Turing
    • Uplers

  • Placement assistance

    • Sharpener
    • Career camp
    • Alma better
    • Imarticus Learning
    • Edyst
    • Skill sequel
    • Relevel
    • Digikull
    • Function up
    • Newton school
  • Free Certifications (with shareable links)
    • HackerRank
      • Problem Solving
      • CSS
      • JavaScript
      • React
      • NodeJS
      • REST API
      • SQL
    • FreeCodeCamp
      • Responsive Web Design