Scribd
Upload
66 views

Web Design Syllabus

The document outlines a web design syllabus covering topics such as mockup design, HTML5, CSS, CSS3, JavaScript, jQuery, Bootstrap, React, and web hosting. Key areas include creating mockups, learning HTML elements and CSS properties, and building responsive websites using frameworks like Bootstrap and projects like a news website.

Uploaded by

Robin
Copyright
© © All Rights Reserved
Available Formats
Download as PDF, TXT or read online on Scribd
66 views

Web Design Syllabus

The document outlines a web design syllabus covering topics such as mockup design, HTML5, CSS, CSS3, JavaScript, jQuery, Bootstrap, React, and web hosting. Key areas include creating mockups, learning HTML elements and CSS properties, and building responsive websites using frameworks like Bootstrap and projects like a news website.

Uploaded by

Robin
Copyright
© © All Rights Reserved
Available Formats
Download as PDF, TXT or read online on Scribd
You are on page 1/ 13

Web Design Syllabus

# Mockup Designing [PS/Figma]


✔ Basic Fundamentals of Photoshop
✔ Learning Essentials tools for web design
✔ Create Dimension and size of the website page design
✔ Wireframe Concept Design
✔ Psychology of Color on Web
✔ Typography, Heading & Paragraph Option
✔ Using shapes and effects for Mockup Design
✔ Designing various elements for Web/Mobile
✔ Mastering elements using different options
✔ Using some important extensions for Web/Mobile design
✔ Creating GIF Image
✔ Project Work (Designing Mockup)

# HTML5
✔ HTML Elements
✔ HTML Attributes
✔ HTML Headings
✔ Block Elements
● <p>, <h1>, <h2>, <h3>, <h4>, <h5>, <h6>, <ul>, <ol>, <dl>, <pre>, <hr
/>, <blockquote>, and <address>
✔ Inline Elements
● <b>, <i>, <u>, <em>, <strong>, <sup>, <sub>, <big>, <small>, <li>,
<ins>, <del>, <code>, <cite>, <dfn>, <kbd>, and <var>
✔ HTML Text Formatting
● <b> - Bold text
● <strong> - Important text
● <i> - Italic text
● <em> - Emphasized text
● <mark> - Marked text
● <small> - Smaller text
● <del> - Deleted text
● <ins> - Inserted text
● <sub> - Subscript text
● <sup> - Superscript text
✔ HTML Comments
✔ HTML Images
✔ HTML Anchor
● Text Links
● Email Links
● Image Links
● Phone Links
✔ HTML Lists
● Ordered HTML
● Unordered HTML
● Definition Lists
✔ HTML tables
✔ HTML Forms
✔ HTML Meta Tags
● keywords
● description
● author
● revised
● charset
● refresh
● robots
✔ HTML iframes
✔ HTML Entities
✔ HTML Symbols
✔ HTML5 Audio & Video
✔ HTML5 Web Storage
✔ HTML5 Canvas
✔ HTML5 SVG
✔ HTML5 Drag & drop
✔ HTML5 Geolocation
✔ HTML5 Semantics

# CSS
✔ CSS Introduction
✔ CSS Syntax
✔ Inline CSS
✔ Internal CSS
✔ External CSS
✔ CSS Selector
✔ CSS Comments
✔ CSS Background
✔ CSS Border
✔ CSS Outline
✔ CSS Float
✔ CSS Clear
✔ CSS Display
✔ CSS Font
✔ CSS Line Height
✔ CSS Margin
✔ CSS Padding
✔ CSS Overflow
✔ CSS Opacity
✔ CSS Position
✔ CSS Pseudo Class & Element
✔ CSS Vertical Align
✔ CSS White Space
✔ CSS Word Wrap
✔ CSS Outline
✔ CSS Visibility
✔ CSS Counter

# CSS3
✔ CSS3 Rounded Corner
✔ CSS3 Border Images
✔ CSS3 Multi Background
✔ CSS3 Color
✔ CSS3 Gradients
✔ CSS3 Shadow
✔ CSS3 Text
✔ CSS3 Web font
✔ CSS3 2d transform
✔ CSS3 3d transform
✔ CSS3 Animation
✔ CSS3 Multi columns
✔ CSS3 User Interface
✔ CSS3 Box Sizing
✔ CSS Variables
✔ CSS3 Image Reflection
✔ CSS3 object-fit
✔ CSS3 Viewport
✔ CSS3 Media Queries Responsive

# CSS Flexbox
✔ flex-direction
✔ flex-wrap
✔ flex-flow
✔ justify-content
✔ align-items
✔ align-content
✔ order
✔ flex-grow
✔ flex-shrink
✔ flex-basis
✔ flex
✔ align-self

# CSS Grid Module


✔ grid-column-gap
✔ grid-row-gap
✔ grid-gap
✔ grid-template-columns
✔ grid-template-rows
✔ grid-template-areas
✔ grid-column-start
✔ grid-column-end
✔ grid-row-start
✔ grid-row-end
✔ justify-items
✔ align-items
✔ align-content

# Sass / SCSS
✔ Preprocessing
✔ Variables
✔ Nesting
✔ Partials
✔ Import
✔ Mixins
✔ Inheritance
✔ Operators

Note: Once the above topics are covered, the students will make a project on:
News Portal Website
# JavaScript
✔ Data Types
✔ Variables and Constant
✔ Operators
✔ Conditionals, loop
✔ Functions
✔ Array and Objects
✔ Document Object Model

# jQuery
✔ jQuery Syntax
✔ jQuery Selectors
✔ jQuery Events
✔ jQuery Effects
✔ jQuery Hide/Show
✔ jQuery Fade
✔ jQuery Slide
✔ jQuery Add
✔ jQuery Remove
✔ jQuery CSS Classes
✔ jQuery Animate
✔ jQuery stop ()
✔ jQuery Callback
✔ jQuery Chaining
# Bootstrap 4
✔ Content
✔ Reboot
✔ Typography
✔ Code
✔ Images
✔ Tables
✔ Figures
✔ Components
✔ Alerts
✔ Badge
✔ Breadcrumb
✔ Buttons
✔ Button group
✔ Card
✔ Carousel
✔ Collapse
✔ Dropdowns
✔ Forms
✔ Input group
✔ Jumbotron
✔ List group
✔ Modal
✔ Navs
✔ Navbar
✔ Pagination
✔ Popovers
✔ Progress
✔ Scrollspy
✔ Tooltips
✔ Utilities
✔ Utilities
✔ Utilities
✔ Borders
✔ Clearfix
✔ Close icon
✔ Colors
✔ Display
✔ Embed
✔ Flex
✔ Float
✔ Image replacement
✔ Position
✔ Screenreaders
✔ Shadows
✔ Sizing
✔ Spacing
✔ Text
✔ Vertical align
✔ Visibility

Once the above topics are covered, the students will make a project on:
Travel & Tours Website
# Bootstrap 5
✔ Breakpoints
✔ Containers
✔ Grid
✔ Columns
✔ Gutters
✔ Utilities
✔ Z-index
✔ Reboot
✔ Typography
✔ Images
✔ Tables
✔ Figures
✔ Overview
✔ Form control
✔ Select
✔ Checks & radios
✔ Range
✔ Input group
✔ Floating labels
✔ Layout
✔ Validation
✔ Accordion
✔ Alerts
✔ Badge
✔ Breadcrumb
✔ Buttons
✔ Button group
✔ Card
✔ Carousel
✔ Close button
✔ Collapse
✔ Dropdowns
✔ List group
✔ Modal
✔ Navs & tabs
✔ Navbar
✔ Offcanvas
✔ Pagination
✔ Popovers
✔ Progress
✔ Scrollspy
✔ Spinners
✔ Toasts
✔ Tooltips
✔ Clearfix
✔ Colored links
✔ Ratio
✔ Position
✔ Visually hidden
✔ Stretched link
✔ Text truncation
✔ API
✔ Background
✔ Borders
✔ Colors
✔ Display
✔ Flex
✔ Float
✔ Interactions
✔ Overflow
✔ Position
✔ Shadows
✔ Sizing
✔ Spacing
✔ Text
✔ Vertical align
✔ Visibility
✔ Approach
✔ Icons

Once the above topics are covered, the students will make a project on:
Corporate Website

# React
✔ React Get Started
✔ React ES6
✔ React Render HTML
✔ React JSX
✔ React Components
✔ React Props
✔ React State
✔ React Lifecycle
✔ React Events
✔ React router
✔ React Lifting State Up
✔ React Forms
✔ React CSS
✔ React Hook

Once the above topics are covered, the students will make a project on:
Portfolio Website

# Domain Registration / Web Hosting


✔ Domain Registration
✔ Web Hosting
✔ GitHub
✔ Tips for a job interview

As per the Institute Rules, four of the following projects will be done by the student
themselves! For Final Project
Admin Dashboard
Travel & Tours Website
E-commerce Website
Corporate Website
News Portal Website

You might also like