Мета закинута
Автор не відписував в цілі 1 рік 4 месяця 12 днів
Освоить верстку, html, css. Часть 1. Начало
В мае 2014 я захотела стать php-программистом и ступила на тропу обучения. Решила начать с самого простого: html, css. Записалась на бесплатный курс, где изучали ещё и php. Было интересно, мы делали домашние задания, сдавали, их проверяли и ставили нам баллы. Результаты были хорошими: я с нуля заняла 22 место среди более 80 участников!
Мне нравилось кодить, но... курсы закончились, и я всё забросила. Записалась на ещё одни курсы по Js - до конца не прошла. Потом начинала ещё курсы - и результат тот же. Прошло 2,5 года. То, что когда-то умела - начало забываться. В ноябре я решила досмотреть то, что меня стопорило - старые видео, без которых не могла идти дальше. Досмотрела. И вот 25 ноября начала проходить курсы Специалиста 2015 года.
Потом записалась в цель по совместном изучению верстки - [Командная цель] Реальная верстка 1.0 Попробовала сверстать тестовый макет и поняла, что мне ещё учиться и учится. Сейчас только самое начало, но уже чувствуется, что команда хорошая, общение, помощь, мотивация - всё это уже есть)
Понятно, что нужно много времени, но если нить желание - найдётся и время!)
Удачи мне, я справлюсь!)
Критерій завершення
Просмотрела обучающие видео, прошла курсы, сверстала макет.
Особисті ресурси
Желание, время, поддержка единомышленников
Екологічність мети
Цель экологична: занятие любимым делом, дополнительный заработок.
-
Курс 2 HTML-Academy базовый
-
Курс "Я - фрилансер!"
Этот курс создан для того, чтобы ввести новичка в мир фриланса и подготовить его к трудностям, которые он может встретить во время своего пути как фриланс разработчика.
-
Курс 1 GoIT 2016 HTML (Tech Skills)
-
3-х дневный интенсив Артема Исламова
Три дня верстки, фишечки.
![]()
-
день 1
-
день 2
-
день 3
-
день 4 (бонус)
-
-
Неделя #БЕЗпредела
Для программы Неделя #БЕЗпредела (концентрация на своих целях и эффективное их выполнение)
![]()
-
Верстка макета на флексах
-
Верстка макета Nobel Dent
-
ITVDN ПРАКТИЧЕСКИЙ КУРС ПО ВЕРСТКЕ ЛЕНДИНГА
C 10 по 17 мая 2018 года на ITVDN проходит акция – видео курс для начинающих веб разработчиков - «Практический курс по верстке лендинга» можно изучить бесплатно.
Описание курса:
В курсе показана последовательная верстка лендинга с нуля. В течение девяти уроков мы сверстаем с вами лендинг, который будет корректно отображаться на разных устройствах. Вы научитесь работать с препроцессорами PUG, SASS, с популярным сборщиком проектов Gulp, также затронем валидацию формы на JavaScript и «оживим» лендинг. Вы научитесь работать с самыми современными и востребованными технологиями, а также поймете принципы качественной верстки.
Практический курс по верстке лендинга состоит из 10 уроков общей продолжительностью 8 часов. Автор курса Сергей Рубец, Front-end Developer.
Что самое интересное, так это возможность проверить знания 9пройдя онлайн тестирование на TestProvider.com) и получить электронный сертификат после изучения курса.
![]()
-
Организация рабочего процесса.
-
Препроцессор PUG.
-
Препроцессор SASS.
-
Начало верстки.
-
Верстка - часть 2.
-
Верстка - часть 3.
-
Верстка - часть 4.
-
Окончание верстки.
-
Интерактив на JavaScript.
-
-
БЭМ
оф.сайт + подборка других статей
Документация - здесь написаны основные понятия БЭМ, Б- блок, Э- элемент, М- модификатор.Статьи - здесь приводятся статьи, почему БЭМ это крутоУчимся любить БЭМПроекты на БЭМMindBEMding – getting your head ’round BEM syntaxВ чем проблема «проблемы БЭМ'а»? - в комментах срач такой х)Почему вы пользуетесь или не пользуетесь БЭМ?BEM 101
-
И 10
старт 07.01.2018
-
Первая живая встреча с ответами на вопросы
-
Модуль 1 Урок 1 Этапы создания сайтов
-
Модуль 1. Урок 2. Работа с графикой для разработчика
-
Модуль 1. Урок 3 Настройка рабочего пространства
-
Ответы на вопросы по курсу
-
Модуль 2. Урок 4. Знакомство с основами html
-
Модуль 2. Урок 5 Знакомство с основами Css
-
Модуль 2. Урок 6 Позиционирование в Css
-
Живая встреча. Ответы на вопросы.Модуль 2
-
-
Git_начало.
Ресурсы
- Codeschool : Git Path
- Codeschool : ProGit 2
- Курс по основам командной строки : Command Line Power User
ПРОЙТИ ТУТОРИАЛ по ГИТу https://guides.github.com/introduction/flow/
-
Установка
-
Обучение (видео)
-
https://guides.github.com/introduction/flow/
-
Специалист 2015. html
-
Уровень 1 часть 1 из 4
-
Уровень 1 часть 2 из 4
-
Уровень 1 часть 3 из 4
-
Уровень 1 часть 4 из 4
-
Уровень 2 часть 1 из 4
-
-
Верстка (+дизайн) сайта танцевальной студии Alma
-
Интересная статья
-
Gulp
-
LESS
-
Модульность
- AMD (RequireJS)
- Common JS (browserify)
-
Лекции от Mail.ru [Фронтенд]
Сами лекции
- Лекция 1
- Лекция 2
- Лекция 3
- Лекция 4
- Лекция 5
- Лекция 6
- Лекция 7
- Лекция 8
- Лекция 9
- Лекция 10
- Лекция 11
- Лекция 12
-
Я.Субботник 2015
- 001. Роль разработчика интерфейсов в продукте – Сергей Сергеев
- 002. bem components — как Bootstrap, только лучше – Владимир Гриненко
- 003. Мгновенная Морда – Иван Карев
- 004. Эксперимент как инструмент для принятия решений – Виктор Карпов
- 005. Приручаем SVG – Лев Солнцев
- 006. Производительность WebGL приложений – Кирилл Дмитренко
- 007. Создание модулей для API Яндекс.Карт – Всеволод Шмыров
- 008. API как древнеримский акведук – Сергей Константинов
-
ШРИ в Москве 2013
- 001. Изучение и редактирование кода - Игорь Новак
- 002. Развертывание верстки - Роман Андриади
- 003. http-протокол - Алексей Бережной
- 004. Механизм работы браузера - Георгий Мостоловица
- 005. Кеширование на клиенте и сервере - Евгений Дорошенко
- 006. Безопасность веб-приложений - Тарас Иващенко
- 007. Регулярные выражения - Алексей Бережной
- 008. Командная строка Unix - Виктор Ашик
- 009. Языки программирования - Денис Бугарчев
- 010. Тестирование - Марина Широчкина
- 011. Вики-синтаксис - Сергей Черкасов
- 012. Общий цикл разработки (dev-cycle) - Михаил Трошев
- 013. Вводная по ШРИ - Анна Чеботкевич
- 014. История успеха выпускников ШРИ - Дмитрий Поляков
- 015. CSS - Роман Комаров
- 016. JavaScript Асинхронность - Михаил Давыдов
- 017. JavaScript. Базовые знания - Михаил Давыдов
- 018. MVC - Антон Киршанов
- 019. Шаблонизаторы (templates) - Сергей Бережной
- 020. jQuery (jquery) - Алексей Бережной
- 021. Методология БЭМ и обзор БЭМ платформы - Владимир Гриненко
- 022. БЭМ мастер класс - Артём Курбатов
- 023. Приёмка задач: общее и бэкенд разработка - Михаил Трошев
- 024. Приёмка задач: дизайн - Михаил Трошев
- 025. Парное программирование - Сергей Бережной
- 026. CSS - Вадим Пацев
- 027. Основы модели визуального форматирования - Вадим Пацев
- 028. Эксперимент с версткой - Роман Комаров
- 029. Code style - Михаил Давыдов
- 030. JavaScript, События - Михаил Давыдов
- 031. Документирование информации - Сергей Черкасов
- 032. Unit тестирование - Александр Тармолов
- 033. I bem - Алексей Бережной
- 034. Layouts. At rules - Вадим Пацев
- 035. Значения и единицы измерения. Шрифт. Свойства текста - Вадим Пацев
- 036. Code review - Игорь Новак
- 037. Дизайн (design) - Настя Ларкина
- 038. Profiler (profiler) - Михаил Корепанов
- 039. Фреймворки (js-frameworks) - Евгений Дорошенко
- 040. Клиентская оптимизация (performance) - Иван Карев
- 041. Debugger (debug) - Константин Васильев
- 042. Цвета и фон. Transition. Animation. - Вадим Пацев
- 043. Свободное перемещение и позиционирование - Вадим Пацев
- 044. Cистемы контроля версий - Сергей Сергеев
- 045. Архитектура веб сервисов - Денис Бугарчев
- 046. Транспорт, ajax (js ajax) - Михаил Давыдов
- 047. Графика в вебе - Иван Карев
-
Великолепный список от Catherine Winner (огромнейшее спасибо!)
Мини-пост. Список ссылок (Catherine Winner)
Список ресурсов на вооружение frontend-разработчику.
Часть 1HTML
- Не используйте запрещенные теги и аттирбуты. Если не уверны , то сверьтесь со списком —http://goo.gl/0w5O41
- Подключайте внешние таблицы стилей — http://goo.gl/yXPjoQ
- Не используйте разметку для оформления — https://goo.gl/PMZj0z
- Помните о правильном подключении внешних файлов — http://goo.gl/vvxpgM
- Давайте понятные имена классам - https://goo.gl/ArvBJZ
- Не злоупотребляйте id и помните, что это уникальный идентификатор, который может быть на странице только в единственном экземпляре — http://goo.gl/1RwqAl
- Не забывайте закрывать теги. Просто не забывайте.
CSS
- Обнулите дефолтные стили браузера — http://goo.gl/6EICuY
- Не используйте css-фреймворки. Точнее, применяйте их там, где это разумно: например, для прототипов. В конце этой статьи очень точно, на мой взгляд, написано — http://goo.gl/54wUFd
- Изучите боксовую модель — https://goo.gl/S0MHgp
- Помните про специфичность селекторов — https://goo.gl/EIBM6X
- Понятие потока — https://goo.gl/JsTLbL и как с ним работать — http://goo.gl/NiNiAh
- Инлайновый контекст форматирования — http://goo.gl/jNwuam
- Используйте css-спрайты — https://goo.gl/XqAhJ2
Часть 2
Также не забывайте про оформление ваших документов. Важно, чтобы не только другим людям было приятно работать с вашим аккуратным кодом, но и вы сами, через какое-то время вернувшись к нему, не запутались.http://developer.mozilla.org/ru/docs/Web — Cправочники и руководства по HTML, CSS, ...
http://css-tricks.com — Посвящается миру CSS и связанных с ними технологий. Сниппеты, видео, трюки и учебники.
http://w3schools.com — Руководства, справочники, примеры по веб-технологиям.
http://stackoverflow.com — Платформа для поиска решения с помощью сообщества.
http://awwwards.com — Список сайтов талантливых разработчиков, полезных для изучения и отвлечения от справочников.
http://themeforest.net/popular_item/by_category?categ.. — Список самых продаваемых HTML, CSS и шаблонов страниц на платформе envatomarket. Отличные примеры для изучения.
http://mediaqueri.es — Коллекция сайтов использующих media queries.
http://tympanus.net/codrops/category/blueprints — Коллекция основных компонентов, модулей и макетов в минимальным стиле для легкой адаптации и использования, или просто для вдохновения.
http://htmlbook.ru — Русскоязычный ресурс про HTML.
http://javascript.ru — Русскоязычный ресурс про JavaScript.
http://css3ps.com — Плагин для PhotoShop для преобразования преобразования ваших слоев в CSS3.
http://bento.io — Сборник ссылок на полезные ресурсы.
http://caniuse.com — Таблицы совместимости для поддержки HTML5, CSS3, SVG и других технологий в различных браузерах.
Сама презентация -http://slides.com/valentineshkarlet/deck-1#/Сайты для самообучения:
codeschool.com
https://teamtreehouse.com/
http://htmlacademy.ru/
http://www.codeavengers.com/
http://www.codecademy.com/
https://www.udacity.com/
https://dash.generalassemb.ly/
http://hasbrains.org/
YouTube каналы:
Hexlet - http://www.youtube.com/channel/UCqLPYxuAz-WbdEBLBk_Tb7g
LevelUp Tuts -http://www.youtube.com/channel/UCyU5wkjgQYGRB0hIHMwm2Sg
LoftBlog -http://www.youtube.com/channel/UCIIt69f5D44s2cdb9vXQNzA
Magisters -http://www.youtube.com/channel/UCUzksGhlJU0rNF5KneUZkSA
Sorax -http://www.youtube.com/channel/UCdnFX7mzgup9moXG2fULOog
Tuts+ Web Design -http://www.youtube.com/channel/UCTP1DN8Us94z0ciuCx71scg
uWebDesign -http://www.youtube.com/channel/UCZeU17nbVfzczAkJVTay9vw
webtheory -http://www.youtube.com/channel/UCD15yBvmQElLP7EFL8vW6Ywhttp://vk.com/doc77821220_361542739?hash=a860e6f3fcf6.. -
ПРАКТИКА
-
Веб-стандарты
Ютуб канал Веб-стандарты
-
Выпуск 111
-
Выпуск 110
-
-
LoftSchool. WebBeginner
выделила этот пункт в отдельную цель LoftSchool. WebBeginner
Не пропустіть нові записи!
Підпишіться на ціль і стежте за її досягненням
