01 | HTML basics - first steps in the development environment | Become an expert | Learn HTML5

  Переглядів 196

Go to Frontend (language learning)

Go to Frontend (language learning)

Місяць тому

This video provides information about the basic principles of HTML markup and creating web pages.
The beginning of the lesson covers creating a folder for lesson files and choosing a code editor, in this case VS Code.
!!! The course does NOT cover CSS and JS !!!
--------------------------------------------------------------------------------
HTML | AUTHOR OF THE COURSE - Andriy Klion | subscribe to the AUTHOR'S CHANNEL
/ @andrijklyon
• HTML5. Базовый полный ...
• HTML5. Базовый полный ...
--------------------------------------------------------------------------------
Also mentioned is the available extension "Russian Language Pack for Visual Studio Code", which russifies the editor interface, but it is recommended to use the English version for a better command of the programming language.
Then we move on to creating the first web page.
The "lesson 1" folder is created and the "index.html" file is created inside it.
When you open the file in the editor, the basic markup of the HTML document created with Emmet appears.
The structure of the HTML document is explored, including the !DOCTYPE html, html, head, and body tags, as well as meta tags to specify encoding, browser compatibility, and page scaling.
The use of different levels of headings (h1-h6), which reflect the importance of the information on the page, is then discussed. The h1 headline is the most important and should capture the essence of the entire page. The smaller level headings (h2-h6) are used for subheadings and clarifications.
The document also mentions paragraphs (p) and separator (hr), which help organize the text on the page.
At the end of the document, basic styles are added to limit the width and center the content on the page.
Overall, this document provides basic knowledge of HTML markup and helps you create your first web page.
The homework for the first lesson of HTML Basics consists of several steps.
First, create a file called "homework.html" in the lesson 1 folder and add basic markup to it.
Next, you should add basic styles to the title of the document. The document should be named "Homework 1".
In the body of the document (homework.html), you should create a first-level header "Homework 1", a second-level header "Text block 1", and two paragraphs of filler text.
Next, you need to add a text separator in the form of a horizontal straight line.
After that, you should create a second-level header "Text block 2" and two paragraphs with 25 words each.
Then you should create a second-level heading "Text block 3" and a paragraph consisting of two paragraphs.
You need to put two br delimiters between the paragraphs of the last paragraph.
At the end of the task you need to answer the question: what visual effect does putting two br delimiters in a row lead to?
Before inserting the elements described in paragraphs 3 and 4, you should add the appropriate comments: "Heading 1", "Heading 2", "Paragraphs", and so on.
Finally, you should save the document and open it in a browser. It should look something like the one shown on the screen.
--------------------------------------------------------------------------------
CONTENTS:
⏱ - beginning
⏱ - menu - "File ⇒ Open Folder", extension - "Russian Language Pack for Visual Studio Code"
⏱ - tab - "Explorer".
⏱ - "index.html" - main page of the web project, extension: "vscode-icons"
⏱ - "Basic page layout" - creation by pressing the keys - "!" ⇒ "Tab".
⏱ - "Opening" and "Closing" tags.
⏱ - "Pair" and "Single" tags.
⏱ - "Element" and "Tag" terms.
⏱ - special instruction "!DOCTYPE html"
⏱ - paired tag "html", heading "head"
⏱ - main body of the document "body"
⏱ - service information placed in "head" tag, single "meta" tags
⏱ - meta tags "meta charset="UTF-8", "meta http-equiv="X-UA-Compatible" content="IE=edge""
⏱ - meta tag "meta name="viewport" content="width=device-width, initial-scale=1.0"""
⏱ - meta tag "title"
⏱ - homework
--------------------------------------------------------------------------------

КОМЕНТАРІ: 3
@GoToFrontend
@GoToFrontend Місяць тому
КОД ИЗ УРОКА "Lesson 1": -------------------------------------------- body { max-width: 800px; margin: 0 auto; } Lesson 1 Heading 1 Heading 2 Heading 3 Heading 4 Heading 5 Heading 6 Lorem ipsum dolor sit amet consectetur adipisicing elit. Sed delectus expedita ipsum doloremque rem at nihil neque tenetur dolorem facere, fugit nisi magnam reiciendis sapiente. Cupiditate dolorem odit obcaecati porro! Lorem ipsum, dolor sit amet consectetur adipisicing elit. Blanditiis ea quo unde. Lorem ipsum dolor sit, amet consectetur adipisicing elit. Beatae repudiandae eius fuga assumenda alias nulla placeat deserunt repellat molestiae earum iste temporibus architecto ducimus libero culpa eum, illum, officiis quod. Eligendi, dolorem incidunt sint cupiditate minima molestias? Earum nam voluptates accusamus quis qui in doloremque? Dicta eligendi ipsum provident labore vero! Dolore facere similique repellendus ab quibusdam iusto sapiente maxime? Tempore aspernatur totam id rem iste neque, explicabo voluptates, rerum dolorem obcaecati fugit voluptatem qui iusto ex ipsam quisquam ipsa numquam omnis, officia quam vitae? Fuga eligendi rem eveniet molestiae? Lorem ipsum, dolor sit amet consectetur adipisicing elit. Voluptates corrupti quos blanditiis neque eum reprehenderit porro nostrum beatae quae. Deserunt maxime atque odio tempore distinctio numquam rerum saepe quos earum. Maiores iure corporis ut, praesentium quia saepe harum repellendus voluptas ipsam esse fugit, facilis necessitatibus doloremque soluta? Quidem qui dolores hic quam alias molestias obcaecati rerum ea. Officia, doloribus porro! Necessitatibus hic eos animi nostrum, ea pariatur aperiam provident ipsa. Aperiam vel fugiat, eaque illo, maxime neque enim magni omnis ab debitis dignissimos sed voluptatem commodi nobis temporibus libero doloribus! Lorem ipsum dolor sit amet consectetur adipisicing elit. Expedita quaerat, itaque facere odit pariatur, eaque reiciendis et recusandae quae ipsum, dolorem illum ipsam? Fugit, maxime. Autem possimus fugit corrupti facilis! Lorem ipsum dolor sit amet consectetur adipisicing elit. Voluptas beatae omnis cupiditate iusto. Nihil voluptates nisi repudiandae, laborum iste commodi cupiditate tenetur maiores libero exercitationem voluptatum quibusdam. Eum, aspernatur voluptates.
@SergeyKodak
@SergeyKodak Місяць тому
Вспомнить базу, самое то! Спасибо!
@GoToFrontend
@GoToFrontend Місяць тому
Спасибо автору!
Responsive web design in 37 minutes + layout. You don’t need Bootstrap!
36:44
Фрілансер по життю
Переглядів 1 млн
Верстка сайта основные ошибки начинающих
7:40
Почему начинающие не понимают Javascript
7:32
Web Developer Blog
Переглядів 227 тис.
HTML5 для начинающих / Урок #1 - Введение в HTML
7:27
Школа itProger / Программирование
Переглядів 503 тис.
02 | Chrome DevTools | Optimization | Reference Resources | HTML Basics
3:13
Go to Frontend (учу языки)
Переглядів 82