Work Details

Home Work Details

HTML, CSS Responsive Project

This HTML-CSS integration project involves creating a website consisting of at least four pages on a free theme. The pages should have a consistent structure with a header, navigation menu, main content, complementary content section, and footer. The website must be fully responsive, catering to computers, tablets, and mobile phones, using a "Mobile First" approach. It also requires the implementation of advanced CSS features, HTML5 validation, integration of Google Maps, and appropriate code comments.

Skills required:

As part of the web programming project, our team was tasked with creating a website consisting of at least four pages on a theme of our choice. Each page had to include a header, a navigation menu, a main content section divided into sections, a section for supplementary content, and a substantial footer. The design had to be consistent across all pages, and we were required to submit functional mockups for each page, tailored to desktop, tablet, and mobile formats.

The website needed to be fully responsive, with an adaptable navigation menu for the mobile version, following the "Design for Mobile First" approach. The required pages included a homepage with a CSS3 carousel, a catalog page for activities/products, a detailed description page, and a form page containing various input elements such as text fields, radio buttons, checkboxes, and more.

We also had to incorporate CSS styling elements such as rounded corners, box shadows, and CSS3 transitions. The code needed to be well-commented and properly indented, and we were instructed to include a Google Maps feature to display the company's location. The entire site had to comply with W3C HTML5 standards and maintain image proportions without loss of quality.

Finally, the evaluation took into account compliance with instructions, HTML5 validity, semantic markup, visual presentation, display fluidity, form quality, use of specific visual elements, personal presentation, and overall project assessment.

I was responsible for designing and developing the website's header and footer. My goal was to create visually appealing and functional elements to ensure smooth navigation.

I took charge of creating the website's homepage, which is often the first page visitors see. I ensured it was eye-catching and informative by integrating a CSS3 carousel and highlighting at least four activities/products/services, each with an image, a name, and a link.

Another one of my responsibilities was to create the form page. I had to integrate various input elements, including text fields, radio buttons, checkboxes, etc. My goal was to ensure that these elements functioned correctly and were user-friendly.

I undertook the search for appropriate images for the project. My challenge was to find images that matched the site's content while respecting copyright and usage licenses.

I also worked on rendering the pages to make them responsive. This meant ensuring that the site displayed correctly on different devices, including computers, tablets, and mobile phones. I followed the "Design for Mobile First" approach to ensure an optimal user experience.

Finally, I performed W3C validation of the HTML code to ensure it adhered to W3C standards, thus ensuring the quality and compliance of the website.