FreeCode.Academy

Уроки

Топики

Технологии

Блоги

Чаты

Участники

Проекты

Задачи

Таймеры

API

Изучайте современный JavaScript с нами совершенно бесплатно!

С чего начать программисту.

Решенные задания

Используйте селекторы CSS для изменения стилизации элементов

Д
Дамир

В CSS есть сотни properties CSS, которые вы можете использовать, чтобы изменить способ поиска элемента на вашей странице. Когда вы ввели <h2 style="color: red;">CatPhotoApp</h2> , вы стали стилизовать этот отдельный элемент h2 со inline CSS , который обозначает Cascading Style Sheets . Это один из способов указать стиль элемента, но есть лучший способ применить CSS . В верхней части кода создайте блок style следующим образом:

<style>
</ style>
Внутри этого блока стиля вы можете создать CSS selector для всех элементов h2 . Например, если вы хотите, чтобы все элементы h2 были красными, вы можете добавить правило CSS, которое выглядит так:
<style>
h2 {color: red;}
</ style>
Обратите внимание, что важно иметь как открывающиеся, так и закрывающие фигурные скобки ( { и } ) вокруг правила CSS каждого селектора. Вы также должны убедиться, что правила CSS вашего селектора находится между открывающей и закрывающей фигурной скобкой. Наконец, обязательно добавьте точку с запятой в конец каждого из правил CSS вашего селектора.


Удалите атрибут стиля элемента h2 и вместо этого создайте блок style CSS. Добавьте необходимые правила CSS, чтобы все элементы h2 стали синими.


Сделайте радиокнопки и чекбоксы включенными по умолчанию

D
darkwayder

Вы можете сделать чекбокс или радиокнопку включенными по умолчанию с помощью атрибута checked. Для этого просто добавьте слово "checked" во внутреннюю часть тега input. Например:


Настройте первую из ваших radio buttons и первый из ваших checkboxes так чтобы они были отмеченны по умолчанию.


Используйте селектор класса в CSS для стилизации элемента

Д
Дамир

Классы - многоразовые стили, которые можно добавить к элементам HTML. Вот пример объявления класса CSS:

<style>
.blue-text {
color: blue;
}
</ style>
Вы можете видеть, что мы создали класс CSS, который назвали blue-text в <style> . Вы можете применить класс к HTML-элементу следующим образом: <h2 class="blue-text">CatPhotoApp</h2> Обратите внимание, что в элементе style CSS имена классов начинаются с точки. В атрибуте класса HTML-элементов имя класса не включает точку.


Внутри элемента style измените селектор h2 на .red-text и обновите значение цвета с blue на red . Задайте вашему элементу h2 атрибут class со значением 'red-text' .


Используйте селекторы CSS для изменения стилизации элементов

Д
Дамир

В CSS есть сотни properties CSS, которые вы можете использовать, чтобы изменить способ поиска элемента на вашей странице. Когда вы ввели <h2 style="color: red;">CatPhotoApp</h2> , вы стали стилизовать этот отдельный элемент h2 со inline CSS , который обозначает Cascading Style Sheets . Это один из способов указать стиль элемента, но есть лучший способ применить CSS . В верхней части кода создайте блок style следующим образом:

<style>
</ style>
Внутри этого блока стиля вы можете создать CSS selector для всех элементов h2 . Например, если вы хотите, чтобы все элементы h2 были красными, вы можете добавить правило CSS, которое выглядит так:
<style>
h2 {color: red;}
</ style>
Обратите внимание, что важно иметь как открывающиеся, так и закрывающие фигурные скобки ( { и } ) вокруг правила CSS каждого селектора. Вы также должны убедиться, что правила CSS вашего селектора находится между открывающей и закрывающей фигурной скобкой. Наконец, обязательно добавьте точку с запятой в конец каждого из правил CSS вашего селектора.


Удалите атрибут стиля элемента h2 и вместо этого создайте блок style CSS. Добавьте необходимые правила CSS, чтобы все элементы h2 стали синими.


Сделайте радиокнопки и чекбоксы включенными по умолчанию

D
darkwayder

Вы можете сделать чекбокс или радиокнопку включенными по умолчанию с помощью атрибута checked. Для этого просто добавьте слово "checked" во внутреннюю часть тега input. Например:


Настройте первую из ваших radio buttons и первый из ваших checkboxes так чтобы они были отмеченны по умолчанию.


Используйте селектор класса в CSS для стилизации элемента

Д
Дамир

Классы - многоразовые стили, которые можно добавить к элементам HTML. Вот пример объявления класса CSS:

<style>
.blue-text {
color: blue;
}
</ style>
Вы можете видеть, что мы создали класс CSS, который назвали blue-text в <style> . Вы можете применить класс к HTML-элементу следующим образом: <h2 class="blue-text">CatPhotoApp</h2> Обратите внимание, что в элементе style CSS имена классов начинаются с точки. В атрибуте класса HTML-элементов имя класса не включает точку.


Внутри элемента style измените селектор h2 на .red-text и обновите значение цвета с blue на red . Задайте вашему элементу h2 атрибут class со значением 'red-text' .


Используйте селекторы CSS для изменения стилизации элементов

Д
Дамир

В CSS есть сотни properties CSS, которые вы можете использовать, чтобы изменить способ поиска элемента на вашей странице. Когда вы ввели <h2 style="color: red;">CatPhotoApp</h2> , вы стали стилизовать этот отдельный элемент h2 со inline CSS , который обозначает Cascading Style Sheets . Это один из способов указать стиль элемента, но есть лучший способ применить CSS . В верхней части кода создайте блок style следующим образом:

<style>
</ style>
Внутри этого блока стиля вы можете создать CSS selector для всех элементов h2 . Например, если вы хотите, чтобы все элементы h2 были красными, вы можете добавить правило CSS, которое выглядит так:
<style>
h2 {color: red;}
</ style>
Обратите внимание, что важно иметь как открывающиеся, так и закрывающие фигурные скобки ( { и } ) вокруг правила CSS каждого селектора. Вы также должны убедиться, что правила CSS вашего селектора находится между открывающей и закрывающей фигурной скобкой. Наконец, обязательно добавьте точку с запятой в конец каждого из правил CSS вашего селектора.


Удалите атрибут стиля элемента h2 и вместо этого создайте блок style CSS. Добавьте необходимые правила CSS, чтобы все элементы h2 стали синими.


Новые ученики

E
Evelina Klyuchko
Д
Дамир
A
adel
ivan
ivan

Все ученики

Задачи где нужна помощь

  1. Статус
    Задача
    Дата создания
    Планируемая дата начала
    Планируемая дата выполнения
    Дата начала
    Дата выполнения
    Постановщик
    Кто работает
  2. Новая

    Задача: В офисе на странице списка таймеров вывести информацию суммарное время выполнения Нужна помощь

    Проект: freecode.academy

    Вот здесь есть подсчет и форматирование затраченного времени : https://github.com/freecode-academy/freecode.academy/blob/e8dc066e7a539e87d1a87e72ada36f059a32d291/src/pages/Office/Timers/View/Timer/index.tsx#L13-L15

    Надо на странице таймеров вывести суммарное затраченное время.

    Сама страница здесь: https://github.com/freecode-academy/freecode.academy/blob/e8dc066e7a539e87d1a87e72ada36f059a32d291/src/pages/Office/Timers/View/index.tsx

    Требуемые технологии

    React (2), moment-js (2)
    24 февр. 2021 г., 20:06
    Николай
    Николай
  3. Новая

    Задача: В офисе на странице таймеров добавить условие поиск только по текущему пользователю Нужна помощь

    Проект: freecode.academy

    Страница: https://freecode.academy/office/timers

    Сейчас выводятся таймеры без учета кто их создал. Надо отфильтровать по условию CreatedBy: {id: currentUserId}. currentUserId получить из контекста OfficeContext::user.
    Надо галочку добавить "Только мои". Если пользователь текущий имеется, то галочка по умолчанию checked.

    Условия прописаны здесь: https://github.com/freecode-academy/freecode.academy/blob/e8dc066e7a539e87d1a87e72ada36f059a32d291/src/pages/Office/Timers/index.tsx#L19-L27

    Требуемые технологии

    React (3), GraphQL (2), Material-UI (2)
    24 февр. 2021 г., 19:58
    Николай
    Николай
  4. Выполняется

    Задача: Перенести страницы и настроить роутинг 2 Нужна помощь

    Проект: Учебный проект на next-js. Покемоны.

    Перенести оставшиеся страницы на NextJs:

    1. Перенести стили из css в styled-components
    2. Пофикстить Typescript ошибки
    3. Пофиксить подключение к firebase

    17 февр. 2021 г., 18:04
    17 февр. 2021 г., 0:00
    21 февр. 2021 г., 0:00
    17 февр. 2021 г., 0:00
    Олег
    Олег

Все задачи где нужна помощь

Новые Комментарии

Олег
Олег
Перенести страницы и настроить роутинг 2
Про этот дженерик говорил:

& Omit<Pokemon, 'abilities' | 'stats' | 'base_experience' | 'height'>

Объясни пожалуйста, как он работает и вообще в каких случаях мы должны использовать дженерики.

Возможно в прошлом видео ты объеснял, но все не получается запомнить по видео, через текст проще, всегда можно вернуться посмотреть.
Николай
Николай
Новый личный кабинет программиста на сайте freecode.academy
Ну да))
Ладно, со временем решится. Сейчас все равно надо функционал еще накидывать.
Попов Дмитрий
Попов Дмитрий
Новый личный кабинет программиста на сайте freecode.academy
Супер! Интересно, во что выльется. Я бы себя предложил для доработки кабинета - но какой из меня дизайнер ты знаешь))
Николай
Николай
Перенести страницы и настроить роутинг 2
ОК.
Олег
Олег
Перенести страницы и настроить роутинг 2
Слушай, когда просто смотришь кажется, что многое не понимаешь, но когда начинаешь тоже писать уже становится более понятно, что делаешь. Но вопросы будут не переживай)

Все комментарии