Noções básicas de layout moderno - curso gratuito da Hexlet, treinamento 9 horas, Data: 5 de dezembro de 2023.

Miscelânea / by admin / December 06, 2023

click fraud protection

Você aprenderá mais sobre a marcação HTML e os recursos do padrão HTML5 moderno. Você também obterá conhecimentos básicos de estilo usando CSS: aprenderá como conectar estilos, usar seletores e trabalhar com cascata. Além de HTML e CSS, você aprenderá a trabalhar com as ferramentas integradas de depuração de layout do navegador, em particular o Google Chrome DevTools. Como resultado, você aprenderá como usar a linguagem de marcação HTML para fazer o layout de texto em um site e também se familiarizará com as regras básicas de uso de CSS e estilo de texto.

Você poderá colocar em prática imediatamente suas novas habilidades - estudaremos editores de layout e plug-ins para elas. No final de cada lição você encontrará pequenas tarefas independentes. Eles visam uma compreensão mais prática do tema abordado e, portanto, são altamente recomendados para implementação.

Os conceitos básicos de layout serão úteis se você decidir estudar desenvolvimento web, independentemente da direção. O conhecimento deste curso ajuda os programadores a marcar os dados e exibi-los no site. Este curso é adequado para iniciantes e desenvolvedores que não encontraram

instagram viewer

Introdução
O curso “Fundamentos do Layout Moderno” é a base para aprender os fundamentos do layout de sites HTML e CSS. Nesta lição falaremos brevemente sobre o que aprendemos no curso e como esse conhecimento pode ser aplicado na prática.

Introdução ao HTML
A lição é dedicada ao layout HTML do zero. Falamos sobre o papel dos atributos e estudamos o esquema geral para descrever tags HTML.

Modelo de bloco
Quais elementos são responsáveis pela moldura da página e quais auxiliam no processo de estilização ou adição de peças funcionais? Vamos nos familiarizar com os elementos HTML em bloco e embutidos e estudar a influência dos estilos na largura final dos elementos.

HTML semântico
O principal objetivo de qualquer layout HTML é transmitir o significado dos blocos. Nesta lição, exploraremos os recursos semânticos do padrão HTML5 mais recente e aprenderemos sobre acessibilidade na web.

Estrutura básica de um documento HTML
Qualquer documento HTML possui uma estrutura básica composta por tags e elementos de serviço. O navegador precisa deles para exibir as informações corretamente. Nesta lição veremos cada linha desta estrutura.

Noções básicas de CSS
A linguagem CSS foi criada para o design visual de uma página web. Estudamos os recursos básicos da linguagem, descobrimos como usá-los junto com HTML. Aprendemos a incluir arquivos CSS e nos familiarizamos com os tipos básicos de seletores.

Cascata em CSS
O que é cascata e como funciona em CSS? A lição é dedicada às diferenças nas prioridades do seletor e à capacidade de usá-las em seus projetos.

Ferramentas de desenvolvimento do Chrome
Ao fazer o layout de um site, é importante encontrar erros a tempo ou entender como converter corretamente o bloco que precisamos. Anteriormente, isso era feito principalmente à mão. Hoje em dia, os navegadores modernos possuem uma função de inspetor da web. Vamos considerar os recursos de um deles - Chrome DevTools.

Editores de código
Para salvar seu trabalho, você precisa de um editor de código. Nesta lição, veremos como instalar o Visual Studio Code. Esta é uma ferramenta poderosa que pode ser usada não apenas para layout, mas também para programação em qualquer linguagem.

Emmet
Vamos estudar um dos plugins mais úteis para designers de layout - Emmet. Isso irá acelerar a marcação do código HTML e remover a maioria das etapas de rotina.

Publicação na Internet
Para colocar um projeto na Internet, você precisa usar hospedagem - um servidor especial que armazenará arquivos e fornecerá acesso a eles por meio de um nome de domínio. Neste tutorial, veremos a hospedagem gratuita no GitHub.

Editor gráfico
Existem vários editores importantes no mercado. Alguns deles são específicos para apenas um sistema operacional, outros podem ser instalados em qualquer um deles. Nesta seção, veremos as principais etapas quando um designer de layout trabalha com o editor online Figma.

Trabalho independente
Tarefas adicionais que permitem consolidar a teoria adquirida

Materiais adicionais
Artigos e vídeos com curadoria da equipe Hexlet. Ajudará você a se aprofundar no tópico do curso