Go on. Explore!

lvl 0 • 0 xp

lvl 1

Home Market Decks Interests

Web Development

memorize.ai (lvl 286)

(0)

78 cards

()

Section 1

Preview this deck

What is a class selector in css?

Front

1 / 78

HTML Web Dev

0.0

0 reviews

5			0
4			0
3			0
2			0
1			0

Active users

All-time users

Favorites

Last updated

4 years ago

Date created

Mar 1, 2020

Cards (78)

Section 1

(50 cards)

What is a class selector in css?

Front

This is a . (period or dot) example .btn

Back

What is it about a responsive website that makes it unique?

Front

A responsive website will create a site that can stretch and re-size with the browser.

Back

Responsive websites are adaptive, but adaptive websites are not responsive.

Front

True

Back

What part does HTML play in web development?

Front

HTML Plays the part of the structure for the webpage.

Back

What types of web design are there?

Front

1. Fixed 2. Fluid 3. Adaptive 4. Responsive

Back

What formula applies to make a website more fluid?

Front

Target / Context = Result

Back

What's the most important tool for every web designer and developer?

Front

A text editor

Back

What is the key to a responsive website?

Front

Building it on a fluid foundation

Back

What type of website has set widths, doesn't use media queries, and appears the same despite the browser size or device it's viewed on.

Front

Fixed

Back

What are the typical options when choosing a web host?

Front

Shared, VPS, Dedicated

Back

When a website is built on a fluid grid, it uses what type of unit for column widths?

Front

Percentages

Back

What does it meant when there are only two selections after the padding in css?

Front

The first means top and bottom. The second means left and right. Example: padding: 15px 30px;

Back

What do media queries do?

Front

They allow us to target specific widths, where our layout begins to break or star to look a little squished or tight.

Back

When choosing a web host, which is usually the most expensive option?

Front

Dedicated

Back

Why might it be important to separate HTML and CSS?

Front

Separating structure and presentation makes it easier to make changes.

Back

What else can media queries do?

Front

They allow us to take control of our fluid layout and target specific devices like tablets and smartphones.

Back

Which of these can be handled with CSS?

Front

Ramdomly launch pop-up windows Change the color of all the paragraphs on a website Translate text into another language Process form data Answer: Change the color of all the paragraphs on a website

Back

How do you get images to scale down when the browser resizes?

Front

For modern browsers, add "max-width: 100%" to images so they scale down to fit within their containing element in a fluid layout. For IE6 & IE7, create an IE specific stylesheet and apply a width of 100% to images using their unique ID or class.

Back

What does responsive web design do?

Front

It focuses on delivering the website as one seamless experience, rather than device specific. Example Non responsive: m.smellslikebakin.com & www.smellslikebakin.com Example Responsive: www.smellslikebakin.com - fits mobile devices and desktops

Back

What is the difference between FTP and SFTP?

Front

FTP: File Transfer Protocol SFTP: SSH File Transfer Protocol - This can be regarded as Secure File Transfer Protocol because SSH FTP is much more secure.

Back

What type of website is built with relative widths, doesn't use media queries, and scales up and down with the browser?

Front

Fluid

Back

When a website is built on a fixed grid, it uses what type of unit for column widths?

Front

Pixels

Back

What is the purpose of the web browser?

Front

The purpose of a web browser is to read HTML documents and compose them into visible or audible web pages. The browser does not display the HTML tags, but uses the tags to interpret the content of the page. HTML elements form the building blocks of all websites. HTML allows images and objects to be embedded and can be used to create interactive forms. It provides a means to create structured documents by denoting structural semantics for text such as headings, paragraphs, lists, links, quotes and other items. It can embed scripts in languages such as JavaScript which affect the behavior of HTML webpages. Web browsers can also refer to Cascading Style Sheets (CSS) to define the appearance and layout of text and other material. The W3C, maintainer of both the HTML and the CSS standards, encourages the use of CSS over explicit presentational HTML markup.[1]

Back

What part does JavaScript play in web development?

Front

JavaScript Plays the part of the behavior for the webpage.

Back

What does TLD Stand for?

Front

Top Level Domain

Back

Are responsive websites built on a fluid grid?

Front

Yes, responsive websites are built on a fluid grid.

Back

How does HTML interact with structure and content?

Front

HTML describes the structure of content on a web page, but it's also important to define visual structure.

Back

When setting the font size on our pages, why should we use em instead of px?

Front

em's are a much more scalabe unit.

Back

What is hexadecimal?

Front

Hexadecimal is a base 16 numbering system. Examples: 0 1 2 3 4 5 6 7 8 9 when we run out of numbers, we then move to letters which represent the numbers 10, 11, 12, 13, 14 and 15, A B C D E F | | | | | | 10 11 12 13 14 15

Back

How are responsive websites built?

Front

They are built on a flexible fluid grid that adapts to the device or browser that renders the website.

Back

What is the first step in creating a responsive website?

Front

Creating a fluid foundation is the first step to creating a responsive website. This is done by taking our completed comp and instead of using exact pixel widths for our website, we use percentages.

Back

How do we select an item with an id in html and css?

Front

This is done by using a # sign.

Back

What is the formula to convert px to em?

Front

Target / Context = Result Example: We want 24px font, the standard font size for most browsers is 16px. So 24/16 = 1.5

Back

What can grid CSS do?

Front

Grid CSS can help layout webpages visually.

Back

When scaling a site down to mobile, what should be done with the content?

Front

It should be more and more relevant to the user on each deice as the site is scaled down from a desktop/laptop, tablet or smartphone. Just think about what the user would want to view when they're on the go and less patient versus sitting down at a desktop or using a laptop.

Back

Which of the following should not be used as a text editor for building websites?

Front

Sublime Text Microsoft Word TextMate vim Answer: Microsoft Word

Back

What is a <span> tag used for?

Front

This is basically used for an inline element. Example: <div id="contact"> <p>Call us: <span>1-555-CUP-CAKE</span></p> </div>

Back

What does the "border-radius' do in css?

Front

It adds corners to things. Example: .btn { border-radius: 25px; }

Back

When a website layout changes or reformats at specific browser widths, it's using what to achieve this?

Front

Media Queries

Back

What does it meant when there are only two selections after the margin in css?

Front

The first means top and bottom. The second means left and right. Example: margin: 40px 0px;

Back

How do I make a button do something different on hover?

Front

You will need to apply a sudo class. This is done by the example below: Example: .btn: <--- note that a colon is used first and then curly braces are opened. .btn:hover { }

Back

What part does CSS play in web development?

Front

CSS Plays the part of the presentation for the webpage.

Back

What does the adaptive website design approach do?

Front

The adaptive design approach takes the same markup, styles and content, and with media queries, alters the site's layout to fit onto various devices.

Back

Designing on a grid although tricky to get used to is good because?

Front

Because it results in a solid visual and structural balance. It improved legibility, hierarchy and provides us with the good kinds of constraints.

Back

In Sublime Text, what is the purpose of the left-side panel?

Front

The left panel displays the working directory.

Back

How do responsive websites control design?

Front

Use media queries to control the design, as it scales up or down with the browser or device.

Back

HTML

Front

HyperText Markup Language (HTML) is the main markup language for displaying web pages and other information that can be displayed in a web browser. HTML is written in the form of HTML elements consisting of tags enclosed in angle brackets (like <html>), within the web page content. HTML tags most commonly come in pairs like <h1> and </h1>, although some tags, known as empty elements, are unpaired, for example <img>. The first tag in a pair is the start tag, the second tag is the end tag (they are also called opening tags and closing tags). In between these tags web designers can add text, tags, comments and other types of text-based content.

Back

What type of website is built with fixed or relative widths and uses media queries to target specific devices and resolutions?

Front

Adaptive

Back

How do you get a website to change layouts when the size changes?

Front

This is achieved using media queries.

Back

Are adaptive websites built on a fluid grid?

Front

No, adaptive websites aren't built on a fluid grid. Can use media queries to target specific device sizes

Back

Section 2

(28 cards)

Without the viewport meta tag, on the iPhone, Safari will automatically render an otherwise adaptive website in what way?

Front

As a zoomed-out 980px wide version of the website.

Back

Retina displays have four times the pixel density, which has no major impact on images used throughout a website.

Front

False

Back

Within the quotation marks after "Content=" in the viewport meta tag, only one value can be declared, which is the height and width of the device.

Front

False, multiple values can be declared.

Back

What does an adjacent sibling combinator look like?

Front

Example: The difference here is the + between the items selected. h2 + p { background-color: lightblue; }

Back

Using CSS how can you get an image to disappear?

Front

img {display: none; }

Back

A website should deliver the same experience to users on the go and those browsing a website on a desktop computer.

Front

False

Back

How do we set the viewport?

Front

To set the viewport width, to the width of the device, use the following code. <meta name="viewport" content="width=device-width, initial-scale=1.0"> Which tells the website to fit within the visible area of the viewport.

Back

How can we disable the zoom feature on a mobile website using viewport?

Front

Since we've customized our website for mobile, we can disable the zoom by adding the following code. <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable= no">

Back

What do attribute selectors do?

Front

Attribute selectors allow us to match element to an attribute with a specific value. They also have the same specificity as class and sudo class selectors. The most basic attribute selector, selects an element with a specific attribute, no matter the value

Back

Which of the following solutions focuses on delivering a website as one seamless experience, rather than device specific?

Front

Responsive Design

Back

What is a link sudo class?

Front

It allows us to style links, based on whether or not they've been visited or clicked on. The link sudo class allows us to style links that have not yet been visited and will only select anchor elements that have an href attribute. We can select them by specifying the a element.

Back

How do we get the new media queries to work that we've created at the bottom of our Stylesheet?

Front

We'll have to import the viewport meta tag to the head of our HTML page in order for the media queries to work. On the devices we've targeted.

Back

If a website has been built on a fluid grid the layout will scale with the viewport size. This enables to target only the larger dimension of a device.

Front

True

Back

Media Queries Link

Front

------Screen------ This particular style sheet is for any screen based devices. <link rel="stylesheet" href="css/style.css" type="text/css" media="screen"> What this does is it tells the browser to bring in this specific stylesheet for our website that fits into this particular media. ------Screen------ ------Print------- This one is similar but is for when the user is trying to print the page. Notice the change in the MEDIA reference. <link rel"stylesheet" href="css/style.css" type="text/css" media="print"> ------Print------- ------Mobile----- Not long ago the media target below was introduced to target handheld devices. <link rel="stylesheet" href="css/mobile.css" type="text/css" media="handheld"> The problem with this solution is that it wasn't specific enough. ------Mobile-----

Back

When determining which devices to target in your adaptive design approach, what should be taken into consideration?

Front

Application & User Needs

Back

Sudo classes and Classes..explain

Front

Sudo classes are similar to classes, but aren't explicitly specified in the markup, appear in the source code or documentary. Unlike most selectors we've discussed, sudo classes select elements on characteristics, their name, attributes or content. Instead select elements based on user interaction, the elements states its position in the document.

Back

How do we write a media query?

Front

TO write a media query open up your main style-sheet style.css and head tot he very bottom of the style-sheet. This is where we should always write our media queries. First Define the media using the @ sign and then the media. Example: 1. @media screen 2.@media screen and (max-width:480px) 3. @media screen and (max-width:480px) { this is where we'll write the css code when the browser detects the width, less than or equal to 480px. } 4. We can also use min width... 5.@media screen and (min-width:1000px) { This is for if we wanted to have very specific style for large screen resolutions, we could use this query. } 6. Note that it can be helpful to comment above each media query to note which device your targeting. / Comment: Device that is targeted---- / @media screen and (max-width:480px) { }

Back

What can we add inside the viewport meta tag that will instruct the browser to use the width of the device as the width of the viewport?

Front

width=device-width

Back

Redirecting users to a completely separate mobile website when a handheld device is detected is an outdated design approach.

Front

False

Back

When coding for mobile what's one thing that's important to do?

Front

It's important to think about space and touch space for users on mobile devices

Back

Does our work end after media queries?

Front

Even though we've made media queries and uploaded the site to the internet, the site viewed on a mobile device is still a zoomed out site that the user needs to pinch and zoom to get around. That's not what we wanted... This is because despite wheter or not we've included media queries, by default the site will be viewed as a zoomed out 900px wide version of the website, even if the website itself is narrower than that. Including the viewport meta tag in the head of your HTML page, will resolve this issue and improve the presentation of your site on mobile and tablet devices. The tag starts out like this. Example: <meta name="viewport" content""> Keep in mind that within the content parantheses we could add tons of different values. We're going to focus on the fundamental ones first. Now, we could set the width and height of the viewport, or we could allow the browser to detect the width of the device. This is the BEST option for a fluid layout. That will adapt to the width of the device its being rendered on.

Back

What does this do in css? div > a {}

Front

This is called a child selector and is used to select the first anchor element in the div element and no other anchors after that. Example: div > a { color: green; font-weight:bold; }

Back

What does an attribute selector look like?

Front

Example: [class] { font-size: 2em; color: orange; } If we want to select links, we just need to put the a before it all. Example: a[class] { font-size: 2em; color: orange; }

Back

Do we still need to make adjustments to our site even after we've created media queries?

Front

Yes, even though we've created new media queries for our different devices (iPhone and iPad etc) in our adaptive design approach, we still need to make some adjsutments

Back

When can we implement media queries?

Front

When we've determined which devices to target and how our website will adapt, we can implement media queries along with the appropriate styling in the CSS.

Back

What are break points in a website?

Front

They are essentially where a site starts to break down. In an adaptive approach that's usually the height and width of the device we're targeting. Example: iPhone (320px-wide, 480px-high) Example: iPad (768px-wide, 1024px-high) Keep in mind that we don't have to target these devices separately, the fluid layout will actually scale with the view port size. So we take the higher of the two in the case of the iPhone(320x480) we'll take the 480 and to target the iPad we'll choose 1024px. On both tablet and mobile, it's ok to get rid of some ported imagery or duplicate information, but avoid excluding special features, important information or functionality without a way to navigate back to the full website. Keep in mind that these changes can be made using media queries.

Back

What do media queries do?

Front

They allow us to deliver different styles to the various resolutions in order to provide the best experience possible for our users, this could mean both appearance and performance.

Back

When targeting the retina iPhone with a fluid layout, which breakpoint width would we use?

Front

480px

Back