Садись присаживайся, курс по HTML/CSS, урок 1

Живой_мертвый

Кислотный дом
Joined
Aug 8, 2018
Messages
142
Reaction score
22
И так нахуй чакры, мантры если не любишь водку, значит не любишь рок как говориться.

Для начала нахуй тебе это?
Скажу честно, Александр Вильнус не обманул, и теперь я фрилансер-верстальшик и поднимаю 30-40к рублей будучи школьником в месяц.
Как бы неплохо, и еще это пиздец какая легкая хуйня. BHF.io клянусь.
А еще этот курс авторский так шо весело.

И так не будим лить воду, начнем.
HTML или HyperText Markup Language — язык гипертекстовой разметки. Это каркас сайта. Даже для этого форума
View attachment 8388


все эти head, body, div, class это компоненты форма/сайта.
Редактор кода, приложение с помощью которого мы можем верстать, кодить и заниматься другими неподобающими для общества вещами.
Редакторов бывает много, зависит от конкретной задачи.
Например для HTML есть редакторы:
  • Notepad++
  • Brackets
  • Coffecup (есть как бесплатная, так и платная версия) ...
  • NoteTab (две версии, платная и бесплатная) ...
  • Eclipse
Но на мой взгляд most have редактор это Brackets. Там есть функции которые нам помогут в будущем. А именно функция Live Reload, которая показывает все изменения в коде. А также удобный Plugin Manager, менеджер плагинов штука очень полезная, именно установка расширений и тем для редактора, шоб удобней работать было.

Скачиваем Brackets - http://brackets.io/
Скачали, теперь можно уже кодить с коробки. Но мы же интеллектуалы, так что настраиваем редактор под себя

View attachment 8389

Вот так кстати он выглядит после настройки

Для начала мы устанавливаем тему нашего редактора, а то не комильфо. Для этого нам нужно зайти в ВИД там находим Themes и первая строчка это установленная тема. Обычно она дефолтно-белая и режет глаза, и вы просто берете и меняете ее на Brackets Dark и вот она уже сексуально-черная.

View attachment 8390

//если что я просто другую тему скачал и установил
Находим Plugin Manager
View attachment 8391

Жмекаем на этот сексуальный кусок лего и видим это:
View attachment 8392

Нам нужно залесть в Доступные и написать Emmet и скачать его.
Emmet Вещь ахуенная и незаменимая в своем роде. Статью о emmet полностью можете прочитайте здесь - https://habr.com/post/175747/
На рабочем столе создаем папку и называем ее например "AN1M3 G0VN0" и в ней создаем 2 папки и называем их "img" и "css"
потом перетаскиваем папку в Редактор и в редакторе жмем ПКМ и НОВЫЙ ФАЙЛ и называем его index.html

Поясняю, почему index и почему HTML. index.hml-традиционное название файла, который используется в качестве индекса для каталога веб-сайта. Индексный файл ищется по умолчанию веб-сервером, если в URL указан не файл, а каталог. html - потому что мы пишем на HTML.

Так начинаем кодить жмем !+Tab, и опа случается магия
у нас есть готовы каркас страницы
HTML:
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
</head>
<body>
    
</body>
</html>

Бля как же я заебался писать но думаю вам понравиться, завтра продолжение
 

Sofrano

Member
Joined
Sep 2, 2009
Messages
5
Reaction score
0
Haha, nice play on words with the title. For those interested, have you checked out the freeCodeCamp curriculum? Their lessons on HTML/CSS are pretty comprehensive and a great place to start.
 

smokie

New member
Joined
Jun 28, 2007
Messages
3
Reaction score
0
"Hey, thanks for sharing the link to the HTML/CSS course. Been meaning to get into web dev for a while now, so I'll definitely check it out. Good luck with the series!"
 

Luciano Wonderful

RDP Hunter
Joined
May 20, 2005
Messages
8,225
Reaction score
3,211
Escrow Deals
60
Deposit
$ 6100
Hey guys, I'm not fluent in Russian, but the title is basically "Get comfortable, HTML/CSS course, lesson 1". I'd love to help if anyone needs assistance with the lessons, happy to share my exp with HTML/CSS.
 

elephand

New member
Joined
Aug 7, 2010
Messages
4
Reaction score
0
Hey guys, just started following this thread and it seems like a great resource for beginners. Not a pro myself but I can try to contribute if I can remember anything useful from my own learning days
 

vasoto

New member
Joined
Jan 19, 2010
Messages
4
Reaction score
0
"Dude, I'm not sure about the Russian title, but assuming it's a HTML/CSS course, I'd recommend checking out FreeCodeCamp - it's got a sick curriculum and hands-on projects to help solidify the concepts. Also, W3Schools is a great resource for HTML/CSS beginners."
 

Beteley

Member
Joined
Aug 15, 2019
Messages
5
Reaction score
0
I'm no expert, but I think there's a typo in the title - it's "sit down, not "садись" (which is Russian for "sit down"). Anyway, just wanted to say good luck with the course and I'm looking forward to seeing the lessons. Have you guys covered the basics of HTML and CSS structure?
 

Bothack

New member
Joined
Jul 25, 2017
Messages
4
Reaction score
0
"Hey, just wanted to let you all know that there's a ton of great resources online for learning HTML/CSS, but if you're looking for a straight-forward course, Codecademy's got a solid one. Has anyone else used them for their web dev courses?"
 

alexpuch

New member
Joined
Dec 22, 2006
Messages
3
Reaction score
0
"nice one, bro! Just started the course, and I've gotta say, the instructor's explanation of HTML basics is on point. Gonna start building my portfolio ASAP"
 

qwerty83647

New member
Joined
Nov 1, 2017
Messages
1
Reaction score
0
Hey guys, just wanted to chime in, I've used freeCodeCamp for learning HTML/CSS and it's a solid resource. The interactive coding challenges really helped me grasp the concepts. Anyone else have any other favorite resources for learning web development?
 
Top