Subject : Web design

Tentative Syllabus
Module 1 : Frontend Fundamentals
Introduction
• What is Server? Discuss LAMP/WAMP/XAMP?
• Difference between global server and local server?
• Configuration of local server.
• Role of http over the network/Internet.
• Terminologies
• Web client
• Web server
• Web browser
• Webpage
• Website
• Discuss Client server architecture
• Idea of Domain Name Resolution

Module 2 : Introduction to HTML

HTML Basics
• Understand the structure of a HTML page.
• Understanding HTML Elements.
• Creating and saving first web page.
• Defining the title on webpage.
• Showing the icon on webpage.
• Use of HTML Attributes.
• Syntax to use attribute in HTML.
• Using background image.
• Defining marquee in HTML
• Empty HTML element.
• Creating horizontal line.
Text and link on web page
• Discussion on font formatting
• Creating Headings in HTML.
• Creating and styling Paragraphs.
• Using different color coding.
• Comments in HTML
• Linking webpages using hyperlink
• Creating different types of hyperlink
• Creating image on webpage.
HTML Tables and basic layout
• Showing data in tabular form.
• Creating tabular data in different format.
• Discussion on different properties of table and its impact
• Formatting on table.
• Initial layout management of website using table.
• Discussion on div and span.
HTML Lists
• Creating list on web page to show the details of product.
• Creating different types of List.
• Properties of numbered list.
• Properties of bulleted list
• Creating HTML description Lists
HTML Image Maps
• The Image
• The Map
• The Areas
HTML iframe
• What is the use of Iframe?
• Discussion on frameset and iframe.
• Setting height and width of iframe
• Removing the Border from iframe
HTML Entities
• HTML Symbols
• HTML Encoding (Character Sets)
HTML Forms
• Discussion on form
• Attribute related to form
• Method of posting form on to server.
• Discussion on binary data posting
• Creating textbox, checkbox, radio button etc. control.
• Differentiation between checkbox, radio button and drop down list.
• Discussion on taking long text from user like feedback, address etc.

Module 3 : HTML5
HTML5 Basics
• Introduction of HTML5.
• Discussion on different version of HTML5.
 • Document type declaration in HTML5.
• Comparing HTML5 with HTML.
• Creating different form controls introduce in HTML5.
• Discussion on different attribute introduce in HTML5.
Multimedia and graphics on webpage
• Creating of audio control on webpage.
• Creating video control on webpage.
• Discussion on plug-in
• Discussion of object, embed element.
• Embedding YouTube videos.

Module 4 : CSS
CSS Basics
• Introduction of CSS.
• Advantage of using CSS over the HTML.
• Properties and its value in CSS.
• Ways to use CSS.
• Why external CSS.
• Comment in CSS.
• Selectors in CSS
• Discussion on selector.
• Different type of selector
• Tag selector
• Defining and using multi selector.
• Defining and using class selector
• Multiple classes on particular tag.
• Defining and using id selector.
• Defining and using universal selector.
• Why universal selector.
• Defining and using attribute selector.
• Use and advantage of using pseudo-class.
• Defining nested selector.
• Discussion on Pseudo element
• Text formatting using CSS
• Defining the color, size of text.
• Discussion on different measurement unit.
• Removing underline from hyperlink.
• Use of text transformation.
• Creating text shadow.
• Page formatting using CSS
• Defining the background.
• Managing image in background.
 • Managing layout of page using position.
• Differentiate absolute, relative and fixed layout.
• Defining margin and padding.
• Setting individual margin and padding on page.
• Create transparent box.
• Table formatting using CSS
• Defining the separate and collapse border.
• Managing image in background.
• Generate different structure of table.
• Create table striped.
• Border formatting using CSS
• Defining border width
• Define the individual border width.
• Defining different kind of border style
• Define the individual border style.
• Defining border color
• Define the individual border color.
• Defining the radius of border.
• List formatting
• Setting list style
• Showing image as an list
• Positioning list.
• Creating navigation bar.
• Generating different view of navigation bar.
• Cursor
• Setting different kind of mouse pointer.
• Defines the double headed arrow.
• Defining the four headed arrow.

Module 5 : CSS3
• CSS3 formatting
• Create sections with rounded corner.
• Defines the image on border.
• Defines the background.
• Creating and managing different kind of gradients.
• Creating shadow on text and box.
• Defines skew, scale, move and rotate elements.

Module 6 : Responsive design using Bootstrap

• Introduction of bootstrap
• Introduction of bootstrap.
 • Discussion of responsive websites.
• Discussion on different size of screen.
• Difference between bootstrap3 and bootstrap4.
• Discussion on different container and its limitations.
• Ways to use bootstrap.
• Discussion on CDN over downloaded version.
• Layout management in bootstrap
• Managing layout of webpage using bootstrap.
• Differentiate container and container-fluid class.
• Creating and manipulating sections in container.
• Generating responsive text on webpage.
• Text in bootstrap
• Discussion on size of different heading in bootstrap.
• Generating lighter and secondary text in bootstrap.
• Discussion on block quotes, description list, code snippets etc.
• Different text formatting in bootstrap.
• Generating contextual text color and background in bootstrap.
• Showing text on jumbotron.
• Table in bootstrap
• Showing records in tabular format with basic styling.
• Showing striped style on bootstrap table.
• Showing bordered table and also apply hover format.
• Contextual classes on table.
• Generating responsive web site.
• Icons in bootstrap
• Discussion on glyphicon.
• Use of glyphicon over normal text.
• Limitation of glyphicon.
• Showing icons on form controls like user, lock etc.
• Modal in bootstrap
• Understanding modal.
• Create and open modal.
• Different classes used for modal.
• Defining the size of modal.
• Showing login and registration page on modal.
• Image in bootstrap
• Creating responsive image.
• Defining the rounded image.
• Creating circle image.
• Creating thumbnail image.
• Image with caption.
• Creating responsive video with scale to parent element.
• Image with media class.
 • Defining alignment of media object.
• Showing nested media object.
• Button in bootstrap
• Generate different style of button.
• Generate different size of button in bootstrap.
• Mean of large button, small button and block level button.
• Using different state of button in bootstrap.
• Button group in bootstrap
• Creating horizontal button group.
• Horizontal button group with different sizes.
• Creating vertical button group.
• Defining justified button group.
• Nesting button and creating drop down.
• Defining different section in drop down.
• Alert message in bootstrap
• Generating different types of alert message.
• Generating different types of alert message as link.
• Generating different type of alert message with close button.
• Generating different type of alert message with animation.
• Badges in bootstrap
• What do you mean by badges?
• Generating different types of badges.
• Badges with contextual classes.
• Panel and collapsible panel in bootstrap
• What do you mean by panel?
• Panel with heading.
• Panel with footer.
• Create panel group.
• Panel with contextual class.
• Create basic collapsible.
• Create collapsible panel.
• Menu and navigation bar in bootstrap
• Creating menu as tab and pills.
• Differentiating tab and pills.
• Creating tabs as drop down menu.
• Showing horizontal and vertical pills.
• Creating pills with drop down menu.
• Showing centered tabs and pills.
• Creating toggleable tabs.
• Creating dynamic tabs.
• Creating toggleable pills.
• Creating dynamic pills.
• Creating navigation bar.
 • Defining inverted navigation bar.
• Designing navigation bar with drop down menu.
• Aligning menus in navigation bar.
• Creating fixed navigation bar.
• Create collapsing navigation bar in bootstrap.
• Form in bootstrap
• Creating form.
• Discussion on form control default setting.
• Creating form with different layout.
• Discussion on default layout of form.
• Creating text box in bootstrap.
• Taking long string in text area.
• Checkbox and radio button in bootstrap.
• Creating drop down list.
• Grouping input control on form.
• Creating static control on form.
• Using state of control on form.
• Showing text box in different size.
• Showing help text with form controls.
• Carousel in bootstrap
• What do you mean by carousel?
• Creating carousel.
• Discussion of different carousel classes.
• Defining carousel with caption.
• Spinner in bootstrap
• What is spinner?
• Creating and showing spinner on web page.
• Showing colored spinner.
• Creating growing spinner.
• Defining the size of spinner.
• Spinner with button.

Module 7 : Client Side Scripting with JavaScript

• Introduction of JavaScript
• What do you mean by scripting language?
• Differentiate client side scripting and server side scripting.
• Introduction of java script.
• How to use java script?
• First “Hello World” in Java script.
• Discussion on syntax of java script.
• Advantage of loosely typed languages over the strongly typed.
• Basic of java script
• Identifiers in java script.
 • Variable and its scope.
• What is keyword?
• What do you mean by operator?
• Explore typeof operator.
• Discuss Let and const keyword.
• Introduction of control flow statement.
• What do you mean by selection constructs?
• What do you mean by iteration constructs?
• Function in java script
• What do you mean by function?
• Advantage of using function.
• Types of function in java script.
• Creating user defined function.
• Ways to create user defined function.
• Local and global scope of variable.
• What do you mean by strict mode?
• Discussion on built in functions.
• Anonymous function in java script.
• Discuss array function.
• Events in java script
• What is event?
• Different event and its uses in java script.
• Demonstrating click event in java script.
• Demonstrating double click event in java script.
• Demonstrate the code of java script to change image using mouse over and out event.
• Demonstrating change event on drop down list in java script.
• Object in java script
• What do you mean by object?
• Advantages of using object.
• Creating object in java script.
• How bind properties and method in object.
• Accessing member of object.
• Use of this keyword in java script.
• What do you mean by Date object?
• Showing running time on the text box.
• String in java script
• What do you mean by string?
• Finding the length of string.
• Finding sub string from given string.
• Searching string from given string.
• Extracting string in different ways.
• Extracting domain from web address.
• Replacing string in given string.
• Converting string in lower and upper.
 • Joining two strings in java script.
• Removing extra spaces from string.
• Extracting character from given string.
• Conversion from string to array.
• Number in java script
• What do you mean by number?
• Discussion on number and floating point.
• Description on precision of floating point numbers.
• Difference between joining string and adding number.
• What do you mean by NaN and its type?
• Mean by infinity.
• Properties and methods of number.
• Finding minimum value and maximum value.
• Array in java script
• What do you mean by array?
• Creating and accessing array element in java script.
• Role of new keyword in java script.
• Discuss array is object or both are different?
• Array properties and method.
• Adding and removing element in/from an array.
• What do you mean by associative array?
• Converting array into string.
• Join two arrays.
• Shifting array elements.
• Slicing operation on an array.
• Arranging array element in ascending or descending order.
• Type conversion in java script
• What do you mean by type casting?
• How many types of type casting in java script?
• Discuss conversion in java script.
• Form control with JavaScript
• Syntax to accessing form control in java script.
• Showing full name after adding first name and second on text box.
• Demonstrate the events on drop down list.
• Demonstrate the events on radio button.
• Demonstrate the code to check status of radio button(checked/Unchecked)
• Demonstrate the code to check status of checkbox(checked/Unchecked)
• Accessing radio button in java script. Discuss the index of radio button.
• Demonstrate the java script code to create exam portal.

Module 8 : DOM
• Introduction of DOM.
• Discuss DOM over the java script.
• Ways to access HTML element using DOM.
 • Accessing style using DOM.
• Add event listener using DOM.
• Add event handler to an element.
• Remove event listener.
• Create new HTML element using DOM.
• Remove HTML element using DOM.
• Discuss collection object.

Module 9 : Front end design using React JS

Overview
• Introduction of React.
• Discussion on SPA.
• Features of React JS
• Advantages of react
• Limitations of React
Environment setup
• Install global packages
• Add dependencies and plugin
• Run the server
• Create first react app.
Basic of React
• Discussion on local server.
• How does react work?
• Run the server
• Using HTML with react app.
• Discussion on ES6.
React JS Component
• Discussion on render function.
• Component API
• Brief Component life cycle
• What do you mean by State object?
• Demonstrate the ready state object.
• How to use ready state object?
• Changing the state object.
• What is Props?
• Passing data from one to another component.
• Discussion on props in constructor.
• Discuss the term Mixing.
• What do you mean by JSX?
React JS- Component life cycle
• Discussion of life cycle of components.
• Discuss mounting, unmounting and updating.
 • Discussion on Life cycle methods
• Explanation on life cycle
React JS-Events
• What do you mean by event?
• Adding event and specifying event handler.
• Demonstrate example.
• Discuss the use of this keyword.
• Arrow function and bind method.
• Discussion on child events
React JS router
• Install a react router
• Create components
• Add a router
Component inter communication
• Component composition
• Pass data from parent to child
• Pass data from child to parent
React form handling
• Create and render user form with react
• Demonstrate the conditional rendering.
• Discussion on submitting the form.
• Demonstration on validate user input.
• Adding error messages.
• Adding CSS styles with the react app.

Module 10 : Node JS
Introduction
• Foundation
• Introduction to Node JS framework
• Installing node JS
• Using Node JS to execute scripts
• Discuss NPM
• The package.json configuration file
• Global Vs local package installation
Module in Node JS
• What do you mean by Module?
• Discussion on built-in module.
• Creating and using/including own module.
 • Export specific attribute.
HTTP and URL module in Node JS
• Discussion on HTTP module in node.
• Discussion on node JS as server.
• Creating sever using http module.
• Discuss localhost and port no.
• Demonstration on adding http header.
• Discuss the query string and reading it in node.
• Discuss and demonstrate URL module.

Module 11 : MongoDB
• Design Goals, architecture and installation
• What is the need for Non-RDBMS?
• Benefits of using Document based data bases
• Introduction to MongoDB
• History of MongoDB
• Features of MongoDB
• What do you mean by NoSQL Database?
• SQL vs NoSQL
• Advantages of NoSQL
• Discussion on MongoDB over RDBMS
• Advantages of using Mongo DB
• Discussion on Mongo Shell Basic Commands
Installation & Basic on Mongo DB
• Discussion on different Datatypes used in MongoDB
• Installation of Mongo DB
• Demonstration on creating and using database
• Removing database.
• Adding data in database
Collection & documents
• Discussion on Collection and documents
• Creating and removing collection
• Creating documents
• Removing documents
• Updating documents
• Finding documents
• Query Operation
• Protection queries
• Limiting query result
•
Operations in MongoDb
• Why use Modules
• What do you mean by Sorting?
• Discussion & demonstration on Indexing
• Demonstration on advance indexing
• Discussion on Replication
• advantage and disadvantage of replication
• How replication works?
• Need of replication
• Discussion on aggregation
• Discussion on sharding
• Writing the first script
Export
• Discuss Export
• Exporting data from Mongo Db collection to JSON
• Exporting data from Mongo Db collection to CSV
• Creating data backup in Mongo DB
• Restore data in Mongo Db.

Module 12 : Express Framework

• Express Overview
• Installation of express.
• First example.
• Discussion on request and response.
• Discussion on basic routing.
• setting up router
• Route parameter and queries
• Discussion on get and post method
• Express Cookies management
• Scaffolding as MVC.
• Connecting to mongo database
• Performing CRUD operations
• Handling form data
• Handling query parameters
• Error handling
• Using templates
• The MVC Pattern
• Building a front end controller
• Defining routes
• Creating actions
• Configuring express to use handlebars
• Using REST reading POST data
• Adding middleware
• Data sources.
CRUD Operations
• Understanding of CRUD operations
• Fundamentals usages of CRUD
• Read/write operations with CRUD

Module 13 : Web Security - Client-side attacks and defences

• Cookies and Sessions, Session attacks, Cross-Site Request Forgery
• Cross-Site Scripting and Defenses
• Denial-of-service, Phishing

Module 14 : Web Security - Server-side attacks

• Code Injection
• Server security
• Web Authentication
Module 15 : Mobile Application Development
• Introduction to Android, Tools and Basics
• Android Application Development Basics – building a sample Android application using
Android Studio
• Android Application Design Essentials