С чего начать изучение фронтенд разработки? (html, css, js, . ) [дубликат]
Добрый день! Решила начать изучать фронтенд разработку. Думаю, сейчас это довольно перспективно, так ведь? До этого учила JAVA и немного начала изучать Android разработку, но видно, не пошло. Хочу попробовать данное направление, может оно хорошо пойдет и понравится это дело! Могу ли я начать с Javascript сразу? Если да, то с каких источников или книг начать его изучать? Или до изучения Javascript нужно обязательно знать HTML, CSS?
Отслеживать
2,451 1 1 золотой знак 15 15 серебряных знаков 25 25 бронзовых знаков
задан 19 авг 2016 в 8:11
Victoria Kovalenko Victoria Kovalenko
53 1 1 серебряный знак 5 5 бронзовых знаков
Вы знаете HTML и CSS?
19 авг 2016 в 8:20
сначала html5 + css3 вот тут htmlbook.ru / webref.ru, через пол года и некоторое кол-во созданных сайтов придёт (должно) достаточное понимание интерфейса и взаимодейтсвия с ним. после этого можно влезать в javascript (например, learn.javascript.ru)
19 авг 2016 в 8:44
Спасибо за совет!
19 авг 2016 в 8:52
3 ответа 3
Сортировка: Сброс на вариант по умолчанию
Имхо лучше изучать в таком порядке
- HTML
- CSS
- JAVASCRIPT
- Затем приступить к изучению вспомогательных библиотек типа jQuery, Mootools
- Препроцессоры css (sass, less), js(typescript)
- Ну и когда станете гуру в выше перечисленных технологиях можно освоить Knockout.js, Angular 2, ReactJs, Backbone
Почему стоит учить в порядке HTML > CSS > JS:
Потому, что с CSS зависим от HTML, а JS от HTML и CSS, ну а все остальное от первых трех пунктов.
Отслеживать
58.3k 7 7 золотых знаков 71 71 серебряный знак 145 145 бронзовых знаков
ответ дан 19 авг 2016 в 8:29
1,268 8 8 серебряных знаков 18 18 бронзовых знаков
Спасибо за совет, в таком порядке и начну учить!) Может подскажете ещё ресурсы, книги, по html и css?
19 авг 2016 в 8:46
Пожалуйста ), itvdn.com — тут есть курсы по html, css, js довольно доходчиво рассказывают. Кроме того есть github.com/Kison/free-programming-books с бесплатной литературой, но там из интересующего вас материала есть только по js книги.
19 авг 2016 в 8:54
Для Frontend девелоперов желательно знать HTML , CSS и JS вместе. Так как они тесно друг с другом связаны. Да, вы можете сразу начать с Javascript, но лучше будет изучить сперва HTML и CSS ..
Они довольно легкие, учитывая то что они НЕ являются языком программирования, кроме JS конечно же. Научиться HTML и CSS можно за пару недель, максимум за месяц.
А вам я посоветую данный сайт W3Schools Он на английском, но тут полно информации для того чтобы стать фронтенд и даже бакенд девелопером.
Отслеживать
ответ дан 19 авг 2016 в 8:31
2,451 1 1 золотой знак 15 15 серебряных знаков 25 25 бронзовых знаков
«Научиться HTML и CSS можно за пару недель, максимум за месяц.» — а потом интернет кишит говносайтами и заказчики думают, что эта работа ничего не стоит, потому что горекодеры с месячным стажем портят рынок своими громкими обещаниями
19 авг 2016 в 8:36
@lexxl Ну я Basic Знания имею ввиду) Основам) конечно для того чтобы стать супер фронтендером нужно потратить минимум год) хотябы на HTML и CSS только)
Как начать обучаться html и css?
Здравствуйте, меня зовут Кирилл, мне 16 лет. Хотел бы начать изучать програмирование html css а позже js. Планирую начать с верстки сайтов, а дальше если что сменить направление. Но незнаю с чего начать, как понять что ты продвигаешься а обучении, что именно учить. Также в этом году планирую поступить в коледж на специальность информационные системы и програмирование. Посоветуйте учебную литературу, и скажите примерное время изучение html и css до уровня достаточного для верстки сайтов.
- Вопрос задан более двух лет назад
- 361 просмотр
3 комментария
Простой 3 комментария

начать с гугла и ютуба

WapSter @wapster92 Куратор тега CSS
В веб разработке 7 лет, сейчас занимаюсь исключительно фронтендом на nuxt. Я до сих пор не знаю css и html) Удачи в изучении того, что не объять

Для этого и придумали курсы, html-academy, хекслет, многое можно попробовать и бесплатно. Организованная подача информации, сообщество и тд
https://htmlacademy.ru/intensive/htmlcss
https://ru.hexlet.io/categories/html/courses
Решения вопроса 0
Ответы на вопрос 3

Начинающий верстальщик 🙂
Для HTML посоветовал сайт htmlbook.ru.
Для CSS надо в ютубе посмотреть уроки чтобы хорошо понимать.Пищи CSS уроки и смотри,там просто дофига уроков.
Потом смотри уроки про верстки.Пищи верстка сайта html css.Рекомендовал бы смотреть уроки канала branscloud.
После этого сам верстай простые сайты(Лэндинги).После этого можешь уже изучить JS.Для Front-end JS пригодится когда будешь сделать бургер меню и слайдеры.
Можешь потом изучить фреймворки Bootstrap,gulp,sass,less и т.г.
Ответ написан более двух лет назад
Комментировать
Нравится 1 Комментировать
ArkHiMed-tech @ArkHiMed-tech
Во-первых, html — не язык программирования.
А во-вторых, если знать английский или пользоваться переводчиком, можно неплохо обучиться и тому и другому на codecademy.com, на нем я изучал только php, html учил на htmlacademy, но сайт очень неплохой.
Ответ написан более двух лет назад
Комментировать
Нравится 1 Комментировать
Lord_Dantes @Lord_Dantes
1-е правило программиста — В любом непонятной ситуации, гуглить. Поэтому учитесь гуглить и пользоваться поисковиком так, чтобы вы сами все нашли. Допустим Sorax на ютубе, дальше сами.
Ответ написан более двух лет назад
Комментировать
Нравится Комментировать
Ваш ответ на вопрос
Войдите, чтобы написать ответ

- JavaScript
- +1 ещё
Как объеденить круговой слайдер(диапозон) с полем ввода и кнопками + и -?
- 1 подписчик
- 4 часа назад
- 33 просмотра
Вёрстка на HTML & CSS для начинающих
Изучи два основополагающих языка для создания сайтов. Язык HTML для разметки и язык CSS для оформления внешнего вида своего сайта.
Начальный уровень
30 минут в день
Сертификат Stepik
Начать просмотр
123 учащихся
Чему вы научитесь
- Языку гипертекстовой разметки HTML
- Языку каскадных таблиц стилей CSS
- Вёрстке фрагментов современных сайтов
- Созданию адаптивной сетки на CSS
О курсе
В этом видео курсе вы научитесь с нуля основам HTML и CSS которые нужны для создания сайтов и уже сможете выполнять довольно серьезные работы в этой области. Мы будем изучать язык гипертекстовой разметки HTML и язык каскадных таблиц стилей CSS. После обучения по программе этого курса вы сможете создавать современную верстку многих элементов сайтов. Мы рассмотрим способы создания таких элементов как: меню, раздел команды, информационные разделы с карточками и многое другое. А так же посмотрим основные инструменты в редакторе Photoshop, которые могут вам пригодиться при верстке сайтов.
В этом видео курсе я хочу научить вас основам сайтостроения — это языки HTML и CSS. Эти языки являются основой и знать их должен каждый, кто хочет развиваться в этой области. Вы получите знания, которые нужны в самом начале пути любого веб-разработчика и будите их использовать на протяжение всего своего пути. Вся теоретическая информация разложена по полочкам, доступно объясняется и подкрепляется практическими заданиями и домашними работами. Курс намерено не содержит лишней информации, тем самым позволяет лучше освоить материал, который действительно важен.
Курс состоит из трех глав. 1 глава — изучение языка HTML, 2 глава — изучение языка CSS, 3 глава — практическая часть, где мы будем тренироваться на реальных примерах создавать верстку различных фрагментов сайта. Курс рассчитан на самых начинающих разработчиков.
Все уроки и задания из этого курса полностью включены в курс «Frontend разработчик на HTML, CSS и JavaScript», который содержит в себе шесть разных курсов. Подробнее можно ознакомиться на странице курса.
Для кого этот курс
Я рекомендую изучать этот курс:
- Тем, кто хочет научиться создавать сайты своими силами;
- Тем, кто хочет изучить современные инструментам разработки сайтов;
- Тем, кто еще не знает язык HTML и CSS, но хочет выучить;
- Тем, кто хочет стать крутым мастером и зарабатывать деньги.
Начальные требования
От вас потребуется только желание учиться, чтобы быстрей начать зарабатывать деньги. После обучения на этом курсе, вы можете двигаться дальше. Я бы рекомендовал начать с языка программирования JavaScript в моем курсе «Супер курс по языку JavaScript».
Наши преподаватели
Как проходит обучение
Обучение построено на видео уроках. Для лучшего усвоения материала рекомендуется смотреть урок и пробовать повторить все самостоятельно. Почти в каждом уроке доступно одно или более заданий в виде теста, задачи на сопоставление, заполнение пропусков, сортировки и другие. В некоторых уроках есть шаги с заданием в видео формате, где подробно изложены условия и цель задачи. Обязательно читайте всю текстовую информацию к уроку там могут быть полезные ссылки на сторонние ресурсы или на материалы, которые нужны для урока. По желанию можете конспектировать изучаемый материал в любом удобном для вас формате (бумага, цифра). Задействовав дополнительный вид памяти вы улучшите усвоение материала.
Программа курса
Сертификат
Что вы получаете
- 3 модуля, в которых вы изучите HTML и CSS
- 32 урока, общая продолжительность видео уроков чуть больше 4 часов
- 88 тестовых заданий (вся теория закрепляется на практике на наглядных примерах)
- выдается сертификат Stepik
- много ресурсов для скачивания (ссылки на полезные сервисы, готовые шпаргалки и примеры кода)
- общение с автором и другими учениками, обсуждение уроков и отдельных шагов, можно задавать вопросы под каждым уроком
- обучение по шагам — учитесь когда вам удобно (нет дедлайнов, пожизненный доступ к курсу)
- обучение может занять около одного месяца
- вы получите огромный багаж знаний и сможете освоить современную востребованную профессию
Сколько стоит обучение
Price: 1 990 ₽
Хочу пройти
Купить в подарок
Вы попробовали и поняли, что вам сейчас не подходит этот курс? Ничего страшного, мы вернём вам деньги в течение 30-ти дней после покупки.
Как и где учить HTML и CSS? Стоит ли брать курсы? Куда возьмут работать?
Приветствую всех пикабушников в своей первой статье. В этом материале хотелось бы ответить на все перечисленные в заголовке вопросы. Особую ценность этой статьи составляет то, что она основана исключительно на личном опыте.
Мне 23 года, работаю веб-разработчиком в строительной компании, создаю сайтики и администрирую уже существующие. Параллельно беру заказы со стороны, практикуюсь в разработке, контент-менеджменте, настройке рекламы и SEO-продвижении.
Сразу скажу, что гением я себя выставить не пытаюсь, а лишь поделюсь опытом с теми, кто хочет научиться создавать сайты, но пока не знает, с чего можно было бы начать изучение.
Как и где учить HTML и CSS?
Не знаю, стоит ли ради этого записываться на платные курсы или идти в шарагу/университет. Вспоминаю пары основ web технологий в своем колледже. Преподаватель писал тег на доске, заставлял переписывать его в тетрадь и писать определение.
Конечно, теория тоже важна. Но абсолютно такой же уровень знаний можно было получить, листая просто сайты по запросу «HTML справочник».
Лично я знал HTML и CSS еще до шараги. Учил я его с помощью Solo Learn. Есть как веб-версия, так и приложения в Google Play и App Store. В приложении есть и полноценные языки программирования. Просто выбираете любой курс и проходите теорию.

После каждой темы вы должны закрепить пройденный материал ответом на контрольный вопрос. А после прохождения всей темы проходите полноценный тест.

Радует наличие как простых тестов, так и фрагментов кода, куда вы должны написать или же перетащить недостающие кусочки.
А в конце вам дают такой сертификат:

Достаточно ли будет обучения в Solo Learn или нужно делать что-то еще? Ответ очевиден. Догадаетесь?
Смотрите марафоны по верстке на ютубе, где человек верстает реальный сайт. Параллельно пытайтесь что-то делать сами. Открывайте чужие сайты через инспектор и смотрите код.
Также вы можете скачивать чужие сайты через какие-нибудь онлайн-сервисы и пробовать работать над чужим кодом. Стоит это делать для того, чтобы больше понять структуру, да и в будущем это поможет, когда вы будете работать в команде.
Куда возьмут работать с HTML и CSS?
Сразу скажу, что знаний одних только HTML и CSS будет недостаточно. Конечно, если речь идет о хорошо оплачиваемой работе. Когда у меня совсем не было знаний, я работал контент-менеджером в интернет-магазине за 30к.
Работа была не очень пыльной, в основном она заключалась в публикации статей, которые мы заказывали, создании новых товаров, изучении SEO и съемки видео с обзорами товаров на ютуб.
Но мне это даже нравилось, потому что я мог развиваться сразу в нескольких сферах. А это стоит очень многого.
Стоит ли брать курсы?
На этот вопрос я уже ответил выше. Мне кажется, что в этом нет никакого смысла. Тот же HTML, CSS можно выучить в Solo Learn и по гайдикам на ютубе. Также не забывайте о практике и пытайтесь что-то сделать сами.
Вы можете найти какой-нибудь сайт или же дизайн. И просто пытаться его повторить. По началу будет тяжеловато, но в будущем вам будет открыта дорога и во фриланс, и в офис.
А что изучать после HTML и CSS, чтобы создавать сайты?
А, вот, на этот вопрос у каждого свой ответ. Я очень надеюсь, что в комментариях обязательно найдутся те, кто предложит свои варианты. Но я предлагаю освоить следующее:
1) В том же приложении Solo Learn пройдите курсы PHP и JS;
2) Освойте CMS WordPress — систему управления контентом, которую использует огромное количество сайтов — от блогов до полноценных интернет-магазинов;
3) Откройте для себя фреймворк Bootstrap, который ускорит вашу фронтенд-разработку в разы за счет уже готовых блоков и стилей;
Если вам понравился мой материал, то можете открыть что-то новое для себя в моем блоге. Также вы можете перейти в мою группу в Вконтактике, а оттуда в беседу сообщества и задать любой интересующий вас вопрос!

1 год назад
Нигде не учил, да и учить то там нечего.
Де факт пересел с бэка на фронт по предложению коллег, за 1.5 года нафигачил на реакте фронт с нуля.
никогда не учил html и css направленно. Да и реакт так-то тоже по ходу.
Вообще похоже на рекламу курсов и СЕО продвижение своего мнения, @moderator, это не реклама случаем?
раскрыть ветку
1 год назад
раскрыть ветку
1 год назад
Напиши себе хуй на лбу)
раскрыть ветку
Похожие посты
29 минут назад

Так вот почему всех программистов красные глаза! Они просто в душе коммунисты!

1 день назад

Так станет проще работать

2 дня назад

Как проклятие невидимой стены ждало меня 20 лет
- Автор:kesn
- Больше интересных фото и комментариев воригинале материала

Когда на меня накатывает хандра, я бросаю всё и пилю свой игровой движок. Это неблагодарное занятие, но меня прёт.
В самом начале у меня были такие планы: вжух-вжух, щас возьму ведро, накидаю туда всяких библиотек для графики, физики и звуков, добавлю сетевую библиотеку по вкусу, перемешаю всё с какой-нибудь системой сообщений, и готово. Приключение на 15 минут.
И вот я тут спустя 5 лет.
Ладно, если быть честным, то я почти не уделял времени разработке, потому что постоянно спотыкался на всяких бесящих меня ошибках: то сериализация не работает с наследованием, то потоки не хотят нормально разделять память, то обновление языка ломало совместимость… Я могу, блин, целую Камасутру написать про соитие с игровым движком. Все эти ошибки сильно демотивируют, потому что хочется уже наконец-то заняться делом, а не ковыряться с байтиками.
Это не моё видео, но оно очень точно передаёт, как у меня происходит разработка:
С другой стороны, конечно, когда эти проблемы решаешь, чувствуешь себя богом и королём жизни, и после этого ты вроде как опять хочешь программировать. И даже кажется, что это была последняя трудность. Ха-ха, наивный. Но мне это нравится. Типа как альпинисты идут в гору и страдают, когда можно пойти в бар с друзьями и попить пивко. Каждому своё.
Ну и вот про одну такую ошибку я хотел поговорить. Есть такой движок — ODE (Open Dynamics Engine). Он появился где-то в палеолите, динозавры его накодили, от документации остались только царапины на скалах. Но он работает, он простой в использовании, и у него есть сишные заголовки, поэтому я мог просто написать враппер на Nim и использовать его в своём движке. В Nim вообще ни хрена нету, поэтому канонический способ — это взять какую-нибудь библиотеку из Си, научиться её вызывать, а потом говорить всем, что ты написал крутую программу на Nim.
Итак, сначала я просто добавил кубики на сцену и отрисовал их. Физический движок был в полной гармонии с графическим, и когда мне графика отрисовывала, что я приближаюсь к кубу и толкаю его, кубик действительно отлетал и вращался. Короче говоря, всё шло так, как я и планировал.
Разумеется, если вы не планируете делать Minecraft, то вам может понадобиться что-то поинтересней, чем кубик. В ODE есть специальный класс Trimesh, который как раз позволяет вам сделать сложную геометрию. Фактически, вы можете создать любое тело из набора треугольников. Типа такого:

Машина глупая, поэтому мы не можем ей сказать «нарисуй зайца», мы можем ей сказать «вот такие есть вершины, соедини их вот так-то, и это будет называться зайцем». Я, естественно, не стал рубить с плеча и решил вместо зайца сделать простой треугольник и проверить, что всё корректно с ним работает.

Я создал треугольник, он успешно отрисовался на сцене, я начал ходить по миру… и обнаружил, что треугольник не в том месте, где нарисован, а где-то непонятно где.
Так и появилась эта дурацкая невидимая стена.
Фактически, я мог ходить по сцене, и где-то я упирался в тот самый треугольник, который вообще-то должен был быть там, где нарисован. Я в принципе даже что-то такое и ожидал, потому что, как я уже где-то писал, только три раза в своей жизни я написал код, который заработал с первого раза. Наверняка я где-то перепутал координату — вместо X передал Y, или наоборот, ну что-нибудь такое. Эти программисты, вы знаете!
Отрисовать этот треугольник я не мог, потому что координаты были правильные, графический движок всё отрисовывал правильно, но вот физический движок как-то неправильно интерпретировал мои правильные данные. Поэтому я стал ходить по миру и пытаться определить очертания этой невидимой стены. В конце концов я её нашёл (она была достаточно странной), и я решил немного подвигать треугольник, чтобы посмотреть, как он влияет на эту стену. Казалось бы, если я просто где-то перепутал координаты, то подвинув треугольник, я немножко подвину эту стену. Но хрен мне там! Стена исчезала и появлялась совершенно случайно, прыгала далеко даже от малейшего изменения координат, и я не мог понять, почему.
И тут я вспомнил эту недалёкую женщину из заЩИТников! Если кто не знает, она сделалась невидимой и решила спрятаться в дожде. Отличный план, надёжный, как швейцарские часы:

Я подумал, что это прям мой случай, и решил полить свою стену дождём, чтобы увидеть её. Дождя у меня не было, зато были кубики, поэтому я создал штук 50 и стал кидать их вниз. При касании стены они к ней прилипали, и я мог видеть её очертания. А когда что-то видишь — отлаживать в разы легче!

Что ж… Это была хорошая попытка понять, по какому закону стена появляется в том месте, где она появляется, но это мне ничего не дало. Даже видя эту стену, я не находил никакой закономерности.
Если нужно где-то найти таких же неудачников, как я, то самое лучшее место для этого — интернет. И я нашёл его — единственного человека, который отстрадал своё и рассказал об этом. Представляете, в 2006 году у какого-то чувака из Германии пятая точка горела точно так же, как у меня сейчас! Не знаю, что он выкурил (похоже, что исходники), но, ОКАЗЫВЕТСЯ, физический движок ожидает от вас трёхмерные точки, но передавать их надо как четырёхмерный вектор, просто в четвертой координате надо поставить мусор, типа так: [x1, y1, z1, 0, x2, y2, z2, 0, . ]. Скажите, как по const dReal* Vertices я должен понять, что там ждут в гости четырёхмерные вершины?

За что я люблю опенсорс — можно всегда докопаться до истоков всего. Я полез в исходники, и вот что обнаружил.
В 2003 году пришёл Russel Smith и добавил всю эту функциональность с trimesh collisions, в том числе интересующую меня строчку:

Тут всё понятно, потому что в определении чётко говорится, что dVector3 — это четырёхмерный вектор (есть некий шарм в этой логике).
А потом через пару месяцев врывается Erwin Coumans и переписывает так, чтобы тип был непонятен:


И только представьте себе, через 20 лет это изменение находит какого-то чувака (меня), который пишет вообще на другом языке программирования, и заставляет этого чувака гореть в тщетных попытках понять, какого хрена не работает.
Я переписываю код с добавлением четвертой координаты, и все начинает работать.

Вообще этот пост был задуман как развлекательный, типа «смотрите, погромист опять страдает, хахаха». Но мне кажется, что он поднимает достаточно глубокую проблему: как только вы выкладываете код, он начинает свой долгий путь сквозь время. Никто не знает, когда и кто его будет читать — может, вы или ваш коллега через пару месяцев, может, тысячи независимых разработчиков через пару лет, может, какой-то парень с горящим продом.
Получается такой вот эффект бабочки, как с этой невидимой стеной. Поэтому когда вы в следующий раз сядете писать код, представьте, что какой-то разраб через 20 лет будет в нём разбираться, и, пожалуйста, постарайтесь сделать жизнь этого чувака хоть чутоку легче. Ведь однажды этим кем-то можете оказаться вы сами.
Не только лишь все могут смотреть в будущее, но вы сможете, если подпишетесь на мой уютненький канал Блог Погромиста.
А ещё я держу все свои яйца в одной корзине (в смысле, все проекты у одного облачного провайдера) — Timeweb. Поэтому нагло рекламирую то, чем сам пользуюсь — вэлкам.
Показать полностью 9 1
2 дня назад

Если ты ростом ниже 185, то даже знание плюсов тебе не поможет

5 дней назад

Интересно, а сколько разработчиков в мире используют только свой код?

Показать полностью 1
11 дней назад

Гилфойл ерунды не скажет

Показать полностью 1
11 дней назад

Как понимать мемы про айти?

3 месяца назад
База данных характеристик авто с фотографиями
Дорогие пикабушники, доброго вам дня. Привет моим подписчикам. Сегодня я решил порадовать вас свежей базой данных характеристик авто с фото. База актуальна примерно на 06.2023 г.
Базу решил выложить бесплатно. Думаю многим разработчикам пригодится.
Планирую также выложить базы данных с рецептами блюд, характеристиками вело/мото техники и характеристиками планшетов и смартфонов. Буду рад вашим предложениям, какие ещё базы данных вы хотели бы видеть? Буду признателен за источники с открытой информацией о чем либо, различные справочники.
Также есть базы данных с характеристиками различной техники (телевизоры, комплектующие для ПК, различная бытовая техника и т.п.), все с фото, правда ещё не обработаны. Если вам будет интересно, возможно выложу.
Со мной можно связать по почтовому ящику amsterdamnavi@yandex.ru или AmsterBD@yandex.com
Итак, немного о самой базе:
+ Брендов около 240.
+ Моделей более 3200.
+ Генераций в районе 10 000.
+ Модификаций более 83 000.
+ Более 70 000 фотографий.
— Не под все генерации есть фото, около двух десятков без фото.
— Не все характеристики у пары десятков модификаций.
— К сожалению не нашел источника с описанием комплектаций авто (если кто подскажет, буду благодарен).
Где её можно использовать:
- Сайт с характеристиками автомобилей.
- Интернет-магазин автозапчастей и аксессуаров для авто.
- Доска объявлений по продаже авто и запчастей к ним.
- Сайт с дневниками автолюбителей.
- Сайт трейд-ин автосалонов и автохаусов.
- Прочие сферы связанные с авто и характеристиками авто.
UPD Фотографии не рекомендуется использовать в коммерческих проектах.
Какая структура у базы?
1) Таблица с марками авто.
2) Таблица с моделями авто.
- Столбец с годом начала производства и столбец с годом окончания производства модели. Если в столбце окончания указан 0, значит модель производится по сей день.
- Привязка к brand_id таблицы брендов авто.
3) Таблица с генерациями моделей авто.
- Столбец с указанием типа кузова.
- Столбец с годом начала производства и столбец с годом окончания производства генерации. Если в столбце окончания указан 0, значит генерация производится по сей день.
- Привязка к model_id таблицы моделей авто.
4) Таблица со всеми модификациями генераций авто.
- Столбец с мощностью модификации в л.с.
- Столбец с указанием типа привода модификации.
- Столбец с годом начала производства и столбец с годом окончания производства модификации. Если в столбце окончания указан 0, значит модификация производится по сей день.
- Привязка к generation_id таблицы генераций авто.
5) Непосредственно сама таблица с характеристиками авто.
- Характеристики разделены по группам.
- Привязка к таблице модификаций к столбцу modification_id.
6) Архив с фотографиями автомобилей и таблица с фото по генерациям.
- Связь фото по id фото в таблице.
Файл с базой:
Сами фотографии в формате .jpg
Всем удачи, всем успехов.
P.S. Вопрос к администрации Пикабу. Почему запрещены к размещению ссылки с mega?
Показать полностью
4 месяца назад
Ответ на пост «Нам нужны цифры!»
Боль, знакомая каждому сеошнику.
Работал в застройщике, не сеошником, правда, а программистом. И возникла проблема: если ввести в поисковике «Квартиры от *ИмяЗастройщика*», то первыми выходили сайты агентств, через которые продавали квартиры, а официальный сайт только на 5-6 месте. Позорище.
Ну и стало руководство меня напрягать, что так быть не должно, что в общем-то справедливо. Говорю, я не сеошник, давайте закажем SEO аудит, есть надёжные ребята. А я просто изменю сайт согласно их рекомендациям. Так и сделали.
Ребята провели SEO аудит, прислали список косяков, которые надо поправить, а потом началась комедия. Руководство половину пунктов просто забраковало «Это мы менять не будем, эти тексты переписывать не будем, эти страницы менять не будем и т д». В итоге, я половину пунктов из рекомендаций худо-бедно к сайту применил, но толку ноль.
Ну и самой главной проблемой, как потом выяснялось, оказалось то, что телефон в шапке был сделан картинкой, просто на баннере написан. Сеошники настоятельно рекомендовали это исправить в первую очередь.
А генеральный принципиально отказывался сделать его текстом. Очень ему нравились эти красочные баннеры в шапке, которые дизайнеры нарисовали, средствами html + CSS так не сделать.
Спустя какое-то время руководство согласилось-таки сделать телефоны текстом, пусть и не так красиво. И, о чудо, все получилось, сайт вышел на первые места.
Сейчас я уже давно там не работаю, ради интереса зашёл на сайт — вижу, снова заменили номера телефонов текстом на баннере. А в поиске снова в топе агентства. Предвижу, что скоро опять будут напрягать программистов вопросом «А почему мы не первые в выдаче по названию нашей же компании?».
Показать полностью
4 месяца назад
Моя работа — продвигать сайты компаний
После почти 15 лет работы на городском радио ушла на фриланс. Было страшно, но очень интересно. Я глубоко гуманитарий, но сейчас разбираюсь во всяких крутых технических штуках.

5 месяцев назад

Первый опыт работы в 16 лет в IT
Я хотел изначально написать этот пост на хабре, но это скорее просто личное желание поделиться опытом, радостью и слить накопленное, чем информативная статья с моими анализами и выводами.
Я занимаюсь программированием с детства, а веб разработкой всего пару лет, но тем не менее собрал достаточно знаний, чтобы попробовать найти работку в IT. Оно знаете, было как-то лень и интересно одновременно, я люблю приключения и к тому же я собирался работать удалённо. Мой системник уже проситься на тот свет, иногда просто может не включиться, помогает передёрнуть ОЗУ и почистить от пыли и он снова работает (Кому интересно, p7p55le + i5 750, 8 gb DDR3 и две Radeon HD 5830). Апгрейдить там бессмысленно, нужно с нуля собирать. Не то что бы меня это сильно мотивировало, ну останусь без пк, жизнь же продолжается; но он не ломается к удивлению, заставляя меня угрожать кулаком в монитор и по клавиатуре, когда курсор останавливается, а IDE (От реактивных мозгов) вылетает.
Путь до оффера
Приблизительно начало февраля 2022. Тихонько себе листал вакансии на hh и habr карьере, откликался, получал отказы, решал тестовые (увы, тестовой зарплаты не было), но я остановлюсь на собесах. Хотя и там особо всё просто, коммерческого опыта нет, ты маленький, и вообще что ты тут забыл. Потому я продолжал откликаться уже по приколу, на middle даже, ну прокатит и круто.
Ивент от яндекса.
Осень 2022. Яндекс приглашает поучаствовать в соревновании YaCup 2022. До денежного приза вряд ли дойду, а вот пройти отбор на стажировку по упрощённой схеме, если попал в топ 50 уже не так уж и не возможно. Рвя жопу и нервы, я занял 36 место (в направлении фронтенд) и через неделю меня пригласили пройти удалённо отбор. Подробно не буду. Прошёл первый этап, на том конце были весёлые ребята и прикольные задачи (относительно простые, по этому не нервничал). На втором этапе меня встретил мужик который вероятно давно не ухаживал за своей растительностью на лице. За ним была доска, где я должен был бы решать задачи, но у меня была фора, однако я всё равно завалил. В яндекс я не попал (
Удача?
Февраль 2023. Вечерочком сижу и листаю вакансии на хабре и откликаюсь на «Typescript Lead». Странное название, просто Typescript и просто Lead. В описании написано «в поисках джуна», ну а кто я, чтобы не тригернуться на слово «джун». Через часок, уже полностью сонный, смотрю пишет мужик с этой вакансии, мол, вообще смотришь куда откликаешься. Я подумал, ну бывает, хотя это не hh и на кассира случайно тут не откликнешься. Проверяю отклики и всё ок. Он зовёт поболтать.
Первый разговор был без вебки, так что я не знал кто там. По голосу лет на 20. Попросил выполнить тестовое к завтрашнему дню и втирал какую-то дичь про тёплую атмосферу в команде и что-то ещё, я не помню, хотел спать. Тестовое было простенькое, но я всё равно потратил на него пол дня.
На «собесе» меня встретил бородатый мужик далеко не 20ти лет, а как оказалось почти сорока. Вебку тоже пришлось включить, переборов себя. Это был просто разговор по интересам, был только один тех. вопрос (что такое DI?) на который я нашёл много что ответить (мог бы больше, но моя речь не поспевает за моими мыслями, я вообще довольно не общительный). Потом я ничего не помню, помню только конец. Через полтора часа разговора с меня уже стекли литры пота, пытаюсь сдерживать судороги в ногах и шею, которая тоже вот-вот пойдёт в разнос. Меня он оценил в 50к рублей и объявил испытательный срок — 3 месяца с 75% ставкой. Завершил разговор, требуя готовиться к первому рабочему дню. От меня он потребовал мой плейлист spotify, любимые фильмы, книги и moodboard, дабы «знать мой психотип», чтобы это не значило.
Надо сказать я устраивался на Frontend, он меня направил на FullStack и спойлер работал как Backend.
Первый рабочий день
Было так круто, что я аж в 6 утра подскочил. Меня добавили в телеграм группу по разработке. И к обеду мне прилетела задача (issue) в гитхаб. Единственное, что мне сказал руководитель — «Иди раскуривай».
Кстати про команду: руководитель(он же тот самый мужик), дизайнер(парень где-то лет 20ти) и два фронта, с которыми особо не контактировал.
Так вот возвращаясь к задаче. Я нихера не понял. Задача была наполнена непонятными мне терминами. Я подумал это нормально, капец какого опыта я наберусь (спойлер, это правда).
Чтож. Делать нечего, я пишу, что-то вроде «памагите, я ничего не понимаю». Меня направили почитать про [куча терминов]. «Раскуриванием» задачи я занимался следующую неделю.
Из будущего: задача была в том, чтобы доить базы сети аптек по всей России, готовить данные и кормить ими с ложечки аналитические сервисы. Ведь просто, правда? Как будто я с базами данных не работал или бэкэндом. Но вот данных там на сотни гигабайт и это вполне тянет на биг дату. Обрабатывать их нужно грамотно, чтобы не было утечки памяти. А как это делать, я не знал.
Медленно, но уверенно
Я погружался в новые технологии, местный стек и так любимое в этом месте DDD. И вот первый потребитель данных доволен. Всё работает как надо, спустя сотни исправлений. И прошло уже чуть больше двух недель. Всё время я работал над проектом один, и настраивал его с полного нуля.
А вот и первая ЗП за 2 недели. Что кстати удивило, с самого начало думал, что кинут.
Отношение начинает меняться
На одном из one-to-one
— Ну как там?
— Первый потребитель готов, ещё два осталось
— Замечательно. За этот день добьёш?
— Нууу. Эээ.. Тут я думаю где-то к концу следующей недели доделаю.
— Б*ть, какой следующей недели. У нас уже сроки на этой недели заканчиваются. Чё там делать, то. Ты должен был по моим предположениям ещё на прошлой неделе всё сдать и перейти к следующему проекту.
Дальше на меня льётся куча критики и мата, а с моими то социальными навыками, я просто сижу как камень, слушаю, говорю «ага» и со всем соглашаюсь.
Что-то похожее происходило каждую неделю. «Ну чё за день осилишь», «Так, тогда через час идём в прод, да?», а там работы на неделю.
Затем мне пришло сообщение, что мой испытательный срок нужно продлить на ещё один месяц. Я поинтересовался, как это повлияет на ЗП. Оказалось всё нормально, на ЗП это продление не влияет. Держите это в голове, пригодится.
С проекта на проект
Сроки просрались, меня ведут на другой проект, а там прод лежит, и вообще что-то там наворотили и не работает, иду на следующий, через дня 2 всем говорят бросать этот проект и идти на другой.
Чтож на этот раз это бот для подготовки формы(pdf файла) для миграции в США. Он уже был готов, но там нужно было что-то «поправить». Пока я это правил, появились подробности, что оказывается там вообще сценарий вопросов не правильный. Ну ладно, сел переписывать. Ну и как обычно, я должен был сделать это вчера, а почему-то потратил на это три недели. Ну работает и ладно.
Вообще я много когда узнавал новые подробности в не подходящее время.
Последняя капля
Напоминаю, что частенько меня кроют в чате и one-to-one. Так, что мотивации и настроения, что-то делать у меня нет. Каждый день жду увольнения.
У меня есть такая особенность, что я копирую манеру общения собеседника. Так что отвечать добром на такие сообщения я не мог, а в one-to-one просто говорю «ага» и стараюсь как можно быстрее уйти, потому что такой разговор мне не приятен. Чтобы вы не думали, что я так всегда общаюсь, с дизайнером общаться вообще по кайфу, нет желания уйти, хотя и поддержать разговор также не получается.
На проекте с ботом у меня возникла проблема, с тем, что бот падает при создании pdf, но ошибки нет, точнее она пустая. Я обращаюсь к руководителю (больше не к кому)
— У меня не собирается pdf, падаёт ошибка в виде пустого объекта
. не помню точно, но разговор зашёл к тому, что зачем мне linux, если я им не умею пользоваться, и вообще — купи мак. Вот у тебя docker стартует из под рута, потому и не работает
— Слушай. Ну вот! Да! У меня всё собирается. Это у тебя Docker из под рута стартует.
— Ладно, буду разбираться.
Посидев, я понял в чём ошибка. И тут до меня доходит. Как он мог сгенерировать pdf, если ошибка совсем в другом. Я начал кое что подозревать, что уже давно подметил.
Часто на мои глупые вопросы, я получаю слишком умные(тупые) ответы, по сути это просто каша из умных терминов. Вместо того чтобы переспросить, уточнить, руководитель мне либо посылают такой ответ, либо наезжает.
Ответ на один из моих глупых вопросов
Эти вещи нужно оборачивать в модельные сущности и эксплуатировать в рамках стекового инструментария, приватизация тут ничего не решает
Поняли? Контекст тут не важен, чтобы понять, что это отборный бред. Такие ответы я получал почти всегда.
Так, вот я решил проверить мою теорию(обращаясь к руководителю)
— А можно pdf который вчера удалось сгенерировать?
— [скидывает пустой pdf (бланк для заполнения)]
— Не, это бланк, мне нужно заполненный со вчера.
— Ты сказал не собирается, ну я и собрал. Генерация это уже другая задача.
И да. Я подтвердил свою теорию. Он придрался к термину. Я сказал «собрать», вместо «сгенерировать». Я окончательно сгорел, и назвал его душнилой, а потом не сдержался и ещё жёстче его покрыл. На что он ответил что-то вроде: что ты себе позволяешь, вы(команда), должны целовать мне ноги, я вам тут плачу, я собрал команду, я, я, я.
К этому времени в команде остался только я, приходили иногда новички (с не плохим таким опытом уже), но уходили через день, два. Мне кажеться они сразу понимали, что тут что-то не так.
Саботаж
С этого момента, почти каждый день продолжалась эскалация конфликта. Я больше не задавал вопросов по задаче (поскольку от этого я только теряю время на бессмысленный токсичный разговор), и шёл на one-to-one только со словом «ага» и каменным лицом.
Одним утром, без настроения пытаясь разобрать очередную задачу, уже по другому проекту, я вылетаю из группы в телеграме. Я сначала не понял, что произошло, потом зашёл на github и увидел, что больше не состою в их организации. И я понял — я уволен. Однако в течении дня мне ничего не написали. Так, что это сделал я.
— Это типо увольнение? Тогда уж можно пожалуйста официальную причину и ЗП за 12 дней?
— Официальная причина — некомпетентность, саботаж
— Официально — ты у меня не работал, по документам, благо, не успел тебе контракт оформить. Я рекомендую тебе походить к врачу и начать общаться с людьми, у тебя большие проблемы, которые тебе предстоит решить.
— А зп за 12 дней? Если я получаю 50тр в месяц, то за 12 дней это должно быть 20тр
— Ты не получаешь 50к в месяц, я продлил твой испытательный, ты согласился
Поняли, да? Я там даже и не работал. И что ещё за «саботаж».
Где же обещанное обучение к которому вы так ответственно относитесь, ламповая атмосфера и уважение к неопытным сотрудникам, о чём мне заливали в самом начале?
Вот такие мои весёлые приключения в мире трудоустройства в IT, так ещё и в 16 лет.
P.S. Ах, да. Мне хватило ровно на новый ПК. Так, что я не сильно расстроился.
Веб дизайн с чего начать – как стать веб дизайнером самостоятельно и начать успешную карьеру
Хотите узнать, как стать веб дизайнером самостоятельно? А может, у вас уж есть несколько своих дизайнов или даже сайт-портфолио, и вы хотели бы вывести свои умения на новый продвинутый уровень? Тогда вы движетесь в правильном направлении прямо сейчас, поскольку тема статьи именно «Веб дизайн с чего начать» и в ней мы подробно рассмотрим все нужные этапы подготовки веб дизайнера и поможем тебе стать веб дизайнером самостоятельно, приложив немного усердия и креативности.

Одна статья, конечно же, не сможет рассказать как стать веб дизайнером и поведать обо всех умениях, необходимых инструментах и технологиях, которые нужно освоить на пути к работе мечты. Если вы думаете, что путь будет простым и быстрым, то я должен вас расстроить. Работа веб дизайнером это постоянное самосовершенствование, развитие и гонка за новыми трендами и тенденциями. Но, несмотря на все профессиональнее трудности, именно обучение и получение новых знаний – один из самых приятных аспектов этой работы.
Сначала небольшое лирическое отступление для дизайнеров, которые случайно забрели почитать эту статью. «Я занимаюсь веб дизайном», наверно, вы не раз говорили кому-то эту фразу и испытывали холодный страх, когда вам отвечали что-то вроде: «Круто! А научи-ка меня, как это делается? Как стать веб дизайнером с нуля?» Многие просто предполагают, что они щелкнут мышкой, перетащат пару значков на экран, и дизайн готов. Но, к сожалению, это не так. Поэтому, в следующий раз, когда кто-то спросит вас, как создавать дизайн сайтов, просто покажите им эту статью.
Добро пожаловать, дамы и господа, в руководство для начинающих дизайнеров от MotoCMS. Возьмите свои мышки мышей и устройтесь поудобней за клавиатурой, пост обещает быть длинным. Кофе варить необязательно, но все же стоит.
Для кого эта статья о веб дизайне?
Эта статья предназначена для всех, кто задается вопросом «Как стать веб дизайнером самостоятельно?». Также она будет полезна для людей, которые хотят начать создавать веб-сайты, и имеют некоторый опыт в дизайне и работе с графическими редакторами. Все будет очень доступно и поэтапно. Статья рассчитана на то, что у вас нет никакого специального художественного или технического образования, вообще нет навыков кодирования и опыта работы в индустрии веб-дизайна.
Требования к начинающим веб дизайнерам
«Минимальные требования» для людей, которые думают как стать веб дизайнером и хотят создать свой первый сайт, довольно просты. Если вы знаете, что такое папки, графические текстовые файлы, можно начинать.

Однако, хоть начало работы и простое, создание действительно хорошего сайта – это настоящее искусство. Есть много навыков, которые вам нужно будет изучить. Вам нужно будет узнать о теории цвета, о графической иерархии элементов, шрифтах и общей организации сайта.
Также, вам пригодятся знания основных языков кодирования, а именно HTML и CSS, об этом мы тоже поговорим.
Затем вам, возможно, захочется изучить базовое программирование на JavaScript и выяснить, как использовать его для управления разными частями вашего сайта. А отчаянные ударники, которые захотят копнуть еще дальше – смогут нырнуть в системы управления контентом, поисковую оптимизацию и маркетинг.
Но не стоит бросаться сразу на все, навыки придут с опытом и необходимостью, я лишь постараюсь направить в правильное русло. И если вы дочитали аж до этой части статьи, то могу смело сказать «Добро пожаловать в прекрасный мир веб-дизайна, новичок. Будь готов неоднократно все испортить и не забывай веселиться!»
Как использовать этот руководство по веб дизайну для начинающих
Прочтите его! Этого будет вполне достаточно, чтобы начать. Сделайте свой первый, скорее всего, корявенький сайт. Вернитесь и прочитайте еще раз. Поправьте ошибки. Повторите.
Нет, вы, наверное, не хотите читать все сразу. Есть много других ресурсов, множество разных подходов, которые можно использовать. Ничего страшного, но я все же рекомендую немного вчитаться и попробовать пройти первые шаги.
Дизайн в браузере для начинающих
Возможно, знаете, что большинство дизайнеров сначала используют графические редакторы, а уже потом отдают свои проекты кодеру на верстку. Photoshop – это наиболее часто используемый инструмент, но дизайнеры также используют такие программы, как Sketch, GIMP, Inkscape и Illustrator.

Бесспорно, нужно попробовать несколько из них и использовать те инструменты, которые лучше всего подходят именно вам. Однако, если вы хотите создавать именно сайты, то старайтесь сразу же делать это в их естественной среде обитания – в браузере! В идеале – делайте это в нескольких браузерах – потому что люди не просматривают сайты в Photoshop и не видят их так, как вы через интерфейс графического редактора.
Рабочий процесс на основе браузера имеет ряд других преимуществ:
1) Вы точно видите, что получаете. Даже профессиональные мокапы не передают интерактивные или анимированные части сайтов. Создавая дизайн на основе браузера вы сможете точно видеть, как он работает.
Это особенно актуально, когда речь идет об адаптивном дизайне. (Для непосвященных: отзывчивый или адаптивный дизайн – это тот, который корректно отображается на разных экранах и устройствах, будь то мобильный телефон, планшет, или ПК ).
2) Дизайн на основе браузера может сделать вас лучшим дизайнером. Когда вы сами знаете весь процесс, вы сможете понять что и как работает, и предостеречь себя от многих ошибок. Кошмар любого дизайнера (или верстальщика, которому это придется делать), работающего в, скажем, Photoshop, это дальнейшего его «натягивание» на живой сайт.
В любом случае, вот несколько ресурсов, которые могут быть полезными в работе с графическими редакторами.
- Уроки фотошопа
- Курс обучения Adobe Illustrator CC
- Экспресс курс Adobe Illustrator CS6
- Векторная графика
Дизайн в браузере может во многом поменять ваш подход к работе и подстегнуть вас узнать что-то новое о HTML и CSS. В принципе, чем больше вы повозитесь c грязными с кодом, тем лучше вы поймете, как работают сайты. Это не сделает вас потрясающим дизайнером; но это отличное начало.
Навыки, которые вам понадобятся, чтоб стать веб дизайнером
Если вы хотите стать профессиональным веб дизайнером самостоятельно, вам понадобятся некоторые специальные навыки. В этом разделе мы ответим на вопрос “Как стать веб дизайнером самостоятельно?”, а также сосредоточимся на навыках, необходимых для фактического проектирования и создания сайта. Конечно, вам также понадобятся деловые и коммуникативные навыки, но это уже немного другая история. Итак, чтоб стать веб дизайнером самостоятельно вам необходимо знать следующее.
UX / UI дизайн

Дизайн, ориентированный на пользовательский опыт, или UX-дизайн – это то, как будет выглядеть и работать пользовательский интерфейс в целом. Это процесс, это философия, и это большая работа. Действительно хороший сайт можно создать только зная, какой путь на нем проходит посетитель, и как меняется его поведение в зависимости от изменения графических елементов.
Больше информации об этом можно найти в статье «Что такое UX/UI дизайн на самом деле?»
Эстетические навыки
Эстетика – это сложная штука. Похоже, что отличная цветовая схема для одних людей может выглядеть совершенно странно для других. Шрифты, которые для вас в этом месте смотрятся «как раз», могут совершенно не понравиться заказчику. Это кажется очень, очень субъективным, но все же в каждом из этих аспектов есть свои правила, о которых мы с вами сейчас и поговорим.
Сочетание шрифтов и типографика

Интернет – это текст. Это слова. И эти слова должны выглядеть потрясающе. Тем не менее, типографика – это нечто большее, чем просто выбор правильного шрифта. Это, в первую очередь, удобство использования. Необходимо правильно выбирать и комбинировать размеры, типы и стили шрифтов в дизайне для создания графической иерархии в дизайне.
Чтоб провести вас «от А до Я», предлагаю просмотреть книгу Эмиля Рудера «Типографика» . Чтение может быть довольно долгим, потому для желающих сразу же приступить к практике – короткое видео по теме, а так же гайд по определению шрифтов по картинке (это если вдруг вы уже нашли хороший пример текста, и хотели бы идентифицировать его шрифт).
После того, как вы изучили правила типографики, вы можете попробовать некоторые шрифты для своего проекта. На самом деле в сети много хороших бесплатных шрифтов, так что осмотритесь.
Многие люди, включая меня, выбирают свои шрифты из Google Web Fonts. Шрифты Google можно «встраивать» в сайт, и это довольно удобно. Более того, можно пользоваться готовыми комбинациями шрифтов:
- Крутые примеры комбинаций шрифтов
- Статья с крутыми сочетаниями шрифтов
Другие подобные примеры можно найти в Интернете.
Если вы хотите создать свои собственные пары шрифтов Google, попробуйте «Комбинатор веб-шрифтов». Это инструмент, который позволяет вам быстро просматривать комбинации шрифтов в режиме реального времени, меняя шрифт, размер, цвет, ширину строки.
Если Google шрифтов мало, то можно заглянуть на Web Designer Depot, Fonts-online, и другие сайты.
Теория цвета и цветовые схемы
Теория цвета имеет мало общего с техническими названиями цветов. Если ваш клиент просит фуксии, но на самом деле хочет горячего розового цвета, выбор только за вами.Теория цвета изучает, в первую очередь, связь между комбинациями цветов и эмоциями человека, который ее воспринимает. Это настоящая наука.
Чтоб понять основы теории цвета, есть несколько отличных публикаций:
- Сочетание цветов в веб-дизайне
- Flat цвета в веб-дизайне
- Как комбинировать цвета в веб дизайне: Тренды
- Как Использовать Сочетания Цветов в Дизайне Сайта
Из обязательных инструментов – Adobe Color CC

Помните, что теория цвета тесно связана с типографикой. Например, если цвет текста слишком близок к цвету выбранного фона, то его будет трудно читать и посетители, скорее всего, просто пройдут мимо этой части сайта, или же вовсе покинут его.
Композиция и общая организация
Как стать веб дизайнером без знаний основ композиции? Да никак! Для меня эта часть является едва ли не самой важной. Ведь можно подобрать прекрасные шрифты, отличную цветовую схему, а потом банально напороть с правильным расположением блоков, иерархией и пропорциями и получить «отвратительнейшее блюдо из отличных продуктов».

Есть несколько полезных публикаций по этой теме, после которых доходит с первого (или почти с первого) раза.
- Основы композиции сайтов
- Использование «Золотого сечения» и «Правила трех» в веб-дизайне
- Модульные сетки в веб-дизайне
Веб дизайн тренды
В трендах в веб дизайне можно говорить бесконечно. Какую роль они играют? Все заказчики, скорее всего, перед тем как прийти к вам уже посмотрели несколько примеров крутых модных сайтов, и возможно даже прочитали парочку статей с веб дизайн трендами. Знать моду и популярные элементы дизайна просто необходимо чтоб понимать, что они просят, и чтоб было что им предложить.
Поскольку тенденции в веб дизайне постоянно меняются, нет смысла приводить на пример какие-то конкретные публикации. Тут я могу просто посоветовать вам следить за сайтами для веб дизайнеров, вот несколько хороших примеров:
- abduzeedo.com
- behance.net
- noupe.com
- webdesignerwall.com
- flickr.com
- awwwards.com
Как стать веб дизайнером: HTML и CSS
HTML это «Язык гипертекстовой разметки». Каждый сайт, на который вы когда-либо смотрели, сделан на основе HTML. HTML – это тот язык, воспринимая который ваш браузер понимает, что на сайте есть текст, изображение, ссылка, видео или другие элементы. Ваш браузер затем переводит код в то, что вы видите на экране.

Другой язык, который простыми словами делает сайт красивым, называется CSS, это значит «Каскадные таблицы стилей». CSS сообщает браузеру, какой шрифт задан в тексте, и какие цвета используются. CSS, проще говоря, определяет внешний вид вашего сайта (кнопки, стили, цвета, анимация).
Изучить эти языки самостоятельно, или, по крайней мере, получить базовое понимание того, как они работают, довольно просто. Это самые простые компьютерные языки. Тем не менее, они также довольно обширны и могут использоваться в разных вариациях для создания потрясающих дизайнов.
Как только вы знаете основы, есть действительно потрясающее количество сайтов, где вы можете узнать больше о том как стать веб дизайнером и самостоятельно выучить языки программирования.
Выливка на живую
Готовы разместить свой сайт в Интернете? Есть доменное имя (например: mywebsite.com) и хостинг (пространство на компьютере, постоянно подключенном к Интернету или онлайн хостинг, приобретенный у сторонних провайдеров)? Загрузите файлы на хостинг, откиньтесь в кресле, расслабьтесь и …
Что делать после запуска сайта
Поправьте ошибки и допилите то, о чем забыли

“Ах, да, вот это вот… я точно хотел это поправить.”– С кем не бывает. Почти неизбежно после запуска любого сайта всплывают ошибки. И чем больше сайт, тем больше вероятность, что вы пропустили ошибку или что-то забыли. Для вашего удобства, вот довольно подробный контрольный список-чеклист :
Соберите отзывы
Вы не сможете улучшить мастерство, если не знаете, где совершили ошибки. Время и опыт могут научить вас этому, но другие могут научить вас быстрее.
Когда вы пытаетесь стать веб дизайнером с нуля и учитесь самостоятельно, я рекомендую вам присоединиться к сообществам, чтобы общаться с другими дизайнерами, которые могут помочь вам и дать профессиональные рекомендации.
Как стать веб дизайнером – итоги
Статья вышла довольно длинной, но вместить все это в меньшем количестве слов было бы затруднительно, поэтому всех, кто дочитал до конца, хочу поздравить и искренне поблагодарить за терпение. Если вы хотите узнать больше о веб дизайн обучении, или о конкретных инструментах и стратегиях работы – напишите это в комментариях, и мы обязательно создадим больше полезных материалов по теме. Всем удачи!
А если вы уже готовы опробовать свои навыки на живом проекте, и Вам нужен хороший хостинг – в качестве бонуса, вы можете купить хостинг на год от нашего партнера Inmotion всего за 1$.
В компании MotoCMS Иван работает со дня ее основания. Признается, что успел создать не один сайт на MotoCMS ради досконального изучения админки и изложения всех хитростей работы с ней в блоге. Иван невероятно позитивен, предан своему делу, отзывчив. С удовольствием поболтает с вами о новых фичах, тулзах, пингах и других непонятных определениях на страницах блога.
6 хороших практик по HTML и CSS
Можно легко найти хорошие практики по любой технологии, но, к сожалению, по HTML и CSS это сделать не так просто. Недолго думая, я написал свой список из 6 кейсов, когда вы можете сделать удобный или не удобный интерфейс для пользователя только через HTML и CSS.
Текст в атрибуте alt это не дублирование заголовка
Атрибут alt очень полезен, потому что с помощью него пользователи скринридеров могут понять, что изображено на картинке. К сожалению, многие разработчики используют не оптимально. Они либо дублируют текст вокруг картинки, либо совсем его не добавляют.
Но мы можем использовать alt по другому, а именно на основе текста из заголовка добавить дополнить его, добавив больше деталей о изображении. Например, если у нас карточка товара, в которой заголовок-название товара и изображение, то в alt можно описать внешние характеристики товара.
Не делайте так
adidas Originals Superstar
Можно сделать так
adidas Originals Superstar
Не весь текст это заголовок

Заголовки важная часть HTML, которая помогает пользователям в навигации. Особенно, пользователям скринридеров, которые используют список заголовков для быстрой навигации по странице.
Поэтому нам следует уделять особое внимание заголовком. Сейчас существует практика использование элементов h1 — h6 везде. Как результат, скринридеры отображают кашу из заголовков, и людям требуется больше времени, чтобы разобрать это.
Например, мы можем избегать этого, если подумаем насколько нам действительно нужны элементы h1 — h6 для разметки заголовка и подзаголовка. Возможно, вместо двух элементов, например h2 и h3 , мы можем использовать только один.
Не делайте так
iPad Pro
Supercharged by the Apple My chip.
Можно сделать так
iPad Pro Supercharged by the Apple My chip.
button type=button лучше чем a href=»#»
Часто можно встретить ссылку с якорем, когда разработчики пытаются разметить интерактивный элемент. Они делают это, думая, что если отменить дефолтное поведение ссылки с помощью JS, то они получат поведение кнопки.
Да, на первый взгляд это так. Но есть проблема. Бразуеры по-прежнему думают, что это ссылка. Если вы откроете контекстное меню на таком элементе, с помощью правой кнопки мыши, то увидите опции: «Открыть в новой вкладке», «Открыть в новом окне» и «Открыть в приватном окне».
Когда пользователи видят такие пункты, они думают, что это ссылка и могут открыть ее, например, в новой вкладке. Когда они это делают, то получает неожиданный результат, а именно они увидят верх страницы. Поэтому лучше использовать элемент button . Вы получаете интерактивный элемент и не запутаете пользователя в случае вызова контекстного меню, потому что в нем не будет опций ссылки.
Не делайте так
Можно сделать так
justify-content: space-between приводит к неожиданному отображению разметки
Когда только появился Flexbox многие были воодушевлены свойством justify-content, которое позволяет просто расположить равномерно элементы сетки с помощью значений space-between или space-around. И конечно многие стали пользоваться этим. Но есть проблема.
Когда мы используем эти значения, то не задумываемся, что количество элементов может измениться. Например, если я добавлю еще 2 элемента в сетку из 4 колонок, то они будут отображаться по бокам родителя, в случае space-between, а не в начале строки, как ожидает пользователь.
Поэтому в этой ситуации лучше использовать margin , если нужна поддержка IE11, или column-gap для установки расстояние между элементами.
Не делайте так
.grid < display: flex; justify-content: space-between; /* or space-around */ >.item
Можно сделать так
.grid < display: flex; column-gap: 5%; >.item
justify-content и align-items теряют элементы
При решении задач по позиционированию элементов мы часто используем свойства justify-content и align-items . Я не спорю, что это удобный и простой способ позиционирования. Но есть проблема, которая особенно часто встречается при вертикальном позиционировании.
Это связано с особенностями работы свойств, а именно свойства justify-content и align-items не учитывают размеры flex-элементов. Соответственно в случае когда размеры flex-элементов больше размеров flex-контейнера, то flex-элементы будут выходить за его пределы, и могут отображаться некорректно.
Например, я часто вижу модальное окно, у которого кнопка-крестик вышла за пределы окна и не доступна. Приходит уменьшать масштаб страницы, чтобы его закрыть.
Эту проблему можно решить с помощью свойства margin со значением auto . Внутри flex-контейнера значение auto будет рассчитано с учетом размера самого контейнера и размеров flex-элементов. Если размеры flex-элементов меньше, чем размеры flex-контейнера, то браузер рассчитает отступ автоматически. А если больше, то элементы прижмутся к границам flex-контейнера.
Не делайте так
.modal
Можно сделать так
.modal < display: flex; >.modal__main

Позаботьтесь о пользователях, которые могут испытывать головокружение, тошноту и головные боли
Я думаю, что многим дизайнерам и разработчикам нравится создавать анимацию. Да, интерфейсы в этих случаях выглядят более интересными. Но мы должны быть более осторожны.
В WCAG 2.2. есть раздел 2.3.3., в котором описывается, что некоторые пользователи могут испытывать головокружение, тошноту и головные боли, когда видят анимацию, которая запускает движение элементов.
Таким образом, если мы создаем анимацию такого типа, нам следует использовать медиа-функцию prefers-reduced-motion . В этом случае, если люди отключили анимацию в операционной системе, то она не будет отображаться, а если они этого не сделали, анимация будет работать. И мы позаботимся о наших пользователях.
Не делайте так
.example
Можно сделать так
@media (prefers-reduced-motion: no-preference) < .example < animation-name: zoomInDown; animation-duration: 1s; animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19); animation-delay 0.3s; animation-fill-mode: both; >>
P.S. У меня есть почтовая рассылка с CSS советами. Я буду рад, если вы присоединитесь. Ссылка указана в разделе «О себе» в моем профиле.
Почитать еще
- Очередной гайд по HTML-элементам, которые можно использовать в каждом проекте
- Мои любимые вопросы о CSS с ответами
- HTML и CSS ошибки, которые я встречаю как человек без ограничений по здоровью
С чего начать учить PHP: особенности, синтаксис и идеи для первых проектов

В этой статье разберемся в перспективах и популярности PHP в 2022 году, рассмотрим плюсы и минусы языка, поговорим про платформы для тренировки навыков на практике и источниках идей для первых проектов.
- Введение
- Преимущества и особенности PHP
- Сообщество
- Низкий порог входа
- Обратная совместимость
- Комментарии
- Переменные
- Другие элементы
Введение
PHP — самый популярный язык для веб-разработки. Почти 80% всех сайтов в интернете написаны на этом языке.
Поскольку язык очень широко распространен, работу на нем можно найти практически в любой сфере. Особенно он актуален в компаниях на этапе создания mvp (минимально жизнеспособного продукта) или среди разработчиков CRM-систем.
Код на PHP выглядит, например, так:
function isCorrectPassword($password) $length = strlen($password); return $length > 8 && $length 20; > isCorrectPassword('qwerty'); // false isCorrectPassword('qwerty1234'); // true isCorrectPassword('zxcvbnmasdfghjkqwertyui'); // falseПреимущества и особенности PHP
Сообщество
Сообщество помогает с проблемами, которые не получается решить чтением документации и гуглом. У PHP оно большое и дружелюбное к новичкам — причем как в англоязычном мире, так и в России.
Крупнейший глобальный форум по языку программирования — PHP Community , в России — PHP Club . Существует несколько десятков крупных телеграм-чатов для разработчиков разного уровня (самые популярные: раз , два , три ), а также отдельные чаты для джунов , где можно задавать любые вопросы и не бояться осуждения.
Низкий порог входа
Это и плюс, и минус языка. С одной стороны, начать программировать на PHP относительно просто, с другой — некоторые разработчики не выходят за рамки с CMS, работают на уровне конструкторов и редко касаются кода. От этого страдает сообщество, а поиск PHP-разработчика, который понимает теорию и умеет кодить, превращается в действительно сложную задачу.
Составьте свое первое резюме: Вы можете бесплатно опубликовать свое резюме в нашем сервисе «Хекслет-CV» и получить советы по его улучшению от разработчиков и HR-менеджеров
Обратная совместимость
Обратная совместимость — термин, которым обозначают легкость обновления кода под новую версию. Разработчики PHP стараются поддерживать ее на высоком уровне: к моменту выхода восьмой версии обратная совместимость у языка почти полная (за исключением некоторых моментов).
Это и преимущество, и недостаток языка программирования: с одной стороны, разработчики могут не бояться переезда и всегда использовать новую версию. С другой — в PHP до сих пор остались некоторые функции стандартных библиотек, которые работают странно и несогласованно. Яркий пример — функции array map и array reduce, у которых положение входного массива и функции отличаются. Это не очевидно и к этому надо привыкать.
Синтаксис PHP
Начнем с азов: строку Hello, world! можно вывести на экран двумя способами.
- С помощью специальной команды echo
echo 'Hello, World!'; // => Hello, World!- С помощью функции print_r().
print_r('Hello, World!'); // => Hello, World!Любой код на PHP должен быть обёрнут в конструкцию , где — закрывающий. Это особенность языка программирования.
Комментарии
Комментарии в коде бывают двух видов: однострочные (//) и многострочные (/* */).
/* * The night is dark and * full of terrors. */ print_r('I am the King');Переменные
Перед объявлением переменной не нужно указывать ее тип — достаточно поставить значок $. Кроме того, одно значение можно присвоить нескольким переменным.
Другие элементы
Фреймворки для PHP
У PHP множество фреймворков, но в этой статье кратко рассмотрим три самых популярных: Laravel, Yii и Symfony.
- Laravel — фреймворк с самым низким порогом входа, с него можно начинать знакомство с возможностями языка. Если возникнут трудности, по фреймворку есть несколько чатов: для базовых вопросов и для кейсов посложнее .
- Yii — еще один фреймворк с низким порогом входа: для начала работы с ним достаточно знать PHP на уровне новичка. Русскоязычные чаты разбиты по версиям: первая , вторая и третья .
- Symfony — самая масштабная библиотека-фреймворк на PHP. Возможностей больше, но и порог входа выше.
Что учить вместе с PHP
PHP — язык для веб-разработки, поэтому знать HTML и CSS хотя бы на базовом уровне нужно обязательно. То же касается протокола HTTP на уровне понимания процесса работы запросов клиент-сервер.
Остальные технологии можно разделить на две категории:
- Полезно знать. Git (нужен всем программистам, которые собираются заниматься коммерческой разработкой), SQL (подавляющее число веб-приложений имеют базу данных), Nginx и Apache (для настройки окружения);
- Дополнительные навыки. Linux/Unix, JavaScript, Docker.
Как выбрать редактор кода или среду для разработки на PHP
На первом этапе сложная среда разработки вроде PHPStorm не нужна — новичку IDE покажется монстром с множеством функций, который к тому же медленно открывается.
Sublime и VSCode, напротив, быстро открываются, настраиваются и позволяют относительно просто подключать дополнительные фичи. Например, инструменты для взаимодействия с базой данных или с кэшем.
Когда понадобятся инструменты для работы с Git, шаблонизаторами, окружением, тестами и другими технологиями, можно переходить на IDE — например, на PHPStorm, Netbeans и Aptana Studio.
Какие книги и сайты использовать для изучения PHP
Выше уже говорилось, что при изучении PHP важно уделять много внимания теории, а не только учиться писать код. Этот язык программирования дает очень размытое представление о том, как его компоненты работают на базовом уровне. Понимание теории поможет освоить и PHP, и любой другой язык программирования.
На русском языке есть несколько подходящих книг:
- «Грокаем алгоритмы. Иллюстрированное пособие для программистов и любопытствующих», Адитья Бхаргава;
- «Код: тайный язык информатики», Чарльз Петцольд;
- «Чистый код», «Идеальный программист», «Чистая архитектура», Роберт Мартин.
Важно уточнить, что читать эти книги лучше через полгода после начала обучения. С одной стороны, за это время появится представление о PHP, с другой — желание применить новые знания и переписать весь проект возникнет не сразу.
Если говорить о сайтах, то на PHP: The Right Way собрана обширная база материалов для разработчиков разных уровней, а CodeBasics подходит для изучения синтаксиса.
Где тренироваться
Соревнования помогают развивать навыки кодирования и учат видеть неочевидные пути решения задач. Вот три самых популярных платформы:
- Codewars . Платформа с соревнованиями для разработчиков разных уровней подготовки. Все решения участников публикуются в открытом доступе после завершения раунда. Это важный элемент обучения: можно решать задачу несколько дней в 100 строк кода, а можно сделать то же самое за несколько часов и пять строк. Например, с помощью готовых функций.
- Hackerrank . Кроме соревнований на платформе есть раздел подготовки к интервью с самыми популярными и актуальными вопросами. Например, есть блоки по массивам, объектам и другим сущностям — с объяснением, как это работает, и с задачами на закрепление знаний.
- Leetcode . Раздел Learn с теорией и практикой для ее закрепления помогает понять логику программистских задач и научиться решать их практически с нуля.
Вместо заключения
Главный итог обучения — смена профессии. Вот несколько советов, с чего начать переход от задач и тренировки к реальным проектам в портфолио.
Лучшее, с чего можно начать — найти в своей жизни момент, который можно автоматизировать. Например, если вы хотите выработать привычку читать каждый день по 10 страниц. Можно сделать приложение для учета количества страниц книги, прочитанной в определенный день. Утилитарность приложения почти гарантирует, что проект будет доведен до конца.
- Задачи, которые встречаются в реальных проектах
Можно попробовать реализовать функции, которые встречаются в реальных проектах — например, форму для сайта. В ней можно сделать HTML и CSS, добавить JS и прописать логику. Например, реализовать сохранение в базу данных или отправлять сообщение на почту. На таком проекте можно учиться разделять логику. Например, сделать так, чтобы один отвечал за отображение, другой — за саму форму, третий — за сохранение данных в базе.
Никогда не останавливайтесь: В программировании говорят, что нужно постоянно учиться даже для того, чтобы просто находиться на месте. Развивайтесь с нами — на Хекслете есть сотни курсов по разработке на разных языках и технологиях
Бесплатный курс по HTML и CSS:
обучение для начинающих во frontendВ этом курсе выстроите фундамент для старта в веб-разработке. Программа для тех, кто хочет попробовать себя в frontend.
Начать обучение бесплатно
Освоите базу верстки сайтов — HTML и CSS
Научитесь переводить дизайн в код для сайтов
Получите поддержку от наставника в чате курсаКурс подойдет тем, кто
Ищет себя и пробует новое
Вы хотите узнать, каково быть разработчиком, и понять нравится ли вам это направление. Обучение покажет, что IT проще, чем кажется.
Хочет стать frontend-разработчиком
Вы решили стать программистом, но не знаете, с чего начать. На курсе получите базовые технологии frontend без лишней информации.
Научиться верстать сайты
Вы умеете делать прототипы и собирать сайты в конструкторах, но хотите добавить больше функциональности в свои проекты.
Зачем учить HTML и CSS?
Знание этих технологий — первый шаг к профессии frontend-разработчика.
HTML — это каркас веб-страницы, а CSS — ее фасад.
Зачем учить HTML и CSS?
Знание этих технологий — первый шаг к профессии frontend-разработчика.
HTML — это каркас веб-страницы, а CSS — ее фасад.
HTML
Язык гипертекстовой разметки. Используется для описания веб-страниц с помощью обычного текста.
Его функционал — это создание и структурирование текста на сайте.
Разделы, заголовки, ссылки и абзацы — все это относится к HTML.
CSS
Каскадные таблицы стилей. Применяются в сочетании с HTML и определяют внешний вид сайта.
CSS отвечает за размер, цвет и положение всех элементов страницы, написанной на HTML.
Программа курса
Поймете, как устроены веб-технологии и без барьеров напишете первый код, даже если никогда его не писали. Создадите структуру страницы и увидите результат своей работы.
1. Как работает Web
2. Что такое HTML & CSS
3. Основы и синтаксис
4. Текстовый редактор VSCode
5. Структура HTML-документа
7. Работа с текстом
8. Картинки и ссылки
12. Линейные и блочные элементы
14. HTML5 Семантика
15. Заливаем сайт на GitHub
При помощи CSS научитесь изменять размер, форму, цвет и другие визуальный характеристики элементов, созданные в HTML. Получите основы адаптивной верстки.
1. Что такое CSS
2. Синтаксис CSS
3. Способы подключения CSS
5. Как работать с DevTools
6. Работа с текстом
8. Границы элементов
10. Ссылки и псевдоселекторы
11. Списки и таблицы
12. Свойство display. Inline & Block & Inline-block
13. Свойства о Position
14. Введение в адаптивную верстку с Media
15. Deploy. Проверка и личная обратная связь
Остались вопросы?
Наш отдел заботы готов ответить на любой вопрос
Задать вопрос Написать
Начните изучать HTML и CSS сейчас Начните изучать сейчас
Курс «Основы HTML&CSS»
- Следуете четким дедлайнам, которые стимулируют сделать проект
- Готовите полноценный проект, который будет работать
- Освоите HTML и CSS за неделю
- Поймете все необходимые шаги для трудоустройства
Приступить
Проходите модуль за 2 недели — получаете доступ ко всем материалам навсегда.
Нам важно, чтобы вы не откладывали учебу в долгий ящик и получили желанную профессию.
Автор курса
Владилен Минин
- Senior Frontend разработчик
- Опыт коммерческой разработки более 8 лет
- Тимлид для команд разработки более 10 человек
- Более 6 лет обучает JavaScript
- 40 000 тысяч студентов онлайн
- Автор YouTube канала более чем с 290 000 подписчиками
Похожие курсы
Воркшоп «Перспективы в IT»
Содержит: 4 шага к карьере в IT, грейды и зарплата frontend-разработчика, технологии для старта.
Курс «Основы JavaScript» и 50 заданий
Вы приобретете навыки: JavaScript, массивы, объекты, циклы, функции, debug, асинхронность.
С нуля • 2 недели
Марафон JavaScript «5 дней — 5 проектов»
Содержит: плагин для картинок, мини-кол Trello, слайдер картинок, мини-игра, анимированная игра
С нуля • 1 неделя
Основы программирования
Содержит: основы алгоритмов, браузера и интернета, простые команды JS
С нуля • 2 недели
Часто задаваемые вопросы
Подойдет ли мне этот курс?
Да, если вы хотите освоить основы верстки и научить писать код на HTML и CSS. Эти технологии базовые в стеке frontend-разработчика, следовательно, их нужно знать всем, кто хочет стать программистом.
Что нужно, чтобы начать обучение?
Приступить к курсу можно бесплатно и с нуля — перед обучением не нужно готовиться или отклыдвать деньги.
Получу ли я сертификат после прохождения курса?
Да, в конце обучения вы получите сертификат, где будут прописаны все темы, которые вы пройдете в рамках курса HTML&CSS.
Останется ли доступ к курсе после завершения обучения?
Если вы пройдете обучение в течение 2 недель, материалы курса останутся у вас навсегда.
Как проходит обучение?
После регистрации на нашей платформе у вас появится личный кабинет. В нем вы сможете отследить свой прогресс, выполнить задания и получить обратную связь от куратора. На протяжении всего курса с вами работает наставник, который проверяет ваши работы и помогает разобраться со сложными темами. Ваше взаимодействие будет комфортным и быстрым — каждое задание проверяется в течение одних суток.
Остались вопросы?
Мы считаем, что практическое образование — ключ к результативному обучению. Данный курс также наследует этот принцип.
Вы можете получить бесплатную консультацию: отдел заботы ответит на любые вопросы.
Получить консультациюПочему мы этим занимаемся
Доказываем, что попасть в IT реально.
В основе курса — актуальные данные. Обучаем на практике и без воды.
Даем реальные задачи, над которыми работают
в IT-компаниях прямо сейчас.Помогаем найти работу, сделать качество жизни лучше и начать карьеру в разработке.
Информация
Направления
Подпишитесь
- ИП Минин В. И.;
- ИНН 781714316555;
- ОГРНИП 317784700113455
Любое использование материалов с данного сайта допускается не иначе как с письменного разрешения его правообладателя — 781714316555 ИНН/ОГРНИП номер от 317784700113455. Использование материала с сайта и нарушение авторских и смежных прав правообладателя наказывается в соответствии со ст. 146 УК РФ. Вся информация, предоставленная на сайте, ни при каких условиях не является публичной офертой, определяемой положениями ст. 437 (2) ГК РФ.
Мы используем cookie. Продолжая использовать сайт, Вы даете свое согласие на использование cookie для хранения данных. Подробнее.