FREE course

Modern layout fundamentals

38 students
Course updated 09 August 2022
Course Modern layout fundamentals
Free course
Sign up
  • In-browser editor for exercises
  • Permanent access to theory
  • Asynchronous learning

Included in the course

12 lessons (video or text)
5 exercises in the IDE
32 quizzes
Assistance in «Discussions» on the website

What you will learn

  • Learn the fundamentals of web design: how to design static web pages and style elements
  • Understand how to debug code step-by-step for quick error detection
  • Use code editors with plugins, such as Emmet, that help in coding
  • Publish your website on GitHub Pages hosting

Description

Creation of modern interfaces involves not only the latest technology, but also the global standards for these interfaces. In order to better understand the reasons and consequences of their appearance, and use them wisely in our projects, we will introduce the professional terminology and basic concepts of markup languages and styles of HTML and CSS

Lessons

Estimated time 9 hours
  • 1

    Intro

    Course "Modern layout fundamentals" covers the nuts and bolts for learning HTML and CSS. In this lesson, we'll briefly discuss some topics covered in the course and how you can put this new knowledge into practice
  • 2

    Intro to HTML

    Learn how to design HTML from scratch. We talk about the role of attributes and study the general scheme of defining HTML tags
  • 3

    Box model

    Which elements are responsible for the page layout and which ones help in styling or adding functional elements to the page? Discover block and inline HTML elements and learn how you can affect an element width
  • 4

    Semantic HTML

    The main goal of any HTML layout is to convey the context of the blocks. In this lesson, we'll look at the semantic capabilities of the latest HTML5 standard and learn about accessibility on the web
  • 5

    Basic structure of HTML document

    Every HTML document has a basic structure made up of tags and special elements. The browser needs them to properly display an information. In this lesson, we'll look at each part of that structure
  • 6

    CSS fundamentals

    The CSS language was created to manage the visuals of a web page. Explore the basic features of stylesheets and learn to use it with HTML. Learn to link CSS files and discover the basic types of selectors
  • 7

    CSS Cascading

    What is cascading and how does it work in CSS? This lesson focuses on the selector precedence and using them in your projects
  • 8

    Chrome DevTools

    When designing a website, it is important to find errors just in time or understand how to properly convert the block we need. Previously, most of this was done manually. Today, modern browsers have a web inspector function. Consider the capabilities of one of them - Chrome DevTools
  • 9

    Code editors

    To save the results of your work, you need a code editor. In this lesson, you'll learn how to install Visual Studio Code. This is a powerful tool that can be used not only for layout, but also for coding in any programming language
  • 10

    Emmet

    Check out one of the most useful plugins for HTML/CSS developer - Emmet. It will speed up HTML markup and eliminate most of the routine
  • 11

    Publication on the Internet

    To upload your project on the Internet, you need to use a hosting service - a special server that will store files and provide access to them via domain name. In this tutorial, we will explore GitHub, a free hosting service
  • 12

    Graphic editors

    There are several major editors on the market. Some of them are designed for one operating system only, others can be installed on any of them. In this unit, let's look at the HTML/CSS developer's basic steps when working with Figma, a graphic online editor
  • 13

    Do it yourself

    Additional tasks that help consolidate the theory you've learned
  • 14

    Additional resources

    Materials were picked up by the Hexlet team. This will give you a more in-depth understanding of the topic