1 of 20

BinaryTree

BinaryTree

Digital Literacy Program

Digital Literacy and Digital Entrepreneurship

2 of 20

BinaryTree

Week 4

Good vs. Bad Websites & Web Dev

3 of 20

Overview

  • Learn to identify effective website design patterns
  • Understand key web development principles
  • Understand what makes websites work (or fail)

4 of 20

First Impressions Count

  • Users form opinions about websites almost instantly.
  • Users decide in less than a second if they like your site.
  • Good design builds trust with visitors.
  • Consistent branding across all pages is key.

5 of 20

Good vs. Bad Websites

Good Website

Easy navigation that makes sense. Pages load fast (under 2 seconds). Works on phones and computers. Clear buttons that tell users what to do.

Bad Website

Too much info crammed on one page. Broken links and outdated content. Doesn't work on mobile. Hard to find what you're looking for.

6 of 20

User Experience (UX) Basics

UX is how people feel when using your website. Good UX = intuitive, accessible, tested design.

  • Design websites with your users in mind — not just aesthetics.
  • Make important information stand out visually.
  • Ensure everyone can use your site (accessibility).
  • Test your site with real people regularly.

7 of 20

Visual Design & Navigation

Visual Design:

  • Use whitespace so content isn't crowded
  • Stick to consistent colors and fonts
  • Make text readable with good contrast
  • Only use images that actually help users

Navigation:

  • Organize menus logically
  • Show users where they are on the site
  • Add a search bar for larger sites
  • Keep navigation in the same place on every page (navbar)

8 of 20

Discussion

Would you rather visit a website with vibrant but random colors, or one with dull but well-coordinated colors?

​

Explain your reasoning.

9 of 20

Website Performance & Mobile Design

Performance

Slow websites lose visitors fast. Compress images, don't load too many elements at once, use fast servers, and check your site speed regularly.

Mobile Design

Over half of internet users browse on phones. Make buttons large enough to tap, simplify navigation for small screens, and ensure fast loading on mobile connections.

10 of 20

Content Strategy

To write good website content:

  • Break up text with headers and bullet points.
  • Write headlines that grab attention.
  • Update your content regularly to stay relevant.
  • Optimize content for search engines (SEO) so people can find your site.

11 of 20

Web Development Languages

  • HTML – Creates the structure of web pages (headings, paragraphs, images, links)
  • CSS – Controls how websites look (colors, spacing, animations, layout)
  • JavaScript – Adds interactive features (buttons, popups, dynamic content)
  • Frameworks: React, Next.js, React Native — extend JavaScript for larger apps
  • Server languages (Python, Node.js, etc.) – Handle data and user accounts on the backend

12 of 20

Frontend vs. Backend Development

Frontend

What users see and interact with — built with HTML, CSS, and JavaScript. Everything visible on the homepage is frontend.

Backend

The behind-the-scenes functionality — handles data, user accounts, databases, and business logic.

Full-Stack

Developers who work on both frontend and backend. APIs help the two sides communicate with each other.

13 of 20

True or False

If I am looking at the home page of a website, am I looking at the backend?

A

True — the homepage is all backend

B

False — the homepage is frontend (what users see)

C

True — all pages are backend

D

False — there is no backend on websites

14 of 20

How HTML, CSS & JavaScript Work Together

A good website uses all three languages — each for a different job:

HTML — Structure

Defines headings, paragraphs, images, links, and page layout. Some debate whether it's a true programming language, but it is foundational.

CSS — Presentation

Styles the HTML — colors, borders, spacing, and animations. Drives the visual look and feel of the site.

JS — Interactivity

Powers the things users interact with — buttons, alerts, popups, and animations. Makes the page dynamic and alive.

15 of 20

HTML Syntax

Key HTML syntax rules:

<!DOCTYPE html> <!-- declares HTML document -->�<html> ... </html> <!-- wraps entire doc -->�<h1>Title</h1> <!-- heading (h1-h6) -->�<a href="url">Text</a> <!-- link -->�<img src="file.jpg" alt="desc"> <!-- image -->

16 of 20

CSS Basics

CSS (Cascading Style Sheets) styles HTML. Activate it inside HTML with <style> tags:

body {� background-color: lightblue;

color:

navy;

font-size:

16px;

}

17 of 20

Discussion

Do you think HTML is more similar to CSS, or does HTML have more in common with JavaScript?

​

Explain your answer.

18 of 20

JavaScript Basics

JavaScript powers what users can interact with. Activate it inside HTML with <script> tags:

// Alert popup�alert("Hello JavaScript!");��// Variables�let name = "BinaryTree";�console.log(name); // prints to console

19 of 20

Conclusion

  • Making users more attracted to a website is about understanding what they naturally like — shorter text, clear structure, fast load times.
  • HTML, CSS, and JavaScript work hand-in-hand to create good-looking, functional websites.
  • HTML provides structure. CSS provides style. JavaScript provides interactivity.

20 of 20

BinaryTree

Thank You For Attending!

Next week: Introduction to Python Programming!