GRADE 12 WEB DESIGN

AND DEVELOPMENT
• Responsive web design (RWD) refers to designing
websites to adapt to a user's device.
• The goal is for a website to retain its optimal usability and
appearance regardless of the device it's displayed on.
Responsive web design responds to user needs by
adapting to different screen sizes, orientations, layouts,
and platforms. This is accomplished with the use of
flexible grids and layouts, responsive images, and CSS
media queries.
 CONT.…

The origins of RWD

Responsive web design emerged as a concept and approach to
building websites in 2010 with web designer Ethan Marcotte's article
“Responsive Web Design," which appeared in A List Apart.
Elements of Responsive Web Design

Media queries that alter web designs based on a user’s device

Flexible images they have no fixed display size limitations. This
versatility makes it easier to resize images neatly.

Fluid grids/fluid layout elements that automatically rearrange
columns of content to fit different screens or browser windows

Code for flexible layouts that resize page elements to fit different
screens or browser windows

HTML is a programming language that determines the content and
structure of a webpage

CSS is a programming language that determines the design and
display of HTML elements.
1.1.1 DEVICE LANDSCAPE

• Building websites with fixed widths was used to be

reasonable over a decade ago
• This fixed width (typically 960 px wide) was not too wide
for laptop screens, and users with large-resolution
monitors merely had abundant space on either side.
• The number of people using smaller-screen devices to
view the internet is growing at an ever-increasing rate,
while at the other end of the scale; 40-inch ultra-wide
displays are now also commonplace. There is now more
difference between the smallest screens browsing the
web and the largest than ever before.
There is a solution to this ever-expanding device landscape.
A responsive web design, built with HTML and CSS, allows
a website to “just work” across multiple devices and
screens. It enables the layout and capabilities of a website
to respond to their environment (screen size, input type,
device capabilities).

Figure 1.1:
Device
Landscape
BROWSER SUPPORT

One question that almost always comes up when starting a

responsive design project is that of browser support. With
so many browser and device variants, it is not always
pragmatic to support every single browser fully. Typically,
the older the browser, the greater the work and code
required to achieve feature or aesthetic parity with modern,
evergreen browsers such as Firefox or Chrome.
You Can Use, [Link] website provide a simple
interface for establishing the browser support for each web
platform feature
1.1.3 TOOLS FOR TESTING BROWSER/DEVICE COMPATIBILITY

The diverse digital landscape demands you to ensure

that websites and applications function seamlessly
across multiple browsers, devices, and operating
systems is crucial for delivering a high-quality user
experience. For this reason, browser and device
compatibility testing helps you identify issues such as
layout inconsistencies, broken functionality, or
performance problems that may arise due to variations in
platforms.
 CONT…

Several tools are available to test browser and device

compatibility. For example, BrowserStack and
LambdaTest are cloud-based platforms that provide
access to a wide range of real devices and browsers
for cross-platform testing. These tools enable
developers to test their applications in real-time across
different environments. Additionally, web browser built-
in Developer Tools in Chrome, Firefox, and Edge allow
developers to debug and test compatibility issues
directly within the
browser.
1.2. CSS FRAMEWORKS

1.2.1. Introduction to CSS Frameworks

CSS front-end frameworks are pre-prepared libraries
that provide structure, design, and functionality for
building the layout and user interface (UI) of web
applications. These frameworks are built with CSS and
sometimes include HTML and JavaScript to make the
development process faster, more consistent, and
easier for developers. It provides a set of standardized
styles, components, and layout structures that ensure
consistent designs, saving time on manual coding and
reducing potential errors.
 CONT.…

CSS frameworks provide a standardized set of

styles, UI components, and layout systems—such
as grid structures, buttons, forms, and
typography—ensuring design consistency and
reducing development time. By leveraging these
reusable elements, developers can avoid
repetitive coding tasks, minimize errors, and
maintain a uniform appearance across different
pages and projects
Using a CSS framework allows developers to
jumpstart their work without building every
element from scratch. It simplifies the
implementation of responsive design, cross-
browser compatibility, and user-friendly interfaces.
This enables developers to focus more on
implementing custom features and addressing the
specific goals and logic of a project.
 FEATURES OF CSS FRAMEWORKS

Key The following are key features of CSS frameworks that make them
essential to consider in web design and development.
 Most CSS frameworks come with a responsive grid system that helps
you create layouts that automatically adjust to different screen sizes.
 They provide pre-designed components like buttons, forms, navigation
menus, cards, modals, and more, which can be easily customized.
 Many frameworks include built-in media queries that ensure your
website or application is mobile-friendly.
 Frameworks come with consistent design styles for typography, colors,
and UI elements, improving user experience and reducing design
inconsistencies.
 CSS frameworks are designed to work well across multiple browsers,
helping to prevent styling issues in different environments.
 Most frameworks allow customization, letting developers modify
themes, colors, or other aspects to fit specific design requirements.
WHY TO USE CSS FRAMEWORKS?

The following are some of the key reasons to use CSS frameworks in web development:
 Speed: CSS frameworks significantly speed up
development by providing pre-designed elements and components that can be quickly
integrated into projects.
 Consistency: With standardized components and
design guidelines, CSS frameworks ensure consistency across your website or
application, leading to a more polished user experience.
 Cross-Browser Compatibility: Most CSS frameworks are tested to ensure they work
across all modern browsers, reducing time spent on browser compatibility issues.
 Responsiveness: CSS frameworks are designed with responsiveness in mind, ensuring
that your web application will adapt to various screen sizes and devices without
additional work.
 Flexibility: Many frameworks allow for deep
customization, meaning you can adjust the framework to suit your design needs.
 CONT..

CSS frameworks are best used when you

need to build websites quickly, maintain
consistent design across pages, or create
responsive layouts without writing all the
CSS from scratch. They are especially
helpful for large projects, team-based
development, or when you're working under
tight deadlines.
DRAWBACKS OF USING CSS FRAMEWORKS

Here are some challenges you may face when relying heavily on CSS
Frameworks:
 Overhead: Some CSS frameworks, especially larger ones like Bootstrap,
can introduce unnecessary code if you don't use all of its components.
 Learning Curve: New developers may find it challenging to grasp all the
concepts of a CSS framework, particularly utility-first frameworks like
Tailwind.
 Lack of Uniqueness: Websites using the same CSS framework may
start to look similar if customization isn't applied. Frameworks like
Bootstrap, in particular, can result in generic-looking websites unless
heavily customized.
 Dependence: Over-reliance on a framework might hinder developers
from learning basic CSS concepts or lead to trouble when it comes
time to integrate custom designs or features.
1.2.2 POPULAR CSS FRAMEWORKS
1.3 INTRODUCTION TO BOOTSTRAP

Building a fully functional website from scratch with HTML,

CSS, and JavaScript can be a daunting and time consuming
task. Bootstrap not only solves this problem but also makes
the whole process easier
 Bootstrap is a CSS framework that helps us to create easy-to-
use and responsive mobile-first web pages without any hassle.
It contains HTML and CSS at its core, which means before
using it understanding both of them, is important.
 Bootstrap is also completely free and open source, which
means that the source code is open and easily accessible
online for you to access and edit.
 CONT.…

Bootstrap is focused on early mobile development.

Mobile-first development means that when building
any web page using Bootstrap, it focuses on how it is
done on mobile devices. This method is useful as
many users around the world access the internet using
their mobile phones. Putting their needs first and
ensuring that the website works well on any mobile
device can increase traffic to any website.
1.3.1 BOOTSTRAP VERSIONS
1.3.2 OVERVIEW OF BOOTSTRAP 5

The Bootstrap team has made a number of important

changes to this version. One of the most important
changes was to completely undo its dependence on
jQuery – a java script library and to completely depend on
vanilla JavaScript-which is a standard JavaScript.
 WHAT CAN YOU DO WITH BOOTSTRAP?

• Create complete responsive websites in no time

• Create easy-to-use websites
• Fast and automatic upgrades depending on various
websites
• Create dynamic web pages
• Manage large amounts of content
• Create toolkit and popover tips to show suggestion text
• Create a carousel and photo slide
• Create different types of forms and warning boxes
2.1 OVERVIEW OF DEVELOPMENT ENVIRONMENT

A responsive web design development environment is a

carefully configured workspace where students create,
test, and optimize websites to ensure they function
seamlessly across various devices and screen sizes.
Setting up this environment involves selecting the right
tools and software, such as a text editor or integrated
development environment (IDE) like Visual Studio Code,
and installing necessary frameworks like Bootstrap for
streamlined responsive design.
2.3 SETTING UP BOOTSTRAP

• Once you have installed and configured your code editor,

create a project folder and create a file with the .html
extension. Bootstrap actually provides us with an HTML
and CSS coded code template, and all you have to do is
copy those templates into your editor.
Getting Bootstrap Options
• We will explore two ways of getting Bootstrap. You can
include the Bootstrap 5 link using the content delivery
network (CDN), or simply download the Bootstrap 5
website directly to your device using the package
manager.
• Step 6: Copy the [Link] and [Link].
[Link] to the respective CSS and JS Folders on your Web
Project Folder respectively.
• Step 7: Open your VS Code Editor, and link [Link].
css and [Link] files to your [Link] file.
You get the [Link] from [Link]
docs/5.3/getting-started/introduction/, you can write your
own simple html code.
It helps to improve the time and website performance. Bootstrap CDN is a free of
cost content delivery network helps us to quickly load Bootstrap CSS, and
JavaScript libraries on projects to make projects responsive, mobile friendly, and
attractive.
• Bootstrap CDN Link and Scripts:
1. Cascading Style Sheets (CSS)
• You just need to copy-paste the below link to the <head> section of your code.
• <link href="[Link]
css" rel="stylesheet" integrity="sha384-
QWTKZyjpPEjISv5WaRU9OFeRpok6YctnYmDr5pNlyT2bRjXh0JMhjY6hW+ALEwI
H" crossorigin="anonymous">
2. JavaScript
• <script src="[Link]
dist/js/[Link]" integrity="sha384-
YvpcrYf0tY3lHB60NNkmXc5s9fDVZLESaAA55NDzOxhy9GkcIdslK1eN7N6jIeHz"
crossorigin="anonymous"></script>
2.4 BOOTSTRAP DOCUMENT STRUCTURE

• A basic Bootstrap document begins with a standard HTML5 doctype and includes a
properly defined `<head>` section with meta tags for responsiveness (`<meta name="
viewport" content="width=device-width, initial-scale=1">`). The Bootstrap CSS file is
linked in the `<head>` to ensure consistent styling across all devices.
• The `<body>` contains the main content of the document and utilizes Bootstrap’s grid
system for layout. This grid system, based on rows and columns, allows developers to
create flexible and adaptive designs. Additionally, the document can incorporate
Bootstrap's extensive library of pre-styled components, such as buttons, navigation
bars, and modals, to enhance functionality and aesthetics.
• JavaScript functionality, including Bootstrap’s interactive components like carousels
and dropdowns, is enabled by linking the Bootstrap JavaScript. This ensures
seamless integration of dynamic behaviors within the document.
• Bootstrap’s document structure provides a simplified and modular foundation for
building responsive websites efficiently, with minimal custom CSS and JavaScript
required.
•
• Note that you have to make sure that you have internet access to follow the steps and
get started by including Bootstrap’s production-ready CSS and JavaScript via CDN
without the need for any build steps. Otherwise, use the first option that is
downloading offline to successfully implement all the practices in this module.
Step 3: Start your Live Server; your default browser will
open your first Bootstrapped page as shown below.
Installing and configuring Bootstrap is complete, now you
can start building with Bootstrap by creating your own
layout, adding dozens of components, and utilizing the
Bootstrap official examples
 KEY COMPONENTS OF BOOTSTRAP
DOCUMENT STRUCTURE

• Meta Tags: The <meta name="viewport" content="

width=device-width, initial-scale=1.0"> tag ensures proper
scaling and responsiveness on all devices.
• Bootstrap CSS Link: A link to the Bootstrap CSS style
sheet is required to access Bootstrap’s prebuilt styles.
• Content Area: The <body> tag contains all the HTML
elements and components styled using Bootstrap classes.
• Bootstrap JavaScript: JavaScript functionality (e.g.,
modals, dropdowns) is enabled by including the Bootstrap
JavaScript bundle, which depends on [Link] for
tooltips and popovers