MC4023 Web Design Syllabus:
MC4023 Web Design Syllabus – Anna University PG Syllabus Regulation 2021
COURSE OBJECTIVES:
To understand the concepts and architecture of the World Wide Web.
To understand and practice markup languages
To understand and practice embedded dynamic scripting on client-side Internet
Programming
To understand and practice web development techniques on client-side
UNIT I INTRODUCTION TO WWW
Understanding the working of Internet-Web Application Architecture-Brief history of Internet-Web Standards – W3C-Technologies involved in Web development – Protocols-Basic Principles involved in developing a website-Five Golden Rules of Web Designing
UNIT II UI DESIGN
SVG- Iframes – HTML5 Video and Audio tags – CSS Specificity – Box model – Margins, padding and border – Inline and block elements – Structuring pages using Semantic Tags – Positioning with CSS: Positions, Floats, z-index – CSS with CSS Preprocessors: SASS
UNIT III ADVANCED UI WITH CSS3
Layouts with CSS Grids Flexbox– Responsive web design with media queries – Advanced CSS Effects – Gradients, opacity, box-shadow – CSS3 Animations: Transforms and Transitions – CSS Frameworks: Bootstrap
UNIT IV JAVA SCRIPT
JavaScript Events – Modifying CSS of elements using JavaScript- Javascript Classes- Introduction to JQuery – JQuery Selectors – Using JQuery to add interactivity – JQuery Events-Modifying CSS with JQuery -Adding and removing elements with JQuery-AJAX with JQuery-Animations with JQuery (hide, show, animate, fade methods, Slide Method)
UNIT V SERVER-SIDE PROGRAMMING WITH PHP
PHP basic syntax-PHP Variables and basic data structures-Using PHP to manage form submissions-File Handling -Cookies and Sessions with PHP-Working with WAMP and PHPMYADMIN-Establishing connectivity with MySQL using PHP
Lab Components
1. Design a landing page for a website using Adobe XD (Unit 1)
2. Design an Admin Dashboard for an E-commerce website using Adobe XD (Unit 1)
3. Design and develop an event registration form. (Unit 2)
4. Design and develop a sticky navbar using floats and SASS. (Unit 2)
5. Design and develop a developer portfolio page. Develop the layout using flexbox and ensure the page is responsive. (Unit 3)
6. Design and develop pricing card list which are responsive using plain CSS and Flexbox (Unit 3)
7. Develop a register form and validate it using JavaScript. Design the forms using CSS3 and display Error Messages in the HTML page. (Unit 4)
8. Develop a website that uses the ‘jsonplaceholder’ Api to get posts data and display them in the form of a card. Use Flexbox to style the cards (Unit 4)
9. Develop a php server that Creates, Reads, Updates and Deletes Todo and save them in MySQL database. (Unit 5)
10. Develop a php server that registers and authenticates user session and stores user data in MySQL database. (Unit 5)
COURSE OUTCOMES:
CO1:Create a basic website using HTML and Cascading Style Sheets.
CO2:Create websites with complex layouts
CO3:Add interactivity to websites using simple scripts
CO4:Design rich client presentation using AJAX.
CO5:Add business logic to websites using PHP and databases
TOTAL: 75 PERIODS
REFERENCES
1. David Flanagan, “JavaScript: The Definitive Guide”, 7th Edition, O’Reilly Publications,2020
2. Danny Goodman, “Dynamic HTML: The Definitive Reference: A Comprehensive Resource for XHTML, CSS, DOM, JavaScript” , O’Reilly Publications, 3rd Edition,2007
3. Robin Nixon; “Learning PHP, MySQL, JavaScript & CSS: A Step-by-Step Guide to Creating Dynamic Websites”, O’Reilly Publications, 2nd Edition,2018
4. David Sawyer McFarland, “CSS: The Missing Manual”, O’Reilly Publications, 4th edition, 2015
5. Keith J Grant; “CSS in Depth”, Manning Publications. 1st edition,2018
6. Elizabeth Castrol, “HTML5 & CSS3 Visual Quickstart Guide”, Peachpit Press, 7th Edition, 2012.
7. Harvey & Paul Deitel& Associates, Harvey Deitel and Abbey Deitel, “Internet and World Wide Web – How to Program”, Fifth Edition, Pearson Education, 2012
8. https://developer.mozilla.org/en-US/