Introduction to CSS & Web Styling Techniques

• Identify block-level and inline elements in HTML and use
  and tags appropriately.
• Design a basic HTML form structure incorporating input types like number, range, date, color, and search.
• Embed SVG shapes (rectangle, circle, polygon) within HTML documents and list advantages of SVG.
• Write CSS rules for inline, internal, and external stylesheets and explain CSS precedence.
• Select HTML elements using element, class, and ID selectors, and employ pseudo-classes and pseudo-elements.
• Set CSS background-color, text-color, background-image, and various border styles and widths.
• Control element spacing using margin and padding properties, and manage layout with display and position properties.
• Apply CSS to style hyperlinks and implement :hover effects for interactive elements.
• Explain the purpose of HTML5 tags and new attributes like required, autofocus, and placeholder.
• Describe the interaction between HTML and CSS and predict the visual output of CSS rules.

• Differentiate between HTML block and inline elements and apply div and span tags for structural organization.
• Construct interactive HTML forms using various input types and attributes, including HTML5 additions.
• Integrate SVG graphics into web pages and distinguish them from HTML Canvas.
• Implement different methods of embedding CSS (inline, internal, external) and understand cascading order.
• Apply various CSS selectors, including element, class, ID, pseudo-class, and pseudo-element, to target specific HTML elements.
• Style web page elements effectively using CSS properties for colors, backgrounds, and borders.
• Manipulate element spacing and positioning using CSS Box Model properties (margin, padding) and layout properties (display, position).
• Create visually enhanced links and basic interactive effects using CSS.
• Utilize HTML5 features and advanced HTML attributes to improve web page functionality.
• Analyze and troubleshoot basic CSS styling issues in web development.

The academic approach of the course focuses on ‘work-centric’ education. With this hands-on approach, derive knowledge from and while working to make it more wholesome, delightful and useful. The ultimate objective is to empower learners to also engage in socially useful and productive work. It aims at bringing learners closer to their rewarding careers as well as to the development of the community.

• Step 1: Learners are given an overview of the course and its connection to life and work
• Step 2: Learners are exposed to the specific tool(s) used in the course through the various real-life applications of the tool(s).
• Step 3: Learners are acquainted with the careers and the hierarchy of roles they can perform at workplaces after attaining increasing levels of mastery over the tool(s).
• Step 4: Learners are acquainted with the architecture of the tool or tool map so as to appreciate various parts of the tool, their functions, utility and inter-relations.
• Step 5: Learners are exposed to simple application development methodology by using the tool at the beginner’s level.
• Step 6: Learners perform the differential skills related to the use of the tool to improve the given ready-made industry-standard outputs.
• Step 7: Learners are engaged in appreciation of real-life case studies developed by the experts.
• Step 8: Learners are encouraged to proceed from appreciation to imitation of the experts.
• Step 9: After the imitation experience, they are required to improve the expert’s outputs so that they proceed from mere imitation to emulation.
• Step 10: Emulation is taken a level further from working with differential skills towards the visualization and creation of a complete output according to the requirements provided. (Long Assignments)
• Step 11: Understanding the requirements, communicating one’s own thoughts and presenting are important skills required in facing an interview for securing a work order/job. For instilling these skills, learners are presented with various subject-specific technical as well as HR-oriented questions and encouraged to answer them.
• Step 12: Finally, they develop the integral skills involving optimal methods and best practices to produce useful outputs right from scratch, publish them in their ePortfolio and thereby proceed from emulation to self-expression, from self-expression to self-confidence and from self-confidence to self-reliance and self-esteem!