Department Events
Web Application Development-I (Theory)
The course will enable the students to
- Create web sites using HTML, CSS, JavaScript, PHP and Bootstrap.
- Identify the tools needed to create web pages and dynamic client‐side & server‐side web applications.
Course | Learning Outcome (at course level) | Learning and teaching strategies | Assessment Strategies | |
Course Code | Course Title | |||
24CBCA 303
| Web Application Development-I(Theory)
| CO139. Design static webpages with well-structured HTML and correct CSS layout. CO140. Construct semantic web pages that prioritize enhanced readability, improved search engine visibility, and increased accessibility for assistive technologies. CO141. Apply box model to organize and position HTML elements on the screen. CO142. Apply various text effects and transitions in web pages. CO143. Create dynamic webpages using JavaScript. CO144. Contribute effectively in course- specific interaction | Approach in teaching: Interactive Lectures, Discussion, Reading assignments, Demonstration.
Learning activities for the students: Self learning assignments, Effective questions, Seminar presentation. | Class test, Semester end examinations, Quiz, Assignments, Presentation of website/webpages. |
Introduction to HTML:
Introduction to HTML, HTML web page structure, The HTML5 DOCTYPE. Heading, paragraphs, HTML Formatting, comments.
Cascading Style Sheets: Understanding Style Sheets, CSS Syntax and Applying Style Sheets to HTML document, Developing Style Sheets: inline, internal and external.
HTML: Images, tables, lists, block and inline elements, Iframes, HTML Links.
Semantic elements:
<article>, <aside>, <figcaption>, <figure>, <footer>, <header>, <main>, <nav>, <section>, <summary>, <time>
Introduction to HTML Forms: Form Object, Text element, Password element, Button element, submit button, reset button, Checkbox element, Radio element, Text area, Select and option element. New attributes for <input>: autofocus, formaction, formmethod, formnovalidate, height and width, list, min and max, multiple, pattern (regexp), placeholder, required, step, input types, input attributes.
Box Model:
Box Model, CSS Dimension, <DIV> tag, using class and ID, priority & specificity. Styling Backgrounds, Styling borders, Styling Text, Styling Fonts, Styling Links, Styling Lists, Styling Tables, Margin, padding.
CSS Advanced: CSS Display, CSS Positioning, CSS Align, Flexbox / Grid, CSS Pseudo-class, CSS Pseudo-element, CSS Navigation Bar, CSS Image Gallery, CSS Image Opacity, CSS Attribute Selectors, Styling Links.
Border:
border-image, border-radius. Box-Shadow. Text effects: text- shadow. Background: background-clip, background-size. Outline, Transition: transition, transition-delay, transition-duration, transition-property, animation.
Structural Elements: <details>, <dialog>, <summary>, <meter>.
Introduction client-server technologies:
comparison between client-side and server-side scripting. JavaScript: Introduction, Advantages of using JavaScript, Writing JavaScript in HTML, Basic Programming Techniques: Data Types and Literals, creating variables, Operators (Arithmetic, Logical, Comparison, String and Assignment operator) and Expressions in JavaScript.
- Ivan Bayross, “HTML 5 and CSS 3 Made Simple”, BPB Publications.
- Responsive Web Design with HTML5 and CSS: Develop future-proof responsive websites using the latest HTML5 and CSS techniques, 3rd Edition Kindle Edition.
Suggested READINGS:
- Master HTML and CSS: Along with 100 projects Kindle Edition
- HTML 5 Black Book, Covers CSS 3, JavaScript, XML, XHTML, AJAX, PHP and jQuery, Dreamtech Press; 2nd edition (13 October 2016)
- A Navarro, “Effective Web Design”, John Wiley & Sons.
e -RESOURCES:
- https://youtu.be/mU6anWqZJcc
- https://youtu.be/1ZE-s0EySXg
- https://youtu.be/DEcjb-hMgX4
- https://youtu.be/-I-7wWUyT0k
- https://youtu.be/8ukRI2VsA-s
- https://www.w3schools.com/w3css/defaulT.asp
- https://guidelines.india.gov.in/
JOURNALS:
- International Journal of Design
