Full Stack

Development
Unit I: Basics of Web Development — Complete HTML & CSS Course
Syllabus

Dr. N. Juber Rahman, AP, SRCAS, CBE

Full Stack Development

HTML Basics Module CSS Styling Module

• Fundamentals: Introduction, Syntax & Document Structure. • Core CSS: Selectors (Simple, ID, Class, Universal, Grouping) &
• Text Formatting: Logical vs. Physical formatting tags. Properties.

• Content Elements: Lists (OL, UL, DL), Links & Anchors, Images & • Box Model: Borders, Margins, and Padding with horizontal
Forms. centering.
• Typography & Visuals: CSS Fonts, Tables & Background Images
• Layouts: Marquee element, Div & Span tags. (Linear & Radial Gradients).
What is Full Stack Development?

Definition & Concept Core Responsibilities

Full Stack Development refers to developing both client-side (Front- • UI/UX Design: Client-side scripts & responsive layouts.
end) and server-side (Back-end) portions of web applications. • Server Logic: API construction and backend processing.
Full Stack Web Developers have the ability to design complete web • Database & Deployment: Data storage, query execution, and
applications and websites end-to-end. debugging.
Full Stack Technology Ecosystem

Front-End Back-End Database Layer

• HTML / CSS • [Link] / Express • MongoDB (NoSQL)
• • PHP / Python • MySQL (Relational)
• [Link] / AngularJS
JavaScript • Java / C++ • Oracle DB
• Bootstrap / SASS • Ruby on Rails • SQL Server
Front-end Languages & Frameworks

Languages AngularJS [Link]

HTML: HyperText Markup Language An open-source JavaScript front-end A declarative, efficient, and flexible
defining webpage structure. framework primarily used to develop Single component-based view library built and
CSS: Simplifies presentation independent of Page Applications (SPAs). maintained by Facebook.
HTML. Extends HTML with custom Directives and Focuses exclusively on the view layer of
JavaScript: Scripting language creating two-way data binding. modern web applications.
dynamic interactions.
Front-end Libraries & Preprocessors

Bootstrap jQuery SASS

Free, open-source mobile-first toolkit for Lightweight JavaScript library simplifying Mature and reliable CSS extension language
building responsive websites quickly with DOM traversing, event handling, animations, adding powerful features like variables,
built-in grid systems and UI components. and cross-browser Ajax interactions. nesting, inheritance, and mixins.
Back-end Technologies & Database Systems

Server-Side Languages Database Management Systems

• PHP: Executed on server-side specifically for dynamic web • SQL / MySQL / Oracle: Relational systems storing tabular data
applications.
• [Link]: Fast asynchronous JavaScript runtime for backend APIs. using schemas and joins.

• Java & C++: Highly scalable general-purpose enterprise engines. • MongoDB: NoSQL document-oriented database storing flexible
JSON-like records without rigid schemas.
 HTML Basics & Core Concepts

HyperText Markup Language Basic HTML Example

Core Standard: Over 95% of all global websites rely on HTML
</div>
alongside CSS and JavaScript.

Markup Language: Not a programming language; annotates plain text

to define webpage structure.

Static Nature: Provides structure; styled via CSS and made interactive
via JavaScript.
 HTML Page Architecture Explained

Structure Element Role & Description

Document declaration defining HTML5 standard (not a tag).

Root element containing all structural page code.

Holds "behind-the-scenes" metadata, scripts, styles, and page title.

</div> Defines the title displayed on browser tab header.

Encloses all visible web content rendered in the browser viewport.

- / Headings and paragraph block elements for organizing text content.

HTML Elements, Tags & Attributes

Elements vs. Tags HTML Attributes

• Tag: The actual keyword inside angle brackets e.g. or . Special keywords inside an opening tag providing additional
properties formatted as name="value".
• Element: The complete unit including opening tag, content, and
closing tag:
tagnam attribute_name "attribute_value" tagnam a
href
e "[Link] target "_blank" e a
p p
 Text Formatting: Logical vs. Physical Tags

Tag Category Description Visual Output Example

Logical Emphasizes text with semantic importance Strong Important Text

Logical Adds semantic stress emphasis Emphasized Text

/ Physical Visual bold / italic without added importance Bold Text / Italic Text

/ Physical Smaller font size / Highlighted inserted text Smaller text / Inserted text

/ Physical Highlighted background / Strikethrough deleted text Highlighted / Strikethrough

/ Physical Subscript (chemistry) / Superscript (exponents) H2O / E = mc2

HTML Lists: Ordered, Unordered & Description

Ordered Lists () Unordered Lists () Description Lists ()

Used when item order matters (processes, Used when item sequence is flexible Displays term and definition
rankings). (menus, features). pairs.
• : Definition term.
• type: 1, A, a, I, i • disc: default solid bullet • : Term details/description.
• start: • circle: hollow outline
start="5"
• reversed: counts circle
• square: solid filled square
downward
 Ordered List () vs. Unordered List ()

Feature Ordered List () Unordered List ()

Primary Usage Procedures, rankings, recipes, algorithms Grouped features, shopping lists, navigation menus

Default Marker Arabic numbers (1, 2, 3...) Solid black disc bullet

Supported Attributes type="1|A|a|I|i", start, reversed type="disc|circle|square"

Item Reordering Auto-renumbers items dynamically upon change Bullets stay uniform regardless of item sequence

Appearance Formal sequential progression Flexible equal-weighted items

 HTML Links, Anchor Tag & Target Attributes

Anchor Tag () & Link Types Default Link Styles in Browsers

href: Specifies destination URL. • Unvisited Link: Blue & Underlined

target="_blank": Opens link in a new browser tab. • Visited Link: Purple & Underlined

mailto: href="[Link] • Active Link: Red & Underlined

tel: href="[Link]

download: Prompts direct file downloading.

 Difference Between and Tags

Feature / Property Tag Tag

Location Inside section Inside section

Primary Function Connects document to external resources (CSS, icons) Creates user-clickable hyperlink navigation

Visibility & Interaction Invisible & unclickable on frontend UI Visible & interactive clickable content

Element Structure Empty element (self-closing without nested content) Container element (can enclose text, images, buttons)
HTML Scrolling Effect

Syntax & Concept Core Attributes

Creates scrolling text or media across the screen horizontally or
• direction: left, right, up, down
vertically.
• loop: specifies movement repetitions (default: infinite)
marque direction "left" bgcolor "#1e293b • height / width: dimensions in px or %
e marque " • hspace / vspace: horizontal & vertical margin spacing
e
HTML Images & Form Elements

HTML Images () HTML Forms ()

Embeds images using key attributes: Collects user inputs using controls:
• src: image file path or URL •
• alt: accessible alt text description •,,
• width / height: element dimensions •

im src "[Link]" alt "Profile" width "300"

g
 HTML vs. Containers vs. Containers

Feature Tag (Division) Tag (Division) Tag (Span)

Display Type Block-level element (starts on a new line, takes full width) Inline element (takes only necessary content width)

Purpose Grouping major webpage sections & layouts Styling small inline text portions within a block

Align Attribute Accepts alignment properties Does not accept alignment properties
Introduction to CSS & 3 Styling Methods

Inline CSS Internal CSS External CSS

Styles applied directly inside opening HTML Defined inside a </div> tag within the Styles written in a separate .css file linked
tag using style="" attribute. section. via .
 Core CSS Selectors Overview

Selector Type Syntax Prefix Code Example Action

Element Selector Tag Name p { color: red; } Targets all matching HTML tags on page.

ID Selector Hash symbol (#) #para1 { color: red; } Targets a single unique element with matching ID.

Class Selector Period symbol (.) .center { color: red; } Targets all elements with assigned class name.

Universal Selector Asterisk (*) * { color: blue; } Targets every single element on the webpage.

Grouping Selector Comma (,) h1, h2, p { color: red; } Groups multiple selectors sharing identical styles.
 CSS Box Model: Margin vs. Padding

Feature Margin Padding Centering with Margin Auto

Space Location Outer space outside border Inner space inside border .centered-box
/* Centers horizontally
width
*/ 50 margin 0 auto
padding 15p /* Inner
%content room */
Background Transparent (unaffected) Takes element background x

Special Values Supports auto & negative values No auto or negative values
CSS Borders & Text Styling Properties

CSS Borders Text Properties

Defines element outlines using thickness, style, and color. • color / text-align: center, left, justify
• text-decoration: none, underline, line-through
2px solid #06b6d4 • text-transform: uppercase, lowercase, capitalize
• line-height / letter-spacing / word-spacing
• Styles: solid, dashed, dotted, double
 CSS List & Table Properties

List Properties Table Formatting

• list-style-type: square, circle, upper-roman
table border-collapse collapse /* Merges cell borders */ width
• list-style-image: url('[Link]') 100 th, td padding 10p text-align center caption
• list-style-position: inside, outside %
caption-side bottom x
CSS Backgrounds & Image Gradients

Background Image Properties CSS Color Gradients

• background-image: url('[Link]') • linear-gradient(): Smooth color transitions along a straight axis.
• background-repeat: no-repeat, repeat-x
linear-gradient(135deg, #06b6d4, #3b82f6)
• background-size: cover, contain
• background-attachment: fixed, scroll
• radial-gradient(): Radial color fill expanding from center to edge.
Basics of Web Development (HTML & CSS)
Full Stack Development

Course Instructed by Dr. N. Juber Rahman, AP, SRCAS, CBE