I assume you already know what Web Dev. is, well 'lemme' not Assume!

Web Development is the process of building websites and applications for the internet, or for a private network known as an intranet.

On this article, I'll be sharing a simplified roadmap to becoming a Web Developer with Front End as a priority .

BASIC TOOLS

The following are the basic tools needed to start your journey as a web developer.

Tools (available options to choose from)

1. Computer & OS ---> MacOS, Linux, Windows
2. Text Editor ---> Vs Code, Vim, Atom, Sublime Text
3. Web Browser ---> Firefox, Brave, Chrome
4. Terminal ---> Default, Powershell, Git Bash
5. Design SW ---> Figma, Adobe Photoshop, Adobe XD, Sketches

ROAD MAP

HTML --->

HTML is the markup language that we use to structure and give meaning to our web content, for example defining paragraphs, headings, and data tables, or embedding images and videos in the page. what you'll basically learn about is HTML page structures, Semantics and Tags. HTML tags includes, but not limited to:

Learning the basics of HTML may not take a lot of time, as you will discover more tags along the way.

CSS --->

CSS is a language of style rules that we use to apply styling to our HTML content, for example setting background colors and fonts, and laying out our content in multiple columns.

What you'll be learning

Basic CSS Styling [Syntax, Background, colors, borders, margins, padding, height/widths, text/fonts, lists, box model, outline, display]

Advance CSS

• Positioning
• Alignment (Flex and Grid)

• Transition & Animation

• Responsive Design and Media Queries

CSS Frameworks Learning a CSS framework will make web development seemingly easy as it helps bootstrap your work process.

• Boostrap

• Tailwind CSS

• SASS (I personally recommend learning this, even if it is just the basics)

• Materialize CSS

JAVASCRIPT --->

JavaScript is a scripting language that enables you to create dynamically updating content, control multimedia, animate images, and pretty much everything else. (Okay, not everything, but it is amazing what you can achieve with a few lines of JavaScript code.) ]

JS is extremely important for Frontend/Fullstack web developers. it's a language of the client side.

What you'll be learning

• Basics ---> Variables, arrays, functions, loops, etc

• DOM & styling ---> Selecting and manipulating html elements

• Arrays/Array Methods ---> Foreach, map, filter, reduce, etc

• JSON ---> JavaScript Object Notation

• HTTP Requests ---> Fetch API - GET, POST, PUT, DELETE

  Bonus

  UI - Design

• Color & Contrast

• White Space
• Scale
• Visual Heirachy
• Typography **