UNIQUE SERIES AKTU Syllabus
BCS353BCS353H

Web Designing Workshop

L-T-P0-0-2 Credits1 Session2023-24 TypeLab / Practical
Appears in 14 semesters · 14 branches

B.Tech Computer Science & Engineering · Sem 3 (Lab, code BCS353) · B.Tech Information Technology · Sem 3 (Lab, code BCS353) · B.Tech Artificial Intelligence & Machine Learning · Sem 3 (Lab, code BCS353) · B.Tech Artificial Intelligence & Data Science · Sem 3 (Lab, code BCS353) · B.Tech CSE (Artificial Intelligence) · Sem 3 (Lab, code BCS353) · B.Tech CSE (AI & ML) · Sem 3 (Lab, code BCS353) · B.Tech CSE (Data Science) · Sem 3 (Lab, code BCS353) · B.Tech CSE (Cyber Security) · Sem 3 (Lab, code BCS353) · B.Tech CSE (Internet of Things) · Sem 3 (Lab, code BCS353) · B.Tech Computer Science & Design · Sem 3 (Lab, code BCS353) · B.Tech Computer Science (Hindi) · Sem 3 (Lab, code BCS353H) · B.Tech Computer Science & Business Systems · Sem 3 (Lab, code BCS353) · B.Tech Cyber Security · Sem 3 (Lab, code BCS353) · B.Tech Data Science · Sem 3 (Lab, code BCS353)

Download PDF

List of Experiments / Activities

  1. Syllabus:
  2. HTML: Elements, attributes, heading, paragraph, styles, comments, links, images, favicon, tables, list, class, id, HTML forms, HTML media, navigation bar. CSS: Types of CSS, colors, background, margins, padding, height, width, text, font, icon, links, list, tables, display, z-index, float, overflow, CSS media queries, inline block, navigation bar, image gallery, forms, round corners BOOTSTRAP : Fundamentals of implementing responsive web design ,Use Balsamiq to mockup and wireframe websites, The fundamentals of UI design for websites ,How to install the Bootstrap framework ,Understanding the Bootstrap grid layout system, How to use bootstrap containers to layout your website easily, Use other Bootstrap components such as buttons ,Adding symbols using Font Awesome, Bootstrap carousels. Add Bootstrap cards to your website. Using Bootstrap navigation bars, JavaScript script, function, output, statement, variables, operators, datatypes, objects, events, string methods, Arrays, if else, switch, loop for, loop in, loop for, debugging, validation of forms , Functions and invocation patterns Discussion of ECMAScripts Intermediate JavaScript , JS Expressions, Operators, Statements and Declarations , Object-Oriented Programming JS Objects and Prototypes, `This`, Scope and Closures Objects and Prototypes Refactoring and Debugging
  3. List of Experiments
  4. 1Design the following static web pages required for an online bookstore website. HOMEPAGE: The static home page must contain three frames. Top frame: Logo and the college name and links to Homepage, Login page, Registration page, Catalogue page and Cart page (the description of these pages will be given below). For example: When you click the link “CSE” the catalogue for CSE Books should be displayed in the Right frame. Right frame: The pages to the links in the left frame must be loaded here. Initially this page contains description of the web site.
  5. 2LOGINPAGE: This page looks like below:
  6. 3CATOLOGUE PAGE: The catalogue page should contain the details of all the books available in the website in a table. The details should contain the following: 1. Snap shot of Cover Page. 2. Author Name. 3. Publisher. 4. Price. 5. Add to cart button.
  7. 4CARTPAGE: The cart page contains the details about the books which are added to the cart. The cart page should look like this:
  8. 5REGISTRATION PAGE : Create a“ registration form“ with the following fields 1)Name (Text field) 2)Password (password field) 3) E-mailid(text field) 4) Phone Number(text field) 5) Sex(radio button) 6) Date of birth(3 select boxes) 7) Languages known(checkboxes–English, Telugu, Hindi, Tamil) 8) Address(text area)
  9. 6Js VALIDATION: Write JavaScript to validate the following fields of the above registration page. 1. Name (Name should contains alphabets and the length should not be less than 6 characters). 2. Password (Password should not be less than 6 characters length).
  10. 7Js VALIDATION: 3. E-mailid (should not contain any invalid and must follow the standard pattern(name@domain.com) 4. Phone Number(Phone number should contain 10 digits only).
  11. 8CSS: Design a web page using CSS(Cascading Style Sheets) which includes the following: 1) Use different font, styles: In the style definition you define how each selector should work(font, color etc.). Then, in the body of your pages, you refer to these selectors to activate the styles. 2) Set a background image for both the page and single elements on the page.
  12. 9CSS: 1) Control the repetition of the image with the background-repeat property. 2) Define styles for links as A:link A:visited A:active A:hover
  13. 10Consider a small topic of your choice on which you can develop static Webpages and try to implement all topics of html, CSS and Js within the topic. Choose any one topic. 1. Your Own Portfolio 2. To-Do List 3. Survey Form 4. A Tribute Page 5. A Questionnaire

Textbook

  1. Meloni, J. C., Kyrnin, J. (2018). HTML, CSS, and JavaScript All in One: Covering HTML5, CSS3, and ES6, Sams Teach Yourself. United Kingdom: Pearson Education.
  2. McGrath, M. (2020). HTML, CSS & JavaScript in easy steps. United Kingdom: In Easy Steps Limited.

Reference Books

  1. Duckett, J. (2014). Web Design with HTML, CSS, JavaScript and JQuery Set. United Kingdom: Wiley.
  2. Fajfar, I. (2015). Start Programming Using HTML, CSS, and JavaScript. United Kingdom: CRC Press.

Official AKTU syllabus

This subject is on page 9, 10, 11, 12 of the original AKTU PDF.

Official AKTU syllabus PDF ↗