FrontEnd Web Development : ReactJS|TypeScript|HTML|CSS|Javascript|Bootstrap

...

Pre-Registration Form


FrontEnd Web Development : ReactJS|TypeScript|HTML|CSS|Javascript|Bootstrap

FREE LAPTOP
₦980,000.00 ₦686,000.00

Frontend Web Development Course with Version Control (Git & GitHub), Bootstrap, and Tailwind CSS

Course Duration: 3 Months
Tech Stack: HTML, CSS, JavaScript, Bootstrap, Tailwind CSS, ReactJS, TypeScript
Version Control: Git & GitHub
Target Audience: Beginners to Intermediate learners interested in frontend web development.

Month 1: Fundamentals of Frontend Development with Version Control

Week 1: Introduction to Web Development, HTML & Version Control

  • Topics Covered:

    • Introduction to Web Development
    • Overview of HTML and its structure
    • Elements, Attributes, and Tags
    • Forms and Input Elements
    • Semantic HTML
    • SEO Basics (Semantic Markup)
    • Git Basics: Introduction to Git, Installing Git, Basic Git Commands (git init, git add, git commit)
    • GitHub: Introduction to GitHub, Creating a repository, Cloning, Pushing, and Pulling changes

  • Assignments:

    1. Create a simple personal profile page using HTML.
    2. Build a contact form with proper form validation.
    3. Initialize a Git repository for the project, commit the changes, and push it to GitHub.

  • Project 1: Personal Portfolio Page (HTML-based)

    • Create a simple portfolio with sections: About Me, Skills, Projects, and Contact.
    • Use Git for version control and push your project to GitHub for public access.

Week 2: CSS Fundamentals, Bootstrap, & Version Control in Action

  • Topics Covered:

    • CSS Syntax and Selectors
    • Box Model (margin, padding, border, content)
    • Flexbox and Grid Layout
    • Styling Text, Fonts, and Colors
    • Responsive Web Design with Media Queries
    • Introduction to CSS Preprocessors (SASS/SCSS)
    • Bootstrap 4/5 Basics: Introduction to Bootstrap, Grid System, and Components (buttons, navbars, modals)
    • Git Branching: Creating branches (git branch, git checkout), Merging branches (git merge)
    • GitHub Collaboration: Creating Pull Requests (PRs), Reviewing PRs, Handling Merge Conflicts

  • Assignments:

    1. Style your personal portfolio page using CSS.
    2. Build a responsive landing page using Flexbox/Grid.
    3. Learn and implement Bootstrap to quickly style your portfolio page.
    4. Create a branch for styling, push the changes, and submit a PR for review.

  • Project 2: Responsive Landing Page with Bootstrap

    • Create a simple, responsive landing page for a fictional product or service.
    • Use Bootstrap 4/5 for responsive design.
    • Ensure Git is used for version control, committing regularly and using branches for features.

Week 3: Introduction to JavaScript & Git for Collaboration

  • Topics Covered:

    • JavaScript Syntax and Structure
    • Variables, Data Types, Operators
    • Functions and Scope
    • DOM Manipulation (document.getElementById, querySelector)
    • Event Handling and Listeners
    • Introduction to ES6+ (let/const, arrow functions, template literals)
    • Git Collaboration: Forking Repositories, Cloning Forks, and Syncing Forks

  • Assignments:

    1. Write a JavaScript program to change the content of a webpage dynamically.
    2. Create a simple interactive to-do list (with add/remove tasks).
    3. Fork a project from GitHub, make changes, and submit a pull request.

  • Project 3: Interactive To-Do List

    • Build a fully functional to-do list application using JavaScript.
    • Use Git for version control, and practice creating branches and handling pull requests.

Week 4: Advanced CSS Techniques, Tailwind CSS, & Version Control Best Practices

  • Topics Covered:

    • Advanced CSS Selectors
    • CSS Transitions and Animations
    • Responsive Design with Bootstrap 4/5
    • CSS Variables
    • Custom Fonts and Icons (Font Awesome, Google Fonts)
    • Tailwind CSS: Introduction to Tailwind CSS utility-first classes, Customizing Tailwind, and Utility-First Design Philosophy
    • Git Best Practices: Commit messages, Using .gitignore to ignore unnecessary files, Keeping commits atomic

  • Assignments:

    1. Implement a CSS animation in your portfolio.
    2. Create a responsive card component with hover effects.
    3. Practice best Git practices by committing meaningful changes with descriptive commit messages.
    4. Convert an existing project to use Tailwind CSS for styling.

  • Project 4: Product Showcase Page (Responsive with Bootstrap & Tailwind)

    • Create a product showcase page that is mobile-responsive and utilizes both Bootstrap and Tailwind CSS.
    • Ensure to commit often and use branches for styling and feature development.

Month 2: ReactJS, TypeScript, Bootstrap, Tailwind CSS & Version Control

Week 5: Introduction to ReactJS with Version Control

  • Topics Covered:

    • Introduction to React and JSX
    • Components: Functional vs Class Components
    • Props and State
    • Handling Events in React
    • Component Lifecycle (useEffect)
    • React Router Basics
    • Git and React Projects: Using create-react-app, Commit React files, and Structure React Projects

  • Assignments:

    1. Create a basic React app that displays a list of items.
    2. Build a component that accepts user input and displays it dynamically.
    3. Initialize Git in the React project and commit all changes.

  • Project 5: React Weather App

    • Build a weather app that fetches data from a public API (e.g., OpenWeather).
    • Git: Create branches for feature development and submit PRs with clear commit messages.
    • Style with Bootstrap or Tailwind CSS based on preference.

Week 6: Advanced ReactJS Concepts, Tailwind CSS & Git Workflow

  • Topics Covered:

    • React Context for State Management
    • React Hooks (useState, useEffect, useContext)
    • Forms in React (controlled vs uncontrolled components)
    • Lifting State Up
    • Error Boundaries
    • Tailwind CSS in React: Integrating Tailwind with React projects, using Tailwind classes with JSX, Customizing Tailwind in React projects
    • Git Flow: Working with Git Flow for larger teams, Feature branches, Hotfix branches, Release branches

  • Assignments:

    1. Create a counter application using React Hooks.
    2. Build a form with validation using controlled components.
    3. Apply Tailwind CSS to style React components.
    4. Practice Git Flow by managing branches for new features or releases.

  • Project 6: Movie Search App

    • Build a movie search app that fetches data from a movie API (e.g., OMDB).
    • Use Tailwind CSS for styling and Git Flow for managing the development process.

Week 7: Introduction to TypeScript & Git

  • Topics Covered:

    • What is TypeScript and Why Use It?
    • Type Annotations, Interfaces, and Types
    • Functions and Objects in TypeScript
    • Classes and Inheritance
    • TypeScript with React
    • Git Tags and Releases: Marking versions with Git tags, Creating release branches

  • Assignments:

    1. Convert a simple JavaScript app into TypeScript.
    2. Create TypeScript interfaces for a shopping cart application.
    3. Tag the releases in Git for versioning.

  • Project 7: TypeScript Calculator

    • Build a simple calculator with TypeScript and React.
    • Use tags to mark each version (e.g., v1.0.0 for the first stable release).

Week 8: Integrating TypeScript with React & Tailwind CSS

  • Topics Covered:

    • Using TypeScript with React Components
    • Type Checking for Props and State
    • TypeScript Generics in React
    • Best Practices and Debugging TypeScript
    • Tailwind CSS in TypeScript Projects: Applying Tailwind utility classes in TypeScript/React projects

  • Assignments:

    1. Convert your React app (e.g., Movie Search) to TypeScript.
    2. Use TypeScript to add types to the state and props of a form component.
    3. Style your TypeScript React project using Tailwind CSS.

  • Project 8: Task Management App (with TypeScript & React & Tailwind CSS)

    • Build a task management app with TypeScript, React, and local storage.
    • Use GitHub for collaboration, creating branches, and resolving conflicts.

Month 3: Advanced ReactJS, API Integration, Bootstrap, Tailwind CSS & Version Control Best Practices

Week 9: Bootstrap 5, Tailwind CSS, Responsive Design & Git Deployment

  • Topics Covered:

    • Bootstrap 5 Grid System and Components
    • Responsive Web Design Best Practices
    • Creating Custom Themes with Bootstrap
    • Bootstrap with React
    • Tailwind CSS Responsive Design: Using Tailwind’s responsive utilities to build mobile-first designs
    • Git Deployment: Deploying React apps to platforms like Netlify, Vercel, and GitHub Pages using GitHub CI/CD

  • Assignments:

    1. Create a responsive navbar using Bootstrap 5.
    2. Create a responsive dashboard layout using Tailwind CSS.
    3. Set up deployment to Netlify or Vercel using Git integration.

  • Project 9: E-Commerce Product Page

    • Create an e-commerce product page using React, Bootstrap, Tailwind CSS, and TypeScript.
    • Use GitHub Actions for automatic deployment on push events.

Week 10: Advanced ReactJS: State Management with Redux & Git for Version Control

  • Topics Covered:

    • Introduction to Redux and State Management
    • Redux Store, Actions, and Reducers
    • Using Redux with React
    • Redux Toolkit
    • Async Operations with Redux Thunk
    • Git Best Practices for Collaboration: Rebase, Squash Merging, Resolving Conflicts in Large Teams

  • Assignments:

    1. Implement Redux in a simple React app.
    2. Create a shopping cart using Redux to manage state.
    3. Practice using rebase and squash merging to tidy up commit history.

  • Project 10: Redux-based Todo List with Authentication

    • Build a todo list app with user authentication and state management using Redux.
    • Regularly commit changes and use Git for version control.

Week 11: API Integration and Authentication with Git

  • Topics Covered:

    • Working with RESTful APIs
    • Fetching data with fetch() and Axios
    • Authentication: JWT and OAuth
    • Storing Authentication Tokens
    • Building a login/logout flow with React
    • Git Workflow for API Projects: Commit API key management in .env and push code securely

  • Assignments:

    1. Create a login page with JWT authentication.
    2. Build an app that fetches data from a third-party API.
    3. Add sensitive files (e.g., .env) to .gitignore.

  • Project 11: Recipe Book with API Integration

    • Create a recipe book that fetches recipes from a public API.
    • Use GitHub for versioning and deploy using GitHub Pages.

Week 12: Final Project, Git Deployment & Job Readiness

  • Topics Covered:

    • Final Project Planning and Structuring
    • Debugging and Optimizing Code
    • Deployment to Netlify/Vercel/GitHub Pages
    • Git for Team Projects: Managing large projects with multiple contributors, Code Reviews, Handling Merge Conflicts
    • Job Readiness: Portfolio, Resume, Interview Preparation, and GitHub Profile Tips

  • Assignments:

    1. Final Project development.
    2. Submit your portfolio with GitHub links to your projects.

  • Project 12 (Final Project): Social Media Dashboard

    • Build a fully functional social media dashboard with data visualizations, authentication, and a CRUD interface using React, Redux, TypeScript, Bootstrap, and Tailwind CSS.
    • Deploy the project using GitHub Actions, Netlify, or Vercel.

Git & GitHub: Essential Throughout the Course

By using Git & GitHub for version control, you will:

  • Track and manage your code history
  • Collaborate with others (use GitHub for project hosting)
  • Develop good version control habits (commit frequently, write meaningful commit messages)
  • Handle conflicts and collaborate on larger projects

Job Readiness and Salary Expectations

Job Readiness:

  • GitHub Profile: Ensure all projects are pushed to GitHub, showcasing your use of version control in real-world applications.
  • Portfolio: Include 4-5 projects demonstrating your proficiency in HTML, CSS, JavaScript, ReactJS, TypeScript, Bootstrap, Tailwind CSS, and Git.
  • Git Best Practices: Showcase clean, readable commit histories, proper use of branching, and collaboration in Git.
  • Mock Interviews & Resume: Focus on your experience with Git, collaboration, and version control in your interviews.

Average Salary (Frontend Developer):

  • Junior Developer: $50,000 - $70,000 annually
  • Mid-Level Developer: $70,000 - $100,000 annually
  • Senior Developer: $100,000 - $130,000 annually
  • Freelance Developer: $30 - $80 per hour

This course integrates Bootstrap, Tailwind CSS, and version control (Git & GitHub) throughout to ensure you are ready for modern collaborative environments and can confidently handle code management and deployment workflows.