1
00:00:00,430 --> 00:00:05,290
In this project you build a responsive,
mobile friendly registration form for

2
00:00:05,290 --> 00:00:09,010
an online programming newsletter,
The Code Review.

3
00:00:09,010 --> 00:00:15,600
The form will contain a wide variety of
HTML, form input types and attributes.

4
00:00:15,600 --> 00:00:18,310
Use the supplied mockup files
to guide the creation of

5
00:00:18,310 --> 00:00:20,480
your mobile first designed form.

6
00:00:20,480 --> 00:00:23,820
Before submitting your project,
there's a few things you should do.

7
00:00:23,820 --> 00:00:26,640
One, check appropriate break points.

8
00:00:26,640 --> 00:00:31,710
For this project ,you just need one
media query for a desktop design.

9
00:00:31,710 --> 00:00:35,230
For widths, 760 pixels or wider.

10
00:00:35,230 --> 00:00:40,550
You can use the supplied
desktop-form.png mockup to guide you.

11
00:00:40,550 --> 00:00:43,030
This should be a mobile first design.

12
00:00:43,030 --> 00:00:49,370
For smaller screens less than 760 pixels
should work without any media queries.

13
00:00:49,370 --> 00:00:52,910
Use the mobile-form.png for that design.

14
00:00:52,910 --> 00:00:57,660
To check for various widths, you can
open up the Chrome developer tools and

15
00:00:57,660 --> 00:00:59,190
go to the device mode here.

16
00:01:01,600 --> 00:01:03,652
And you can enter in values up here.

17
00:01:07,356 --> 00:01:10,907
Once you are happy that your CSS
media queries work correctly,

18
00:01:10,907 --> 00:01:15,406
try resizing the window manually and
making sure that everything looks right.

19
00:01:25,466 --> 00:01:30,630
To test all your label attributes match
the inputs of your form, click the label.

20
00:01:35,040 --> 00:01:40,430
If you correctly matched the label to
the field, the text field will highlight.

21
00:01:40,430 --> 00:01:41,870
So you can type in it like so.

22
00:01:46,140 --> 00:01:50,300
Most browsers handle invalid HTML and
CSS code gracefully, but

23
00:01:50,300 --> 00:01:52,270
that isn't guaranteed.

24
00:01:52,270 --> 00:01:56,840
If you think your code is correct,
you should still test your HTML and

25
00:01:56,840 --> 00:01:59,050
CSS code on an online validator.

26
00:02:01,850 --> 00:02:07,158
You can either upload your files here,
or copy and paste the source code here.

27
00:02:14,367 --> 00:02:17,190
When you're happy,
make sure you've committed and

28
00:02:17,190 --> 00:02:21,630
pushed all of your changes to GitHub
before you submit your project.

29
00:02:21,630 --> 00:02:24,060
Good luck with your
newsletter form project.