Basics of modern layout - free course from Hexlet, training 9 hours, Date: December 5, 2023.
Miscellaneous / / December 06, 2023
You will learn more about HTML markup and the capabilities of the modern HTML5 standard. You will also gain basic knowledge of styling using CSS: learn how to connect styles, use selectors, and work with cascading. In addition to HTML and CSS, you will learn to work with the browser's built-in layout debugging tools, in particular Google Chrome DevTools. As a result, you will learn how to use HTML markup language to layout text on a website, and also become familiar with the basic rules of using CSS and text styling.
You will be able to immediately put your new skills into practice - we will study layout editors and plugins for them. At the end of each lesson you will find small independent tasks. They are aimed at a more practical understanding of the covered topic, and therefore are highly recommended for implementation.
The basics of layout will come in handy if you decide to study web development, regardless of the direction. The knowledge from this course helps programmers mark up data and display it on the site. This course is suitable for beginners and developers who have not encountered
Introduction
The course “Fundamentals of Modern Layout” is the basis for learning the basics of HTML and CSS website layout. In this lesson we will briefly talk about what we learn in the course and how this knowledge can be applied in practice.
Introduction to HTML
The lesson is devoted to HTML layout from scratch. We talk about the role of attributes and study the general scheme for describing HTML tags.
Block model
Which elements are responsible for the frame of the page, and which help in the process of styling it or adding functional parts? Let's get acquainted with block and inline HTML elements and study the influence of styles on the final width of elements.
Semantic HTML
The main goal of any HTML layout is to convey the meaning of the blocks. In this lesson, we'll explore the semantics capabilities of the latest HTML5 standard and learn about web accessibility.
Basic structure of an HTML document
Any HTML document has a basic structure consisting of tags and service elements. The browser needs them to display information correctly. In this lesson we will look at each line of this structure.
CSS Basics
CSS language was created for the visual design of a web page. We study the basic capabilities of the language, figure out how to use them together with HTML. We learn to include CSS files and get acquainted with the basic types of selectors.
Cascading in CSS
What is cascading and how does it work in CSS? The lesson is devoted to differences in selector priorities and the ability to use this in your projects.
Chrome DevTools
When laying out a website, it is important to find errors in time or understand how to correctly convert the block we need. Previously, this was done primarily by hand. Nowadays modern browsers have a web inspector function. Let's consider the capabilities of one of them - Chrome DevTools.
Code editors
To save your work, you need a code editor. In this lesson we will look at how to install Visual Studio Code. This is a powerful tool that can be used not only for layout, but also for programming in any language.
Emmet
Let's study one of the most useful plugins for layout designers - Emmet. It will speed up HTML code markup and remove most of the routine steps.
Publication on the Internet
To put a project on the Internet, you need to use hosting - a special server that will store files and provide access to them through a domain name. In this tutorial we'll look at free GitHub hosting.
Graphic editor
There are several major editors on the market. Some of them are specific to only one operating system, others can be installed on any of them. In this section, let's look at the main steps when a layout designer works with the Figma online editor.
Independent work
Additional tasks that allow you to consolidate the acquired theory
Additional materials
Articles and videos curated by the Hexlet team. Will help you dive deeper into the topic of the course