Project aims to create survey form within html and css.
- 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.
001-survey-form (folder)
|
|----readme.md # Given to the students (Definition of the project)
|----solution
|----index.html
|----style.css
|----result.html
|----images
|---- netflix-background-image.jpg
Build a Survey Form that is functionally similar to this: Survey Form
-
HTML Forms-Input Types
-
HTML Form Elements
-
CSS Colors-Border Properties
-
CSS Margins-Padding
-
CSS Properties for Texts-Font Families-Links
-
improve coding skills within HTML & CSS
-
use git commands (push, pull, commit, add etc.) and Github as Version Control System.
-
Step 1: Download or clone project repo on Github
-
Step 2: Create project folder for local public repo on your pc
-
Step 3: Create Survey Form
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:Don't 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...
-
Step 4: Push your application into your own public repo on Github
-
Step 5: Deploy your application on Github template to showcase your app within your team.
- You can use HTML,and CSS to complete this project.
React
Typescript
Django
Laravel
Facebook
Microsoft
Google
Alibaba
D3
Tencent
