Basics of the Web Flashcards

1
Q

How does the internet work?

A
  1. PC or client sends message to Internet Service Provider (ISP) with requests for a website.
  2. The DNS server then looks for that websites IP address.
  3. The DNS server then sends the IP to the PC that requested the website.
  4. The PC gives the websites IP to the ISP.
  5. The ISP sends it to the internet’s backbone (giant submarine wires that run all over the world).
  6. The request eventually gets to the server which uses the IP address to retrieve the requested files and sends it back to the PC.
How well did you know this?
1
Not at all
2
3
4
5
Perfectly
2
Q

What does HTML stand for?

A

Hypertext Markup Language. It tells the browser how to implement web pages.

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
3
Q

Name three self closing tags

A
  • img
  • br
  • link
How well did you know this?
1
Not at all
2
3
4
5
Perfectly
4
Q

What is a mojibake error?

A

If a browser cannot read the character set encoding then you get a mojibake error.

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
5
Q

What is UTF-8?

A

Unicode 8 is the universal character set and UTF-8 is it’s encoding. It is the most commonly used.

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
6
Q

What is the ‘DOCTYPE’ keyword used for?

A

The doctype tag tells the browser what version of HTML to use when interacting with the webpage.

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
7
Q

What does the alt modifier do?

A

The ‘alt’ keyword allows search engines to index your image to searches.

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
8
Q

How do we add links to our webpages?

A

We must use an anchor tag and a href HTML attribute. The text in between the tags will become a clickable link. It has the form:
Google

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
9
Q

What are the six elements of a table?

A
table
thead
tfoot
tbody
tr
td
How well did you know this?
1
Not at all
2
3
4
5
Perfectly
10
Q

What element types should you use for a password entry?

A

A form with a label, textbox and submit button. It would have the form:
- Creates form
Password: - Creates element label
- Creates textbox input

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
11
Q

How do you change the colour of a element in CSS inline to blue?

A

element style = “background-color:blue”

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
12
Q

What languages does CSS work on?

A

CSS allows us to style markup languages such as HTML and XML.

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
13
Q

Where should you place an internal CSS?

A

Within the head document tags within style tags.

E.g- CSS_needed

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
14
Q

What is the chrome extension pesticide useful for?

A

It marks a box around all the elements of a webpage allowing us to style it easier.

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
15
Q

Where should the link go to an external CSS style sheet?

A

We should link to the style sheet within the head of a document using the form:

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
16
Q

What is the first step we should take when debugging a web page?

A

Head to the developer tools and view the console. That way we can see any errors the browser is having loading the file and elements.

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
17
Q

What is the anatomy of CSS syntax?

A
Selector - selects element
property - selects element property
value - changes value
CSS syntax has the form:
selector {property: value;}
How well did you know this?
1
Not at all
2
3
4
5
Perfectly
18
Q

What is the class attribute used for in a tag?

A

The class attribute allows us to give each tag a specific label. That way we can distinguish between each element and style it.

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
19
Q

When should you use id when should you use class?

A

Id’s must be unique however classes can be used over and over again. So if you want to select multiple elements use a class. To select one element you can use an id.

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
20
Q

Where do you add favicons?

A

In the header of a document using a

21
Q

Why are divs useful?

A

Divs allow us to create divisions in our html document. We can use them whenever we want and are often used to divide up a pages content.

22
Q

What is the difference between a margin and padding?

A

Padding - How much space between content and the box edge.

Margin - How much space between elements outside of the element border.

23
Q

What are the four display properties?

A

flex, grid, block and table

24
Q

When would you use visibility as oppose to display:none?

A

When you want an element to toggle between hidden and showing.

25
Q

What are analogous colours?

A

Colours that are next to each other on the colour wheel. They give a harmonious feel.

26
Q

What is a triadic scheme?

A

Three colours that form a triangle on the colour wheel.

27
Q

Why do serif fonts have feet?

A

The feet on serif are inspired by engraved letters on marble.

28
Q

What is the advantage of sans serif fonts?

A

They are highly readable and give the mood of simple sensibility.

29
Q

What are the pillars of UI design?

A

Use two fonts in each design.
Use fonts from similar time era and moods.
For heading and text you want a contrast in font weight and serif-ness.
Change colours of important info to highlight what you want users to know.

30
Q

What is the rule of alignment?

A

Titles and text should have the same alignment.

31
Q

What is UX design?

A

Meant to be unobtrusive and invisible. It means that using your website so easy that users should barely notice how well designed it is.

32
Q

What are the pillars of UX?

A
Simplicity 
Consistency
Reading Patterns
Multi-platform design
Test at every step
Don't use dark patterns
33
Q

What are the two most common reading patterns?

A

The F pattern and the Z pattern.

34
Q

What are dark patterns? Give two examples.

A

Dark patterns are sneaky UX designs that get users to do things they don’t want to at the benefit of someone else. For example making users auto select a more expensive plan and signing users up to things they don’t understand when moving around your website.

35
Q

What are the four properties of the CSS position property?

A

Static - stuck default.
Relative - Position is relative to static positioned element.
Absolute - Position of element is relative to parent element.
Fixed - Position of the element stays fixed at specified position in pixels, % or em.

36
Q

How would you use CSS to align text to the centre of an element?

A

Using the form:

text-align: center;

37
Q

Why would you use a websafe font?

A

Websafe fonts are fonts that most browsers can render. Therefore they are the most likely to be supported. You should use them in your web design even as a back up to make sure the webpage has the greatest chance of being presented how you want it to.

38
Q

What 3 units can a font be in?

A

Pixels, % or em.

39
Q

Why would we use the float layout?

A

The float layout is used for wrapping text around images. It is handy for web sites that need a lot of texts and images but is short on space.

40
Q

What is a clearing layout?

A

Clearing specifies what elements are permitted to float beside a previously cleared element and on what side they appear on.

41
Q

Why is bootstrap useful?

A

It makes web design easier by making available many dynamic and interactive elements for use for free. It allows websites to be more responsive and reliable.

42
Q

What are two ways you can add bootstrap to your website?

A

You can link bootstrap using a link tag and href in the header like we did for CSS and you can also used a bootstrap template to ensure all the functionality is available.

43
Q

What is a CDN? Why are they useful?

A

A Content Delivery Network (CDN) allows a file to be stored in multiple servers all over the world. That means that if the file is requested the CDN will find which server location is the shortest distance from the requesting computer. This means the time needed to load a website is greatly reduced.

44
Q

What is the work-flow of a website development project?

A
  1. Look at websites you like.
  2. Look at their UI patterns.
  3. Create and sketch wireframe.
    4.Create a mockup of the website.
  4. Create prototype with functionality.
  5. Add finishing features and release.
    Test at every step.
45
Q

How would I create a grid of 3 columns/row in large,

2 columns/row on medium and 1 column/row on small?

A

You would use the form:

col-lg-4 col-med-6 col-sm-12

46
Q

What is a fluid container?

A

Are the basic building blocks of building bootstrap elements. They always take up 100% of screen no matter the size of the view port.

47
Q

What is the address of the local host?

A

127.0.0.1

48
Q

What is the difference between GET requests and POST requests?

A

GET is used to retrieve data from a source such as a server.

POST is used to send data to a source to create or update a resource.