INT219: FRONT END WEB DEVELOPER

L:2 T:0 P:2 Credits:3

Course Outcomes:

CO1 :: apply basic HTML elements, CSS properties and Tailwind to create visually appealing web pages.
CO2 :: create webpage using Tailwind CSS Concepts, Layout, Spacing, Sizing and Typography.
CO3 :: understand use JavaScript variables, functions, and events to enhance user interactivity on web pages.
CO4 :: evaluate HTML elements, handle events, and create dynamic web content using JavaScript and DOM.
CO5 :: create interactive web forms and validate user input to enhance form handling.
CO6 :: apply jQuery for efficient element manipulation and work with JSON objects for seamless data exchange.

Introduction to HTML and CSS : Fundamentals of HTML, Creating Style Sheet, CSS Box Model - Border properties, CSS selectors like type, id, class, Types of CSS, CSS Grid introduction, Creating different layouts for webpage, Introduction to GitHub and repository hosting

Introduction to Tailwind CSS: Core Concepts and Layout : Tailwind CSS Display and Visibility, Tailwind CSS Float, Tailwind CSS Clear, Tailwind CSS Layout, Tailwind CSS Z-index, Tailwind CSS Object Fit and Object Position, Tailwind CSS Flex, Tailwind CSS Grid, Justify and Align, Overview of Tailwind CSS, Tailwind CSS Container, Tailwind CSS Sizing

Styling and Enhancements: Spacing, Sizing, Typography : Tailwind CSS Alignment, Tailwind CSS Spacing, Tailwind CSS Sizing, Tailwind CSS Typography, Tailwind CSS Backgrounds

Core JavaScript Fundamentals and Interactivity : Incorporating JavaScript in the HEAD and BODY element, Using an External JavaScript file, Variables and Operators, Control Statements, Looping Statements, Popup Boxes, JavaScript Objects, Working with Functions

DOM Manipulation and JavaScript Web Forms : Introduction to the DOM and its role in web development, Accessing and manipulating DOM elements using JavaScript, Programming HTML DOM with JavaScript, Modifying HTML content and attributes through JavaScript, Dynamic styling and manipulation of elements, Event Handling in JavaScript, Assigning event handlers using DOM object properties, Using addEventListener and removeEventListener for event management, Understanding and implementing event bubbling in JavaScript, Creating an interactive image gallery using DOM manipulation and event handling, Implementing thumbnail previews and lightbox-style image display, Fetching and displaying user location using the Geolocation API, Handling permission requests and errors with geolocation

Working with jQuery and JSON : Basics of jQuery, jQuery Events, Benefits of using CDN, JQuery Selectors, jQuery input vs :input, jQuery DOM manipulation methods, jQuery Elements, Working with JSON Objects, JSON Arrays, Nested JSON object, Conversion of JSON object to string, Conversion of string to JSON object, jQuery DOM manipulation methods, Working with JSON Objects, Introduction to revenue generation based project

Design web page using table and list concept in HTML.
Design web page using images, links and frames in HTML.
Design forms and perform various types of validations in HTML.
Design attractive web page using CSS and JavaScript.
Implement the concept of event handlers in JavaScript using DOM object property.
Implement event bubbling in JavaScript.
Make Image gallery with thumbnails in JavaScript.
Design web page using jQuery Selectors and elements.
Use JSON objects, arrays and string concept in your web pages.
Design customizable website using Bootstrap Grid System and Typography.
Implement Bootstrap list, table, buttons and dropdowns.
Create a Responsive Portfolio Section using Tailwind CSS.
Create a Responsive Contact Form using Tailwind CSS.
Create a JavaScript file (script.js) to handle the geolocation functionality.

MASTERING HTML, CSS & JAVA SCRIPT WEB PUBLISHING by LAURA LE MAY, RAFE COLBURN, JENNIFER KYRNIN, BPB PUBLICATIONS
MASTERING HTML, CSS & JAVA SCRIPT WEB PUBLISHING by LAURA LEMAY, RAFE COLBURN, JENNIFER KYRNIN, BPB PUBLICATIONS