nfh2860

Перед тем как приступить к JavaScript, решил реструктурировать html и css код, благо его немного, да и целесообразно сделать это сейчас , чем разбираться потом. Всё это делаю сейчас ещё и из-за того, что приступая к js, понял, что тема эта займёт много времени и пока буду с ней разбираться, кто-то может подсказать что-то дельное по уже существующему материалу.

Начал понятное дело с html. Постарался дать как кажется более приемлемые названия для классов. Объединил всё в блоки, в которых элементы близки по смыслу, а также выделены физически на фоне других блоков.

По поводу css, настраивал всё только под позиционирование, да и только на одну рамку под свой экран. Считаю что на данный момент нецелесообразно использовать media query, так как ещё не определился по поводу внешнего вида самих страниц. Только когда определюсь с содержимым сайта, я займусь графической стороной, а пока на данный момент все что я узнавал из тем по css, я применял на странице с целью ознакомления и убирал, не видя целесообразности в употребление того или иного свойства. Пока сайтик не будет функциональным с точки зрения его основного предназначения, его оформление будет вычурным и неестественный для контраста работы видимых границ блоков.

По поводу git и GitHub решил сильно не заморачиваться и пользоваться ими не через консоль, а через встроенный инструмент в Visual Studio Code. Для начала чтобы только пушить изменения в репозиторий мне будет достаточно.

Вот ссылочка на GitHub https://github.com/Astrodynamic/itakaboom.com

Неделька была уж чересчур насыщенная, из-за чего не было свободного времени даже открыть крышку ноутбука. Ох же эта работа, отнимает всё наше свободное время.

И вот наконец-то я подошёл к CSS. Занимаюсь всё там же на freeCodeCamp, весьма интересно и интерактивно. Сегодня получилось пробежаться по основам CSS, прошёлся по весьма простым темам, как работа с текстом и позиционирование элементов на странице.

Начал как это не банально с подключения css к html странице. Из чего выяснил что есть три способа подключения. Для себя выделил онин считая его оптимальным. Это подключение отдельно файла, содержащего в себе все свойства тех или иных html блоков страницы. А что удобно этот способ позволяет использовать эти свойства и на других страницах, всё что для этого требуется так это подключить необходимый файл.

<link rel="stylesheet" href="./css/index.css" />

Для манипуляции над блоком нужно получить доступ к нему. Доступ получают через обращение к нему через любой атрибут тега находящегося внутри угловых скобок. Часто для получения доступа используются только классы и идентификаторы.

Получив доступ к элемента DOM с помощью селекторов, начал с банального изменения цвета, далее продвинулся к параметрам отображения текста. После изучил вопрос манипуляции размеров блоков, изменение параметров фона блока, окантовки. Немного смутил вопрос внешних и внутренних отступов. А смущало то, что при изменении внутреннего отступа менялся и размер самого блока. Эту проблему решил через изучение параметров размера блочной модели, а именно через свойство box-sizing.

Интересным стало и то, что в css можно задавать переменные, которые позволяют использовать ссылки на заданные свойства в одном месте. Используя их в нескольких местах, получаем возможность манипуляции свойствами в одном месте.

Интересным также был вопрос позиционирования объектов на странице. Данная тема пока не вызывает огромного интереса, но я также с ней познакомился.

Долго мучился с расположением элементов на страницы, чем-то пытался манипулировать через float, чем-то через display и position. Всё конечно получилось, но настраивать всё для каждого элемента весьма нудновато, поэтому пришлось поискать другое решение. Этим решением оказался Flex Box. Всё что нужно, так это задавать параметры только для родительского элемента. Пришлось переписать страницу под этот инструмент, хорошо что моя страничка учебная и на ней пока не так уж много элементов. Так познакомившись с Flex Box, решил пока на этом закончить. Надеюсь в следующий раз разобраться с github, чтобы по чуть-чуть, не спеша изучать git.

cd ../

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

В поисках ответа пришлось посёрфить не один сайт, пролистал не одну книгу, несколько видеороликов с youtube, зарегистрировался на нескольких площадках, которые на платформе имеют несколько образовательных курсов посвященных освещению вопроса определения путей развития в этой области. Но всех объединяло одно, что все дают поверхностную информацию, да и ставят человека в тупи́к из-за отсутствия конкретики и расплывчатости понятий.

Одни описывают веб-разработку как нечто простое и объединяют только в три инструмента как html, css and javascript, другие сразу начинают с перечисления неисчислимого количества инструментов, большинство из которых возможно и не понадобится. Первые ресурсы плохи по той причине, что человек вдохновленный сразу не поймёт, что на этих базовых инструментах сможет построить только видимую сторону приложений, а вторые же сразу вводят во фрустрацию из-за предоставленной необходимости выбора инструментов, когда на этом начальном этапе эти инструменты воспринимаются как набор букв.

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

Приводя всё к понятной для меня форме, случайным образом на github наткнулся на один репозиторий, содержащий полный ответ на сегодняшние поиски, им оказалась карта для развития веб-программиста в 2021 году в форме, которая мне подходит. Набор инструментов перечисляется и основан на сегодняшних трендах, и что немаловажно она проста в понимании. Я считаю что будет кощунством не использовать её, поэтому с этого момента она становится для меня главным ориентиром.

Вот пример карты для front-end…

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

В следующем посте мы наконец-то приступим к расмотрению карты. А и чтобы не забыть, вот ссылка на репозиторий с картой. https://github.com/kamranahmedse/developer-roadmap