Want To Become a Front-End Developer? We Show You How! 👨‍💻

By /

Just starting out? That’s great! We’ll show you everything there is to know about front-end development and where to start.

Start writing! 👨‍💻

  • Create a personal blog to start connecting with other developers.
    The best apps to do this are Hashnode, Dev.to, and Hackernoon.

Get that extension🌏

You can get tools for the job, so download the best extensions Chrome has to offer:

  • DailyDev: It keeps you up to date with the latest programming news.
  • WhatFont: identify fonts from any website or even an image.
  • ColorPickEyedropper: You can get the exact color of any website, image, video, text, etc.
  • Wappalyzer: It allows you to know the complete technology stack of many websites.
  • Web Developer: Lots of developer tools in your browser.
  • React Developer Tool: It is a tool to inspect a React tree, including component hierarchy, props, state, and more.
  • Visbug: Allows you to make any type of change to the visual elements of a website. All through a point-and-click process.

Let’s get the VS Code Extensions🌏

  • Bracket Pair Colorizer 2: You can identify brackets with colors.
  • Debugger for Firefox: You can debug applications and extensions running through the Mozilla Firefox browser.
  • Debugger for Microsoft Edge: You can debug JavaScript code in the Microsoft Edge browser.
  • Debugger For Chrome: You can debug JavaScrpit code in the Google Chrome browser or other targets that support the Chrome DevTools protocol. Chrome DevTools Protocol.
  • Visual Studio IntelliCode: It has AI-assisted development features for TypeScript/JavaScript, Python developers.
  • Live Server: It has a local server with a live reload function for both static and dynamic pages.
  • ESLint: You can integrate ESLint into Vs Code, use the library installed in the workspace folder.
  • Vetur: Vue tooling for VS Code.
  • Placeholder Images: It allows you to generate and insert placeholder images into your HTML in Visual Studio Code, using a number of third-party services, such as Unsplash, a placeholder.it, etc.
  • VS Code Great Icons: Organize your workplace by setting the right icon to identify files and folders.
  • Rainbow Brackets: You have all kinds of colors, both round, square and squiggly brackets.
  • Prettier: It is an opinionated code formatter. It has its own style and parses and reprints your code with its own rules.
  • NPM: It is able to support the execution of npm scripts and the validation of the installed modules with the dependencies defined in the package.json file. package.json

And the VS’s themes too🌏

  • Myukai Theme: It allows you to facilitate the reading syntax through a dark and brightly colored mirage theme.
  • Horizon Theme: Tastes change all the time. VS Code makes it easy to customize all aspects of the editor.
  • Material Theme: Allows you to override the user interface colors, and Material Theme schemes, by adding theme-specific settings to your configuration.
  • One Dark Pro: One Dark by Atom, is one of the most installed themes for VS Code.

Recollect all the data you need 📘

  • GRID – Malven: It has an excellent visual cheat sheet for you to use in designing the CCS grid.
  • LEX – Malven: Used for CSS flex design, it has a visual cheat sheet.
  • DEVHINTS: some other cheatsheets.
  • DevDocs: FREE, offline, and more than +100 docs in one browser for developers.
  • MDN Web Docs: you can find information about Open Web technologies including HTML, CSS, and APIs for both Web sites and progressive web apps.

Find answers📘

Learning resources 📘

Lest’s start with JAVASCRIPT:

REACT:

NODEJS:

Online courses📘

Online Editors 🌐

Images and tools 😁

Organize your information 📝

Make a checklist of everything you want to learn, organize your knowledge and create The Front-End Checklist or the Frontend Development Roadmap.

 Guidelines to create a more accessible web 📝

Terminals for Windows🌐

You Tube Channels you should be following📺

Want fonts? Download from here 🖋

Illustrations and drawings 🎨

Icons and symbols 🎨

⚡ Want to land a job? ⚡

  • Front-end Developer Interview Questions: For interviewing potential candidates, front-end related questions.
  • Front End Interview Handbook: Become an interview hero.
    You don’t need to have previous interview experience.

Want a little help? 😁

It’s ok, we have been there too! If you need to contact a professional team of developers, feel free to write to us:

hello@remote.club

Scroll to Top