Scribd Logo
Загрузить

Добро пожаловать в Scribd!

  • Конспект

    Загружено:

    Vadym Tytarenko
    31 просмотров3 страницы

    Авторское право

    © © All Rights Reserved

    Доступные форматы

    DOCX, PDF, TXT или читайте онлайн в Scribd

    Этот документ был вам полезен?

    Это неприемлемый материал?

    Пожаловаться на этот документ

    Авторское право:

    © All Rights Reserved
    Скачайте в формате DOCX, PDF, TXT или читайте онлайн в Scribd
    Отметить как неприемлемый контент
    31 просмотров3 страницы

    Конспект

    Загружено:

    Vadym Tytarenko

    Авторское право:

    © All Rights Reserved
    Скачайте в формате DOCX, PDF, TXT или читайте онлайн в Scribd
    Отметить как неприемлемый контент
    из 3

    1. Что такое HTML, CSS, JS?

    HTML, CSS, JS – это база frontend, на которой строиться сам frontend.


    HTML (Hypertext Markup Language) – язык разметки, отвечает за наполнение веб-
    странички контентом, структурой и содержанием.

    CSS (Каскадная таблица стилей) - используется для оформления и


    позиционирования, внешний вид. Термин каскадный указывает на возможность
    слияния различных видов стилей и наследование стилей внутренними тегами от
    внешних.

    JS - позволяет добавить функционал, реакцию на действия пользователя.

    2. Базовые теги HTML


    <html>, <head>, <body>, <div>, <p>, <span>, <ul>, <li>, <header>, <section>

    3. Отличие между <head> & <header>


    <head> - Предназначен для хранения служебной информации о странице:
    заголовок, описание, кодирование и т.д. Вся эта информация не отображается в
    окне браузера, однако содержит данные, указывающие браузеру, каким образом
    нужно обрабатывать страницу. Подключение стилей и т.д.
    <header> - Шапка (хедер) выделяет вводную часть всей страницы. Как правило,
    содержит логотип, навигацию.

    4. Разница между <div> & <section>


    Section - Большой раздел, объединяющий содержимое по смысловому значению.
    Не отделяется от основного документа. Например, секция списка товаров, блок
    личной информации в профиле пользователя, раздел контактной информации.

    Div - Универсальный контейнер без семантического значения. Используется как


    блок-обертка для последующей стилизации контента.

    5. Как можно писать стили?


    Встроить стили глобально - <style> в <head>
    Встроить с помощью атрибута <style> в <div> (например)
    Импортировать стили из внешних файлов
    Подключить внешние таблицы стилей - <link> в <head>

    6. Почему плохо писать стили в одном файле?


    Если сайт большой, то его будет сложно поддерживать, также есть
    дополнительный функционал (псевдоклассы (hover, focus, active)), создание
    кастомных свойств (:root, переменные со стилями), дублирование кода и т.д.
    7. Приоритет стилей
    1. Inline
    2. ID
    3. Classes, Attribute, Pseudo-classes
    4. Elements

    8. Разница между адаптивной и отзывчивого верстки


    Отзывчивая верстка при изменении размера экрана блоки плавно сжимаются или
    растягиваются, а когда наступает точка перелома (breakpoint) – изменяют свое
    расположение таким образом, чтобы оптимально занять все свободное
    пространство. Адаптивная имеет несколько вариантов отображения, и, в отличие
    от респонсивной страницы – буквально. Дизайн сменяется рывками в жестко
    заданных точках перелома и не тянется между ними.

    JS
    1. Типы данных
    Примитивные – Number, Boolean, String
    Cложные – Объекты, Массивы, Функции (схожи – для JS это все объект)

    JavaScript предоставляет восемь различных типов данных:


    undefined, null, Boolean, string, symbol, bigint, number, object

    2. == и ===
    Оператор == сравнивает с приведением типов, а вот === — для того чтобы точно
    сравнить значение.
    “1” == 1 | true
    1 === “1” | false
    let a = {};
    a == {}; // false
    a === {}; // false
    a == a; // true
    a === a; // true

    3. var & let


    var – Функциональная
    let – Блочная

    var a = 5;
    var b = 10;

    if (a === 5) {
    let a = 4; // The scope is inside the if-block
    var b = 1; // The scope is inside the function

    console.log(a); // 4
    console.log(b); // 1
    }

    console.log(a); // 5
    console.log(b); // 1

    {
    let foo = 1
    var bar = 1
    }
    console.log(bar) Видно
    console.log(foo) Не видно

    4. Замыкание
    Переменная существует внутри этой функции, не выходит на вверх
    function foo() {
    let count = 0

    return function() {
    return count++
    }
    }

    Вам также может понравиться