Code Week
Vratsa 2017
Да се запознаем
-
Как се казвате
-
На колко години сте
-
С какво се занимавате (учите / работите / къде / какво)
-
С какво искате да се занимавате
-
Какви са вашите хобита? Как прекарвате свободното си време?
-
Имате ли GitHub профил?
Какво предстои
-
Малко уводни думи
-
Избор на текстов редактор
-
Ще научим какво е: HTML CCS JavaScript
-
Ще си направим блог, ще го направим красив и ще го качим така че всеки да може да го види
Работете над нещо реално
Ако имате конкретна идея за проект, инструмент, сайт - страхотно! Това е най-добрият начин да навлезете и да се учите.
Започнете
Преследвайки конкретната си цел, ще ви се наложи да търсите начини да я постигнете и неминуемо ще научите много по пътя, натрупвайки тонове безценен опит.
Поддържайте връзка помежду си
Изключително важно е да поддържате връзка помежду си. Така ще си помогнете с мотивацията, с отговорите на някои по-сложни въпроси, ще има кой да ви упъти, ако се залутате някъде.
Станете част от местното програмистко community. Посещавайте срещи, сбирки и събития, когато такива има.
Забавлявайте се
Общи познания за уеб приложенията
Запознайте се как работят браузърите и уеб приложенията на концептуално ниво
Текстови документи и текстови редактори
Програмистите обикновено пишат код в текстови файлове, тъй като “кодът” е най-обикновен текст.
Текстовите файлове са просто файлове с чист текст вътре – без никакво специално форматиране.
Името на текстовите документи често завършва на .txt, но е напълно възможно това окончание (наричано още файлово разширение) да бъде друго, например .html, .js, или пък да няма разширение изобщо.
Името на файла няма директно отношение към съдържанието на файла.
Един файл може да се казва photo.jpg и вътре да има обикновен текст. Разбира се, ако опитате да отворите файла с програма за обработка на изображения, ще получите грешка, но пък ако го отворите с Notepad, ще видите текстовото му съдържание.
За редакция на файловете с код ще използваме т.нар. “текстови редактори”.
Това са програми, които са предназначени за редакция на обикновен текст. Notepad е такава програма в Windows.
Някои текстови редактори предлагат допълнителни помощни функции като автоматично оцветяване на различните специални команди според типа код вътре, но по същество са си най-обикновени текстови редактори.
За целите на нашето обуение ще използваме Sublime Text 3
https://www.sublimetext.com/3
Какво представляват HTML и CSS
Hypertext Markup Language vs Cascading Style Sheets
HTML дава структура и смисъл на съдържанието чрез заглавия, абзаци или изображения.
CSS е език за презентация, създаден за оформление на външния вид на съдържанието - като например шрифтове или цветове.
HTML и CSS са независими един от друг и трябва да останат така! CSS не трябва да се записва в HTML файл и обратно. По правило HTML винаги ще представлява съдържание, а CSS винаги ще бъде начинът, по който изглежда съдържанието.
Елементи
Елементите са обозначители, които определят структурата и съдържанието на обектите в дадена страница.
Елементите се идентифицират чрез използването на по-малка и по-голяма триъгълна скоба, < > , които заобикалят името на елемента.
Някои от най-често използваните елементи включват няколко нива на заглавия (от h1 до h6) и параграфи ( p ).
Други често срещани елементи са div, a , span , strong и т.н.
Тагове
Използването на '<' и '>', заобикалящи елемент, създава т.нар. таг . Таговете най-често се срещат в двойки от отварящи и затварящи тагове:
Отварящ таг: <div>
Затварящ таг: </div>
Съдържанието, което попада между отварящите и затварящите тагове е съдържанието на този елемент
Атрибути
Атрибутите са свойства, използвани за осигуряване на допълнителна информация за елемент.
Най-често срещаните атрибути са id, class , src и href
Атрибутите се дефинират в в отваращия таг, след името на елемента. Те включват име и стойност:
<div id="unique" class="blue"> ... content ... </div>Hello World
HTML файловете са обикновени текстови документи, записани с разширение .html а не с разширение .txt
Всеки един HTML документ задължително включва следните елементи:
<!DOCTYPE html>, <html>, <head>, <body>
<!DOCTYPE html> информира уеб браузърите коя версия на HTML се използва и се поставя в самото начало на HTML документа. Тъй като ще използваме най-новата версия на HTML, декларацията ни за тип документ е просто <!DOCTYPE html>
Hello World
<html> означава началото на документа.
<head> идентифицира горната част на документа, включително всички метаданни (съпътстваща информация за страницата). Съдържанието в елемента <head> не се показва на самата уеб страница. Вместо това, тя може да включва заглавието на документа (което се показва в заглавната лента в прозореца на браузъра), връзки към външни файлове или други полезни метаданни
<body> в него попада цялото видимо съдържание на уеб страницата
Hello World
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Hello World</title>
</head>
<body>
<h1>Hello World</h1>
<p>This is a web page.</p>
</body>
</html>
Селектори
Селекторът посочва върху кой точно елемент или елементи да бъдат приложени стилове (като цвят, размер, позиция и др.).
В зависимост от това колко специфично сме селектирали даден елемент може да изберем всеки параграф на страница или само един конкретен.
Селекторите могат да бъдат насочени към стойност на атрибут, като например стойност на id или class , или са насочени към типа елемент, като <h1> или <p>.
Properties & values
След като бъде избран елемент, property-то определя стиловете, които ще се прилагат към този елемент.
Имената на свойствата се пишат след селектора в начупени скоби { ... }, а техните стойности след двуеточие.
Има многобройни свойства, които можем да използваме като background -color , font-size , height, width и др.
p {
color: blue;
font-size: 18px;
}
Видове селектори
- По тип: div { ... }
- По клас: .blue { ... }
- По id: #special { ... }
- Child selector: p h2 { ... }
- Direct child selector: p > h2 { ... }
Тежест (specificity) на селекторите
Добавяне на CSS
За да може нашият CSS да се приложи върху HTML, трябва да реферираме CSS файла.
Това се случва чрез добавянето на <link> елемент в <head> на нашия HTML документ:
<link rel="stylesheet" href="main.css">
Използването на отделен файл за стиловете ни позволява да ги преизползваме в целия уебсайт и бързо да правим промени на място.
The Box Model
According to the box model concept, every element on a page is a rectangular box and may have width, height, padding, borders, and margins.
Every element on a page is a rectangular box.
According to the box model, the total width of an element can be calculated using the following formula:
margin-right + border-right + padding-right +
width +
padding-left + border-left + margin-left
|
The Box Model
Flexbox Grid
JavaScript
Добавя 'държание' (behavior) към нашата страница
- Валидации
- Анимации
- Взимане на данни от сървър
- Изпращане на форми към сървър
- Всякакви промени по страницата (бутони, движения с мишката, драгване и т.н.)
Кратко въведение в JavaScript
Полезни материали
Не спирайте да учите
Code Week Vratsa
By Pavlin Gergov
