Omnifood Project - Optimizations

Question 1

What to do to make the nav bar invisible when it size is mobile (step 1-3)?

  .main-nav {
    background-color: rgba(255, 255, 255, 0.9);
    -webkit-backdrop-filter: blur(5px);
    backdrop-filter: blur(10px);
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100vh;
    transform: translateX(100%);
 
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.5s ease-in;
 
    /* 1) Hide it visually */
     
    /* 2) Make it unaccessible to mouse and keyboard */
     
    /* 3) Hide it from screen readers */
     

Answer 1

  /* 1) Hide it visually */
    opacity: 0;
 
    /* 2) Make it unaccessible to mouse and keyboard */
    pointer-events: none;
 
    /* 3) Hide it from screen readers */
    visibility: hidden;

Question 2

In the following example the .nav-open is set on the header instead of the nav element (child of header). Why is that?

const btnNavEl = document.querySelector(".btn-mobile-nav");
const headerEl = document.querySelector(".header");
 
btnNavEl.addEventListener("click", function () {
  headerEl.classList.toggle("nav-open");
});

Answer 2

Putting the class on the parent element isn’t required, but is a common practice

Question 3

How to reach both buttons while they have the same class name?

<button class="btn-mobile-nav">
		<ion-icon class="icon-mobile-nav" name="menu-outline"></ion-icon>
		<ion-icon class="icon-mobile-nav" name="close-outline"></ion-icon>
	</button>

Answer 3

Use descended selectors:

  .nav-open .icon-mobile-nav[name="close-outline"] {
      }
 
  .nav-open .icon-mobile-nav[name="menu-outline"] {
      }

Question 4

When the nav bar is opened, the icon should become a close button. How is this done?

<button class="btn-mobile-nav">
		<ion-icon class="icon-mobile-nav" name="menu-outline"></ion-icon>
		<ion-icon class="icon-mobile-nav" name="close-outline"></ion-icon>
	</button>

Answer 4

  .nav-open .icon-mobile-nav[name="close-outline"] {
    display: block;
  }
 
  .nav-open .icon-mobile-nav[name="menu-outline"] {
    display: none;
  }

Question 5

What to do with the button so it always stays on top:

.btn-mobile-nav {
    display: block;
  }

Answer 5

.btn-mobile-nav {
    display: block;
    z-index: 9999;
  }

Use the z-index

Question 6

Where will this link take you?

<header class="header">
      <a href="#">
        <img class="logo" alt="Omnifood logo" src="img/omnifood-logo.png" />
      </a>

Answer 6

This will simply lead to the top of the page

Question 6

What to fill in here to scroll to the section underneath:

section class="section-cta" >
        <div class="container">

And button:
~~~
<a>Start eating well</a>
~~~

Answer 6

section class="section-cta" id="cta">
        <div class="container">

 <a href="#cta" class="btn btn--full margin-right-sm"
              >Start eating well</a
            >

So fill in the id in the section and use it in the href

Question 7

Which method can you use to blur out the background? Are there exception in browsers?

Answer 7

backdrop-filter: blur(10px);

Safari, firefox

Question 7

How could you tell the html that by default you want a scrollbar in case of overflow and that the scrolling must be smoothly.

html {
  font-size: 62.5%;
}

Answer 7

html {
  font-size: 62.5%;
  overflow-x: hidden;
  scroll-behavior: smooth;
}

However this does NOT work on Safari

Question 8

Where can you test whether design tools are available for web browsers?

Answer 8

caniuse.com

Question 9

How would you do a backdrop in Safari?

Answer 9

Add the -webkit- prefix to the backdrop filter

 .main-nav {
    background-color: rgba(255, 255, 255, 0.9);
    -webkit-backdrop-filter: blur(5px);

Question 10

How would you do a backdrop in Firefox?

Answer 10

As a resolution increase the alpha channel of the background-color

So that is looks acceptable in firefox as well

Question 11

Is it possible to write two of the same media queries?

Answer 11

Yes, no problem at all. Happens a lot actually.

Question 12

What is Lighthouse used for? Can you use it with Chrome?

Answer 12

Used for adding some improvements to the website
Created by Google so available in the Inspect menu

Question 13

What test results will Lighthouse give you?

Answer 13

Performance (note that you are loading from your own computer)

Accessibility

Best practices

SEO

Question 14

How to add a description to your page?

Answer 14

Start a new meta tag with name and content attribute

name="description"
content = insert your description

Question 15

How to add a title to your page?

Answer 15

<title>Omnifood &mdash; Never cook again!</title>

Question 16

What is the process of adding a fav icon?

Answer 16

1. Resize the image to a small size like 64 x 64
2. <link rel="icon" href="img/favicon.png" />

Question 17

How to represent the website in a touch icon?

Answer 17

1. Resize the image to about 192 x 192 for the icon
2. <link rel="apple-touch-icon" href="img/apple-touch-icon.png" />

Question 18

What is a good rule of thumb regarding image size?

Answer 18

The original image size should always be twice the size of the image displayed on screen
The reason is that high density screens need 2 pixels to display 1

You can see the image size in the inspect menu by hovering over image

Question 19

What could be a way of upgrading an image dimensions?

Answer 19

Use squoosh online app

Question 20

What is Netlify?

Answer 20

A highly recommended platform for deploying your website

Question 21

Gebleven bij Notes 146