Acrosys Technologies

HTML, CSS & Basic JavaScript Internship

Duration: 30 Days
Level: Beginner
Mode: Theory + Practical + Mini Tasks
Technologies: HTML5, CSS3, Responsive Design & Basic JavaScript

Week 1: HTML Fundamentals

What is a website?
Frontend vs Backend
Role of HTML, CSS and JavaScript
Tools required:
- VS Code
- Web Browser
- Live Server
Creating your first webpage

Practical: Install VS Code, create index.html and run your first webpage in the browser.

<!DOCTYPE html>
<html>, <head>, <title>, <body>
Headings and paragraphs
Comments in HTML

Practical: Create a webpage with headings, paragraphs, title and HTML comments.

Bold and italic text
Underline
Line break
Horizontal line
Superscript and subscript
Strong and emphasis tags

Practical: Create a formatted text webpage using different HTML text elements.

Anchor tag
Internal links
External links
Image tag
Image attributes
Alt text

Practical: Create a webpage containing navigation links and images.

Ordered lists
Unordered lists
Nested lists
Table structure
Rows and columns
Table headings

Practical: Create a student marks table and a restaurant menu list.

Form tag
Input types
Labels
Textarea
Buttons
Required fields

Practical: Create a student registration form using HTML.

header
nav
section
article
footer
Why semantic tags matter
Basic page layout using HTML

Practical: Build a complete webpage structure using semantic HTML elements.

Week 2: CSS Fundamentals

What is CSS?
Inline CSS
Internal CSS
External CSS
CSS syntax
Selectors basics

Practical: Apply CSS using inline, internal and external stylesheets.

Text colors
Background colors
Background images
Border styles
Border radius

Practical: Design a colorful profile card using CSS.

Font family
Font size
Font weight
Text alignment
Text transform
Line height
Letter spacing

Practical: Design and style a professional article webpage.

Content area
Padding
Border
Margin
Width and height
Box sizing

Practical: Create different UI boxes demonstrating the CSS box model.

Block elements
Inline elements
Inline-block
Static position
Relative position
Absolute position
Fixed position
Sticky position

Practical: Create a sticky header and positioned UI elements.

Flex container
Flex direction
Justify content
Align items
Flex wrap
Gap

Practical: Build a responsive card layout using Flexbox.

Project: Personal Profile Page

Features:

Name and profile photo
About section
Skills list
Contact details
CSS styling
Responsive card design

Practical Project: Build a complete personal profile webpage using HTML and CSS.

Week 3: Advanced CSS & Responsive Design

Grid container
Rows and columns
Grid gap
Grid template columns
Grid layout design

Practical: Create a responsive image gallery using CSS Grid.

What is responsive design?
Mobile-first approach
Media queries
Responsive widths
Mobile-friendly layouts

Practical: Convert the previous profile page into a fully responsive webpage.

Horizontal navigation
Navigation links
Hover effects
Active link styling
Responsive navigation concepts

Practical: Create a responsive navigation bar with hover effects.

Button styling
Cards
Box shadows
Border radius
Hover transitions
UI spacing

Practical: Design professional product/service cards.

Transition basics
Transform
Scale
Rotate
Translate
Keyframe animations

Practical: Create animated buttons, cards and UI elements.

Hero section
Banner design
Call-to-action buttons
Content sections
Footer design

Practical: Build a modern company landing page.

Project: Responsive Company Landing Page

Features:

Header
Navigation
Hero section
About section
Services section
Contact section
Footer
Responsive design

Practical Project: Build and present a complete responsive company website.

Week 4: Basic JavaScript

What is JavaScript?
Why JavaScript is used
Internal JavaScript
External JavaScript
console.log()
JavaScript comments

Practical: Add JavaScript to a webpage and display messages in the browser console.

var
let
const
Numbers
Strings
Booleans
Basic operators

Practical: Create simple calculations and data type examples using JavaScript.

if statement
if-else
else-if
Comparison operators
Logical operators

Practical: Build an age checker and student pass/fail program.

for loop
while loop
Loop conditions
Loop examples

Practical: Print numbers and generate multiplication tables using loops.

Function declaration
Function parameters
Return values
Calling functions

Practical: Create addition, subtraction and calculation functions.

What is DOM?
getElementById()
querySelector()
innerHTML
Changing text
Changing styles

Practical: Change webpage content when a button is clicked.

onclick
onmouseover
Form events
Button click events
Event handling

Practical: Create a color changer and button alert interaction.

Checking empty fields
Required fields
Simple JavaScript validation
Error messages
User feedback

Practical: Validate a login or student registration form using JavaScript.

Project: Interactive Student Registration / Portfolio Website

Features:

HTML structure
CSS styling
Responsive layout
JavaScript interaction
DOM manipulation
Form validation
Interactive buttons

Final Practical Project: Build, test and present a complete interactive responsive website.

Suggested Practical Projects

Personal Profile Website
Student Registration Form
Responsive Image Gallery
Product Card Design
Responsive Navigation Bar
Company Landing Page
Portfolio Website
Interactive Calculator
JavaScript Color Changer
Interactive Student Registration Website

Assessment Structure

Assessment	Weightage
Daily practical assignments	15%
HTML fundamentals practical	10%
CSS design project	15%
Responsive website project	15%
JavaScript practical	15%
Final interactive website project	25%
Attendance and presentation	5%