Skip to main content
UploadLanguage (EN)Support
BusinessMobileSocial MediaMarketingTechnologyArt & PhotosCareerDesignEducationPresentations & Public SpeakingGovernment & NonprofitHealthcareInternetLawLeadership & ManagementAutomotiveEngineeringSoftwareRecruiting & HRRetailSalesServicesScienceSmall Business & EntrepreneurshipFoodEnvironmentEconomy & FinanceData & AnalyticsInvestor RelationsSportsSpiritualNews & PoliticsTravelSelf ImprovementReal EstateEntertainment & HumorHealth & MedicineDevices & HardwareLifestyle
Sri Ramakrishna College of Arts & Science, profile picture
Uploaded bySri Ramakrishna College of Arts & Science
PPTX, PDF59 views

Full Stack Development - HTML & CSS - Unit 1.pptx

Full Stack Web Development - HTML & CSS

Technology◦
Related topics:
Full-Stack Development• Front-End•Back-End Development•
Download to read offline
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 • Fundamentals: Introduction, Syntax & Document Structure. • Text Formatting: Logical vs. Physical formatting tags. • Content Elements: Lists (OL, UL, DL), Links & Anchors, Images & Forms. • Layouts: Marquee element, Div & Span tags. CSS Styling Module • Core CSS: Selectors (Simple, ID, Class, Universal, Grouping) & Properties. • Box Model: Borders, Margins, and Padding with horizontal centering. • Typography & Visuals: CSS Fonts, Tables & Background Images (Linear & Radial Gradients).
What is Full Stack Development? Definition & Concept Full Stack Development refers to developing both client-side (Front-end) and server-side (Back-end) portions of web applications. Full Stack Web Developers have the ability to design complete web applications and websites end-to-end. Core Responsibilities • UI/UX Design: Client-side scripts & responsive layouts. • Server Logic: API construction and backend processing. • Database & Deployment: Data storage, query execution, and debugging.
Full Stack Technology Ecosystem Front-End • HTML / CSS • JavaScript • React.js / AngularJS • Bootstrap / SASS Back-End • Node.js / Express • PHP / Python • Java / C++ • Ruby on Rails Database Layer • MongoDB (NoSQL) • MySQL (Relational) • Oracle DB • SQL Server
Front-end Languages & Frameworks Languages HTML: HyperText Markup Language defining webpage structure. CSS: Simplifies presentation independent of HTML. JavaScript: Scripting language creating dynamic interactions. AngularJS An open-source JavaScript front-end framework primarily used to develop Single Page Applications (SPAs). Extends HTML with custom Directives and two- way data binding. React.js A declarative, efficient, and flexible component- based view library built and maintained by Facebook. Focuses exclusively on the view layer of modern web applications.
Front-end Libraries & Preprocessors Bootstrap Free, open-source mobile-first toolkit for building responsive websites quickly with built- in grid systems and UI components. jQuery Lightweight JavaScript library simplifying DOM traversing, event handling, animations, and cross-browser Ajax interactions. SASS Mature and reliable CSS extension language adding powerful features like variables, nesting, inheritance, and mixins.
Back-end Technologies & Database Systems Server-Side Languages • PHP: Executed on server-side specifically for dynamic web applications. • Node.js: Fast asynchronous JavaScript runtime for backend APIs. • Java & C++: Highly scalable general-purpose enterprise engines. Database Management Systems • SQL / MySQL / Oracle: Relational systems storing tabular data using schemas and joins. • MongoDB: NoSQL document-oriented database storing flexible JSON-like records without rigid schemas.
HTML Basics & Core Concepts HyperText Markup Language Basic HTML Example </div> Core Standard: Over 95% of all global websites rely on HTML 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 • Tag: The actual keyword inside angle brackets e.g. or . • Element: The complete unit including opening tag, content, and closing tag: HTML Attributes Special keywords inside an opening tag providing additional properties formatted as name="value". p p tagname attribute_name "attribute_value" tagname a href "https://example.com" target "_blank" a
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 () Used when item order matters (processes, rankings). • type: 1, A, a, I, i • start: start="5" • reversed: counts downward Unordered Lists () Used when item sequence is flexible (menus, features). • disc: default solid bullet • circle: hollow outline circle • square: solid filled square Description Lists () Displays term and definition pairs. • : Definition term. • : Term details/description.
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 • Unvisited Link: Blue & Underlined • Visited Link: Purple & Underlined • Active Link: Red & Underlined href: Specifies destination URL. target="_blank": Opens link in a new browser tab. mailto: href="mailto:user@domain.com" tel: href="tel:+1234567890" 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 Creates scrolling text or media across the screen horizontally or vertically. Core Attributes • direction: left, right, up, down • loop: specifies movement repetitions (default: infinite) • height / width: dimensions in px or % • hspace / vspace: horizontal & vertical margin spacing marquee direction "left" bgcolor "#1e293b" marquee
HTML Images & Form Elements HTML Images () Embeds images using key attributes: • src: image file path or URL • alt: accessible alt text description • width / height: element dimensions HTML Forms () Collects user inputs using controls: • • , , • img src "photo.jpg" alt "Profile" width "300"
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 Styles applied directly inside opening HTML tag using style="" attribute. Internal CSS Defined inside a </div> tag within the section. External CSS Styles written in a separate .css file linked 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 Centering with Margin Auto Feature Margin Padding Space Location Outer space outside border Inner space inside border Background Transparent (unaffected) Takes element background Special Values Supports auto & negative values No auto or negative values .centered-box width 50 % margin 0 auto /* Centers horizontally */ padding 15px /* Inner content room */
CSS Borders & Text Styling Properties CSS Borders Defines element outlines using thickness, style, and color. • Styles: solid, dashed, dotted, double Text Properties • color / text-align: center, left, justify • text-decoration: none, underline, line-through • text-transform: uppercase, lowercase, capitalize • line-height / letter-spacing / word-spacing 2px solid #06b6d4
CSS List & Table Properties List Properties • list-style-type: square, circle, upper-roman • list-style-image: url('bullet.png') • list-style-position: inside, outside Table Formatting table border-collapse collapse /* Merges cell borders */ width 100 % th, td padding 10px text-align center caption caption-side bottom
CSS Backgrounds & Image Gradients Background Image Properties • background-image: url('bg.jpg') • background-repeat: no-repeat, repeat-x • background-size: cover, contain • background-attachment: fixed, scroll CSS Color Gradients • linear-gradient(): Smooth color transitions along a straight axis. • radial-gradient(): Radial color fill expanding from center to edge. linear-gradient(135deg, #06b6d4, #3b82f6)
Basics of Web Development (HTML & CSS) Full Stack Development Course Instructed by Dr. N. Juber Rahman, AP, SRCAS, CBE