D Y Patil International University, Akurdi, Pune

Course Description cum Session Plan 

DP 2- Front-End Development - DES2305

SEM – III / 2nd YEAR

 

 

Course Instructor:

Ms. Shruti Bir
Office Number: 530
Phone: 7028015701
Email: shruti.bir@dypiu.ac.in
Office hours:   9:30 am -5:30pm
Location: SID, DYPIU, Akurdi, Pune.

Teaching Assistant
Name: NA
Contact: NA
Office Hours: NA
Location: NA

Level (who can take this course?): 12^th pass / Elementary and Intermediate course certificate holder students who has a keen interest and passion for Web development.

Credit: 2 (30 hrs.)

Evaluation:
Internal Evaluation - 80% (Continuous Evaluation)
External Evaluation - 20% (Jury)
Maximum Number of Students: 44

Course Objectives:

·        Understand the design concept of Web Development

·       Understanding of HTML syntax, elements, tags, attributes, tree structure,

·       Understanding of CSS syntax, style rules, selectors

·       Understand how to use the Bootstrap framework to implement a responsive website.

·        Introduction to JavaScript, work with Forms and Validation

·        Understand the Concept of Web Accessibility

·        Debugging and Problem Solving

·        Introduction to Browser Compatibility & Version Control

·        Introduction to Web Performance Optimization

·       Build a Personal Multi-page Portfolio Website

·       Become Industry ready professional and stand out from others.

Prerequisites:

·        Basic Computer Literacy and familiarity with web browsers

·        Basic Understanding of the Internet and Websites

·        Basic Text Editing Skills with basic mathematical skills

·        Most importantly the Problem-Solving Mindset

Course Syllabus:

Serial Number	Module Topics	Hours
Module I	Introduction to internet, World Wide Web, how a website works Components of a website, using the browser inspector for a webpage Intro to HTML, CSS, and JavaScript and what they are for	06
Module II	HTML: Syntax, Elements, Tags, Attributes The Tree structure Commonly used HTML elements - text, images, forms, etc.	06
Module III	CSS: Syntax, Style rules, properties, selectors Cascading Design Commonly used CSS properties	06
Module IV	Implementation of Java script to validate various forms Bootstrap: Importing Bootstrap, Bootstrap components Responsive Grid layout	06
Module V	Understand web hosting basics: what it is and how it works Creating a responsive portfolio website to understand web functionality Understanding and implementing web forms using basic JavaScript functions How to identify and avoid web development-related problems, best practices	06
Total Hours		30

Lessons & Session Plan:

Assignment Number	Module Details	Starting Date /Submission Date
Assignment 1	Introduction to internet, World Wide Web, how a website works. Components of a website, using the browser inspector for a webpage Intro to HTML, CSS, and JavaScript and what they are for. Student must submit the live link of their programming file for day-to-day review and feedback.	24/11/2024
Assignment 2	HTML - Syntax, Elements, Tags, Attributes The Tree structure Commonly used HTML elements - text, images, forms, etc. Student must submit the live link of their programming file for day-to-day review and feedback.	25/11/2024
Assignment 3	CSS - Syntax, Style rules, properties, selectors Cascading Design Commonly used CSS properties Student must submit the live link of their programming file for day-to-day review and feedback.	26/11/2024
Assignment 4	JavaScript - Implementation to validate various forms Bootstrap - Importing Bootstrap, Bootstrap components Responsive Grid layout Student must submit the live link of their programming file for day-to-day review and feedback.	27/11/2024
Assignment 5	Understand web hosting basics, Creating a responsive portfolio site Understanding and implementing web forms using basic JavaScript functions How to identify and avoid web development-related problems, best practices Student must submit the live link of their programming file for day-to-day review and feedback.	28/11/2024

 

 

Course Outcome:
·        Develop fully functional, responsive, multi-page portfolio website using the best methodologies and practices and make accessible to the world.
·        Understand and Implement and Integrate HTML, CSS, bootstrap and JavaScript
·        Develop and validate web forms, understand web hosting and deployment
·        Troubleshoot and Debug Code and ensure Cross-Browser compatibility
·        Understand web accessibility, apply best practices in web development
·        Collaborate using version control and optimize web performance.
·        Become an industry ready design professional and stand out from the crowd 

Text Book: N/A 

Reference Book:

1. HTML and CSS: Design and Build Websites - Jon Duckett
2. Above the Fold - Brian D Miller
3. JavaScript and jQuery: Interactive Front-End Web Development - Jon Duckett
4. Responsive Web Design with HTML5 and CSS3 - Ben Frain

Study Materials:

Web references for external research and study:

1. Front-end techniques: https://www.w3schools.com/
2. Frontend basic learning and certification: https://www.freecodecamp.org/,
3. Short cut keys & tricks: https://css-tricks.com/,
4. In-depth articles, case studies, and guidelines on topics like usability, user research, interaction design, and accessibility: https://www.nngroup.com , https://javascriptweekly.com/