Ecosyste.ms: Awesome

An open API service indexing awesome lists of open source software.

Awesome Lists | Featured Topics | Projects

https://github.com/mafsida/greentech-survey

A responsive survey form for the fictional GreenTech Solutions, created for FreeCodeCamp's Responsive Web Design certification. Includes HTML5 validation, dropdowns, radio buttons, checkboxes, and custom styling with Montserrat and Lora fonts.
https://github.com/mafsida/greentech-survey

accessibility cross-browser-compatibility css flexbox forms freecodecamp frontend google-fonts html-css html5 media-queries normalize-css open-source responsive-design semantic-html survey-form web-design

Last synced: 16 days ago
JSON representation

Host: GitHub
URL: https://github.com/mafsida/greentech-survey
Owner: mafSida
Created: 2024-08-26T18:59:33.000Z (5 months ago)
Default Branch: main
Last Pushed: 2024-09-18T14:40:31.000Z (5 months ago)
Last Synced: 2024-11-16T18:31:28.109Z (3 months ago)
Topics: accessibility, cross-browser-compatibility, css, flexbox, forms, freecodecamp, frontend, google-fonts, html-css, html5, media-queries, normalize-css, open-source, responsive-design, semantic-html, survey-form, web-design
Language: HTML
Homepage: https://mafsida.github.io/greentech-survey/
Size: 222 KB
Stars: 0
Watchers: 1
Forks: 0
Open Issues: 0
Metadata Files:
- Readme: README.md

Awesome Lists containing this project

README

# GreenTech Solutions Survey Form

A responsive and accessible survey form was designed for FreeCodeCamp's certification course.

## Table of Contents

- [Project Overview](#project-overview)
- [Technologies and Solutions Used](#technologies-and-solutions-used)
- [What I Learned](#what-i-learned)
- [Contact Information](#contact-information)
- [Acknowledgements](#acknowledgements)

## Project Overview

This responsive survey form was created for the FreeCodeCamp Responsive Web Design certification course. This project aims to demonstrate skills in HTML and CSS by building a functional and visually appealing survey form for GreenTech Solutions, a fictional company specializing in eco-friendly products and sustainable technology solutions.

## Technologies and Solutions Used

- **HTML5:** Structured the content and ensured semantic markup for accessibility.
- **CSS3:** Used modern CSS techniques including Flexbox for layout and media queries for responsiveness.
- **Google Fonts:** Integrated custom fonts (Lora and Montserrat) to enhance the visual appearance.
- **Modern Normalize:** Applied a CSS reset for cross-browser consistency.
- **Responsive Web Design:** Ensured the form adjusts for different screen sizes and devices.
- **Accessibility:** Focused on providing clear labels, instructions, and a good user experience for all users, including those using screen readers.

## What I Learned

During this project, I learned:
- How to create a responsive layout using CSS Flexbox and media queries.
- Best practices for ensuring accessibility in forms, including the use of semantic HTML tags and proper labels.
- How to integrate custom fonts and SVG icons to improve the overall aesthetic of a web form.
- Techniques to implement cross-browser consistency using CSS reset (Normalize.css).

## Contact Information

I am currently looking for internship opportunities and am open to new offers. If you have any feedback, or suggestions, or would like to discuss a potential collaboration, feel free to contact me.

- **Email:** [[email protected]](mailto:[email protected])
- **LinkedIn:** [www.linkedin.com/in/daiana-kutasevych](https://www.linkedin.com/in/daiana-kutasevych)

## Acknowledgements

Thanks to [FreeCodeCamp](https://www.freecodecamp.org) for providing free resources and certification courses. This project was developed as part of their Responsive Web Design certification, which enabled me to build essential skills in HTML and CSS.