Web Design NC III with TESDA

Building a website is a collaborative and structured process known as the web design pipeline. It begins with discovery and planning, where goals, audiences, and requirements are defined.

The design stage then shapes the website’s visual appearance and user experience, focusing on clarity, usability, and brand consistency. Approved designs move into development, where front-end and back-end developers turn concepts into functional code.

The website is then tested and refined to ensure quality, usability, and accessibility across devices and browsers. After launch, the site is maintained and improved over time. When each role in the pipeline works together effectively, the result is a reliable, user-focused digital product.

This lesson explores the importance of understanding users and applying design thinking in web design. Learners will examine how empathy, user research, and iterative problem solving help designers create websites that address real user needs.

By focusing on people rather than assumptions, the lesson highlights how thoughtful, human-centred design leads to more intuitive, accessible, and effective digital experiences.

This lesson introduces visual hierarchy, typography, and colour as key elements of effective web design. Learners will explore how layout, text, and colour guide user attention, improve readability, and support accessibility.

The lesson highlights how thoughtful visual decisions help users scan content easily, understand information quickly, and navigate websites with confidence.

This lesson introduces wireframing and layout planning as essential early stages in the web design process. Learners will explore how simple, low-fidelity wireframes are used to organise content, define structure, and prioritise user needs before visual design begins.

The lesson highlights how clear layout planning improves usability, supports responsive design, and enables teams to test ideas and make changes efficiently. By focusing on structure first, learners gain a practical understanding of how effective websites are built from a strong foundation.

This lesson introduces three common web layout types: responsive, grid-based, and fixed layouts. Learners will explore how each layout controls the structure and behaviour of content across different screen sizes, and how layout choices impact usability and user experience.

The lesson highlights when and why each layout type is used in modern web design.

Enhance search visibility with strategic sitemapping and ethical link building. Our team structures clean XML and HTML sitemaps to guide crawlers, improve indexation, and highlight priority pages. We align taxonomy, canonical paths, and internal links to reduce crawl budget waste and strengthen topical relevance through technical SEO best practices.

For authority growth, we secure quality backlinks through editorial outreach, digital PR, and resource partnerships. We optimize anchor text, audit toxic links, and monitor performance with analytics to sustain ranking gains and protect site integrity.

• Faster discovery of new content
• Improved crawl efficiency and coverage
• Stronger domain authority and trust signals
• Balanced anchor text profile and risk control
• Measured impact with clear reporting

This lesson introduces usability as a core principle of effective web design, focusing on how ease of use, clear navigation, and thoughtful content structure help users achieve their goals efficiently and confidently.

This lesson explores how clear navigation, logical structure, and well-planned user flow guide visitors through a website, helping them find information easily, move with confidence, and complete tasks without confusion.

This lesson introduces how usability testing and ongoing refinement help identify user issues, improve performance, and ensure websites continue to meet user needs over time.

This lesson introduces accessibility as a core responsibility of web design, focusing on creating websites that are usable, inclusive, and accessible to people of all abilities and technologies.

This topic emphasizes creating inclusive digital experiences by applying clear visuals, accessible navigation, structured content, and thoughtful interactions that support users of all abilities and technologies.

This topic focuses on evaluating websites for accessibility issues and applying ongoing improvements to ensure inclusive, compliant, and user-friendly experiences across different abilities and technologies.

HTML, or HyperText Markup Language, is the standard language used to create the structure of web pages. It defines the meaning and organization of content on the web, such as text, images, links, and forms.

Starting with HTML coding is a straightforward and accessible entry point into web development. HTML does not require complex tools or advanced technical knowledge, making it ideal for beginners who want to understand how websites are built and structured.

A basic HTML document follows a standard structure that helps browsers understand how to display the page. This structure includes the document type, root element, head section, and body section.

HTML provides elements to structure text content clearly and meaningfully. Headings (<h1> to <h6>) define content hierarchy, while paragraphs (<p>) group related text.

Links connect web pages together. The <a> element is used to create hyperlinks that guide users to other pages, websites, or sections within the same page.

Lists help organize content, while tables present structured data such as schedules or comparisons. Tables use rows and columns to display information clearly, but they should be used only for data, not layout.

Semantic HTML uses elements that describe the role of content, such as <header>, <nav>, <main>, <section>, and <footer>. These elements improve structure, accessibility, and maintainability.

Good HTML follows best practices such as clean indentation, meaningful element choice, and proper nesting. Code should be readable and easy to maintain.

CSS, or Cascading Style Sheets, is the language used to control the visual presentation of web pages. While HTML provides structure and meaning, CSS defines how content looks, including layout, colors, fonts, spacing, and responsiveness.

CSS can be applied to a webpage in three main ways: inline, internal, and external. Inline CSS applies styles directly within HTML elements and is generally used for quick testing.

CSS works by selecting HTML elements and applying styles to them. A CSS rule consists of a selector and a declaration block, which includes properties and values.

CSS controls color and text presentation to improve readability and visual appeal. Designers can define font families, sizes, spacing, and alignment, as well as background and text colors.

The CSS box model explains how elements are sized and spaced. Every element consists of content, padding, border, and margin.

CSS layout properties control how elements are arranged on a page. The display property determines how elements behave, while position defines how they are placed.

Flexbox is a powerful layout system designed for one-dimensional layouts. It allows elements to align, distribute space, and adapt easily to different screen sizes.

CSS Grid is a two-dimensional layout system that allows designers to create complex layouts using rows and columns.

Responsive design ensures websites work well on all devices. Media queries allow CSS to adapt layouts based on screen size.

CSS best practices focus on writing styles that are clean, consistent, efficient, and easy to maintain. As websites grow in size and complexity, well-written CSS becomes essential for long-term scalability and collaboration.

.A domain name is the unique address that people use to access a website on the internet. Instead of remembering long numerical IP addresses, users type a domain name into a browser to visit a website easily.

Local and live hosting are two essential environments used in the process of building and publishing a website. Understanding the difference between them helps designers and developers work efficiently, test safely, and launch websites with confidence.

A Content Management System, commonly known as a CMS, is a software platform that allows users to create, manage, and update website content without needing to write code from scratch.

.When building and managing websites, one of the most important decisions is choosing between an all-in-one platform (Software as a Service, or SaaS) and open-source software.