Scribd
Upload
9 views

HTML, CSS, BS

Uploaded by

soundaryaveni.consensus
Copyright
© © All Rights Reserved
Available Formats
Download as DOCX, PDF, TXT or read online on Scribd
9 views

HTML, CSS, BS

Uploaded by

soundaryaveni.consensus
Copyright
© © All Rights Reserved
Available Formats
Download as DOCX, PDF, TXT or read online on Scribd
You are on page 1/ 4

Day 1: Introduction to HTML5 & Basic Tags

● Topic:
○ Structure,
○ Text,
○ Lists,
○ Links,
○ Images,
○ Tables

● Sub- Topic:
○ Structure - How web works, page structure, what's a tag, attribute (html,
head, body), Adding Comments
○ Text - Headings, Bold, Italic, Superscript, Subscript, Line Breaks, Hr,
Address, Ins, Del Abbr, Cite
○ Lists - Ordered, Unordered, Definition lists, nested,
○ Links - How to form link, absolute, relative, new window, footnote (same
page)
○ Images - add images, auto, height and width, positioning images (left
heading, right), types (png, svg)
○ Tables - Structure, Table Head, Rows, Cols, Rowspan, Colspan, Table
Foot, Border, Background

● Mini Project:
○ Creating a students portfolio and showcase skills, projects, and
experiences to potential employers and academic excellence.

Day 2: Forms, Media Elements


● Topic:
○ Forms,
○ Audio,
○ Video,
○ HTML 5 tags,
○ Markup Elements

● Sub- Topic:
○ Forms - whats a form?, form attributes, form controls (input type =
Text,Password, Select, Radio, Checkbox, Hidden), textarea, Multi-Select,
File Input, Button - Submit, Label, Fieldset,
○ HTML5: date, email, tele, url input, search, audio, video
○ Basic HTML 5 validation
○ Markup - ID, Class, Block Elements, Inline Elements, Iframe, Meta

● Mini Project:
○ Create an interactive webpage for a fictional online music store
using modern HTML5 features.

Day 3: Introduction to CSS


● Topic:
○ Introduction to CSS,
○ Color,
○ Text,
○ Boxes
○ Lists,
○ Tables,
○ Forms
○ Layouts
● Sub- Topic:
○ Introduction - Syntax, Selectors, Basic Styles, Inline, Internal, External,
Styling By Id And Class
○ Color - Colors, Rgb, Hex, Background Color, Text Color
○ Text - Alignment, Decoration, Transformation
○ Boxes - Margin, Padding
○ List - Ordered, Unordered, Different List Item Markers And Position
○ Tables - Borders, Alignment, Padding And Color
○ Forms - Styling Input Fields, Padding, Border, Color
○ Layouts - Flex, Grid

● Mini Project:
○ Create an online bookstore using CSS and add all the elements.
Day 4: Introduction to Bootstrap
● Topic:
○ Grid,
○ Navbar,
○ Card,
○ Forms,
○ Tables
○ Responsive Web Page Development -
○ Viewport,
○ resizing images

● Sub- Topic:
○ Grid, Navbar, Card
○ Forms - Forms, Custom Forms, Input Groups, Button Groups
○ Table, Form, Dropdown, Collapse
○ Flexible layouts, Media queries, Responsive Images

● Mini Project:
Design and implement a signup form for an eCommerce platform. The form
should include essential fields for new users to register and create an account.
Ensure the form is user-friendly, responsive, and includes appropriate validation.
Capstone Project

A Healthy Lifestyle and Nutrition App project,

1- HTML Structure:

● Use semantic HTML5 elements (<header>, <nav>, <main>, <footer>) for clear
structure and accessibility.
● Structure content with appropriate headings (<h1> to <h6>), paragraphs (<p>),
lists (<ul>, <ol>, <li>), and forms (<form>, <input>, <button>).

2- Implement custom CSS for consistent styling across the app.


Use classes and IDs effectively, avoiding inline styles, to maintain clean and modular
code.
Utilize CSS for layout adjustments, colors, fonts, and responsive design.

3- Leverage Bootstrap's grid system (container, row, col-*) for responsive layout
design.
Use Bootstrap components (like navigation bars, cards, forms, buttons) to speed up
development and ensure consistent styling.
Customize Bootstrap components using utility classes or custom CSS to match the
app's design theme.

4- Design intuitive user interfaces with clear navigation (<nav>), interactive


elements (<button>, <input>), and readable typography.
Ensure accessibility by using proper contrast for text and background colors, and
provide alternative text for images (alt attribute).

5- Organize CSS and HTML into modular components for easier maintenance and
scalability.
Plan for future enhancements such as backend integration (API endpoints, database
setup) and advanced features (real-time updates, data visualization).

You might also like