Ребята, я к вам с очередной годнотой. Есть один бесплатный сайт, там есть обучалки на почти все языки, как говорится спасибо людям на твиче, которые мне скинули его.
Как ваши дела кстати?
https://metanit.com/web/
p.s. если учите веб, прошу вас, даже не смотрите что такое jquery и бутстрап. На старте обучения погружаться в легаси - плохая практика
Как ваши дела кстати?
https://metanit.com/web/
p.s. если учите веб, прошу вас, даже не смотрите что такое jquery и бутстрап. На старте обучения погружаться в легаси - плохая практика
👍11
Рубрика хороший паттерн. Мне скинул знакомый верстальщик, как у него на проекте. Дока мне понравилась, думаю новичкам, да и мне будет интересно ознакомиться. Чтобы информация усваивалась буду выкладывать по одной теме в день. (Мне просто лень всё сделать сразу)
Тема номер раз, надеюсь все успели уже пощупать, что такое scss ? Если нет, вперед, вам нужно загуглить только две вещи (что такое миксины, что такое спрайты)
Итак, если с названиями js, mixins, sprites всё понятно, что же такое vendor.
Папка src/js/vendor предназначена для хранения скриптов сторонних библиотек, которых нет в репозитории npm.
Файл src/scss/main.scss предназначен для хранения основных стилей сайта. При сборке данный файл преобразуется в CSS и сохраняется в build/css вместе с файлом main.css.map.
Папка src/resources предназначена для хранения различных файлов проекта. При сборке файлы из данной папки попадают в build.
Папка src/resources/fonts предназначена для хранения шрифтов. При сборке файлы из данной папки попадают в build/fonts
Тема номер раз, надеюсь все успели уже пощупать, что такое scss ? Если нет, вперед, вам нужно загуглить только две вещи (что такое миксины, что такое спрайты)
Итак, если с названиями js, mixins, sprites всё понятно, что же такое vendor.
Папка src/js/vendor предназначена для хранения скриптов сторонних библиотек, которых нет в репозитории npm.
Файл src/scss/main.scss предназначен для хранения основных стилей сайта. При сборке данный файл преобразуется в CSS и сохраняется в build/css вместе с файлом main.css.map.
Папка src/resources предназначена для хранения различных файлов проекта. При сборке файлы из данной папки попадают в build.
Папка src/resources/fonts предназначена для хранения шрифтов. При сборке файлы из данной папки попадают в build/fonts
👍8❤1
Pixel-perfect — техника верстки, при которой результат максимально совпадает с исходным макетом. (которую я игнорирую, сверстать примерно как грится на глаз 😎)
Под этим понимается соответствие:
положения элементов;
размеров;
отступов;
цветов;
шрифтов;
размеров текста;
межстрочного и межбуквенного интервалов.
Что не входит в pixel-perfect:
Аболютное соответствие макету.
Несмотря на свое название, техника pixel-perfect не подразумевает стопроцентного совпадения с макетом. Различия могут быть и будут.
Дизайнер при создании макета может сделать что-то «на глаз» или просто ошибиться: сбиться с сетки, выровнять слой немного не по центру, использовать не тот шрифт или размер текста, подобрать цвет не по палитре и так далее.
Не нужно повторять того же в верстке:
Если положение элемента отклоняется от сетки или других подобных элементов, то его следует выровнять.
Если элемент почти по центру, то вероятно он должен быть строго по центру.
Если есть подозрение, что в каком-то месте макета сбился шрифт, то скорее всего он действительно сбился, и вместо него должен использоваться другой.
Если несколько цветов, используемых в макете, незначительно отличаются HEX-кодом и неотличимы на глаз, то вероятно это должен быть один цвет.
Инструменты для работы с pixel-perfect:
Одним из лучших инструментов для pixel-perfect верстки является плагин PerfectPixel. (в гугл хром).
👆 От себя, старайтесь отойти от привычки "двигать все элементы маржинами", для размеров часто нужно использовать проценты + padding
Под этим понимается соответствие:
положения элементов;
размеров;
отступов;
цветов;
шрифтов;
размеров текста;
межстрочного и межбуквенного интервалов.
Что не входит в pixel-perfect:
Аболютное соответствие макету.
Несмотря на свое название, техника pixel-perfect не подразумевает стопроцентного совпадения с макетом. Различия могут быть и будут.
Дизайнер при создании макета может сделать что-то «на глаз» или просто ошибиться: сбиться с сетки, выровнять слой немного не по центру, использовать не тот шрифт или размер текста, подобрать цвет не по палитре и так далее.
Не нужно повторять того же в верстке:
Если положение элемента отклоняется от сетки или других подобных элементов, то его следует выровнять.
Если элемент почти по центру, то вероятно он должен быть строго по центру.
Если есть подозрение, что в каком-то месте макета сбился шрифт, то скорее всего он действительно сбился, и вместо него должен использоваться другой.
Если несколько цветов, используемых в макете, незначительно отличаются HEX-кодом и неотличимы на глаз, то вероятно это должен быть один цвет.
Инструменты для работы с pixel-perfect:
Одним из лучших инструментов для pixel-perfect верстки является плагин PerfectPixel. (в гугл хром).
👆 От себя, старайтесь отойти от привычки "двигать все элементы маржинами", для размеров часто нужно использовать проценты + padding
👍6
Если не было опыта, ставим галочку только изи!
Сайт который научит вас программировать
Выбираете количество недель, и сколько времени готовы уделить, и идёте по этому плану
https://www.techinterviewhandbook.org/grind75
Сайт который научит вас программировать
Выбираете количество недель, и сколько времени готовы уделить, и идёте по этому плану
https://www.techinterviewhandbook.org/grind75
👍15
А я опять с новостями. После казино буду делать сайт для знакомого с Латвии по солнечным батареям и наверное потихоньку можно будет учить вопоосы к собесам. 😋
👍8
Стародубцев x IT-ХОЗЯЕВА
А я опять с новостями. После казино буду делать сайт для знакомого с Латвии по солнечным батареям и наверное потихоньку можно будет учить вопоосы к собесам. 😋
Полезная стать из официальной доки, советую прочитать, нашёл для себя много полезного :)
https://developer.mozilla.org/ru/docs/Learn/Common_questions/Design_for_all_types_of_users
https://developer.mozilla.org/ru/docs/Learn/Common_questions/Design_for_all_types_of_users
MDN Web Docs
Как создать дизайн, подходящий для всех пользователей? - Изучение веб-разработки | MDN
Эта статья содержит основные советы, которые помогут вам создавать веб-сайты для любого типа пользователей.
👍4
Представляю вашему вниманию, новый актальный reset css
https://github.com/elad2412/the-new-css-reset/blob/main/css/reset.css
https://github.com/elad2412/the-new-css-reset/blob/main/css/reset.css
GitHub
the-new-css-reset/css/reset.css at main · elad2412/the-new-css-reset
The New Simple and Lighter CSS Reset. Contribute to elad2412/the-new-css-reset development by creating an account on GitHub.
Отличная почти актуальная шпаргалочка по js https://frontend-stuff.com/blog/javascript-cheatsheet/
Frontend Stuff
Шпаргалка по JavaScript в 2021
Краткое изложение вопросов и концепций о JavaScript.
🐳6👍2💯1
Знакомый сделал сайт для подготовки к собеседованиям на фронт разраба
Проверяйте, оценивайте :)
https://interviewmasters.ru/
Проверяйте, оценивайте :)
https://interviewmasters.ru/
❤🔥7👍2
Очередной годный сайт с алгоритмами
https://neetcode.io/
https://neetcode.io/
❤🔥2👍2💯1
Самый топ способ изучить redux - начать просмотр видосиков от улби:
Смотрим первые 5 видосов, пробуем сами на практике периодически подсматривая, если что-то не получается. После того как пощупали "голый redux", переходим к RTK (redux-toolkit) Советую начать без ts, обосрался в первый раз достаточно с типизацией. После rtk, накатываем ts и внедряем Redux где только можем.
Основная концепция "сторов" не использовать где они не нужны (там где маленькая вложенность, пропускаем эту концепцию и задрачиваем новую технологию.
После всего этого, когда появляется больше времени, открываем доку и читаем особенности библиотеки!
P.S. Данный подход к обучению не претендует на уникальность, просто мне было максимально легко. Справился с голым redux без особых проблем.
https://www.youtube.com/watch?v=5Qtqzeh5FeM&list=PL6DxKON1uLOHsBCJ_vVuvRsW84VnqmPp6&index=1
Смотрим первые 5 видосов, пробуем сами на практике периодически подсматривая, если что-то не получается. После того как пощупали "голый redux", переходим к RTK (redux-toolkit) Советую начать без ts, обосрался в первый раз достаточно с типизацией. После rtk, накатываем ts и внедряем Redux где только можем.
Основная концепция "сторов" не использовать где они не нужны (там где маленькая вложенность, пропускаем эту концепцию и задрачиваем новую технологию.
После всего этого, когда появляется больше времени, открываем доку и читаем особенности библиотеки!
P.S. Данный подход к обучению не претендует на уникальность, просто мне было максимально легко. Справился с голым redux без особых проблем.
https://www.youtube.com/watch?v=5Qtqzeh5FeM&list=PL6DxKON1uLOHsBCJ_vVuvRsW84VnqmPp6&index=1
YouTube
1. Redux и React. Все о Redux. Понятная теория для всех. React + redux.
В этом уроке я расскажу тебе про Redux Настолько понятно, насколько это вообще возможно. Наглядный пример
Ссылка на этот плейлист - https://www.youtube.com/playlist?list=PL6DxKON1uLOHsBCJ_vVuvRsW84VnqmPp6
Мой курс "Продвинутый Frontend. В production на…
Ссылка на этот плейлист - https://www.youtube.com/playlist?list=PL6DxKON1uLOHsBCJ_vVuvRsW84VnqmPp6
Мой курс "Продвинутый Frontend. В production на…
👍4❤🔥3🤡2❤1💩1
Прекрасный курс по некст js на 18 часов
https://www.youtube.com/watch?v=6fNy0iD3hsk
https://www.youtube.com/watch?v=6fNy0iD3hsk
YouTube
NEXT.JS Crash Course for Beginners - Build 6 Apps in 17 Hours (SSR, Auth, Full-Stack + More) [2023]
🚨 Join the world’s BEST developer community Zero to Full Stack Hero: https://www.papareact.com/course
🕐 TABLE OF CONTENTS:
INTRODUCTION
00:00 Intro
01:21 Sanity Sponsorship
MEDIUM BUILD
02:56 Build Showcase & Breakdown
19:32 Building the Header Component…
🕐 TABLE OF CONTENTS:
INTRODUCTION
00:00 Intro
01:21 Sanity Sponsorship
MEDIUM BUILD
02:56 Build Showcase & Breakdown
19:32 Building the Header Component…
👍3
(пишет лично ден абрамов)
https://beta.reactjs.org/
https://beta.reactjs.org/
react.dev
React is the library for web and native user interfaces. Build user interfaces out of individual pieces called components written in JavaScript. React is designed to let you seamlessly combine components written by independent people, teams, and organizations.
👍4💩1
Какой же крутой, собеседующий у сбера. Гайс походу чем больше компания, тем добрее руководители.
👍16🎉2
Ребята, я очень вам советую подписаться на нашего нового участника сквада!
Это очень серьёзный дядя с опытом работы 14 лет, работает в Германии тим лидом (Фронт разраб). Очень сильное пополнение!) 😎 Растём..
Передавайте привет, от нашей телеги, сегодня он запустит в 22:00 по МСК
Давайте обрадуем человека ❤️
https://www.twitch.tv/clbagrat
Это очень серьёзный дядя с опытом работы 14 лет, работает в Германии тим лидом (Фронт разраб). Очень сильное пополнение!) 😎 Растём..
Передавайте привет, от нашей телеги, сегодня он запустит в 22:00 по МСК
Давайте обрадуем человека ❤️
https://www.twitch.tv/clbagrat
Twitch
clbagrat - Twitch
Hi, my name is Bagrat. I'm streaming game development. Currently I'm busy with Tower Defense game on Unity
❤16👍1
Главное правило общения с hr, даже если вам супер нравится вакансия - не задалбывать их по поводу обратной связи. Так вы показываете свою слабость. Вот что я понял после спринтов по собесам 😂
🤔1
Ребята, Баграт начал делать мапу для обучения фронту. Она будет пополняться, советую глянуть https://docs.google.com/spreadsheets/d/17AiNybIcvF9fDQ-8xXN03C9Brl3rpnb9F8LJiX0B9gI/edit?usp=sharing
Google Docs
Knowledge map for FE
Sheet1
Как читать эту доку? Тут обозначены области знаний с которыми так или иначе столкнется джун. Я попытался выразить в размерах от XS до L (как размер футболки) важность той или иной темы для вас в ближайшие 3-4 года. Это нужно для того чтобы вы сфокусировали…
Как читать эту доку? Тут обозначены области знаний с которыми так или иначе столкнется джун. Я попытался выразить в размерах от XS до L (как размер футболки) важность той или иной темы для вас в ближайшие 3-4 года. Это нужно для того чтобы вы сфокусировали…
👍3