So late December last year, I decided I would be writing here. I thought it's a better way to actively engage with the community and connect more. But what do you think though? Am I wrong? Okay. It is a new year and by reason of this being my first article, I wish to start by drawing a path to front-end development considering the technologies that are most popular in the industry for the past couple of years. I hope that subsequent articles will focus more broadly on individual technologies of the stack. It is important to note that this article is not exhaustive but it does surely capture enough necessary info to becoming a front-end developer.

So here we go!

Basic Tools: These are the fundamentals you need to have to start learning front-end. They include:

1. Computer and OS (Windows, Mac, Linux)
2. Text Editor - this could be VS Code, Atom or Sublime text
3. Web Browser (Chrome, Firefox)
4. Terminal - You could use the default terminal in your operating system or Powershell or Git Bash.
5. Design Software (This is optional but important especially if you will be working as a freelancer) - Adobe XD, Figma and Photoshop are good.

Learn HTML5 and CSS3

Here, you need to learn: HTML5 page structure and semantic tags, Basic CSS styling, CSS positioning, CSS Alignment (Flexbox and CSS Grid), Transition and Animation, Responsive Design/Media Queries - for responsive apps of all screen sizes.

• Sass Sass compiles into CSS and offers things like variables, mixings,functions,nestings.

Learn one of the CSS UI/Frameworks Some of the popular ones are: Tailwind CSS, Bootstrap, Bulma and Materialize

Learn JavaScript: JavaScript is the language of the browser. Learn the basics including variables, arrays, functions, loop, etc; DOM and Styling; *Array Methods including foreach, filter, reduce, map, etc; Learn JSON; HTTP request - Fetch API - GET, POST, PUT, DELETE.

Other tools to learn:

1. Version Control like Git or Subversion
2. Repo Manager like Github, Bitbucket, Gitlab
3. Package Manager like NPM or Yarn
4. Browser Developer Tools
5. Editor Extensions and Helpers like Emmet, etc.

Learn A Front-end Framework: It could be React, Vue, Angular or Svelte also learn TypeScript (TypeScript is a superset of JS that brings a "strict" type system to JavaScript. It makes code more robust and less prone to error, great for large projects. It is object oriented programming and uses generics, modules, interfaces and classes).

Learn One of these for Server Side Rendering : Advantages to this are those of easy routing, better SEO, etc.

1. Next.js (React)
2. Nuxt.js (Vue)
3. Angular Universal (Angular)
4. Sapper (Svelte)

WHAT NEXT? Create a portfolio Start applying for jobs/searching for clients

Continue learning and advancing your knowledge - learn Testing, Jamstack,Headless CMS, etc.

That is all you need to become a front-end web developer.

See you.