Foto em miniatura de Ermeson Silva

Livro por Ermeson Silva

A Web Flexível

Aprenda HTML & CSSmoderno e direto ao ponto.

Capa do Livro A Web Flexível
Projeto Gráfico
Logotipo Bella Diagramação
Compre já Versão impressa R$ 84,60

Em um tempo em que a IA gera códigos em segundos, entender o que está por trás deles nunca foi tão importante. A Web Flexível é um guia direto ao ponto para quem quer dominar HTML5 e CSS3 com profundidade, clareza e propósito. Pensado para estudantes, iniciantes e docentes, o livro combina teoria, prática e uma abordagem crítica sobre o desenvolvimento web moderno. Aqui, você vai aprender a estruturar páginas responsivas, acessíveis e sustentáveis — entendendo não só o "como", mas o "porquê" de cada decisão.

O conteúdo cobre HTML5 semântico, organização de documentos, hierarquia de elementos e boas práticas de marcação que favorecem legibilidade, manutenção e acessibilidade. Em CSS, aborda cascata, especificidade e padrões de escrita aplicados a projetos escaláveis, com foco em layout responsivo por meio de Flexbox, Grid Layout e Media Queries, compondo desde componentes até páginas completas. A acessibilidade é tratada de maneira transversal, com diretrizes práticas para tornar interfaces inclusivas desde o planejamento.

Cada capítulo traz exemplos comentados, exercícios e propostas de experimentação para consolidar o aprendizado e transferi-lo ao contexto profissional. Este livro é um convite à construção consciente de interfaces digitais que realmente fazem sentido. A web flexível começa com uma fundação sólida e esta base começa aqui!

Tópicos do livro

  • Parte 1 HTML
    • Capítulo 1 - Sobrevôo sobre o funcionamento da web
      • Funcionamento da web
      • A Arquitetura Cliente-Servidor
      • Protocolos Fundamentais
      • Ciclo de Requisição e Resposta
      • Anatomia da comunicação de um site estático
        • Características do Site Estático
      • Anatomia de comunicação em sites dinâmicos
      • Diferença Entre Sites Dinâmicos e Estáticos
      • Compreendendo o Front-End
      • A Arquitetura do Front-End
    • Capítulo 2 - Ambiente de Desenvolvimento
      • Configurando o Ambiente de Desenvolvimento
        • Instalando o Visual Studio Code
        • Extensões Essenciais para Front-End
        • Outros Editores de Código
        • Instalando um Navegador para Desenvolvimento
      • Diferença entre Editor de Código e IDE
      • Editores Online
        • CodePen
        • Editor Online do W3Schools
        • JSFiddle
      • Benefícios dos Editores Online
    • Capítulo 3 - HTML5: A Fundação da Web
      • Introdução ao HTML5
      • Estrutura Básica de um Documento HTML5
      • Elementos Semânticos do HTML5
        • <header>
        • <nav>
        • <main>
        • <section>
        • <article>
        • <aside>
        • <footer>
        • <figure> e <figcaption>
        • <details> e <summary>
        • <time>
      • Para se aprofundar: onde encontrar todas as tags HTML5
      • Tags de Título (<h1> a <h6>)
      • Tags de Texto (<p>, <span>, <br>, <hr> e <blockquote>)
        • Tag <p>: Parágrafos
        • Tag <span>: Destacar Trechos Específicos
        • Tag <br>: Quebra de Linha
        • Tag <hr>: Linha Horizontal
        • Tag <blockquote>: Citações em Bloco
      • Tags de Ênfase
        • <strong>: Ênfase Forte
        • <em>: Ênfase Moderada (Itálico Semântico)
        • <b>: Negrito sem Ênfase Semântica
        • <i>: Itálico sem Ênfase Semântica
        • <mark>: Destacar Texto (Semelhante a um Marca-texto)
      • Tags de imagem
      • Tags de listas
        • Listas Não Ordenadas (<ul>)
        • Listas Ordenadas (<ol>)
        • Listas de Definição (<dl>, <dt>, <dd>)
      • Tag a
      • Tipos de Links com <a>
      • Estrutura Básica de um Documento HTML5
      • Formulários e Entradas no HTML5
        • Estrutura Básica de um Formulário
        • Tipos de Entradas no HTML5
        • Novos Atributos no HTML5
        • Botões e Envio de Formulários
      • Elementos Multimídia: Áudio e Vídeo
        • O Elemento <audio>
        • O Elemento <video>
        • Suporte a Legendas com <track>
        • Formatos de mídias suportados
    • Capítulo 4 - E se o Tolkien fosse desenvolvedor web?
      • Projeto prático currículo: construindo a estrutura
      • Validador de código HTML5 do W3C
  • Parte 2 CSS
    • Capítulo 5 - Cascading Style Sheets (CSS)
      • O Surgimento do CSS
      • Modelo de Caixa (Box Model)
      • box-sizing: Ajustando o Cálculo do Tamanho
      • Incorporando o CSS: Métodos e Boas Práticas
      • Reset CSS
      • Sintaxe de uma regra CSS
      • Seletor
      • Comentários no CSS
      • Herança e Cascata no CSS
      • Cascata no CSS
      • Grau de especificidade do seletor
      • Unidades de medida no CSS
    • Capítulo 6 - Propriedades do CSS
      • Propriedades de texto
      • Tipos de Fontes Padrão no CSS
      • Propriedades de Links no CSS
      • Trabalhando com imagens
      • Possibilidades da box-shadow
      • Projeto prático do currículo: aplicando estilos com CSS
      • Outra forma de praticar CSS: CSS Zen Garden
    • Capítulo 7 - Flexbox: Módulo de Caixa Flexível
      • A necessidade de um modelo de layout flexível
      • Conceitos Fundamentais
      • Direção do fluxo (flex-direction)
      • Conceito de flex container e flex items
      • Propriedades do Flex Container
      • Propriedades dos Flex Items
      • Usando gap para espaçamento entre itens
      • Mais exemplos de uso de Flexbox
        • Site automotivo
        • Construção de um menu de navegação com Flexbox
      • Projeto prático do currículo: aplicando flexibilidade
    • Capítulo 8 - Grid Layout: Layouts Bidimensionais
      • Introdução ao Grid Layout
      • Casos de Uso do CSS Grid
      • Conceitos Fundamentais
        • A propriedade display: grid
        • Definição de colunas e linhas com grid-template-columns e grid-template-rows
        • Posicionamento com grid-column e grid-row
        • Grid Areas (Áreas Nomeadas)
        • Organização do Grid
      • Exemplos práticos com CSS Grid
        • Página tradicional de um portal de notícias
        • Exemplo de dashboard de uma aplicação
        • Exemplo de um e-commerce
    • Capítulo 9 - Design Responsivo
      • O que é Design Responsivo?
      • Fundamentos de Media Queries
      • Implementando Media Queries no CSS
      • Estratégias para um Layout Responsivo
      • Criando um Layout Responsivo do Zero
      • Testando e Depurando o Design Responsivo
      • Estratégias para Resolver Problemas Comuns
      • Evitando Armadilhas Comuns no Design Responsivo
      • Projeto prático do currículo: aplicando responsividade

Sobre o autor

Ermeson Silva é uma das vozes mais influentes na interseção entre tecnologia, educação e inovação no Brasil. Coordena o departamento de Pós-graduação do Centro Universitário Paraíso (UniFAP) e lidera o ecossistema de inovação da instituição como Head do Garagem LAB, o maior centro de inovações do Ceará. Atua como professor na Graduação, Pós-graduação e Educação Executiva, ministrando disciplinas nas áreas de Inovação, Transformação Digital, Inteligência Artificial, UX Design e Desenvolvimento Web.

Foto de Ermeson Silva

Mestre pelo Centro de Estudos e Sistemas Avançados do Recife (CESAR) e doutorando pela Universidade do Vale do Rio dos Sinos (Unisinos), é pesquisador em tecnologias emergentes, estudos de futuros, transformação digital e inteligência artificial. Com mais de uma década de experiência como consultor de tecnologia para o SENAI/Sebraetec, também colabora com startups globais no desenvolvimento de produtos digitais centrados na experiência do usuário.

Ocupou cargo na gestão pública como Diretor de Ciência, Tecnologia e Inovação de Juazeiro do Norte (CE), onde atuou na formulação de políticas públicas voltadas ao desenvolvimento tecnológico. É coautor da Lei Complementar Nº 117/2018, a Lei Municipal de Inovação de Juazeiro do Norte, pioneira no país após a regulamentação do Marco Legal de Ciência, Tecnologia e Inovação. A norma incorpora diretrizes do Ministério da Ciência, Tecnologia, Inovações e Comunicações e do BNDES, alinhando-se ao Plano Nacional de Internet das Coisas (IoT) com foco em Cidades Inteligentes.

Como desenvolvedor web, participou da entrega de mais de 2.000 projetos, experiência que confere à obra A Web Flexível uma abordagem prática, moderna e alinhada às exigências reais do mercado digital contemporâneo.