HTML 5 Forms - On-line Job Application

© Jerry Belch

Day 1
Project Overview

Forms are an integral part of html web page design. They are created to capture and receive large amounts of information at one time, Forms are used to conduct surveys, act as shopping carts, conduct customer satisfaction data, register a product of service, etc. Before starting this unit you should have a good understanding of how to code using HTML5 and Cascading Style Sheets. This unit takes approximately 20 hours to complete.

Objective

In this tutorial you will learn how to make a job application form that is tied to your company web site. Instead of the traditional Home, About Us, Contact, and Shop you will add an additional link for prospective employees to apply for a job on line for your company.


Below is an example of linking a job application on a company web page. I used the Rincon Surf Shack company as an example. After the Rincon home page loads, click on the link Apply for a job and you will see a finished version of the job application page.


Home page for Rincon Surf Shack

The tutorial contains three columns. The first on contains general information about the project and is quite short. The middle section features the new form elements in HTML and explains how they work . The third column, contains examples of each of these new form elements to further your understanding. The unit takes approximately 20 hours to complete. To access each section of the lesson, click on the menu bar for the element you are studying. At the end of each of these sections, is a link to show an example of this form element. There also six projects. Each project is one part of producing the on-line job application page.


Materials Needed
  1. Employment Application
  2. Have downloaded a copy of Notepad++ on your computer
  3. Google's Chrome Browser is recommended as the browser to use for this assignment.
  4. A copy of your company's logo
  5. Know company colors.
Teacher's Responsibility
  1. Grading sheet for project and lesson plans for the project. Sample Grading Sheet and Lesson Plans
  2. OR Progress logs

Day 2

HTML Forms

How to create HTML5 Forms

Forms are one of the earliest examples of creating an interactive experience on the Web. Form elements, such as radio buttons, check boxes, text boxes and submit buttons have been around since 1993. To increase functionality add ons or plug ins were created, like Flash, and JavaScript. JavaScript acted as a safeguard in catching errors of omission. For example, a form was submitted and the user left off the email address, or their name, or address. JavaScript is and was used to catch those errors before the form was submitted. A web Designer, really needed to know how to code JavaScript to keep the forms from omitting essential information. HTML5 has included many of these needed features by using a few keystrokes. It is these form elements of HTML5 that we will be learning about in this tutorial.


Users interact with forms by using controls that are put on the form. Examples of these controls include text boxes, radio buttons, check buttons, submit buttons. Here is an example of a text box control.

  1. First line tells browser that this is an HTML5 document
  2. Second line tells browser that English is the language to be used
  3. The third line is the <head>. It is the beginning head tag Fourth line sets up the character set to be used
  4. Next line holds the <title> and </Title> of the document
  5. The ending </head> is the end of the heading tags
  6. The next one <body> defines the beginning of the body of the document.
  7. You have two form tags and beginning<form> and ending tag </form>
  8. The user enters their first name into the text box
  9. The user then presses the Submit Form button and the first name is submitted.
  10. Now it is not quite this simple. In the Components of a Form section, we will learn how to direct the information being sent.
  11. Any information that is entered onto the form between the form tags will be submitted.
  12. The last two tags are ending tags - </Body> and </html>
  13. If you copy and paste the code above into Notepad++ save as an html type, run, and launch in Chrome, Firefox or Internet Explorer you will see what the user sees on the web site.


Components of a Form
  1. When keying in the beginning form tag, a name for the form must be determined.
  2. <Form Name="jobApp" ACTION=http://www.janetbelch.com/cgi-pub/FormMail/ method=post>
  3. In this case the form name is JobApp
  4. The next part of the code is the action section. It calls up the URL that houses the CGI form mail script.
  5. This information needs to be provided to you by the company that is hosting your site.
  6. Make sure that when looking for a host, that they provide CGI scripts for form mail and that the customer service is easy to obtain.
  7. I use Prohosting.com. They offer excellent service with the cgi scripts and prompt phone service at about $20.00 per month.
  8. If you do not have form mail on your site, feel free to use the code above. All that will do is to send me the information contained on your form in an email.
  9. Some of the Free sites do not off form mail scripts and you will have to arrange with a third party vendor to provide this very important function for you.
  10. There is another way, using javaScript that this form mail can be executed, but it does not support a number of things that we will cover in this tutorial
  11. If you use the code above, all that will happen is that the information on your form will be sent to my hotmail account, <input type=hidden value=jerry@janetbelch.com name= recipient>
  12. the line above goes just under the submit button line of code.

Day 5 and 6
Project 1

The image below shows what the finished product for this project should look like. The logo is in a cascading style sheet file called job.css. The .css file is currently located on our web site We will work with that file after we set up the input fields for the job application. This file tells the main file, your CompanyNameJobApplication.html file how to look. Your job application file is divided into a series of flexible boxes called: #big_wrapper, #main_section, #top_header, #new_division, #side_news, #the_footer.



Figure 1
  1. You will be coding the top portion of a job application in HTML5
  2. We first need to make a copy of the template for this project and the other projects that follow
  3. You will be writing code for the following fields on a job application.
  4. Take out the job application that you printed out when collecting materials.
  5. We will be working with the following fields listed below.
    • Company Name
    • Last Name
    • First Name
    • Middle Initial
    • Date of Application
    • Address
    • Apartment Number
    • City
    • State
    • Zip Code
    • Email Address
  6. The information above is in a table
  7. There two fields for each row in the table.
  8. Put the information below on the clipboard, Type CTRL C to copy the information
  9. Open a new file in Notepad++ and paste it in
  10. Save the file as type .html
HTML5 Template for Project 1

Figure 2
  • When you launch it in Chrome, It should look like the figure 2.
  • Go back to the listing
  • Where it says Start Here is where you will begin putting in the code for each field.
    <td><label for="lastname">Last Name</label><br><input id="lastname" type="text" autofocus name="lastname"
    placeholder="Last Name" required size="12"></td>
  • This is the line for last name.
  • Key it in, save it and launch it in Chrome.
  • If it does not look like the figure 1 above, last name field, correct the line and start again.
  • Continue entering the input fields for each of the items in the table:First name, middle initial, date of application, address, apartment number, city, state, zip code and email address.
  • Save it and test it out so that it looks like Figure 1.
  • Call your file "CompanyNameJobApplication.html"
  • When finished with project 1, call your instructor to see the finished product and have your instructor initial the sign off sheet.

    Day 9 and Day 10


    Project 2
    1. Now it is time to add another section to our job application project.
    2. Load in the file from project 1 - CompanyNameJobApplication.html
    3. Locate the line where the user inputs an email address.
    4. We want to add to our table just beneath this line.
    5. Remember we have ten items to add - 5 cells down two across.
    6. Set up the input fields in a table for:Date Available, Monthly Salary Required - row one position applied for and U.S citizen - row 2 Authorized to work and have you ever worked for this company before - row 3 Dates worked for this company and job title - row 4 Convicted of a felony and reason - row 5
    7. Save your work, test it and call your instructor to have this project signed off.
    8. Your finished project should look like this.

    Day 12 and 13

    Project 3 In this project you will add to your
    CompanyNameJobApplication
    file the education portion of a job application.
    1. Look at your printed out job application
    2. You will create a series of tables to hold the information
    3. You will enter code for the following fields:
      • High School Attended Address of the high school
      • Beginning date of high school
      • Ending date of high school
      • Graduate yes/no
      • College attended
      • Address of college attended
      • Beginning date of college
      • Ending date of college
      • Graduate yes/no
      • Degree obtained
      • Other educational institution attended
      • Address of other educational institution
      • Beginning date
      • Ending date>
      • Graduate yes of no
      • Degree earned
    4. Start a new table just after the section on explain the conviction
    5. When finished,save the file under the same name, test it out in Chrome
    6. When satisfied with the way it performs, call your instructor to have it signed off on your check off sheet.
































































































    Executive Officer:$90,000 per year

    Oversees and directs the company: Responsible for managing and leading the business planning process; Implements our company goals and department policies; Coordinates department tasks; Significantly oversees and contributes to the writing of our Business Plan and Annual Reports; Represents our company at all business functions and Oversees the legality of all actions in the company.

    Chief Financial Officer:$80,000 per year

    Manages the Accounting Department; Delegates responsibilities to members of the Accounting Department; Formulates and directs the company's overall financial plans and policies; Creates, interprets, and reports on weekly, monthly, and yearly financial reports; Determines company's operating expenses; Reconciles Bank Accounts; Manages employees in Accounts Receivable, Accounts Payable, Payroll and Bank Branch Manager.

    Vice President of Sales:$65,000 per year

    Responsible of assisting in the management,creation, and implementation of the marketing strategy for the company through a business, technical and sales perspective; Researches, creates and presents the VE Contract; Initiates and manages discussions and sales with other companies; Negotiates agreements concerning large company sales contracts' Oversees the company's Sales department; Analyzes sales trends and recommends aggressive sales strategies in order to maximize company profit.

    Vice President of Marketing:$65,000 per year


    Develops the company's marketing objectives,(including Target market and Marketing mix, etc.); Effectively implements the company's strategic marketing plan; Researches and determines the company product and service line. Conducts weekly department meetings to distribute tasks and adjust the company's product line to maintain our competitive edge; Recognizes and reacts to industry trends to maximize profits; Creates and maintains and submits to our IT department our company's product line.

    Vice President of Advertising:$65,000 per year

    Directs the development and implementation of the company's advertising strategy through the promotion of the company's products and services via creative, attractive, and effective advertising campaign; Assists in the design of the Business Plans and Annual Report, (both written and electronic); Oversees the creation and preparation of the company sales catalogue, bi-weekly advertisements; special advertisements, trade fair ads and all sales materials; Oversees the creation of each employee's business card and name badge; oversees the creation of posters for the office and trade fair booths.

    Vice President of Human Resources:$65,000 per year

    Manages the Human Resources Department: Creates, manages, and controls all personnel files; Addresses and participates in all aspects concerning personnel hiring, reprimands, and termination's; Maintains employee attendance and leave records; Establishes and monitors individual employee improvement plans; Determines payroll and withholdings; Manages the employee health insurance program; Creates and updates the Employee Manual; Monitors employee compliance of company policy; Oversees and assists in maintaining the company newsletter and company photo album.

    Vice President of Information Technology (CTO):$65,000 per year

    Oversees the creation and maintenance of the company's web site; Supervises and gives direction to the web development team; Coordinates with Marketing Department to include all product; weekly updates to include special offers; Posts HR interest stories on web site; Creates links for our Business Partners; configures the online shopping cart; Assists staff with computer related issues; Trouble-shoots technical issues.

    Administrative Assistant:$65,000 per year

    Creates company reports; Oversees administrative procedures; Compiles and submits Quarterly Task reports to the Virtual Enterprise Coordinator; Schedules meetings and prepares agendas; Edits company reports; Manages the company's email; Assists in the management of the company's web orders; Maintains the company's Work Samples binder; maintains company's communication with Business Partners and Virtual Enterprise Central.

    Event Planner:$45,000 per year

    Coordinates all special company events, such as Trade Fairs, Grand Openings, Open Houses, etc; Oversees the design of our company booth and coordinating all needs for each trade fair. Coordinates all events, invitations, RSVP's and coordinating refreshments for each special event.

    Sales Associate:$45,000 per year

    Sells company products and services via email to potential customers; Researches and reports on new and inventive products/ services that could prove profitable for the company; Assists in sales training of additional staff when necessary for Trade Fairs, Grand Opening and other events.

    Marketing Associate:$45,000 per year

    Researches and assists in the determination of the company product and service line; Assists in maintaining the company's product/service line on our web site; Conducts weekly research to locate new and innovative products/services; Makes recommendations to management to add new offering to the companies line.

    Advertising Associate:$45,000 per year

    Assists in the implementation of the company's advertising strategy through the promotion of the company products and services via creative, attractive, and effective ad campaigns; Assists in the creation and preparation of the company sales catalogue, weekly advertisements, trade fair advertisement ads and all sales materials including order forms.

    Accounts Payable/ Payroll/ Accounts Receivable:$65,000 per

    Accounts Payable/Payroll: Processes payment for all company expenses including payroll; Completes the monthly Accounts Payable report; Creates and processes purchase orders to restock inventory; Assists the Branch Banker in the creation of employee personal checks. Creates, manages, and processes payroll through our accounting program; Maintains hard copy files of accounting records.

    Accounts Receivable: Process all company invoices through our accounting program; Makes receipt of customer payments; Follows up on outstanding invoices; Creates and reports at the end of each month, the status of accounts receivable; Resolves any incorrect customer payments.

    Branch Banker:$65,000 per year

    Establishes and manages the company bank accounts through CA US Network Bank; In-services all employees on the use of the US Network Bank and maintenance of their personal checking and savings accounts; Creates and manages the Visitor account through US Network Bank; Electronically transfers company expenses; Processes all company and employee checks to verify clearance through US Network Bank; Communicates with the Accounting Department concerning US Network Bank processing discrepancies; Completes a weekly report, which summarizes company and employee US Network Bank discrepancies.

    Human Resources Associate:$45,000 per year

    Assists in the creation and maintenance of all personnel files and benefits; Assists in maintaining employee attendance and leave records, creates documents and certificates for recognition of employee performance; Assists in the creation of our Employee Manual; Assists with the creation of the monthly company newsletter.

    Web Designers:$45,000 per year

    Creates and maintains the company's web site; Updates web site bi-weekly to include special offers; Posts human resources interest stories to web site; Configures and modifies the online shopping cart to reflect current specials; Assists the Advertising Department with ads for the company web site.

    Written by Jerry Belch

  • Day 3

    New Form Elements

    Html 5

    Placeholders

    Placeholders are just as the name implies. They are designed to hold a place in a textbox and describe what kind of information and what format the information should look like. For example, in a blank text box on a form, a placeholder might be created to tell the user to enter their last name,or to enter a a date in the following format.

    Placeholders Example

    Day 3
    Required Form Element

    The required element is new to html5 and is one of the most important features. Before the advent of this element, web designers had to use javaScript to inform the user that they did not enter any information in this very important field. For example, suppose a form was submitted to your company ordering merchandise, and the email came through without the users address. You would have no idea where to ship the order. The required tag catches these omissions. Here is what it would look like in a HTML5 line of code <<input type"text" placeholder="address" required>Address
    Required Example

    Day 4
    Autofocus

    The Autofocus attribute is common to all input types. When the page is loaded, autofocus sets the focus on that particular element For example, suppose you have a form contain many fields of input, When the form is first loaded, you want the user to complete the first name field first, so you would use this autofocus attribute inside that field.
    Autofocus Example

    Day 4
    Dates

    Another thing that forms use is dates. The date could be for the form itself. Have the user specify a delivery date. What day a person started a job? In the past, javascript code was need to make these date pickers and validate
    that a date was input in the correct format. HTML 5 has developed its own date picker. The one below is using Google Chrome.
    At the time of this writing Internet Explorer and Firefox show a simple text box. The input field looks like this on the screen.

    Enlarge screen to see more detail. When you click the largest down arrow,
    you will see the current month calendar. To advance the date to what
    you want, click on each of the letters
    mm is the two digits for
    month, dd is for the two digit.
    number representing the day,
    and yyyy is the four digit
    number representing the year. After clicking in the field - month-day or year,
    use the up and down arrows to advance or decrease the number. If you use
    the dates input type and use the required field, Users cannot skip this
    field and they must enter the date in the format shown in the date
    field input box.




    Dates Example

    Day 7
    Label For

    Use the label tag to define a text of radio button input field. The element does not really help the user, however, when using a mouse it makes it that if the user clicks on the label itself, the control does not execute. The For attribute should equal the id attribute of the related element. This will bind them together. Labels For Example

    Day 7
    Numbers

    The new HTML5 offers a special input field called numbers. It is great to use for credit card numbers, quantities and other applications that require a number not alpha characters. The new input allows you to increment the number up and down using arrows. You can start with a predetermined amount and increase or decrease it by steps. You will work with input in our job application to input salaries earned at past jobs and income needed. Below is an example of what this input type looks like.


    <label for="salaryreq">Monthly Salary Required</label><br><input id="salaryreq" name="salaryreq" type="number" min="2000" max="5000"value="2000" step="100">

    Here is how it works. A text box is displayed on the screen with the label preceding it which says "Monthly Salary Required". In the box is an amount - 2000. By using the up and down arrows you can increase or decrease the 2000 by 100 each click. The lowest number that can be used is 2000. The upper limit is 5000.



    Numbers Example

    Day 7
    Telephone

    Telephone numbers are entered on many html5 forms. The "tel" input type provides some error trapping of input that does not represent a telephone number. the line looks like

    <input type="tel" pattern="\d*" title="numbers only">
    Telephone Example

    Day 8
    Autocomplete

    This attribute tells the browser to remember the data entered into a field and have it available to the user in the future. This feature allows users to spend a lot less time keying in information in a lengthy form especially when using the smaller screens found on mobile devices. The line of code would look something like this.


    <input type="email" autocomplete="on">
    AutoComplete Example"

    Day 8
    Radio Buttons

    Radio buttons are not new to html5 and have been around for a number of years. They are very useful in obtaining input. They are put into a group of two and only one of the group can be selected. If the other is selected the other one is off. The term came from back in the days of radio buttons on the car radio. To select a particular station, the user would push in a button The station would come in and the previous button would pop back out. Only one station could be selected at a time. The field set tags just put a box around the two buttons and is used to group related items on a form.
    <fieldset> <label for ="yescitizen">Yes</label><input type ="radio" name="citizen" id="yescitizen" checked="checked" Value="Yes"> <br> <label for ="nocitizen">No</label><input type="radio" name="citizen" id="nocitizen" Value="No"> </fieldset>
    Radio Buttons Example

    Day 11
    URL's

    The URL type requires a correctly formatted URL,like http://janetbelch.com. Only a correctly formatted entry will allow submission of the form. The line looks like


    <input type="url">
    URL Example

    Day 11
    Search

    Another new HTML5 input type is search. The box is used to mark up a search box. Different browsers show the box in slightly different ways. Some just a display rectangle, some browsers use rounded corners. Some browsers have an X located in the right-hand corner to clear the selection.
    Search Example

    Day 12
    Email

    The email type only accepts properly formatted email addresses. The line looks like all of the other input type lines except for the type. A line would look like


    <input type = "email">
    Email Example

    Day 14 and 15


    Project 4 - References
    In this project you will add the section for three references to your job application file.
    1. The input fields you will be working on include.
      • Name of first reference
      • Relationship to you
      • Company reference works for
      • Reference phone number
      • Reference 1 address
      • Name of second reference
      • Relationship to you
      • Company reference works for
      • Reference phone number
      • Reference 2 address
      • Name of Third reference
      • Relationship to you
      • Company reference works for
      • Reference phone number
      • Reference 3 address

    Here is what this section looks like when finished



    Day 16 and 17

    Project 5 - Previous Employment

    In this project, you will be adding the Previous Employment section to the job application You will cover the following input fields

    1. Previous Employment Company 1
    2. Phone Number
    3. Address
    4. Supervisor at this job
    5. Job title
    6. Starting Salary
    7. Ending Salary
    8. Job responsibilities for previous employment 1
    9. Beginning date of employment
    10. Ending date of employment for job 1
    11. Reason for leaving
    12. Can we contact your former supervisor from job 1?
    13. Previous Employment Company 2
    14. Phone Number
    15. Address
    16. Supervisor at this job
    17. Job title
    18. Starting Salary
    19. Ending Salary
    20. Job responsibilities for previous employment 2
    21. Beginning date of employment
    22. Ending date of employment for job 2
    23. Reason for leaving
    24. Can we contact your former supervisor?

    Here is what the finished product should look like for the previous employment section.



    Day 18 and 19 and 20


    Project 6- Cascading Style Sheets

    In this project you will be working with a cascading style sheet file. You will modify it somewhat to meet your needs. Currently the job application page has been interacting with this file. It is located on the janetbelch.com web page. Now we will make it available to you so that you can see how it works and modify it if you wish. In the box below is a copy of the file.

    1. Highlight the text in the box above.
    2. Type CTRL C to put it on the clipboard.
    3. Open a new file in Notepad++ and paste the contents of the clipboard
    4. Save the file as job.css
    5. Don't forget the .css extension

    Changing the link to this file from your CompanyNameJobApplication file. Go to the top of your document and find the following line of code.


    <Link Rel="StyleSheet" href="http://janetbelch.com/job.css"> Remove the http://janetbelch.com/ part of the line and re-save your file. The line should look like
    <Link Rel="StyleSheet" href="job.css">

    Run your html file to make sure that everything is working well

    Examining the code in the css file

    The template we used to make our job application form was the flexible box model. That code was in the template file that you started out with originally. The HTML part has certain sections that are designed for different parts of the application. They are

    • #big_wrapper which is a flexbox that encompasses the entire application. You can see it by finding the orange border. It is 1050 pixels in width.
    • header,section, footer, aside, nav, article, hgroup are in place for browsers that do not recognize these new HTML5 elements. They are to be displayed as a block - vertical arrangement of these items.
    • The body is also a flexbox and is surrounded by a blue violet border.
    • The #top_header contains the logo and graphics. It has a height that is fixed at 150 pixels. It is surrounded by a black border. Here is where you will want to make some changes. The logos are for a surf shop. You will need to use your company logo here. The graphics are placed in the top header this way to act as a background. Text can be over the graphic. If you just use the img src tag, the logo and text will be separated. You can use multiple images in the header. background: url(logo3.jpg) 100px 15px no-repeat, url(woody.jpg) 500px 15px no-repeat; The first thing that this line states is that the background is a url and the first picture name is logo.jpg. It is located 100 pixels in from the left edge of the application and vertical placement down 15px. The no-repeat tells the browser not to repeat this image. If you leave it off, you will find a header full of multiple images of your logo. If using more than one image for your background follow this line by a comma. The next image located in the header is the picture of a woody - an old car for you non-surfer types. It has the same vertical placement as the logo, but over 500 pixels horizontally. You may add as many images as you have room for. Each of those image lines must end with a comma. The last image line ends with a semicolon. Since image sizing as to height and width is not permissible here, you will need to resize the images before using them. The size of the logo is 259 by 194 and the woody numbers are 291 by 173.
    • After the header, a new division, #new_div, is created which has the flex property. The elements inside this new division are the main section and the side news box. In this division is where he bulk of your input statements for the job application are located - Applicant information, Education, References and Previous employment.It has a solid blue border around it.
    • The #main_section is the section in the large flex box on the left-hand side of the screen. You can change its border and background color if you wish. Just remember, if the background is a light color, then the text must be a dark color and vice a versa.
    • The #side_news section is the big box on the right-hand part of the screen. It also flexes as it is part of the new division. It is in the flexbox where the previous employment information is contained. Experiment with background colors and border styles and colors.
    • #the_footer is the section that contains the Submit Form and Clear Form buttons. The text is aligned to the left and it has a solid green top border. Experiment with these attributes if you want to.
    • The rest of the items in the file tell the browser how to deal with special formatting tags, like em for emphasis, h1, h2, h3 for headlines. There are also formatting codes for special paragraph treatments. - special and large.

    Making Your Job Application Mobile

    1. By adding a few lines of code, you can adapt this application for tablets and cell phones.
    2. Before beginning this part of the tutorial it is best that you have completed the mobile application for a pizza store
    3. Nonetheless, here are the media query lines of text you can use to change the size of the browser window.
    4. For desktop and laptop computers use this line at the top of your job.css file
    5. @media only screen and (min-width: 992px)
    6. You are telling the browser to execute the lines below only if the width of the browser window is at least 992 pixels. We know that most tablets and all phones do not have a screen this wide.
    7. All the rest of the code has to be inside the curly braces so that these things only apply to a screen width that has a minimum of 992 pixels. Look at the css3 file example below.
    8. If you click on a curly brace, the corresponding beginning or ending brace will also turn red.
    9. Use this Notepad++ feature if things do not work the way that you think they should.
    10. The code above is for a desktop or laptop. You can customize all of the things inside the media queries' curly braces to fit that screen size.
    11. For smaller screen sizes - tablets and cell phones, for example, you will want smaller fonts and headlines.
    12. You will want to restructure the layout so that it is not so many columns and scrolls down the page.
    13. You can have multiple media queries in a single file. After the media query decide what you want the screen to look like and change the items. Remember that all items must be inside the curly braces of the media query.
    14. Here is an example of a media query, you may want to use for a tablet.
    15. @media only screen and (min-width: 768px) and (max-width:991px)
    16. To test how these different screen sizes look, just drag the window to the left when using Notepad++
    17. To make certain that they really work, you will want to upload your application to a server and then view it with the device you are aiming for.
    18. Here is an example of a media query for a cell phone that has a width of 480 pixels
    19. @media only screen and (min-width: 480px) and (max-width:767px)
    20. Remember you want to format all of the same things you did for a desktop system and tablet. Just change the elements you want to. Save it and try it out by dragging the window to the left in Notepad++. When the window size is reached, you should see your changes.
    21. Easy ways to see the change in screen size, involve changing the background of the #main_section and #side_news.
    22. When the specified screen size is reached, you should see your changes. See images below.
    23. One major change that takes place when you are talking about screen sizes for cell phones, Is the need to collapse the column on the right and put everything in one column.
    24. To do this this change the #new_div parameter from display:flex; to display:block;
    25. Make your job.css file accommodate all three devices using media queries.

      Desktop and Laptop Screen



      Tablet Screen



      Cell phone Screen

    26. Call your instructor to demonstrate your knowledge of cascading style sheets and media queries.

    When you press Submit your corm submission should look something like this. Job Application Form Submission

    Optional Assignment

    1. Upload your html application and cascading style sheet file to your server.
    2. Access your web site using a cell phone or tablet.
    3. Fill in the application on line.
    4. Press Submit button.

    Written by Jerry Belch