Html css дорожная карта

Saved searches

Use saved searches to filter your results more quickly

You signed in with another tab or window. Reload to refresh your session. You signed out in another tab or window. Reload to refresh your session. You switched accounts on another tab or window. Reload to refresh your session.

Роадмап для начинающего фронтенд-разработчика от сообщества LearnJsForPikabuChat

vika135/frontend-beginner-roadmap

This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.

Name already in use

A tag already exists with the provided branch name. Many Git commands accept both tag and branch names, so creating this branch may cause unexpected behavior. Are you sure you want to create this branch?

Sign In Required

Please sign in to use Codespaces.

Launching GitHub Desktop

If nothing happens, download GitHub Desktop and try again.

Launching GitHub Desktop

If nothing happens, download GitHub Desktop and try again.

Launching Xcode

If nothing happens, download Xcode and try again.

Launching Visual Studio Code

Your codespace will open once ready.

There was a problem preparing your codespace, please try again.

Latest commit

Git stats

Files

Failed to load latest commit information.

README.md

Роадмап начинающего фронтенд-разработчика

Составляется силами участников сообщества LearnJsForPikabuChat

Интерактивные курсы для самых маленьких 🙂 помогут изучить основы

Сайт со структурированной информацией по html

Настоятельно рекомендую изучить, что такое семантическая вёрстка и зачем она нужна

Самый известный справочник по html на русском языке

CSS — язык описания внешнего вида веб-страницы (не язык программирования!)

// вставить ссылку на какие-нибудь курсы или учебник

CSS Dinner — игра для изучения селекторов CSS

Сейчас есть три основных способа выстраивать лэйаут на веб-страницах: классическая блочная модель, flexbox и grid

Flexbox предназначен для создания гибких макетов.

Интерактивная игра, которая поможет научиться верстать на флексбоксе. В этой игре вам необходимо доставить лягушат на их кувшинки, используя css свойства флексбокса

Grid представляет собой двумерную сетку для CSS. Эта технология является наиболее новой из всех, представленных здесь

Интерактивная игра, которая поможет научиться верстать на grid. В этой игре вам нужно вырастить морковный сад, используя все свои знания о grid

Центрирование элементов в CSS

Очень часто вы будете сталкиваться с задачей выравнивания элементов в CSS. В этом вам поможет данная статья, которая спасла не один комок нервов автору этого гайда 🙂

БЭМ (Блок, Элемент, Модификатор) — компонентный подход к веб-разработке. Быстрый старт

Классический и полный учебник по Javascript для начинающих. Помимо статей о js содержит в себе раздел про работу с браузером (DOM, события и пр.). Очень полезный учебник, однозначно рекомендую

Справочник по Javascript, которым я пользуюсь в работе

Для начала необходимо изучить, что такое HTTP. Для фронтенд-разработчика важно знать, какие у этого протокола есть методы, а также изучить коды состояния (наизусть их запоминать не надо 🙂 нужно знать, какие категории бывают, чем отличается успешный ответ от ошибки).

Devtools (инструменты разработчика) — программы, предназначенные для отладки и разработки. В браузер уже встроен этот инструмент.

Интерактивный тур для начинающих изучать git

Классический учебник для изучения git, существует на многих языках

Игра для изучения ветвления в гит

Typescript это компилируемый язык программирования (компилируется в javascript). Typescript отличается от JavaScript возможностью явного статического назначения типов.

Существует три самых популярных фреймворка для javascript: Angular, React, Vue

В данной статье основное внимание будет уделено этому фреймворку, так как автор специализируется именно на нём 🙂

Ангуляр — фреймворк, разрабатываемый компанией гугл

Tour of Heroes — гайд, чтобы начать писать на ангуляре. Во время прохождения этого гайда вы напишете приложение о супергероях и ознакомитесь с основными концепциями ангуляра, такими как:

• директивы
• компоненты
• дата биндинг
• пайпы
• сервисы
• роутинг

1. Менеджер пакетов npm тык
2. Сборщики проектов – Grunt тык
3. Сборщики проектов – webpack вот и вот еще
4. Введение Vue тут
5. Введение Vue-cli тут
6. Введение Vuex тут
7. Устанавливаем vue-cli полностью проходим по инструкции
8. Немного вкратце о структуре
9. Кому зайдет видеоформат
10. Документация1 и документация2
11. Подключаем фреймворки для удобства и скорости Vuetify

Мой любимый канал о фронтенде. На канале представлено очень много видео по фронтенду на разные темы — javascript, typescript, фреймворки, вебпак и т.д.

Timur Shemsedinov имхо, очень много полезной инфы (с) WiiJoy

Игра для изучения библиотеки RxJS

Чистый код. Создание, анализ и рефакторинг | Мартин Роберт К.

Источник

Saved searches

Use saved searches to filter your results more quickly

You signed in with another tab or window. Reload to refresh your session. You signed out in another tab or window. Reload to refresh your session. You switched accounts on another tab or window. Reload to refresh your session.

Covering all the CSS aspects through the RoadMap. Buttons, Hover Effects, Animations, Emoji, Tooltips, Landing Page, Youtube Clone

Roopaish/CSS-RoadMap

This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.

Name already in use

A tag already exists with the provided branch name. Many Git commands accept both tag and branch names, so creating this branch may cause unexpected behavior. Are you sure you want to create this branch?

Sign In Required

Please sign in to use Codespaces.

Launching GitHub Desktop

If nothing happens, download GitHub Desktop and try again.

Launching GitHub Desktop

If nothing happens, download GitHub Desktop and try again.

Launching Xcode

If nothing happens, download Xcode and try again.

Launching Visual Studio Code

Your codespace will open once ready.

There was a problem preparing your codespace, please try again.

Latest commit

Git stats

Files

Failed to load latest commit information.

README.md

- element, .class-name, #id, element.className - [aria-hidden="true"] (selects elements with aria-hidden attribute with value true), - div.row * (all child elements of div of class row) - li > a (Only direct descendants, not all) - li + a (Only the first a after each li) - li, a (All a elements and all li elements) - li ~ a (a element following a li element)

- Last property is used for same element - id > className > element - inherit (Inherit parents property) - initial (Sets to initial value of that property) - unset (Resets the property to its natural value)

- content, padding, border, margin

- position: relative | absolute | fixed | sticky; - top, right, bottom, left

- display: block | inline-block | inline | table | flex | grid;

display: flex; flex-direction: row | column; flex-wrap: wrap | nowrap | wrap-reverse; justify-content: flex-start | flex-end | center | space-around | space-between | space-evenly; align-items: flex-start | flex-end | center | space-around | space-between | space-evenly;

display: grid; grid-template-columns: repeat(12, 1fr); grid-auto-rows: 120px; gap: 10px; column-gap: 10px; row-gap: 10px;

- p::first-line, p::first-letter - p::after, p::before - ::marker(marker of all lists) - ::selection: color, background, cursor, and outline (on selecting text)

- a:active (Selects the active link) - a:hover (Selects links on mouse over) - a:link (Selects all unvisited links) - a:visited (Selects all visited links) - input:checked (Selects every checked > element) - input:focus (Selects the > element that has focus) - input:disabled (Selects every disabled > element) - input:enabled (Selects every enabled > element) - input:in-range (Selects > elements with a value within a specified range) - input:out-of-range (Selects > elements with a value outside a specified range) - input:valid (Selects all > elements with a valid value) - input:invalid (Selects all > elements with an invalid value) - input:optional (Selects > elements with no "required" attribute) - input:read-only (Selects > elements with a "readonly" attribute specified) - input:read-write (Selects > elements with no "readonly" attribute) - input:required (Selects > elements with a "required" attribute specified) - p:empty (Selects every > element that has no children) - p:first-child (Selects every > elements that is the first child of its parent) - p:first-of-type (Selects every > element that is the first > element of its parent) - p:last-child (Selects every > elements that is the last child of its parent) - p:last-of-type (Selects every > element that is the last > element of its parent) - p:lang(it) (Selects every > element with a lang attribute value starting with "it") - :not(p) (Selects every element that is not a > element) - p:nth-child(2) (Selects every > element that is the second child of its parent) - p:nth-last-child(2) (Selects every > element that is the second child of its parent, counting from the last child) - p:nth-last-of-type(2) (Selects every > element that is the second > element of its parent, counting from the last child) - p:nth-of-type(2) (Selects every > element that is the second > element of its parent) - a:nth-childe(odd) (Selects all odd elements of a given type) - a:nth-childe(even) (Selects all even elements of a given type) - a:nth-childe(3n) (Selects every 3rd anchor element) - p:only-of-type (Selects every > element that is the only > element of its parent) - (p:only-child Selects every > element that is the only child of its parent) - :root (Selects the document's root element) - #news:target (Selects the current active #news element )

-CSS variables :root < --background: "red"; > element < --main-bg-color: brown; > p < background-color: var(--background); >

@media (min-width: 600px) < html < font-size: 1.2px; > > @media not|only mediatype and (expressions) < CSS-Code; > - meidatypes = all | screen | print | speech | orientation /* When the width is between 600px and 900px OR above 1100px - change the appearance of */ @media screen and (max-width: 900px) and (min-width: 600px), (min-width: 1100px) <>

transition: 0.2s ease-in-out alternate; animation: animationName 0.2s linear infinite; @keyframe animationName < to < >from < >> @keyframe animationName < 0% < >50% < >100% < >>

1. Easy
2. Transparent Login Form previewcode

Responsive Video Background previewcode

Medium

CSS Only Tooltips previewcode



Custom Checkbox and Radio previewcode

About

Covering all the CSS aspects through the RoadMap. Buttons, Hover Effects, Animations, Emoji, Tooltips, Landing Page, Youtube Clone

Источник

Читайте также:  Java and net in networking