Intro. Client-side Languages
Page Layout, Responsive Design, JS, XSS
Week 4 Plan
- Agenda
- Annoucements
- Quiz this Friday: 30 Multiple choice ✓
- Solidify Team Assignments and Accept Repository ✓
- Asynchronous Class this Friday - Recorded Video & Meet with your Team
- Objectives
- Review - IClicker Assessment
- Page Layout
- Responsive Design
- Intro. To JS.
- XSS Attack Mitigation and CSP
Review Question 1
<!DOCTYPE html>
<html>
<head>
<title>Page Title </title>
<style>
.aSection{
flex: 1 0 300px;
height: 300px;
border: 2px solid green;
}
#container{
margin: auto;
width: 80%;
display: flex;
}
</style>
</head>
<body>
<div id="container">
<section class="aSection">
<h1>Section 1</h1>
</section>
<section class="aSection">
<h1>Section 2</h1>
</section>
</div>
</body>
</html>
Observing the code to the left, select the option that depicts how the elements that have .aSection will render in browser
- A. They will not display
- B. Display Vertically
- C. Display Horizontally
- D. Cannot be determined
Review Question 2
Which CSS property will determines if CSS Grid is implemented into page layout:
- A. display property
- B. align property
- C. float property
- D. none of the options presented
Review Question 3
True or False: To implement CSS Flexbox or CSS Grid, A parent element/container must be present?
- A. True
- B. False
Page Layout
Helpful Slides and Videos
Review Question 1
Which of the following options is a true statement:
- A. Media Queries should be placed at the beginning of your internal CSS
- B. The min-width, max-width and width property are the only permissible properties to use with a media query
- C. Media Queries can only be implemented using the @import or link tag
- D. The placement of your media queries impacts what css code should render and what should be overridden.
Review Question 2
[T/F] Both a fluid/flexible and a static site can implement responsive design
- A. True
- B. False
Question 3
Progress on assignment 1?
- A. Finished
- B. Almost done
- C. 50% of the way there
- D. Haven't started
Responsive Design
Helpful Slides and Videos
Intro. to Client-side JS
Helpful Slides and Videos
Review Question 1
What is the primary difference between stored and reflected XSS
- A. stored and reflected used JS to initiate attack
- B. stored attacks are stored on the target servers while reflected is when an application receives data in an HTTP request and includes that data within the immediate response in an unsafe way
- C. reflected attacks are stored on the target servers while stored XSS attacks are when an application receives data in an HTTP request and includes that data within the immediate response in an unsafe way
Review Question 2
Reflected XSS require:
- A. A user to register for a malicious website
- B. A user to visit a malicious link
- C. A user to access the result of a DB query
- D. More than one of the above
XSS, XSS Attack Mitigation and CSP
Helpful Slides and Videos