bmcit@prep:~$ welcome to pre-react training
bmcit@prep:~$ show reactjs

What is ReactJS?

ReactJS is a popular JavaScript library developed by Facebook for building fast, interactive user interfaces. It allows developers to create reusable UI components and manage dynamic data efficiently, making web applications more organized, scalable, and easier to maintain.

bmcit@prep:~$ show html-basics

HTML Basics

  • <html>, <head>, <body>: Core document structure of an HTML page.
  • Headings & Paragraphs: Using <h1>-<h6> and <p> to organize content.
  • Divs & Spans: Creating block-level and inline containers.
  • Forms & Inputs: Collecting user data with textboxes, checkboxes, etc.
  • Buttons: Triggering actions and form submissions.
  • Lists: Ordered (<ol>) and unordered (<ul>) lists.
  • Links & Anchors: Navigation using <a href="...">.
  • Images: Displaying pictures with <img>.
  • Tables: Organizing tabular data.
  • Semantic Tags: Using <header>, <footer>, <article>, <section> for meaningful structure.
  • Meta Tags: Adding page metadata (viewport, charset, SEO).
Start HTML
bmcit@prep:~$ show css-fundamentals

CSS Fundamentals

  • Selectors: Targeting elements using tag, class, ID, attribute, and pseudo-selectors.
  • Box Model: Understanding margin, border, padding, and content.
  • Display & Position: Using block, inline, flex, grid, absolute, relative, etc.
  • Colors & Backgrounds: Styling with hex, RGB, gradients, and images.
  • Typography: Fonts, sizes, weights, line-height, letter-spacing.
  • Flexbox: Arranging elements in flexible, responsive layouts.
  • CSS Grid: Building complex 2D layouts with rows and columns.
  • Transitions & Animations: Adding visual effects and interactions.
  • Media Queries: Making responsive designs for different screen sizes.
  • Z-index & Stacking: Controlling layer order of elements.
  • CSS Variables: Reusing values for theme consistency.
Start CSS
bmcit@prep:~$ show javascript-essentials

JavaScript Essentials

  • Variables: Declaring with let, const, and var.
  • Data Types: Strings, numbers, booleans, null, undefined, objects, arrays.
  • Functions: Declaring, calling, and arrow functions.
  • Conditionals: if, else, switch for logic branching.
  • Loops: for, while, do-while, and forEach.
  • Array Methods: map, filter, reduce, find, includes.
  • Objects: Properties, nested objects, destructuring.
  • DOM Manipulation: Selecting and updating HTML elements with JS.
  • Events: Handling click, input, submit, etc.
  • ES6 Features: Arrow functions, template literals, spread/rest operators.
  • Async JavaScript: Promises, async/await, and fetch API.
  • Modules: import/export and code splitting.
Start JavaScript

Preview

Hover over a topic to see its usage/code here.