Ecosyste.ms: Awesome

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

Awesome Lists | Featured Topics | Projects

https://github.com/kaplanh/survey-form-ntflx

Project aims to create survey form within html and css.
https://github.com/kaplanh/survey-form-ntflx

Last synced: 3 days ago
JSON representation

Project aims to create survey form within html and css.

Awesome Lists containing this project

README

        

# Project-001:Survey Form
[Click Me!](https://kaplanh.github.io/survey-form-ntflx/)
![netflix-survey-form](https://github.com/kaplanh/survey-form-ntflx/assets/101884444/2ee88335-5faf-4ed1-8b97-0f8071855867)
## Description
Project aims to create survey form within html and css.

## Problem Statement

- Your company has recently started on a project that aims to conduct a survey to measure the demands and interests of its customers. So you and your colleagues have started to work on the project.

## project design with figma

- https://www.figma.com/file/HXULRJVkPlaCpxQlbm82bX/Project001?node-id=6%3A4

## Project Skeleton
```
001-survey-form (folder)
|
|----readme.md
|----index.html
|----style.css
|----result.html
```
## Objective

The aim is to create a functional Survey Form

### The following topics were discussed in the project;

- HTML Forms-Input Types

- HTML Form Elements

- CSS Colors-Border Properties

- CSS Margins-Padding

- CSS Properties for Texts-Font Families-Links

>>Part-1 HTML Structure

- Creat structure of the HTML5
- Give name of your project (title)
- Create the main structure of the container (div id="container")
- Create Main Topic of the project (id="title")
- Create a description of your project (id="description")
- Create a form (id="survey-form")
- Create 4 divisions (class="box") for each label and single-line text input field (Tips:dont forget to use placeholder)
- Create a division (class="box") for a dropdown list. (Tips:dont forget to use a label tag)
- Create a division (class="box") for checkbox list
- Create a division (class="box") for radio buttons
- Create a division (class="box") for a multi-line input field (Tips: a text area)
- Create a button for id="submit" the form

>>Part-2 CSS Structure
- Set a background and define font-color="white"
- Set container background color and margin
- Define "title" and "description" color-size-padding etc...
- Define "survey-form" color-size-padding etc..
- Define labels color-size-padding etc... (Tips: id="name", "email", "number" ...)
- Set class color-size-padding-margin etc...
- Define id="submit" color-size-padding etc...

- Push your application into your own public repo on Github

- Deploy your application on Github template to showcase your app within your team.

⌛ Happy Coding ✍