Web Applications Development
Introduction to Basic HTML Topics
Structure of a Website
A website is made up of different parts like a header, body, and footer. These parts are written using
HTML to create the layout and content.
HTML5
HTML5 is the latest version of HTML. It is used to create and design web pages. It supports new features
like audio, video, and better structure.
Headings
Headings are titles or subtitles. They go from <h1> (biggest) to <h6> (smallest) and help organize
content.
Paragraphs
Paragraphs are blocks of text. In HTML, we use <p> to write a paragraph.
Links
Links connect one page to another. We use the <a> tag to create links.
Images
To add pictures to a webpage, we use the <img> tag.
Inline Vs Block Elements
Inline elements stay in the same line (e.g., <a>, <span>).
Block elements take the full width and start on a new line (e.g., <div>, <p>).
Iframes
Iframes let you show another webpage inside your webpage using the <iframe> tag.
Unordered & Ordered Lists
Unordered lists are bullet points (<ul>).
Ordered lists are numbered (<ol>).
Description Lists
These lists have a term and a description. We use <dl>, <dt>, and <dd>.
Tables
Tables organize data in rows and columns using <table>, <tr>, <td>, and <th>.
Entities
Entities are special characters like (space) or < (< symbol).
Forms
Forms collect user input using tags like <input>, <textarea>, <select>, and <button>.
Text Decoration
This is used to style text, like bold, italic, or underline using CSS or HTML tags.
Comments
Comments are notes in the code that are not shown on the website. In HTML, we write them like this: <!-
- This is a comment -->.
CSS3 – Basic Introduction and Concepts
Introduction
CSS stands for Cascading Style Sheets. It is used to style and design HTML pages (like colors, fonts,
layout).
Inline, Internal, and External CSS
Inline CSS: written inside an HTML tag.
Internal CSS: written in the <style> tag in the HTML file.
External CSS: written in a separate .css file and linked to the HTML file.
Classes and IDs
Class: used to style many elements. Starts with a . (dot) like .box.
ID: used to style one unique element. Starts with # like #header.
Div and Span
Div: block element used to group content.
Span: inline element used to style small parts of text.
Box Model: Padding, Border, Outline, Margin
Padding: space inside the box (around content).
Border: line around the padding.
Outline: line outside the border.
Margin: space outside the box (between elements).
Background
Used to set background color, image, or pattern.
Floating
Float moves elements to the left or right to make text or other content wrap around them.
Positioning
Controls how an element is placed:
Static (default),
Relative,
Absolute,
Fixed,
Sticky.
Display
Defines how elements are shown:
Block,
Inline,
None (hide),
Flex, etc.
Text Decoration
Used to underline, remove underline, or add lines to text.
Text Align
Aligns text to left, center, right, or justify.
Text Font
Used to set font style, size, and type of text.
Text Effects
Special styles for text like shadows, spacing, or uppercase/lowercase.
Image Sprites
One big image with many small icons. CSS shows only part of it to reduce loading time.
Image Opacity
Changes the transparency of an image (0 = fully transparent, 1 = fully visible).
Styling Lists
CSS can change list style (like bullet type, spacing, color).
Styling Links
Change how links look: color, hover effects, underline, etc.
Gradients
Smooth color transitions (like from blue to white). Can be linear or radial.
2D, 3D Transforms
Move, rotate, scale, or skew elements:
2D: flat movements.
3D: depth effects (like flipping).
Transitions
Smooth change from one style to another (e.g., color changes slowly).
Animations
Create movement using keyframes (e.g., bouncing text, spinning icons).
JavaScript – Easy Introduction to Basics
Introduction
JavaScript is a programming language used to make web pages interactive (like buttons, popups, sliders,
etc.).
Buttons
You can use JavaScript to make buttons work – like showing a message or changing a color when
clicked.
Change HTML Content and Style
JavaScript can change text, images, or styles on a webpage without reloading it.
Variables and Data Types
Variables store data.
Common data types:
o String (text),
o Number,
o Boolean (true/false),
o Array,
o Object.
Objects & Object Constructors
Object is a group of values (like a box of related info).
Constructor is a special function to create many similar objects.
Arrays
Arrays store a list of items, like numbers or names. Example: ["Apple", "Banana", "Mango"]
If and Switch Statements
Used to make decisions:
if: do something if a condition is true.
switch: check multiple conditions in a cleaner way.
For Loops
Repeat something a set number of times. Example: print numbers 1 to 10.
While
Repeats something as long as a condition is true.
Regular Expressions
Patterns used to search or match text (like checking an email format).
Errors
Shows what went wrong in the code. You can also handle errors using try and catch.
setInterval and setTimeout
setTimeout: do something once after a delay.
setInterval: do something again and again at set times.
Window and Screen
Used to get information about the browser window and user's screen size.
Alert Boxes
Shows a popup message to the user. Example: alert("Welcome!")
Cookies
Small files stored in the browser to remember user info (like login or preferences).
jQuery – Simple Introduction to Features
Introduction and Loading jQuery
jQuery is a JavaScript library that makes it easier to do common tasks (like animations, events, and
AJAX).
You load jQuery by adding a link to it in your HTML file.
Select HTML Elements
You can use jQuery to select elements (like text, buttons, images) and do something with them.
Example: $("p") selects all paragraphs.
Respond to Events
You can tell jQuery to do something when an event happens, like:
Button clicked
Mouse moved
Key pressed
Change HTML Content and Attributes
jQuery can change text, HTML tags, or image links quickly using simple commands.
Change Styling
You can use jQuery to change CSS styles like color, size, or background.
jQuery Effects
jQuery can add cool effects like:
Hide / Show
Fade In / Fade Out
Slide Up / Slide Down
AJAX
AJAX is used to load data from a server without refreshing the page. jQuery makes AJAX much
easier to use.
jQuery UI – Extra Tools and Widgets
Introduction
jQuery UI is a collection of user interface tools (like buttons, sliders, date pickers) built on jQuery.
Draggable and Droppable
Draggable: Let users drag an element using the mouse.
Droppable: Let users drop that element into another area.
Resizable
Allows users to change the size of an element (like a box).
Selectable
Lets users click and select multiple items (like a list).
Sortable
Lets users drag and change the order of items.
Accordion
Shows and hides content in a foldable menu style.
Autocomplete
Suggests words as the user types (like in search boxes).
Button
Improves buttons with better styles and effects.
Date Picker
Shows a calendar to pick a date.
Dialog
Creates a popup box (like alerts or custom messages).
Menu
Creates nice-looking menus with sub-items.
Progress Bar
Shows progress (like file upload or loading) with a moving bar.
Slider
Creates a sliding bar to choose a value.
Spinner, Tabs, and Tooltips
Spinner: lets users pick a number by clicking up/down arrows.
Tabs: splits content into tabbed sections.
Tooltips: shows small messages when hovering over something.
Bootstrap – Simple Introduction to Components
Introduction
Bootstrap is a free tool (a CSS and JS framework) that helps you build responsive and stylish websites
easily.
Grid System
It divides the page into rows and columns, so you can organize content neatly. It adjusts layout
automatically for mobile, tablet, and desktop.
Typography
Bootstrap gives clean, stylish text styles like headings, paragraphs, lists, and more.
Tables
You can create neat, styled tables with borders, stripes, and hover effects.
Forms
Bootstrap makes it easy to design nice-looking forms (inputs, checkboxes, labels, etc.).
Buttons
It provides pre-styled buttons in different colors and sizes, ready to use.
Images
You can make images responsive, round, or add borders using Bootstrap classes.
Nav Tabs & Nav Pills
Used to create tab-style or pill-style navigation menus to switch between sections.
Navbars
A navigation bar at the top of the page, often used for menus or logos.
Pagination
Adds page numbers to navigate between multiple pages (like in blogs or search results).
Jumbotron
A big box used to highlight important content like a welcome message or heading.
Thumbnails
Used to display small preview images with captions and borders.
Dropdown Menus
Menus that expand when clicked, showing more options (like a settings menu).
Modals
Popup boxes that appear on top of the page to show messages, forms, or content.
Scrollspy
Auto-updates the navigation menu when you scroll through the page sections.
Tabs
Switch between different content sections using tabbed navigation.
Tooltips
Show a small message when you hover over an element (like a hint).
Popovers
Like tooltips but can show more content, such as titles or buttons.
Alerts
Show message boxes for success, warning, error, or info.
Button Plugin
Adds extra behavior to buttons like toggle (on/off switch).
Collapse Plugin
Shows and hides content when a button is clicked (used in FAQs or menus).
Carousels
A slideshow for images or content that slides automatically or with buttons.
Affix Plugin
Helps an element (like a menu) stick to the top of the screen while scrolling
