Announcing Skill Me Up Live! Sign up today and save 60% on your first month using offer code LIVETRAINING at checkout.
Introduction to HTML, CSS, and JavaScript
Lab
Beginner
14 h 30 m
2018-10-25
Lab Overview

In this hands-on lab, you will be introduced to HTML, JavaScript and Cascading Style Sheets through 15 self-paced interactive exercises using Visual Studio 2017. In addition to teaching foundational web development skills, this lab will also help you prepare for the Microsoft MTA Exam 98-383: Introduction to Programming Using HTML and CSS

Objectives
  • Understand core concepts of building web apps using HTML
  • Understand core concepts of building web apps using CSS
  • Understand core concepts of building web apps using JavaScript
Pre-Requisites
  • Basic understanding of computers
  • Introductory knowledge of Visual Studio
Exercises

ContosoConf is an annual technical conference that describes the latest tools and techniques for building HTML5 web applications. The conference organizers have created a website to support the conference, using the same technologies that the conference showcases.

You are a developer that creates websites by using HTML, CSS, and JavaScript, and you have been given access to the code for the website for the latest conference. You decide to take a look at this web application to see how it works, and how the developer has used Visual Studio 2017 to create it.

You are a web developer working for an organization that builds websites to support conferences. You have been asked to create a website for ContosoConf, a conference that showcases the latest tools and techniques for building HTML5 web applications.
You decide to start by building a prototype website consisting of a Home page that acts as a landing page for conference attendees, and an About page that describes the purpose of the conference. In later labs, you will enhance these pages and add pages that allow attendees to register for the conference and provide information about the conference sessions.
The conference being organized by ContosoConf consists of a number of sessions that are organized into tracks. A track groups sessions of related technologies, and conference attendees can view the sessions in a track to determine which ones may be of most interest to them.
To assist conference attendees, you have been asked to add a Schedule page that lists the tracks and sessions for the conference to the ContosoConf website.
The delegates who want to attend ContosoConf will need to register and provide their details. You have been asked to add a page to the ContosoConf website that implements an attendee registration form.
The server-side code already exists to process the attendee data. However, the registration page performs minimal validation and is not user-friendly. You have decided to add client-side validation to the form to improve the accuracy of the registration data entered by attendees and to provide a better user experience.
You have been asked to modify the Schedule page for the ContosoConf website. Previously, the session data was stored as a hard-coded array and the JavaScript code for the page displayed the data from this array. However, session information is not static; it may be updated at any time by the conference organizers and stored in a database. A web service is available that can retrieve the data from this database and you decide to update the code for the Schedule page to use this web service rather than the hard-coded data currently embedded in the application.
In addition, the conference organizers asked whether it was possible for conference attendees to be able to indicate which sessions they would like to attend. This will enable the conference organizers to schedule popular sessions in larger rooms. The Schedule page has been enhanced to display star icons next to each session. An attendee can click a star icon to register their interest in that session. This information must be recorded in a database on the server and you send this information to another web service that updates the corresponding data in the database.
For popular sessions, the web service will return the number of attendees who have selected it. You will need to handle this response and display a message to the attendee when they have selected a potentially busy session.
The Contoso Conference web application needs to be visually appealing. A designer has produced mock-up designs of some of the pages that you have been asked to implement for the website.
You will be working on the Home and About pages. The HTML page structure has already been created. You will use Cascading Style Sheets (CSS) to style various parts of the pages, to make them match the designs. Much of the CSS that you create, such as the navigation links bar, will be reused by other pages.
Some aspects of the design are complicated and would have required images with previous versions of CSS. However, by using CSS3, you will not need to create any images.
The existing JavaScript code for the ContosoConf website has been written without much high-level structure or organization. While this approach is fine for small pieces of code, it will not scale up for a larger project. An unstructured collection of functions and variables scattered throughout a JavaScript file can quickly become unmaintainable.
Before implementing more JavaScript code to enhance the website, you decide to refactor the existing code for better organizational practices. The resulting code will be more maintainable and provide a good pattern for implementing features in the future.
The ContosoConf organizers want to highlight the latest HTML5 technologies to create an interactive experience for the visitors to the conference website. Specifically, the conference organizers have asked you to add the following features to the application: - Conference speakers need a way to generate their badges. Add a webpage that enables a speaker to drag-and-drop a profile picture to start creating their badge. - A video from a previous conference is available. Make this video available on the Home page. - Customize the Location page to display information about the visitor’s current physical location.
The conference organizers are concerned that the venue has poor Wi-Fi coverage in some locations, so the attendees might not always be able to access the conference website on their tablets and laptops. The Schedule page is especially important because attendees need to know when sessions are running.
You have decided to make parts of the web application available offline by using the offline web application features of HTML5. After an attendee has visited the online website once, their browser will have downloaded and cached the important pages. If a Wi-Fi connection is unavailable, the attendee will still be able to view the website by using the cached information.
Most conference attendees are expected to use a laptop to view the live version of the Contoso Conference website, but some may wish to print a hard copy of some of the information. Other attendees might use smartphones or other handheld devices to view the website. The different requirements and form factors of a printer or a handheld device compared to a laptop make it necessary for the user interface of the web application to detect device capabilities and adapt itself accordingly. For example, some website elements, such as the header, are not necessary for printing, while the smaller screens of smartphones are not ideal for viewing full-sized websites.
The conference organizers would like a venue map displayed on the website. The conference attendees will use the map to find out more about the rooms in the conference facility. Therefore, the map should be interactive and should respond to mouse clicks. The floor plans are available in a vector format, so they can be displayed in a resolution-independent format.
The conference speakers need badges with their photo, name, and ID. The ID is in the form of a barcode to make it easy for security personnel to scan and verify the holder’s identity before allowing backstage access. You have been asked to create a webpage that enables a speaker to create a badge.
You have been asked to make the Contoso Conference website more engaging by adding some animation.
You decide to animate the Register link that is displayed on the Home page. When the user places the mouse pointer over this link, you will make it rotate slightly to highlight it.
The Feedback page contains a form that enables an attendee to provide their assessment of the conference and to make additional comments. This information is submitted by the Feedback page to a data-collection service. You have decided that you can make this page more interesting by animating the stars as the user places the mouse pointer over them, and by making the feedback form fly away when the user submits their feedback.
During conference sessions, attendees may wish to ask questions. Distributing microphones among members of the audience can be problematic and slow, so you have been asked to add a page to the website that enables attendees to submit questions. Speakers can either respond immediately or later, depending on the nature of the questions and the session.
On the website, all questions must be displayed in real-time without reloading the page, so that all attendees and the speaker can see what has been asked. To support this requirement, a web socket server has been created. You need to update the web application to send the details of the questions to the socket server, and also to receive and display questions submitted by other attendees.
Note: The web socket server is implemented by using ASP.NET and C#. The details of how this server works are outside the scope of this lab.
Conference organizers are concerned about people asking inappropriate questions. Therefore, a back-end moderation system is also being developed. Conference attendees should be able to report a question that they think is inappropriate. Administrators can then mark this question for removal. The web socket server will transmit a message to all connected clients, and the web page must be updated to remove the question.
When a speaker creates a conference badge, the speaker drags and drops an image file of a photograph onto the web page. This photograph may be a color image. However, the conference speaker badges will be printed in grayscale. Therefore, the web page that creates the badges should render the speaker photograph in grayscale to give an accurate representation of the printed output.
An image file may be many megabytes in size. To avoid uploading large files to a server for processing, you have decided to convert the photos to grayscale by using a JavaScript code running in the web browser.
However, processing large images will cause the web browser to become unresponsive while it performs this processing. You, therefore, decide to use a web worker to move the image conversion as a background process, enabling the web browser to remain responsive.
When you create a website and deploy it to a production server, you would want the site to be light and fast. You would also not want to make too many requests to get the site JavaScript file.
Therefore, you will want to bundle your website files into one file.
Real-Time Lab
Not Registered?
Create Account
Already Registered?
Login
What are Labs?

Labs are where you can get hands on experience from what you have learned from lectures. You get to work in real time in virtual machines at your pace.