Front-End Development Journey

Welcome to my Front-End Development repository

In this space, I’ll be documenting every step of my journey to becoming a Front-End Developer. I’ll share insights, tips, and hacks that have been valuable to me along the way. You’ll also find resources and materials that I consider helpful if you're aiming to follow a similar path.

Whether you're just starting or looking to level up your skills, I hope this repository serves as a useful guide and inspiration for your own front-end development journey.

Feel free to explore, learn, and contribute

---

What You’ll Find Here:

• Step-by-step progress updates on my front-end journey.
• Useful tips and tricks that have helped me along the way.
• Learning resources and tools that can assist you in becoming a front-end developer.
• Recommendations and hacks to improve your workflow.

Start of the Journey

Stage 1 Intro to Front-End

• Intro and Bibliographies
  • How Internet And Websites Work
  • Difference Between Front-End & Back-End
  • Setting Up Development Tools
  • Setting Up VsCode
  • Essential Tips
• TIPS

---

Stage 2 First Steps Into HTML

• First Steps Into HTML
  • Basic Syntax of HTML
  • My First Web Page
  • Tables in HTML
  • Forms in HTML
  • Essential Tips
• TIPS
• Projects
  • The Basics in HTML
  • My First Website spanish

---

Stage 3 HTML II

• HTML II
  • Diversity in HTML
  • Block and Inline Elements
  • Entities
  • Semantic Elements
  • Multi-Media Elements
• TIPS
• Projects
  • My E-Commerce spanish
  • McLaren Page spanish

---

Stage 4 First Steps into CSS

• Introduction to CSS
  • CSS Syntax
  • CSS Colors
  • CSS Properties
    • Font-Family
  • CSS Units
  • CSS Box Model
• TIPS
• Projects
  • McLaren Page Including CSS Stylesheet

---

Stage 5 CSS II

• CSS II
  • Type, Class, ID Selectors
  • Pseudo-classes
  • Contextual and Grouping Selectors
  • Styles Cascade
  • Attribute Selectors
• TIPS
• Projects
  • My E-Commerce Including CSS Stylesheet spanish
  • Dr. House Website spanish

---

Stage 6 Flexbox & Grid

• HTML & CSS: Flexbox and Grid
  • Flexbox in HTML and CSS
    • FlexBox Froggy
  • Grid in HTML and CSS
    • CSS Grid Garden
• TIPS
• Projects
  • Gallery Implementing Flexbox and Grid
  • My E-Commerce Using Flexbox and Grid

---

Stage 7 Responsive Design

• Responsive Design
  • Responsive Design
  • Media Queries
  • Responsive Containers
  • Responsive Images and Texts
• TIPS
• Projects
  • E-Commerce Responsive Design
  • Practice with Media Queries
  • Mi Galería v.2
  • CARAS Magazine spanish

---

Stage 8 BEM Methodology

• BEM Methodology
  • BEM Methodology
  • Practice Projects
• TIPS

---

Stage 9 SASS

• SASS
  • SASS
  • Variables in SASS
  • Nesting in SASS
  • Mixins in SASS
  • Extend/Inheritance in SASS
  • Functions in SASS
  • Media Queries in SASS
• TIPS
• Projects
  • E-Commerce-Sass
  • Spotify-Sass
  • CARAS Magazine spanish

---

Stage 10 Bootstrap

• Bootstrap
• TIPS
• Projects
  • Bootstrap Blog Example

---

Stage 11 Hosting Static Websites

• Hosting Static Websites

---

Stage 12 JavaScript I

• JavaScript I
  • JavaScript Basics
  • Data Types in JavaScript
  • Variables in JavaScript
  • Data Structures in JavaScript
  • Operators in JavaScript
• TIPS

---

Stage 13 JavaScript Functions and Conditionals

• JavaScript Functions and Conditionals
  • Functions in JavaScript
  • Conditionals in JavaScript

---

Stage 14 JavaScript Loops

• JavaScript Loops
  • Loops in JavaScript
  • Types of Loops

---

Stage 15 JavaScript Methods

• JavaScript Methods
  • Array Methods
  • String Methods
  • Number Methods
  • Object Methods
  • Object Prototype
  • JavaScript Scope

---

Stage 16 JavaScript ES6+ Characteristics and More

• JavaScript ES6+ Characteristics
  • Arrow Functions
  • Template Literals
  • Destructuring Assignment
  • Default Parameters
  • Rest and Spread Operators
  • Classes
• Local Storage
  • Exercise

---

Stage 17 Interactive Websites: DOM and Events

• Interactive Websites: DOM and Events
  • Understanding the DOM
  • Manipulating the DOM
  • Common DOM Methods
  • Event Handling
  • Examples
• TIPS
• Projects
  • e-commerce in progress...
  • caras-magazine
  • Basketball Scoreboard PWA
  • Get a Strong Password
  • My Chrome Extension

---

Stage 18 jQuery

• jQuery
  • Introduction to jQuery
  • jQuery Syntax

---

Stage 19 Asynchronous JavaScript

• Asynchronous JavaScript
  • Callbacks
  • Promises
  • Async/Await

---

Stage 20 AJAX and APIs

• AJAX and APIs
  • JSON
  • AJAX
  • APIs
  • Postman

---

Stage 21 Introduction to Node.js

• Introduction to Node.js

  Projects

  • Stage-2
    • The Basics in HTML
    • My First Website spanish

• Stage-3

  • My E-Commerce spanish
  • McLaren Page spanish

• Stage-4

  • McLaren Page Including CSS Stylesheet

• Stage-5

  • My E-Commerce Including CSS Stylesheet spanish
  • Dr. House Website spanish

• Stage-6

  • Gallery Implementing Flexbox and Grid
  • My E-Commerce Using Flexbox and Grid

• Stage-7

  • E-Commerce Responsive Design
  • Practice with Media Queries
  • Mi Galería v.2
  • CARAS Magazine spanish

• Stage-8

  • Practice Projects

• Stage 9

  • E-Commerce-Sass
  • Spotify-Sass
  • CARAS Magazine spanish

• Stage 10

  • Bootstrap Blog Example
  • My e-commerce

• Stage 17

  • e-commerce in progress...
  • caras-magazine
  • Basketball Scoreboard PWA
  • Get a Strong Password
  • My Chrome Extension

---