Your task as a team is to create a business one-pager website that contains an image or video header and a signup form. The main focus is practising what you've learned about HTML forms. You can make up your own fantasy company or use an existing one.
Make sure everyone in the team is aligned with the idea.
-
A header with responsive image/video
-
A signup form with at least three different input types. Examples:
- Text fields
- A password field
- Set of radio buttons
- Set of checkboxes
- Submit button
-
Style your page
-
The page should be fully responsive and work well on mobile as well as tablet and desktop (it should look good on devices from 320px width up to 1600px).
Using a mob programming approachs, you will work in groups of four or five (you will get information about the groups during the intro days).
Pick one group member who forks and clones the provided repository on GitHub. That person then opens a Live share session in Visual Studio Code so that you can all take turns writing.
Don't forget to occasionally commit and push your code to GitHub to save your progress. When you're done for the day, ensure all code is pushed to GitHub.
Not a designer? We then heavily encourage you to find a signup form that you like and use that as inspiration to copy their styling. Why reinvent the wheel (you will also win time on this) when many great designers already have done the job for you? Here's some great resources👇
- Confetti (hero video)
- Spotify signup form - Copy the link and open in incognito if you are already logged in 😉
- Dribble (signup form examples)
Follow our guidelines on how to write good code
A very common element on websites is the top section with a background image or video. It's called a hero image or hero video. You should add a hero image or video that is responsive.
Check in the Image resources from the toolbox to find nice images.
You can for example find free videos to use on Pexels. Use media queries to display the right video element for each screen size. Hide video elements you don't want to show with display: none in your CSS. Place the video at the top of your page with no margins. If you want to learn about how to resize a video to fit the header, check this out.
Working with CSS images - With Diego
You should also build a signup form and style this according to how you want it to look. In the end, you will also post the data from the form into a service called HTTPBin, which should show the data you put in. It is a server and will work in the same way as if we posted this data to our own server to create a user account.
Set the form action to post to https://httpbin.org/anything and the method set to post.
This means that httpbin will show you what this response would look like if you sent this to a server.
Try submitting your form to see how the response from httpbin looks:
- What do the textfields look like?
- What response do you get from the password field?
- Try selecting one or a few of the radio buttons & submit again. What changes?
- Select none of the radio buttons and then submit.
- Check the checkboxes and then submit.
- Leave the checkboxes unchecked and then submit.