3 Months Front-end React Course

– Understand how websites work and how HTML, CSS and JavaScript contribute.

– Understand how the internet works.

– Start coding with HTML, CSS, and JavaScript.

– Learn and understand git, GitHub and version control. Use the Unix command line to become a power user and write bash commands.

– Learn key troubleshooting and debugging skills to apply to your projects.

– Introduction to Figma

– Introduction: Analyzing Aesthetics

– Color, Typography

– User interface components

– Create Landing Page in Figma

– Learn the anatomy of HTML syntax to structure your websites.

– Understand the HTML boilerplate and HTML doctypes.

– How to structure text in HTML.

– How to structure HTML lists to create unordered and ordered lists.

– How to insert images using HTML

– How to create hyperlinks using anchor tags.

– Understand how to use HTML tables for content.

– How to use tables for layout.

– Learn HTML best practices.

– Understand about HTML forms and create a simple contact me form.

– HTML divs and how to separate content for CSS styling.

– Understand what are cascading style sheets and how you can use it to style your website.

– How to use CSS selectors and properties.

– Learn about how to use inline, internal and external CSS.

– Understand CSS coding best practices.

– Learn about CSS sizing methods.

– Learn the anatomy of CSS syntax and structure.

– CSS specificity and implementing style hierarchy.

– Class vs. Ids and how to target each.

– CSS display and how to implement layout.

– How to use CSS static, relative and absolute positioning systems.

– Font styling using CSS and web safe fonts.

– Centering elements using CSS.

– Website design fundamentals and typography.

– How to use CSS float and clear.

– How combine CSS selectors and understand selector priority.

– Grid, Flex

– Responsive web design with media queries.

– Using git for version control and collaboration Git forking

– Branching and cloning Using GitHub

– Remote repository Checkout and rolling back

– And other Important and advance git commands.

– Learn the fundamentals of implementing responsive web design.

– How to use Balsamiq to mockup and wireframe websites.

– The fundamentals of UI design for websites.

– How to install the Bootstrap framework.

– Understanding the Bootstrap grid layout system.

– Learn to use other Bootstrap components such as buttons.

– Adding symbols using Font Awesome.

– How to use bootstrap containers to layout your website easily.

– Learn to use Bootstrap carousels.

– Add Bootstrap cards to your website.

– Using Bootstrap navigation bars.

– The Fundamentals of Code

– Starting code with alerts and prompts. Understand Variables and Data Types in JavaScript Variable naming in JS

– Randomisation and logical operators

– Loops, collections and Conditionals.

– Functions and invocation patterns

– Discussion of ECMAScripts

– Intermediate JavaScript

– Learn to use JS Expressions, Operators, Statements and Declarations

– Object-Oriented Programming

– JS Objects and Prototypes

– `This`, Scope and Closures

– Objects and Prototypes

– Refactoring and Debugging

– Arrow Functions

– Map/Filter/Reduce

– Find/FindOne/FindIndex

– Import/Export and Modules

– Object and Array Destructuring

– Spread Operator

– Introduction to TypeScript, use and best practices

– Learn the tree structure of HTML based websites.

– Traverse through the document using object notation.

– Understand what APIs are and how they work.

– HTTP in Depth, Calling APIs

– Reading API documentation

– Basic API Authentication

– Server to server communication

– JSON vs. XML, sending data over the wire.

– Introduction Front-End tools (webpack, babel, more…) and React

– Single Page Application scope and objectives

– Dev Tool and Environment

– JSX, Babel, Webpack

– ES6 features practices

– Create-react-app and project setup

– Components patterns in React

– State, Props, Life Cycle of React Components, Functional Component

– Introduction to hooks, Custom Hooks

– React Router, SPA using React Router

– Introduction to Redux and Flux Architecture

– State Management, Reducers, Action Creators, Context

– Middleware (Thunk, Saga), Services, Error Handling

– Getting Started, Basic Features, Routing, API Routes, Project, Going to Production

– Deployment of your project on cpanel or Heruko, Netlify

– Projects Suggested by students will be done during the course.

– Each student will have a project to complete in order to demonstrate their understanding both during and after the course.