Address
Kandy: 12, Wattarantenna Road, Kandy, Sri Lanka 20000
Colombo: Bay 6, Trace Expert City, Maradana, Colombo 10
Kurunegala: Industrial Services Bureau, 141, Kandy Rd, Kurunegala
Email
info@anka.com.lk
Course Overview
This course covers HTML, CSS, and JavaScript, teaching students how to build, style, and add interactivity to web pages. It includes hands-on exercises, projects, and assessments to reinforce learning. The course also introduces responsive design, animations, and React.js, preparing students for modern web development.
Course Objectives
Class Structure
The course runs for six months, with 24 classes, each lasting 90 minutes. Students will engage in structured lessons, hands-on exercises, and discussions. The program includes 6 assessments and 1 project, ensuring both theoretical understanding and practical application.
Course Content
Designed for beginners and aspiring developers, this course takes you through the essentials of HTML, CSS, and JavaScript. You will explore how to build web pages from scratch, style them with modern CSS techniques, and enhance functionality with JavaScript programming. Through practical exercises and projects, you will develop the skills needed to create responsive and dynamic web applications.
HTML/CSS & JavaScript Programming
Introduction to HTML
Class 1 - Introduction to HTML5 - 90 mins
- What is HTML5
- History of HTML and Web development
- Structure of HTML documents
- What are tags, elements, and attributes
Class 2 - Basics of HTML - 90 mins
- Adding headings and paragraphs to the web page
- Working with images, videos and links
- Creating ordered/unordered lists and tables
- Using nesting and indentation
Assessments - 60 mins
- MCQ Quiz
- Create a simple webpage with text, images, and links
Advanced HTML and Forms
Class 3 - Advanced concepts of HTML - 90 mins
- Semantic elements of HTML
- Advanced form elements and attributes
Class 4 - HTML Forms and Validations - 90 mins
- Creating HTML forms
- Validating forms with various input types and attributes
- Client-side validation techniques
Assessments - 60 mins
- MCQ Quiz
- Develop a contact form with validation
Introduction to CSS
Class 5 - Introduction to CSS - 90 mins
- What is CSS?
- The role of CSS in web development
- CSS syntax (selectors, properties, values)
Class 6 - Including CSS in HTML - 90 mins
- Inline CSS
- Internal CSS
- External CSS
Class 7 - Basic Selectors - 90 mins
- Type, class, and ID selectors
- Grouping selectors
- Combining selectors
Class 8 - Practice Exercise 1 - 60 minutes
- Create a simple HTML page and apply various selectors to style elements
Class 9 - Box Model Basics - 90 minutes
- Understanding the box model
- Content, padding, border, and margin
- Visualizing the box model with browser dev tools
Class 10 - Practice Exercise 2 - 60 minutes
- Create an HTML page with multiple elements
- Apply styles to demonstrate the box model
Styling Techniques of CSS
Class 11 - Styling Text - 90 minutes
- Font properties (font-family, font-size, font-weight, font-style)
- Text properties (color, text-align, text-decoration, line-height)
- Using Google Fonts
Class 12 - Styling Links and Lists - 90 minutes
- Pseudo-classes (hover, active, visited)
- Styling lists (ordered and unordered)
Class 13 - Styling Images and Media - 90 minutes
- Image properties (width, height, border-radius, box-shadow)
- Responsive images (max-width, height: auto)
Class 14 - Practice Exercise 3 - 60 minutes
- Create an HTML page with various text elements, links, lists, and images
- Apply different text styles and Google Fonts
- Apply styles to enhance the appearance of these elements
Advanced CSS Techniques
Class 15 - Creating Responsive Web Pages - 90 minutes
- Layouts with Flexbox and Grid
- Creating flexible and responsive layouts
- Using media queries for different screen sizes
Class 16 - CSS Animations and Transitions - 90 minutes
- Adding dynamic effects to elements
- Learn how to apply and control transitions for smooth state changes
- Create keyframe animations to enhance web page interactivity
Class 17 - Assessment - 60 minutes
- Design a responsive web page with complex layouts using Flexbox and Grid
- Apply styling, animations and transitions where necessary
Introduction to JavaScript
Class 18 - Basics of JavaScript - 90 minutes
- What is JavaScript?
- The role of JavaScript in web development
- How JavaScript integrates with HTML and CSS
- Internal vs. external JavaScript
- Variables, Data types and Operators
Class 19 - Control Structures - 90 minutes
- Conditional Statements and Loops
- Defining and calling functions
- Parameters and return values
Class 20 - DOM Manipulation - 90 minutes
- What is the DOM?
- The relationship between HTML, CSS, and the DOM
- Changing content
- Modifying attributes
- Styling elements using style property
- Understanding events and event listeners
Class 22 - Form Validation and Authentication - 90 minutes
- Importance of form validation
- Types of validation: client-side vs. server-side
- Client-Side Validation with JavaScript
- Understanding authentication and its importance
- Basic concepts: user credentials, login, and logout
Introduction to React.js and App Development
Class 23 - React.js and components - 90 minutes
- What is React.js?
- The role of React in modern web development
- What are components in React?
- Differences between functional and class components
- Creating your first functional component
Class 24 - Introduction to App Development - 90 minutes
- Installing Node.js and npm
- Setting up a React project using Create React App
- What are props?
- Passing data to components using props
- What is state?
- Handling user input: click, change, submit, etc.
- Updating state based on user interactions