Web Development Fundamentals

• 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.

UI/UX Design

• Introduction to Figma
• Introduction: Analyzing Aesthetics
• Color, Typography
• User interface components
• Create Landing Page in Figma

HTML 5

• 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.
• 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.

CSS 3

• 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.

Git GitHub and Version Control

• 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.

Bootstrap v5.1 or Tailwind / Material UI

• 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.

JavaScript ES6

• 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

Document Object Model (DOM)

• Learn the tree structure of HTML based websites.
• Traverse through the document using object notation.

Application Program Interfaces (API)

• 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.

React .JS

• 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

Introduction to Next JS

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

Deployment

• Deployment of your project on cpanel or Heruko, Netlify