Web Design and
Development
Grade 11
OPC chapter one
• Web Careers Pathways
• Introduction to Web Design and
Development
by [Nathan T]
OPC chapter one
Learning Outcomes
•Gain an understanding of Information Technology (IT) as a
career.
•Identify career pathways in web design and development.
•Learn about the roles, skills, and tools used by web
developers.
OPC chapter one
Introduction to IT Careers
• Information and Communication Technology
(ICT) involves the use of technology to manage,
process, and communicate information.
• IT professionals design, develop, and manage
software, networks, and hardware to meet
organizational needs.
• Key Areas:
o Computing: Developing software and applications.
o Telecommunications: Managing networks and communication
systems.
o Information Systems: Managing and analyzing data.
• Example: A software developer working for a healthcare organization
creates applications that help track patient information securely.
OPC chapter one
•Common IT Job Roles
IT Support Specialist:
o Helps users troubleshoot software or hardware issues.
o Example: A support specialist assists employees in setting up secure email on their devices.
Network Administrator:
o Designs and maintains local area networks (LAN) and wide area networks (WAN).
o Example: A network admin sets up a secure Wi-Fi network in a corporate office.
Software Developer:
o Creates applications or systems software.
o Example: Developing mobile apps like WhatsApp or Instagram.
• Cyber security Analyst:
o Protects systems from cyber threats by monitoring networks and responding
to breaches.
o Example: Identifies and prevents a hacking attempt on a banking system.
Cont…
•Web Design and Development Career Paths
Web Designer:
o Focuses on the aesthetic design and layout of websites.
o Example: A designer creates the homepage layout for a blog site, using tools like
Adobe Photoshop
o Front-End Developer:
o Implements the visual elements that users interact with on a website.
o Example: Uses HTML, CSS, and JavaScript to create buttons, forms, and navigation
menus.
Back-End Developer:
o Builds and maintains the server side of websites, dealing with databases and logic.
o Example: A back-end developer uses PHP or Python to handle data submitted through
forms on a website.
Full-Stack Developer:
o Combines both front-end and back-end development.
o Example: A full-stack developer creates a full e-commerce site, including the product
catalog interface (front-end) and order processing system (back-end).
Cont…
•Front-End Development Overview
HTML (Hypertext Markup Language):
o Structures content on web pages (headings, paragraphs, images).
o Example: Using HTML to create a contact form on a website.
CSS (Cascading Style Sheets):
o Styles web pages with colors, fonts, spacing, and layout.
o Example: Using CSS to change the background color of a page or align images horizontally.
JavaScript:
o Adds interactivity, such as dropdown menus, slideshows, and animations.
o Example: Using JavaScript to create a live calculator that updates the total price of items in a
shopping cart.
Responsive Design:
o Ensures websites adapt to different screen sizes (mobile, tablet, desktop).
o Example: Using CSS media queries to adjust a website’s layout for smartphones.
•Back-End Development Overview
Server-Side Programming:
o Developers write code that runs on the server, managing requests and responses.
o Example: Using Python to manage user login information and keep it secure.
Databases:
o Store and retrieve data, such as user profiles or product information.
o Example: Using MySQL to store customer order details for an online shop.
APIs (Application Programming Interfaces):
o Allow communication between different parts of an application or between applications.
o Example: A website fetching weather data from a third-party service using an API to display
current conditions on the homepage.
Security:
o Ensures that the data sent to and from the server is protected.
o Example: Implementing SSL encryption to secure transactions on an e-commerce site .
•Full-Stack Development
Front-End + Back-End Skills:
o Full-stack developers can handle the entire web development process.
Key Technologies:
o HTML/CSS/JavaScript (Front-End).
o Python/PHP/[Link] for server-side logic (Back-End).
o MySQL/MongoDB for database management.
•Example: A full-stack developer designs a job portal, from creating the
user interface for job searches to building the server that stores resumes
and handles job applications.
Real-World Example: A Full-Stack Developer might build and
manage the entire process of a food delivery app, from browsing
restaurants (front-end) to managing orders in a database (back-end) to
processing payments via an API.
•Skills Required for Web Careers
Front-End:
o Knowledge of HTML, CSS, and JavaScript.
o Proficiency with design tools like Figma or Adobe XD.
•Example: A front-end developer might create the interactive map on a
travel website using JavaScript and CSS for smooth transitions.
Back-End:
o Expertise in server-side programming languages like PHP, Python, and database management.
•Example: A back-end developer handles how payment information is
securely processed and stored for a ride-sharing app.
Full-Stack:
o Capable of working on both front-end and back-end, making them versatile and valuable.
•Example: A full-stack developer builds and maintains a music streaming
platform, ensuring smooth user experiences and effective data management.
•Summary
Web development offers multiple career paths:
o Web Designer: Focus on creating the look and feel of websites.
o Front-End Developer: Build user interfaces and ensure they are functional and responsive.
o Back-End Developer: Manage server-side logic, data processing, and storage.
o Full-Stack Developer: Combine front-end and back-end expertise to develop complete web
applications.
The demand for web developers continues to grow, offering
diverse opportunities in sectors like e-commerce, healthcare,
education, and entertainment.
