Hi

Markup

Semantics, where are you?

Элемент <div> следует использовать только в том случае, если никакой другой семантический элемент (такой как <article> или <nav>) не подходит

figure = img + figcaption +div/ul 

Headers

<h2>Hello</h2>
<h4>World</h4>
<h2>Hello</h2>
<h3>World</h3>
<h1>
    <a href="#">
        <img src="img/logo.png" alt="Gost Host">
    <a>
</h1>

The answer to life the universe and everything

<ul class="">

I feel so empty....

<div class="log-reg login diagonal">
    <a href="#">LOGIN</a>
</div>
<p>www.</p>

Bad decisions

<a href="#" class="nav__link">
    Home
    <span class="nav__menu-border"></span>
</a>
<img src="images/Elips 1.svg"
     width="30px"
     height="auto"
     alt=""
     class="Elips_1"
/> 
<a href="#" id="basic"  class="select-plan"><p>SELECT PLAN</p></a>

<div> Blah-blah-blah </div>

div

<div class="package flex-package orange">

<div class="john">

Too common classes

<section class="main__domain">
    <h3 class="main__domain-title">Would you like to buy a new domain?</h3>
</div>

BEM

  • :before / :after
  • transform: skewX(deg);

Why?...

CSS

@import "/style/fonts.css"
body {
    width: 1600px;
    ...
    position: static;
}
clear: both;
...
z-index: 0
font-size: 15.96px; /* 15px */
font-size: 1.3437em; /* why... */
font-family: Helvetica, Arial, sans-serif;

JS

Bruce Wayne Bruce Wain

6    5

false

false
(check __proto__)

false

19

Error: j is not defined

3

false

undefided

false

6

200

50

42

undefined

false

Какой из пунктов выведет [object Object], если const obj={};

console.log(obj.valueOf());

console.log(obj.toString());

console.log(obj.toLocaleString());

console.log(obj.isPrototypeOf());

false

{}

Какой из пунктов выведет true, если x,y=null;

console.log(x==y);

console.log(x===y);

console.log(null===y);

console.log(undefined===x);

Тело функции scope

invoke();

invoke.call();

invoke.apply();

invoke.bind();

{ name: "false" }

youtube

https://developers.google.com/youtube/v3/docs/search/list​

https://learn.javascript.ru/fetch​

https://www.youtube.com/watch?v=JbWnRhHfTDA​

https://www.googleapis.com/youtube/v3/search?key=AIzaSyCTWC75i70moJLzyNh3tt4jzCljZcRkU8Y&type=video&part=snippet&maxResults=25&q=pewdiepie

buildApiRequest('GET',
                '/youtube/v3/search',
                {'key': YOUR_KEY,
                 'maxResults': '25',
                 'part': 'snippet',
                 'q': 'pewdiepie',
                 'type': 'video'});
{
 "kind": "youtube#searchListResponse",
 "etag": "\"XI7nbFXulYBIpL0ayR_gDh3eu1k/hpzfModSjuwIo2HyTansUSVR9qw\"",
 "nextPageToken": "CBkQAA",
 "regionCode": "BY",
 "pageInfo": {
  "totalResults": 1000000,
  "resultsPerPage": 25
 },
 "items": [
  { ....

Request have parameter - pageToken - ​The pageToken parameter identifies a specific page in the result set that should be returned. In an API response, the nextPageToken and prevPageToken properties identify other pages that could be retrieved.

Some tips

gh-pages

  1. Create branch gh-pages
  2. Build (move there builded files and folders)
  3. Whait a bit
  4. https://yourRepName.github.io/taskFolder/

Linter

 

Beautifier

  1. html
  2. css
  3. javascript

.gitignore

  1. package-lock.json
  2. node_modules/
  3. dist/
  4. all other files and folders that can be builded

Q & A

Js test, youtube task, markup mistakes

By Victoria Budyonnaya

Made with Slides.com

Js test, youtube task, markup mistakes

  • 930

More from Victoria Budyonnaya