Web Design

Web Design Course Structure

Module1. Designing User Interface of a Web page

• Tools and Techniques
• Panels and workspace
• Layers- Layer styles, Layer effects & Adjustment layers
• Creating user interfaces of websites
• Advanced Image Color Correction techniques
• Typography and Type Effects
• Digital and Matt Paintings
• Creating Layout for Websites and Landing pages
• Saving and Optimising image Files for Web
• Creating 3D effects
• Color Management, File Formats, and Workflow

Module 2. Core Web Functionality

• HTML5/CSS3 with various code-editors like Adobe Dreamweaver etc.
• Introduction to various HTML elements and attributes
• Application of HTML Lists and Tables
• HTML Graphics- Canvas and SVG
• CSS Concepts- Grid, Flexbox, Animations, Selectors, Position, Pseudo-class etc.
• Bootstrap functionality and integration to the webpage
• JavaScript concepts and creative applications in web development
• Form validations using HTML5 and JavaScript
• Introduction to JQuery and its various applications
• AJAX Architecture- Asynchronously sending request and the response
• Creating and Testing Responsive design for devices of different sizes
• Web Hosting and Domain- Setup and maintenance
• Web 3.0 standards
• Testing and Maintaining a website
• FTP controls

Module 3. WordPress

• Installation and setup of WordPress on Web servers and local server
• Theme installation and intro. to various settings
• Introduction to the functionality of the Dashboard
• Plugin Installation and applications
• Creating/Editing articles and pages
• Introduction to File Architecture and basic editing to stylesheets

Portfolio Design

Photoshop & XD

• Designing for Web UI
• Web and mobile Template designs
• Web Design inspirations
• Working for UI assets- icons and Symbols
• Working on various kinds of Navigation systems
• Advanced Colour correction techniques
• Image manipulations and picture retouching
• Working on PSF and XD formats
• PSD to HTML conversion

HTML & CSS

• Tribute Page ( Tribute a Famous Personality)
• You can use paragraphs, lists, links, images with
• CSS to give it a decent look.
• Web Page including Form
• Applying text field, checkbox, radio button, date,
• and other important elements in a single form.
• Parallax website
• Landing Page
• Restaurant or Education institute Website
• An Event or a Conference Page for a Workshop
• E-mailer Page
• Photography Portfolio Page
• Personal Webpage
• Technical Documentation Page

BoostStrap

• Design Like a TV channel site (Navigation)
• Fund management system (Navigation)
• Hospital administration system (Navigation)
• Conference Registration and Management.
• (Navigation)
• Learning Management System (Navigation)
• InterCollege Networking. (Navigation)

JAVASCRIPT

• BUILD A JAVASCRIPT CLOCK
• BUILD A JAVASCRIPT TIP CALCULATOR
• BUILD A JAVASCRIPT ANIMATED NAVIGATION
• TOGGLE
• BUILD A JAVASCRIPT MAP
• BUILD A JAVASCRIPT MOUSEOVER ELEMENT
• BUILD A JAVASCRIPT LOGIN AUTHENTICATION
• BUILD A JAVASCRIPT TO-DO LIST
• BUILD A JAVASCRIPT QUIZ
• CREATE SOME SLIDING JAVASCRIPT DRAWERS.

WordPress

• Creating a Personal Blog Page with WordPress
• Creating a Designer’s Portfolio with WordPress
• Converting a WP Fitness theme in an actual site
• Landing page design for an education company
• Using conversion extensions in a WordPress page

SOFTWARE COVERED IN WEB DESIGN Adobe Photoshop Adobe XD HTML4/ HTML5 CSS2/CSS3 Adobe Dreamweaver Bootstrap Javascript JQuery and JSON Angular WordPress FTP, Domain binding, CPanel