Web Design – Trybanex Tech Limited

About Course

Web Design focuses on making websites visually stunning. You’ll learn how to arrange text, images, colors, and buttons in a way that looks attractive and professional. This skill is perfect for people who want to make businesses look good online and it’s highly in demand as every company now needs a website.

Fundamentals of web design (structure, layout, and aesthetics)
How to write and structure HTML for content
How to style pages with CSS for colors, spacing, and layout
The Box Model and how to control element positioning
Building responsive websites using Flexbox and media queries
Adding animations, transitions, and interactive effects with CSS
Introduction to JavaScript for interactivity (DOM manipulation, events)
How to combine HTML, CSS, and JS to build functional web pages
Best practices for responsive, accessible, and user-friendly websit
Create your own portfolio-ready responsive website

Course Content

Introduction to Web Design & HTML Basics
Learn the structure of a website and basic HTML elements like headings, paragraphs, links, and images. By the end of this week, you’ll have created and saved your very first HTML web page.

What is web design? (Design vs Development)
Website structure
Basic tags: h1-h6, p, img, br
Attributes (src, href, alt, title)
Creating and saving your first .html file

HTML Forms & Semantic Structure
Understand semantic HTML for better structure and accessibility. Build lists, tables, and forms to collect user input, and learn to organize content using header, section, and footer tags.

CSS Basics – Styling Your Page
Move from plain text to styled designs! Learn how CSS works to add colors, fonts, backgrounds, and spacing. You’ll create your first styled web page with external CSS.

CSS Box Model & Page Layout
Master the box model (margin, padding, borders) and page layout techniques using divs and semantic tags. You’ll design a multi-page website using everything learned so far.

Flexbox & Responsive Design Basics
Learn Flexbox to align and distribute elements easily and introduce responsive design with media queries for mobile-friendly layouts. Create a responsive navigation bar.

CSS Effects & Interactivity
Add hover effects, smooth transitions, gradients, shadows, and animations to make your design visually engaging and interactive.

Introduction to JavaScript
Learn the basics of JavaScript to make your website interactive. From variables and functions to event handling and DOM manipulation, you’ll add dynamic features to your site.

Final Project & Revision
Combine HTML, CSS, and JavaScript to build a personal portfolio or business landing page. Present your final project and get feedback.

Student Ratings & Reviews

No Review Yet

About Course

What Will You Learn?

Course Content

Introduction to Web Design & HTML Basics Learn the structure of a website and basic HTML elements like headings, paragraphs, links, and images. By the end of this week, you’ll have created and saved your very first HTML web page.

What is web design? (Design vs Development)

Website structure

Basic tags: h1-h6, p, img, br

Attributes (src, href, alt, title)

Creating and saving your first .html file

HTML Forms & Semantic Structure Understand semantic HTML for better structure and accessibility. Build lists, tables, and forms to collect user input, and learn to organize content using header, section, and footer tags.

Theme: Add Meaning & Collect Information

Lists: ordered & unordered

Tables and their elements

Forms

Semantic tags

Creating a basic registration form

CSS Basics – Styling Your Page Move from plain text to styled designs! Learn how CSS works to add colors, fonts, backgrounds, and spacing. You’ll create your first styled web page with external CSS.

CSS syntax (selectors, properties, values)

Ways to use CSS: Inline, Internal, External

Colors (names, HEX, RGB, RGBA)

Fonts and text styling

Backgrounds, borders, spacing

CSS Box Model & Page Layout Master the box model (margin, padding, borders) and page layout techniques using divs and semantic tags. You’ll design a multi-page website using everything learned so far.

Box model: margin, border, padding, content

Inline vs Block vs Inline-block elements

Grouping content with div & semantic tags

Creating simple page layouts

Designing a styled multipage website (mini-project)

Flexbox & Responsive Design Basics Learn Flexbox to align and distribute elements easily and introduce responsive design with media queries for mobile-friendly layouts. Create a responsive navigation bar.

Flexbox basics (display: flex, flex-direction, justify-content, align-items)

Aligning, spacing, growing & shrinking elements

Introduction to media queries (mobile-first approach)

Responsive navigation bar design

CSS Effects & Interactivity Add hover effects, smooth transitions, gradients, shadows, and animations to make your design visually engaging and interactive.

Pseudo-classes: :hover, :active, :focus

Transitions & animations (smooth effects)

Shadows, opacity, gradients

Button styling & hover effects

CSS variables (custom properties)

Introduction to JavaScript Learn the basics of JavaScript to make your website interactive. From variables and functions to event handling and DOM manipulation, you’ll add dynamic features to your site.

What is JavaScript & where it runs

Adding JS to a webpage ( vs external .js)

Variables, data types, and operators

Functions & events (onclick, onmouseover, onkeyup)

DOM basics: selecting and modifying elements

Final Project & Revision Combine HTML, CSS, and JavaScript to build a personal portfolio or business landing page. Present your final project and get feedback.

Best practices in design (navigation, accessibility, simplicity)

Mini-project: Create a personal portfolio or business landing page

Combine HTML + CSS + JS into one site

Peer review & feedback session

Final presentation & assessment