Frontend Development – Trybanex Tech Limited

About Course

Frontend Developers make websites look and feel alive. They design the buttons, animations, colors, and layouts that users interact with. In this course, you’ll learn how to bring website designs to life using code, creating experiences that are smooth, fast, and fun.

Understand HTML structure and how to build semantic webpages.
Apply CSS styling and layout techniques using Flexbox and Grid.
Implement responsive design for mobile and desktop.
Add animations, hover effects, and transitions for a polished look.
Write basic JavaScript for interactivity and DOM manipulation.
Build a fully responsive, multi-page website with interactive elements.
Debug and optimize designs using Chrome DevTools.

Course Content

HTML BASICS – THE FOUNDATION
Students learn HTML syntax and structure, key tags like <p>, <a>, <img>, and how to use attributes (href, src, target). Covers the difference between head and body, as well as file paths and linking external files.

HTML syntax & structure
Basic HTML tags
Attributes (href, src, target, etc.)
Head vs Body in HTML
Filepaths & linking external files

CSS BASICS – STYLING YOUR PAGE
Covers writing CSS inline, internal, and external, understanding selectors and properties, and using color systems (names, RGB, HEX). Introduces measurements (px, %, em, rem) and styles like borders, backgrounds, and cursors.

TEXT & FONTS
Learn font families, Google Fonts integration, and styling text with size, weight, and alignment. Covers text decoration, transformations, and resetting default margins for consistency.

CSS BOX MODEL & LAYOUTS
Understand margin, padding, and border, block vs inline elements, using <div> for containers, and semantic tags like <header>, <nav>, <section>, <footer>.

FLEXBOX & GRID
Master Flexbox (alignment, direction, spacing) and CSS Grid (rows, columns, gaps). Learn to combine both for responsive designs.

CSS INTERACTIONS & EFFECTS
Covers pseudo-classes (:hover, :active), transitions, animations, opacity, and box shadows. Includes hover effects and simple tooltips.

POSITIONING & RESPONSIVE DESIGN
Learn positioning modes (static, relative, absolute, fixed), z-index stacking, and media queries for responsiveness. Introduces mobile-first design and debugging with Chrome DevTools.

INTRO TO JAVASCRIPT FOR BEGINNERS
Understand JavaScript basics: variables, data types, operators, functions, and events (onclick, onkeyup). Learn DOM manipulation to dynamically change elements.

Student Ratings & Reviews

No Review Yet

About Course

What Will You Learn?

Course Content

HTML BASICS – THE FOUNDATION Students learn HTML syntax and structure, key tags like <p>, <a>, <img>, and how to use attributes (href, src, target). Covers the difference between head and body, as well as file paths and linking external files.

HTML syntax & structure

Basic HTML tags

Attributes (href, src, target, etc.)

Head vs Body in HTML

Filepaths & linking external files

CSS BASICS – STYLING YOUR PAGE Covers writing CSS inline, internal, and external, understanding selectors and properties, and using color systems (names, RGB, HEX). Introduces measurements (px, %, em, rem) and styles like borders, backgrounds, and cursors.

Writing CSS with and external .css

CSS syntax, selectors & properties

Colors: names, RGB, HEX, RGBA

Sizing & measurements (px, %, em, rem)

Borders, background, and cursor styles

TEXT & FONTS Learn font families, Google Fonts integration, and styling text with size, weight, and alignment. Covers text decoration, transformations, and resetting default margins for consistency.

Font families & Google Fonts

Font size, weight, style

Line height, text alignment

Text decoration & transformations

Resetting default margins

CSS BOX MODEL & LAYOUTS Understand margin, padding, and border, block vs inline elements, using <div> for containers, and semantic tags like <header>, <nav>, <section>, <footer>.

Margin, padding, border

Inline, block & inline-block elements

Using as containers

Nesting layouts

Grouping content with semantic tags

FLEXBOX & GRID Master Flexbox (alignment, direction, spacing) and CSS Grid (rows, columns, gaps). Learn to combine both for responsive designs.

Flexbox basics: display: flex, direction, justify, align

Growing, shrinking, spacing elements

CSS Grid basics: grid-template-columns, row-gap, column-gap

Combining grid & flex for responsive layouts

CSS INTERACTIONS & EFFECTS Covers pseudo-classes (:hover, :active), transitions, animations, opacity, and box shadows. Includes hover effects and simple tooltips.

Pseudo-classes :hover, :active

Transitions & animations

Opacity & box-shadow

Buttons with hover effects

Tooltips & overlays

POSITIONING & RESPONSIVE DESIGN Learn positioning modes (static, relative, absolute, fixed), z-index stacking, and media queries for responsiveness. Introduces mobile-first design and debugging with Chrome DevTools.

Position: static, relative, absolute, fixed

Z-index & stacking elements

Media queries for responsiveness

Mobile-first design basics

Chrome DevTools for debugging

INTRO TO JAVASCRIPT FOR BEGINNERS Understand JavaScript basics: variables, data types, operators, functions, and events (onclick, onkeyup). Learn DOM manipulation to dynamically change elements.

What is JavaScript? Where it runs

Writing inline vs external .js file

Variables, data types & operators

Functions & events (onclick, onkeyup)

DOM basics: selecting & changing elements