Учебный курс по программированию, неделя 2: ALPHA Camp (Сингапур)
Сообщение недели 1 можно найти здесь.
Две недели пролетели в мгновение ока.
На этой неделе мы затронули в основном HTML, CSS и Bootstrap.
В середине недели я был немного ошеломлен, когда узнал, что есть так много вещей, которые я не знаю и хочу узнать. Почему-то это похоже на коварный парадокс.
Чем больше я узнаю, тем больше понимаю, как много я не знаю.
Это привело к чтению других тем, таких как Sass и Gulp, и я пытался усвоить больше, чем мог.
К счастью, Наз (товарищ по партии) заметил это и указал мне на это (спасибо, дружище). Вечером мы с парнем пробежали обычную петлю по Садам у залива, и я поделился своей ситуацией. Мы говорили о том, почему я так себя чувствую и как мне лучше с этим справиться. В итоге я решил сделать шаг за шагом, и в конце пробежки я почувствовал себя намного лучше. Утешает то, что бег никогда не перестает снимать стресс и дает мне ясность ума. Проясняющая магия бега заставила меня почувствовать себя новеньким человеком.
Кроме того, неделя была довольно продуктивной. Погружение в обзор по основным темам:
1. HTML
HTML, сокращенно от языка гипертекстовой разметки, - это язык разметки, который браузеры используют для отображения веб-сайтов. Независимо от языка программирования, используемого для создания приложения, его информация в конечном итоге переводится в HTML, прежде чем появится в браузере.
HTML написан с использованием тегов, заключенных в угловые скобки (<>
), которые определяют содержимое. Тег обычно открывается (<>
) и закрывается (</>
) вокруг содержимого. Контент пишется между тегами следующим образом:
Атрибуты применяются к тегам для предоставления дополнительной информации. Атрибуты добавляются после имени тега:
<tag attribute="value">Content</tag>
2. CSS
CSS, который расшифровывается как Cascading Style Sheets, обеспечивает уровень представления для HTML. CSS определяет стиль и расположение элементов HTML.
Вей Лян (инструктор учебного лагеря) показал нам веб-сайт (CSS Zen Garden) с библиотекой дизайнов шаблонов CSS, и это демонстрирует, насколько мощным может быть CSS в определении внешнего вида контента веб-сайта. Совершенно разные страницы можно создавать, просто применяя разные CSS к одному и тому же HTML.
Синтаксис CSS состоит из селекторов, свойств и значений. Например:
selector {property: value;}
Чтобы выбрать элемент с конкретным идентификатором, введите символ решетки (#), за которым следует идентификатор элемента:
Чтобы выбрать элементы с определенным классом, напишите символ точки (.), за которым следует имя класса.
Мы также можем указать, что класс должен влиять только на определенные элементы HTML. В приведенном ниже примере только элементы ‹p› с class = "center" будут выровнены по центру:
Мы также коснулись блочной модели CSS. Модель блока CSS по существу состоит из полей, границ, отступов и фактического содержимого:
Область содержимого, ограниченная краем содержимого, содержит реальное содержимое элемента, такое как текст или изображение. Если для свойства box-sizing
задано значение content-box
(по умолчанию), размер области содержимого можно явно определить с помощью width
, min-width
, max-width
, height
, min-height
и «max-height
. " характеристики. Однако свойство box-sizing
также может иметь значение border-box or padding-box.
.
3. Загрузочный
Bootstrap - отличный CSS-фреймворк! Что мне больше всего нравится, так это надежная адаптивная система сетки, которая экономит много времени и усилий по сравнению с методом проб и ошибок с настройкой отступов / полей и т. Д. Bootstrap предлагает готовые коды, а также имеет предопределенные стили для многих распространенных веб-элементов, таких как формы, кнопки, таблицы и т. Д.
Нашим заданием на неделю было поработать над страницей портфолио с использованием CSS и Bootstrap (необязательно). Я хотел создать страницу, которую затем мог бы использовать в качестве резюме для подачи заявления на работу в будущем. Я подумывал сделать дизайн с нуля для обучения, а не работать над шаблоном и персонализировать его. В конце концов, я решил следовать руководству и написал код для создания шаблона (а не просто использовать его напрямую), чтобы понять, как создавался дизайн и как использовать различные компоненты Bootstrap. Затем изменил и отредактировал некоторые компоненты, чтобы персонализировать его. Так что конструкция ядра не оригинальна.
Учиться и практиковаться последовательно
Дела продвигаются довольно быстро. Есть еще текущие пробелы, над которыми я должен работать. В настоящее время я очень плохо разбираюсь в языке Ruby. Определенно нужно больше практики!
Благодарен товарищам по партии
Это действительно утешительно и приятно, когда одноклассники вместе проходят этот Bootcamp. У нас могут быть разные причины, по которым мы отправляемся в это путешествие, но в конечном итоге все мы сделали шаг веры, чтобы начать это путешествие.
На следующей неделе мы перейдем к внутренней стороне веб-разработки: Ruby on Rails!