Web Development
What is the first step in creating a responsive website?
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.
When choosing a web host, which is usually the most expensive option?
Dedicated
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.
False, multiple values can be declared.
What type of website is built with relative widths, doesn't use media queries, and scales up and down with the browser?
Fluid
When a website is built on a fixed grid, it uses what type of unit for column widths?
Pixels
Which of the following should not be used as a text editor for building websites?
Sublime Text Microsoft Word TextMate vim Answer: Microsoft Word
Sudo classes and Classes..explain
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.
What formula applies to make a website more fluid?
Target / Context = Result
What is the formula to convert px to em?
Target / Context = Result Example: We want 24px font, the standard font size for most browsers is 16px. So 24/16 = 1.5
What is it about a responsive website that makes it unique?
A responsive website will create a site that can stretch and re-size with the browser.
Without the viewport meta tag, on the iPhone, Safari will automatically render an otherwise adaptive website in what way?
As a zoomed-out 980px wide version of the website.
What do attribute selectors do?
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
Designing on a grid although tricky to get used to is good because?
Because it results in a solid visual and structural balance. It improved legibility, hierarchy and provides us with the good kinds of constraints.
What is the key to a responsive website?
Building it on a fluid foundation
What part does CSS play in web development?
CSS Plays the part of the presentation for the webpage.
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.
Fixed
How do you get images to scale down when the browser resizes?
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.
When setting the font size on our pages, why should we use em instead of px?
em's are a much more scalabe unit.
Using CSS how can you get an image to disappear?
img {display: none; }
What can grid CSS do?
Grid CSS can help layout webpages visually.
What part does HTML play in web development?
HTML Plays the part of the structure for the webpage.
How does HTML interact with structure and content?
HTML describes the structure of content on a web page, but it's also important to define visual structure.
What is hexadecimal?
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
HTML
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.
What does the "border-radius' do in css?
It adds corners to things. Example: .btn { border-radius: 25px; }
What is a link sudo class?
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.
What does responsive web design do?
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
What does it meant when there are only two selections after the padding in css?
The first means top and bottom. The second means left and right. Example: padding: 15px 30px;
In Sublime Text, what is the purpose of the left-side panel?
The left panel displays the working directory.
What is the purpose of the web browser?
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]
How do responsive websites control design?
Use media queries to control the design, as it scales up or down with the browser or device.
How do we get the new media queries to work that we've created at the bottom of our Stylesheet?
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.
When can we implement media queries?
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.
Do we still need to make adjustments to our site even after we've created media queries?
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
Are responsive websites built on a fluid grid?
Yes, responsive websites are built on a fluid grid.
How do I make a button do something different on hover?
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 { }
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?
width=device-width
Media Queries Link
------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-----
What types of web design are there?
1. Fixed 2. Fluid 3. Adaptive 4. Responsive
When targeting the retina iPhone with a fluid layout, which breakpoint width would we use?
480px
What's the most important tool for every web designer and developer?
A text editor
What type of website is built with fixed or relative widths and uses media queries to target specific devices and resolutions?
Adaptive
When determining which devices to target in your adaptive design approach, what should be taken into consideration?
Application & User Needs
Does our work end after media queries?
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.
What does an adjacent sibling combinator look like?
Example: The difference here is the + between the items selected. h2 + p { background-color: lightblue; }
What does an attribute selector look like?
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; }
What is the difference between FTP and SFTP?
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.
A website should deliver the same experience to users on the go and those browsing a website on a desktop computer.
False
Redirecting users to a completely separate mobile website when a handheld device is detected is an outdated design approach.
False
Retina displays have four times the pixel density, which has no major impact on images used throughout a website.
False
When scaling a site down to mobile, what should be done with the content?
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.
When coding for mobile what's one thing that's important to do?
It's important to think about space and touch space for users on mobile devices
What part does JavaScript play in web development?
JavaScript Plays the part of the behavior for the webpage.
When a website layout changes or reformats at specific browser widths, it's using what to achieve this?
Media Queries
Are adaptive websites built on a fluid grid?
No, adaptive websites aren't built on a fluid grid. Can use media queries to target specific device sizes
When a website is built on a fluid grid, it uses what type of unit for column widths?
Percentages
Which of these can be handled with CSS?
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
Which of the following solutions focuses on delivering a website as one seamless experience, rather than device specific?
Responsive Design
What does it meant when there are only two selections after the margin in css?
The first means top and bottom. The second means left and right. Example: margin: 40px 0px;
Why might it be important to separate HTML and CSS?
Separating structure and presentation makes it easier to make changes.
What are the typical options when choosing a web host?
Shared, VPS, Dedicated
How can we disable the zoom feature on a mobile website using viewport?
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">
How do we write a media query?
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) { }
What does the adaptive website design approach do?
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.
What do media queries do?
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.
What else can media queries do?
They allow us to take control of our fluid layout and target specific devices like tablets and smartphones.
What do media queries do?
They allow us to target specific widths, where our layout begins to break or star to look a little squished or tight.
How are responsive websites built?
They are built on a flexible fluid grid that adapts to the device or browser that renders the website.
What are break points in a website?
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.
What is a class selector in css?
This is a . (period or dot) example .btn
How do you get a website to change layouts when the size changes?
This is achieved using media queries.
What is a <span> tag used for?
This is basically used for an inline element. Example: <div id="contact"> <p>Call us: <span>1-555-CUP-CAKE</span></p> </div>
What does this do in css? div > a {}
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; }
How do we select an item with an id in html and css?
This is done by using a # sign.
How do we set the viewport?
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.
What does TLD Stand for?
Top Level Domain
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.
True
Responsive websites are adaptive, but adaptive websites are not responsive.
True