Duration
Front End System Application Development
5 days
Day 1: Introduction to HTML and CSS
- Introduction to Web Development
- Overview of Front-end Development
- Importance of HTML and CSS
- HTML Fundamentals
- Basic Structure of an HTML Document
- HTML Elements and Attributes
- Semantic HTML
- CSS Fundamentals
- Introduction to Cascading Style Sheets
- Selectors and Properties
- Box Model and Layouts
- Responsive Design
- Media Queries
- Flexbox and Grid Systems
- Responsive Images
Day 2: Advanced CSS and Basic JavaScript
- Advanced CSS Techniques
- Transitions and Animations
- CSS Variables
- CSS Preprocessors (e.g., SASS)
- Introduction to JavaScript
- Basics of JavaScript
- Variables, Data Types, and Operators
- Control Flow (if statements, loops)
- DOM Manipulation
- Understanding the Document Object Model
- Selecting and Manipulating Elements
- Events and Event Handling
- Exercise and Project
- Hands-on coding exercises to reinforce concepts
- Building a simple interactive webpage
Day 3: Intermediate JavaScript
- Functions in JavaScript
- Declaring and Invoking Functions
- Function Parameters and Return Values
- Scope and Closures
- Arrays and Objects
- Working with Arrays
- Creating and Manipulating Objects
- Iterating through Arrays and Objects
- Asynchronous JavaScript
- Callbacks and Promises
- Introduction to Asynchronous Programming
- Fetch API for HTTP Requests
- Exercise and Project
- Collaborative coding exercises
- Building a dynamic webpage using JavaScript
Day 4: Introduction to Vue.js
- Vue.js Basics
- Introduction to Vue.js
- Vue Instance and Data Binding
- Directives and Template Syntax
- Components in Vue.js
- Creating and Using Components
- Props and Custom Events
- Component Lifecycle
- Vue Router
- Setting up and Configuring Vue Router
- Navigation and Route Parameters
- Nested Routes
- State Management with Vuex
- Introduction to Vuex
- State, Mutations, Actions, and Getters
- Managing Global State
Day 5: Advanced Vue.js
- Advanced Vue.js Features
- Vue Directives (v-if, v-for, etc.)
- Mixins and Custom Directives
- Filters and Transitions
- Vue.js Best Practices and Optimization
- Code Splitting and Lazy Loading
- Performance Optimization
- Debugging Vue.js Applications
Programme scope, delivery arrangements and suitability are confirmed during enquiry.