Front End Web Design and Development (CREDIT DISTRIBUTION, ELIGIBILITY AND PRE-REQUISITES OF THE COURSE ‘Coarse | Cris | Cra arbaion ofthe eoare | | Pre-rqube of tite cre Toor] racial” |eiert_| heconne : Prac any ose Front End | 2 [9] 0 7 Fas | NI Web Dosen and Developmen Learning Objectives ‘The Leating Objectives ofthis course area follows ‘To introduce the basic conceps and tchnigus of elen-side web programming. + Toenable the students to develop simple, interactive, and stylish websites wing HTML, CSS and JavaScript. Learning outcomes The Leaming Outcomes ofthis course ae a follows: ‘+ Afler studying this couse, stents wil be able to build websites using the elemento IML. + After studying tis course, students wil be able to build imeactive anc ssh ‘websites using the cient side programming techniques with CSS and evascript + After studying this cous, students wil be able to learn to validate client-side data + After studying this cous, students wil beable to define the structure and cotentsof the website using different features of CSS. SYLLABUS, nie. (weeks) Introduction: Introduction to internet and web desig, Basic concepts of wot archiecture. Unie (avvecks) HTML: Introduction to hypertext marks language (html, exeating web paps, Is hyperinks, ables, web ors, inserting images, frames. S/ 56Units (decks) Cascading syle sheet (CSS): Concept of CSS, creating stylesheet, Impotng style sheets, (CSS properties, CS sling (background text Format, conrling fonts), CSS rales, Style ‘Types, C88 Selectors, CSS easeade, working with block elements and abs, working \ithlistsand tables, CSS id and clas, box model (troduction, border properties, padding properties, ‘margin properties). aie Gveets) Basics of Javascript: Document object model, data types and variables, funetions ‘methodsand events, controlling program flow, builn objects and operators, validations Practical Bxercses (1S weeks) nL Create an HTML document with following formating ~ Bold, Hales, Underline, Colors, Headings, Tile, Font and Font Width, Background, Paragraph Line Brakes, Horizontal Lin, Blinking texas wll a marquee tex. Create an HTM. document with Ordered and Unordered lists, Isartng Images, Internal and External linking Create an HTML document for displaying the current semester's timetable, Create a website with horizontal and vertical frames. Top horizontal rae needs to show you eollege's name and logo. Bosom harizontal frame iso be split int two ‘vertical frames. The ff frame hss hyperlinks 1 pages related to culty, courses, student activities, et. The right fame shows the corresponding webpage Based on the Link clicked on the lef frame. (Create a student registration form using HTML which asthe following onto and ‘make an interactive conant presentation using CSS. L TextBox Il. Dropdown box I Optio/tadio buttons IV. Checkboxes. V. Reset and Submit bution Create a webpage for your department with a drop-iown mavigition menu for ‘culty, courses, activites, ete. Implement the webpage using sles rules, selectors ce leamed in CSS ‘Write event-driven programs in JavaScript forthe following: ‘+ Enter number and onclick ofa button pit its multiplication tbl. ‘Print th largest of tree numbers entered by the use. ‘+ Find the factorial ofa number entered by the use. ‘Enter ist of positive numbers using the prompt terminated by 2 220 Find thesum and average ofthese numbers. ‘Create a student registration form using text, rao button, check box, dropdown box, textfield and all other required HTML elements. Customize the CSS and jvaseript to input and validate al data, Create functions to perform validation of ‘ach element, example: «Roll number is a7-digit numeric value 'b. Name shouldbe an alphabetical value (String) SY : Non-empty and valid il like DOB 7‘Nixon, R Leamiag PHP, MySQL & JavaScript with jQuery, CSS and HTMLS.OReily, 2018 + Powell, T.A. HTML 4 CSS: The Complete Reference, Sth eiton, ‘TataMeGrawtil, 2017, + Ducket, 1, JavaScript and JQuery: Interactive FrontEad Web Development Wiley, 2014 Suggested Readings ‘+ Boch, A, & Ruvaleaba, Z, Murach's HTML and CCS, thet, Mike Morach Assocais, 2018. + Ivan Bayross Web Enabled Commercial Application Development Using Html Dhuml, Javascript, Pel CGI, BPB Publications, 2010 Examination scheme and mode “Total Marks: 100 Internal Assessient: 25 marks Practical Exam (nteral): 25 macks End Semester University Exam $0 marks “The Internal Assessment for te course may include Class participation, Assignments, (Class tests, Projets, Field Wor, Presentations, amongst others a decided ty the faculty. [Note: Examination scheme and mode shall he as prescribed by the Examination Braneh, University of Delhi, from time to time. v7 se