top of page
Keyboard and Mouse

Schedule

Full Time - 3 Months

Mon - Fri

9am - 6pm

Part Time - 5 Months

Mon - Fri

6pm - 9pm

Sat - Sun

9am - 6pm

Study Mode

Your Day at Sakmo

Online (Zoom meeting)

Morning Standup (15 min)

Repeat Cycle (rest of the day)

1-h Teacher-Led Tutorial

1-h Mini Project â€‹â€‹â€‹

Group Projects (real clients)

Padagogy

Short Course

  • Covers Core Topics

  • Portfolio Project (published at           Sakmo.com)

  • Real-Life Projects (real customers)

  • 1-month On-Job Mentoring

  • Seminars by Professionals

HTML, CSS, JavaScript

HTML, CSS, and JavaScript course typically cover the foundational skills needed to create and design websites and web applications. This is a foundation-level course and anyone can take it. 

Prerequisites

  • There is no Age Limit on this course

  • Having a basic understanding of Maths, English, and ICT is beneficial.

Course Outline

Course

  • HTML

    • Elements​​

    • Attributes

    • Typography, Iframes

    • Div, Class Structure

    • Forms

    • Media

    • APIs (Geolocation, Drag/Drop, Web Storage, SSE)

    • Meta Tags

    • Accessibility Issues, Aria

  • CSS

    • Layout Design​

    • Media Queries

    • Flexbox

    • Variables

    • Responsive Web Design (RWD)

    • Grid

    • Preprocessors (SASS)

  • JavaScript (ES6)

    • Fundamentals

    • Functions

    • Objects​

    • Arrays

    • Classes

    • JSON

    • JS HTML DOM

    • Web APIs

    • AJAX

    • JQuery

    • Graphics

    • Preprocessor (Babel)

​

  • Agile Scrum

  • Unit Testing

  • GitHub, GitLab, Bitbucket

  • ​Web Accessibility Guidelines

  • Projects (with real customers)

 

What will you gain after this course

After completing a course in HTML, CSS, and JavaScript, you will gain a wide range of skills and knowledge that are essential for web development. Here’s a detailed list of what you can expect to achieve:

  • Structured Learning Path

  • Hands-On Experience

  • Foundation skills needed for the following Career Paths with a few additional skills

    • ​Front-end Developer

    • Back-end Developer

    • Automation / Manual Software Testing

    • Product Owner 

  • Up-to-Date Knowledge

  • Collaboration and Networking

  • Problem-Solving Skills

  • Accessibility and Inclusivity

  • Flexibility and Convenience

  • Certification

​

These achievements will provide a strong foundation for further learning and professional growth in the field of web development.

Training Mode

Short Course

Design Only
Design Only

Who is this course for?

A front-end web developer course is suitable for a wide range of individuals, including:

  • Aspiring Web Developers

    • Beginners​

    • Students

    • Career Changer

  • Future Career Paths

    • Front-End Developer

    • Backend Developers

    • Software Tester (Automation / Manual)

  • Designers

    • ​UI/UX Designers

    • Graphic Designers

  • Entrepreneurs and Business Owners

  • IT Professionals

  • Hobbyists and Enthusiasts

  • Educational and Institutional Participants

  • Digital Marketers

​

Pedagogy

01.

Group Projects

Small Group

1 to 1 Mentoring

02.

1 to 1 problem solving

One to One Attention

Desing Only

03.

Real Life Projects

04.

Team Work

Team Work

05.

Technical Test

Technical Test

Real Life Work Environment

06.

Real World Environment

07.

Confident Developer

Instructors form Industry

08.

Agile Scrum

Agile Scrum Application

Proplem Solving

09.

Performance

Reviews

10.

Peer Review

Job Interview Preparation

This course entails

Course Overview

01

Core Technologies

  • HTML (HyperText Markup Language): The standard language for creating web pages and web applications. It defines the structure of web content.

  • CSS (Cascading Style Sheets): CSS controls the layout, colors, fonts, and overall appearance of the website.

  • JavaScript: It is essential for tasks like form validation, creating dynamic content, and handling user events.

03

Version Control

  • Git: A version control system that tracks changes in source code during software development. Understanding Git is crucial for collaboration and code management.

  • GitHub/GitLab/Bitbucket: Platforms for hosting and managing Git repositories, facilitating collaboration and code sharing.

  • ​

05

APIs and AJAX

  • APIs (Application Programming Interfaces): Techniques for fetching and manipulating data from a server using JavaScript.

  • AJAX (Asynchronous JavaScript and XML): A method for updating parts of a web page without reloading the whole page, using XMLHttpRequest or the Fetch API.

07

Performance Optimization

  • Code Optimization: Techniques to improve the performance of JavaScript, CSS, and HTML.

  • Image and Asset Optimization: Methods to reduce the size of images and other assets to improve loading times.

  • Lazy Loading: Strategies to load content as needed to improve performance and user experience.

  • ​

09

Project Work

  • Portfolio Development: Building a portfolio of projects to demonstrate skills and knowledge.

  • Small Projects: Cover every element of development via small real-life projects throughout the course.

  • Real-World Projects: Engaging in real-world projects or contributing to open-source projects to gain practical experience.

​

02

Responsive Design

  • Media Queries: Techniques in CSS that allow content to adapt to different screen sizes and orientations.

  • Flexbox and Grid: CSS layout models that provide efficient ways to design complex responsive layouts.

  • Responsive Design Principles: Best practices for creating websites that work well on a variety of devices, from desktops to mobile phones.

04

Preprocessors

  • CSS Preprocessors: Tools like Sass or Less that extend CSS with variables, nested rules, and functions, making it more powerful and easier to maintain.

  • JavaScript Preprocessors: Tools like Babel that allow developers to write next-generation JavaScript which is then compiled down to a version supported by current browsers.

06

Testing and Debugging

  • Debugging Tools: Browser developer tools for inspecting and debugging code.

  • Testing Frameworks: Tools like Jest, Mocha, or Jasmine for writing and running tests to ensure code quality and functionality.

​

​

08

Accessibility

  • Web Accessibility Guidelines: Principles and best practices for making web content accessible to people with disabilities.

  • ARIA (Accessible Rich Internet Applications): A set of attributes that make web applications more accessible to users with disabilities.

​

​

10

Performance Review

  • Daily Standup: Each morning, you will have the opportunity to present your progress from the previous day, outline your plan for the day, and discuss any challenges you are encountering.

  • Performance Review: Every week, you will participate in a performance review to identify what is going well, what needs to be stopped, and areas for improvement.

Book your spot

Book Your Spot

Frequently Asked Questions

  • What is a front-end developer?
    A front-end developer is a professional responsible for implementing visual and interactive elements that users engage with through their web browser. They work primarily with HTML, CSS, and JavaScript to build user-friendly websites and web applications.
  • What are the key skills required for a front-end developer?
    Essential skills include proficiency in HTML, CSS, and JavaScript, understanding of responsive design principles, knowledge of frameworks and libraries such as React.js, Angular, or Vue.js, and experience with version control systems like Git.
  • How do HTML, CSS, and JavaScript work together?
    HTML provides the structure of the webpage, CSS controls the visual presentation and layout, and JavaScript enables interactivity and dynamic content manipulation. Together, they form the core technologies for front-end development.
  • What is responsive design?
    Responsive design is an approach to web development that ensures web pages render well on various devices and window or screen sizes. It involves using flexible layouts, flexible images, and CSS media queries.
  • Why are frameworks and libraries like React.js important?
    Frameworks and libraries help streamline the development process by providing pre-written code, tools, and best practices. They allow developers to build complex applications more efficiently and maintainable.
  • What tools do front-end developers use?
    Common tools include code editors (e.g., Visual Studio Code, Sublime Text), version control systems (e.g., Git), browser developer tools, package managers (e.g., npm, Yarn), and build tools (e.g., Webpack, Gulp).
  • What is the importance of version control in front-end development?
    Version control systems like Git allow developers to track and manage changes to the codebase, collaborate with team members, and revert to previous versions if needed, ensuring a more organized and efficient development process.
  • How do front-end developers ensure website accessibility?
    Developers ensure accessibility by following best practices and guidelines such as the Web Content Accessibility Guidelines (WCAG). This includes using semantic HTML, ensuring keyboard navigability, providing alternative text for images, and ensuring color contrast meets standards.
  • What is a CSS preprocessor and why use it?
    A CSS preprocessor like Sass or Less extends CSS with variables, nesting, and functions, making the stylesheet code more maintainable and easier to write. It compiles into regular CSS that the browser can interpret.
  • How do you optimize a website for performance?
    Performance optimization techniques include minimizing HTTP requests, compressing images, leveraging browser caching, using content delivery networks (CDNs), and optimizing JavaScript and CSS files by minifying and combining them.
  • What is a single-page application (SPA)?
    A SPA is a web application that interacts with the user by dynamically rewriting the current page rather than loading entire new pages from a server. This provides a smoother, more fluid user experience. Popular frameworks for SPAs include React.js, Angular, and Vue.js.
  • Can you explain the difference between CSS Grid and Flexbox?
    CSS Grid is a layout system designed for two-dimensional layouts, allowing developers to create complex, responsive grid-based layouts. Flexbox is a one-dimensional layout system aimed at distributing space along a single row or column, ideal for aligning items within a container.
  • What is the role of a front-end developer in a development team?
    Front-end developers collaborate with designers, back-end developers, and other stakeholders to create user interfaces. They translate design mockups into code, implement interactive elements, ensure cross-browser compatibility, and optimize the user experience.

Contact Us

Thanks for submitting!

bottom of page