Project Details

Project-1

Project Notes

This project implements a responsive, mobile-first web design in HTML5 and CSS, by applying the Progressive Enhancement strategy. Images, navigation, typography, tables, forms, and video are rendered responsive. W3C recommended front‑end good practices, usability criteria, and web accessibility guidelines are followed. The design ensures that the full content and functionality is accessible to all users on any device – while providing a better experience, in devices and browsing modes that can support it.

Figure showing how Content is translated into Meaningful Design for Effective Communication.
Figure: Translating Content into Meaningful Design for Effective Communication.

Web users are not mere spectators; they are active participants. Visual design is only one of the many factors, that enable effective user interaction with the content. Accessible and usable flow-of-content, is the crux. Browsing the Web using a Screen Reader software (with the screen covered and using only the keyboard), gave a firsthand experience on the importance of Accessibility.

Acknowledgment

The text content and photographs were provided by www.w3devcampus.com as part of the training kit for the Responsive Web Design certification from W3C. The video was published by World Travel Guides on YouTube (Username: World1Tube) – used in this project in accordance with Fair Use policy.

Project-2

Project Notes

This showcases a pure CSS implementation of an animated story scene. What makes this story interesting is that all the characters, objects, and movement in the scene are created using CSS – each of them fashioned from a single <div> each. For example, the girl is just <div class="girl"></div> in HTML – rest is all CSS.

Browser compatibility or device independence is not aimed for – so the story is best viewed in the current version of Chrome on desktop screen.

Acknowledgment

The CSS for the Heart shape is from Nicolas Gallagher via www.css-tricks.com/ examples/ ShapesOfCSS/

Project-3

Project Notes

This is a 5-page, fixed width layout (best viewed on desktop). The brand identity, logo, buttons, icons, etc. were created using Adobe Illustrator, and the website template in Adobe Photoshop.

The colors and design convey a warm, natural, and outdoorsy feel with a touch of subtle sophistication – effectively communicating the brand and content to the target audience. Click here to view PDF presentation on SlideShare.

Acknowledgment

The nature and landscape pictures are CC0 licensed images from www.pexels.com, and the people pictures are from the free stock photos collection provided by www.hubspot.com