Responsive Web Design V9

Oficina Currículo Visão Geraloficina

Laboratório Depuração Camperbots Perfil Páginalaboratório

• Depurar a página de perfil do Camperbot

Aula Entendendo Html Atributoslecture

• Qual o Papel do HTML na Web?
• O que são atributos e como eles funcionam?

Laboratório Depuração Pet Adoption Páginalaboratório

• Depurar uma Página de Adoção de Animais

Aula Entendendo The Html Estrutura Básicalecture

• Qual é o papel do elemento Link no HTML e como ele pode ser usado para vincular a folhas de estilo externas?
• O que é um HTML Boilerplate e por que ele é importante?
• O que é codificação de caracteres UTF-8 e por que ela é necessária?

Oficina Cat Photo Appoficina

Laboratório Recipe Páginalaboratório

• Crie uma página de receitas

Aula Html Fundamentalslecture

• O que são elementos div e quando você deve usá-los?
• O que são IDs e classes e quando você deve usá-los?
• O que são entidades HTML e quais são alguns exemplos comuns?
• "Qual é o papel do elemento `script` no HTML e como ele pode ser usado para vincular arquivos JavaScript externos?"

Oficina Bookstore Páginaoficina

Aula Entendendo How Html Affects Seolecture

• Qual é o papel da Meta Description e como ela afeta o SEO?
• Qual é o papel das tags Open Graph e como elas afetam o SEO?

Laboratório Travel Agency Páginalaboratório

• Crie uma página de agência de viagens

Aula Working With Audio And Video Elementslecture

• Quais São as Funções dos Elementos HTML Audio e Video e Como Eles Funcionam?

Oficina Html Music Playeroficina

Oficina Html Video Playeroficina

Laboratório Html Audio And Video Playerlaboratório

• Construa um Reprodutor de Áudio e Vídeo HTML

Aula Working With Images And Svgslecture

• Quais São as Formas Comuns de Otimizar Ativos de Mídia?
• Quais São os Diferentes Tipos de Licenças de Imagem e Como Elas Funcionam?
• O que são SVGs e quando você deve usá-los?

Oficina Build A Heart Iconoficina

Aula Working With Medialecture

• O que são Elementos Substituídos e quais são alguns exemplos?
• "Como você incorpora vídeos na sua página usando o elemento `iframe`?"

Oficina Build A Video Display Using Iframeoficina

Laboratório Video Compilation Páginalaboratório

• Crie uma página de compilação de vídeos

Aula Working With Linkslecture

• Quais São os Diferentes Tipos de Atributo Target e Como Eles Funcionam?
• Qual é a diferença entre caminhos absolutos e relativos?
• "Qual é a diferença entre barras, um ponto único e dois pontos na sintaxe de caminho?"
• Quais São os Diferentes Estados de Link e Por Que Eles São Importantes?

Revisão Básico Htmlrevisão

• Revisão Básica de HTML

Questionário Básico Htmlquestionário

• Questionário básico de HTML

Aula Importance Of Semantic Htmllecture

• Por que você deve se importar com o HTML semântico?
• Por que é importante ter uma boa hierarquia estrutural?
• Qual é a diferença entre HTML apresentacional e semântico?

Aula Entendendo Nuanced Semantic Elementslecture

• Quando Você Deve Usar o Elemento de Ênfase em Vez do Elemento de Texto Idiomático?
• Quando Você Deve Usar o Elemento Strong em Vez do Elemento Bring Attention To?
• O que são Description Lists e quando você deve usá-las?

Oficina Major Browsers Listoficina

Aula Working With Text And Time Semantic Elementslecture

• Como Funcionam as Citações em Bloco e em Linha no HTML?
• Como Você Exibe Abreviações em HTML?
• Como você exibe endereços em HTML?
• Como você exibe horários e datas em HTML?

Oficina Quincys Job Tipsoficina

Aula Working With Specialized Semantic Elementslecture

• Como Você Exibe Equações Matemáticas e Fórmulas Químicas em HTML?
• Como Você Representa Código de Computador em HTML?
• "Para que servem os elementos U, S e Ruby e como eles funcionam?"

Oficina Blog Páginaoficina

Laboratório Event Hublaboratório

• Crie uma central de eventos

Revisão Semantic Htmlrevisão

• Revisão de HTML Semântico

Questionário Semantic Htmlquestionário

• Questionário sobre HTML semântico

Aula Working With Formslecture

• "Como Funcionam Formulários, Labels e Inputs em HTML?"
• Quais São os Diferentes Tipos de Botões e Quando Você Deve Usá-los?
• O que é Validação de Formulário no Lado do Cliente em Formulários HTML e Quais São Alguns Exemplos?
• Quais São os Diferentes Estados de Formulário e Por Que Eles São Importantes?

Oficina Hotel Feedback Formoficina

Aula Working With Tableslecture

• Para que servem as tabelas HTML e para que elas não devem ser usadas?

Oficina Final Exams Tableoficina

Laboratório Book Catalog Tablelaboratório

• Crie uma tabela de catálogo de livros

Aula Working With Html Toolslecture

• O que é um validador HTML e como ele pode ajudar você a depurar seu código?
• Como Usar o DOM Inspector e o DevTools para Depurar e Construir Seus Projetos

Revisão Html Tables And Formsrevisão

• Revisão de Tabelas e Formulários HTML

Questionário Html Tables And Formsquestionário

• Questionário sobre tabelas e formulários em HTML

Laboratório Survey Formlaboratório

• Criar um formulário de pesquisa

Aula Importance Of Accessibility And Good Html Structurelecture

• O que é Acessibilidade?
• O que são leitores de tela e quem os utiliza?
• O que são teclados grandes de texto ou Braille e quem os utiliza?
• "Para que servem dispositivos de apontamento alternativos como `Trackballs`, `Joysticks` e `Touchpads`?"
• Para que servem os ampliadores de tela?
• Para que Serve o Software de Reconhecimento de Voz?
• Quais São Algumas Ferramentas Comuns de Auditoria de Acessibilidade para Usar?
• Como a Estrutura Adequada dos Níveis de Título Afeta a Acessibilidade?

Oficina Depuração Coding Journey Blog Páginaoficina

Aula Accessible Tables Formslecture

• Quais são as melhores práticas para tabelas e acessibilidade?
• Por que é importante que os inputs tenham um rótulo associado?

Oficina Tech Conference Scheduleoficina

Laboratório Depuração Donation Formlaboratório

• Depure um formulário de doação

Aula Introduction To Arialecture

• Qual é o propósito do WAI-ARIA e como ele funciona?
• O que são ARIA Roles?
• Quais São os Papéis dos Atributos aria-label e aria-labelledby?
• O que é o atributo aria-hidden e como ele funciona?
• O que é o atributo aria-describedby e como ele funciona?

Oficina Accessible Audio Controlleroficina

Aula Accessible Media Elementslecture

• Quando o atributo alt é necessário e quais são alguns exemplos de um bom texto alt?
• Quais são os benefícios de acessibilidade de um bom texto de link e quais são exemplos de um bom texto de link?
• Quais são as boas maneiras de tornar o conteúdo de áudio e vídeo acessível?
• Quais são algumas maneiras de tornar aplicações web acessíveis pelo teclado?

Laboratório Checkout Páginalaboratório

• Crie uma página de check-out

Laboratório Movie Revisão Páginalaboratório

• Projetar uma Página de Avaliação de Filmes

Laboratório Multimedia Playerlaboratório

• Construir um Reprodutor Multimídia

Revisão Html Accessibilityrevisão

• Revisão de Acessibilidade HTML

Questionário Html Accessibilityquestionário

• Questionário sobre acessibilidade no HTML

Revisão Htmlrevisão

• Revisão de HTML

Aula Entendendo Computer Internet And Tooling Basicslecture

• Quais São as Partes Básicas de um Computador?
• "Como Você Pode Trabalhar Eficazmente Com Seu Teclado, Mouse e Outros Dispositivos Apontadores?"
• Quais São os Diferentes Tipos de Provedores de Serviços de Internet?
• Quais São Formas Seguras de Entrar no Seu Computador?
• Quais São os Diferentes Tipos de Ferramentas que Desenvolvedores Profissionais Usam?

Aula Working With File Systemslecture

• Como Você Pode Usar Aplicativos de Gerenciamento de Arquivos no Seu Computador?
• Quais são as melhores práticas para nomear arquivos para aplicações web?
• Quais são as melhores práticas para organização de arquivos/pastas em aplicações web?
• "Como Você Pode Criar, Mover e Excluir Arquivos e Pastas Usando o Explorer/Finder?"
• Como Você Pode Pesquisar Arquivos e Pastas no Seu Computador?
• Quais São Alguns Tipos Comuns de Arquivos com os Quais Você Trabalhará em Aplicações Web?

Aula Browsing The Web Effectivelylecture

• Quais são alguns dos navegadores web comuns disponíveis hoje e como você instala um?
• "Qual é a diferença entre um navegador web, um site e um mecanismo de busca?"
• Como Usar um Motor de Busca de Forma Eficaz para Alcançar Resultados Ótimos

Revisão Computer Basicsrevisão

• revisão dos conceitos básicos de computador

Questionário Computer Basicsquestionário

• Questionário sobre o básico a respeito de computadores

Aula What Is Csslecture

• O que é CSS e qual é o seu papel na web?
• Qual é a Anatomia Básica de uma Regra CSS?
• Para que serve o elemento Meta Viewport?
• Quais São Alguns Estilos Padrão do Navegador Aplicados ao HTML?
• "O que são CSS Inline, Interno e Externo e quando você deve usar cada um?"
• Como Funcionam Width e Height?
• Quais São os Diferentes Tipos de Combinadores CSS?
• Qual é a diferença entre elementos inline e em nível de bloco em CSS?
• Como o Inline-Block Funciona e Como Ele Difere dos Elementos Inline e Block?
• O que são Margens e Padding e Como Eles Funcionam?

Oficina Cafe Menuoficina

Laboratório Business Cardlaboratório

• Crie um cartão de visita

Aula Css Specificity The Cascade Algorithm And Inheritancelecture

• "O que é a especificidade do CSS e a especificidade para CSS inline, interno e externo?"
• O que é o Universal Selector e qual é a sua especificidade?
• O que é a especificidade para seletores de tipo?
• O que é a especificidade para seletores de classe?
• O que é a especificidade para seletores de ID?
• O que é a palavra-chave importante e quais são as melhores práticas para usá-la?
• Como o algoritmo cascade funciona em um nível alto?
• Como a Herança Funciona com CSS em um Nível Alto?

Revisão Básico Cssrevisão

• revisão dos fundamentos de css

Questionário Básico Cssquestionário

• Quiz de fundamentos de CSS

Aula Styling Lists And Linkslecture

• "Como você espaça itens de lista usando `margin` ou `line-height`?"
• Como Funcionam as Diferentes Propriedades list-style?
• Por que os Estilos Padrão de Links São Importantes para a Usabilidade na Web?
• Como você estiliza os diferentes estados de link?

Laboratório Stylized To Do Listlaboratório

• Compilar uma lista de tarefas estilizada

Aula Working With Backgrounds And Borderslecture

• "Como Funcionam `Background Image Size`, `Repeat`, `Position` e `Attachment`?"
• O que é um Background Gradient e como ele funciona?
• Quais São Algumas Considerações de Acessibilidade para Fundos?
• Quais São as Diferentes Formas de Adicionar Bordas em Volta das Imagens?

Laboratório Blog Post Cardlaboratório

• Projetar um Cartão de Postagem de Blog

Revisão Css Backgrounds And Bordersrevisão

• "Listas, Links, Plano de Fundo e Bordas Revisão"

Questionário Css Backgrounds And Bordersquestionário

• "Listas, Links, Fundos e Bordas Quiz"

Aula User Interface Design Fundamentalslecture

• Quais São os Termos Comuns de Design para Ajudar Você a se Comunicar com Designers?
• Como Criar um Bom Contraste entre Plano de Fundo e Primeiro Plano em Seus Designs?
• Qual é a importância de uma boa hierarquia visual no design?
• Como o Scale Funciona no Design?
• Como o Alinhamento Funciona no Design?
• Qual é a importância do espaço em branco no design?
• Quais são as melhores práticas para trabalhar com imagens em seus designs?
• O que é Progressive Enhancement?

Aula User Centered Designlecture

• O que é User-Centered Design?
• "O que são Requisitos do Usuário, Pesquisa com Usuário e Testes?"
• Quais são as melhores práticas para projetar um recurso de modo escuro?
• Quais são as melhores práticas para projetar Breadcrumbs?
• Quais são as melhores práticas para projetar Cards?
• Quais são as melhores práticas para projetar Infinite Scrolls?
• Quais são as melhores práticas para projetar diálogos modais?
• "Quais são as melhores práticas para indicação de progresso em formulários, registro e configuração?"
• Quais são as melhores práticas para projetar carrinhos de compras?
• O que é Progressive Disclosure?
• O que é Registro Diferido e Preguiçoso?

Aula Common Design Toolslecture

• O que são design briefs e como os desenvolvedores trabalham com eles?
• Quais são algumas ferramentas comuns que os desenvolvedores devem conhecer e que são usadas por designers na indústria?

Revisão Design Fundamentalsrevisão

• Revisão dos Fundamentos de Design

Questionário Design Fundamentalsquestionário

• Questionário de fundamentos de design

Aula Working With Relative And Absolute Unitslecture

• O que são unidades absolutas em CSS e quando você deve usá-las?
• O que são Percentuais em CSS e Quando Você Deve Usá-los?
• O que são ems e rems em CSS e quando você deve usá-los?
• O que são as unidades vh e vw e quando você deve usá-las?
• O que é a função calc() e como ela funciona?

Laboratório Event Flyer Páginalaboratório

• Crie uma página de anúncio de evento

Revisão Css Relative And Absolute Unitsrevisão

• Revisão das Unidades Relativas e Absolutas do CSS

Questionário Css Relative And Absolute Unitsquestionário

• Questionário de unidades relativas e absolutas no CSS

Aula Working With Pseudo Classes And Pseudo Elements In Csslecture

• O que são Pseudo-classes e Como Elas Funcionam?
• Quais são exemplos de pseudo-classes de ação do usuário em elementos?
• Quais são exemplos de pseudo-classes de entrada?
• Quais são exemplos de pseudo-classes de localização?
• Quais são exemplos de pseudo-classes estruturais em árvore?
• Quais são exemplos de pseudo-classes funcionais?
• O que são Pseudo-elementos e Como Eles Funcionam?

Oficina Greeting Cardoficina

Oficina Parent Teacher Conference Formoficina

Laboratório Job Application Formlaboratório

• Crie um formulário de candidatura para vagas de trabalho

Revisão Css Pseudo Classesrevisão

• Revisão de Pseudo-classes CSS

Questionário Css Pseudo Classesquestionário

• Questionário de pseudoclasses em CSS

Aula Working With Colors In Csslecture

• O que é Teoria das Cores no Design?
• O que são Cores Nomeadas em CSS e Quando Usá-las?
• "O que é o modelo de cores RGB e como a função `RGB` funciona no CSS?"
• O que é o modelo de cor HSL e como a função HSL funciona no CSS?
• O que são Hex Codes e como eles funcionam em CSS?
• O que são Gradientes Lineares e Radiais e Como Eles Funcionam no CSS?

Oficina Colored Markersoficina

Laboratório Colored Boxeslaboratório

• Projetar um Conjunto de Caixas Coloridas

Revisão Css Colorsrevisão

• Revisão de Cores CSS

Questionário Css Colorsquestionário

• Questionário sobre cores no CSS

Aula Best Practices For Styling Formslecture

• Quais São Algumas Melhores Práticas para Estilizar Inputs de Texto?
• "Quando Você Deve Usar appearance: none para Resolver Problemas de Estilização em Inputs de Busca e Checkboxes?"
• Quais São os Problemas Comuns ao Estilizar Elementos de Entrada Especiais?

Oficina Registration Formoficina

Laboratório Contact Formlaboratório

• Crie um formulário de contato

Oficina Game Settings Paneloficina

Laboratório Feature Selectionlaboratório

• Projetar uma Página de Seleção de Recursos

Revisão Styling Formsrevisão

• Revisão de Estilização de Formulários

Questionário Styling Formsquestionário

• Questionário sobre estilização de formulários

Aula Working With Css Transforms Overflow And Filterslecture

• O que é Overflow em CSS e como ele funciona?
• O que é a propriedade CSS Transform e como ela funciona?
• O que é o CSS Box Model e como ele funciona?
• O que é Margin Collapsing e como ele funciona?
• Qual é a diferença entre content-box e border-box?
• O que é um CSS Reset e quais são alguns exemplos comuns?
• O que é a propriedade CSS Filter e quais são exemplos comuns?

Oficina Rothko Paintingoficina

Laboratório Confidential Email Páginalaboratório

• Crie uma página de e-mail confidencial

Revisão Css Layout And Effectsrevisão

• Revisão de Layouts e Efeitos CSS

Questionário Css Layout And Effectsquestionário

• Questionário sobre efeitos e layout em CSS

Aula Working With Css Flexboxlecture

• O que é CSS Flexbox e quando você deve usá-lo?
• Quais São Algumas Propriedades Comuns do Flex e Como Elas Funcionam?

Oficina Flexbox Photo Galleryoficina

Oficina Colorful Boxesoficina

Laboratório Pricing Plans Layoutlaboratório

• Design a Pricing Plans Layout Page

Revisão Css Flexboxrevisão

• Revisão do CSS Flexbox

Questionário Css Flexboxquestionário

• Questionário sobre o Flexbox do CSS

Laboratório Página Of Playing Cardslaboratório

• Construa uma página de jogos de cartas

Aula Working With Css Fontslecture

• Quais são os fundamentos da tipografia?
• Quais são algumas das melhores práticas para trabalhar com tipografia em seus designs?
• What Are Font Families and How Do They Work?
• O que são fontes seguras para a web?
• O que é a regra @font-face e como ela funciona?
• Como você trabalha com fontes externas como Font Squirrel e Google Fonts?
• "O que é a propriedade `text-shadow` e como ela funciona?"

Oficina Nutritional Labeloficina

Laboratório Newspaper Articlelaboratório

• Crie um artigo de jornal

Revisão Css Typographyrevisão

• Revisão de Tipografia CSS

Questionário Css Typographyquestionário

• Questionário sobre tipografia no CSS

Aula Best Practices For Accessibility And Csslecture

• Quais São Algumas Ferramentas para Verificar um Bom Contraste de Cores em Sites?
• Quais são as melhores práticas para ocultar conteúdo para que ele não se torne inacessível?

Oficina Accessibility Questionáriooficina

Laboratório Tribute Páginalaboratório

• Criar uma página de homenagem

Revisão Css Accessibilityrevisão

• Revisão de Acessibilidade CSS

Questionário Css Accessibilityquestionário

• Questionário sobre acessibilidade no CSS

Aula Entendendo How To Work With Floats And Positioning In Csslecture

• "Quais São os Casos Comuns de Uso para Usar `Floats` e Como Eles Funcionam?"
• O que é Posicionamento Relativo e Como Isso Difere do Posicionamento Estático Padrão?
• O que é posicionamento absoluto e como ele funciona?
• O que é posicionamento Fixed e Sticky e como ele difere do posicionamento Absolute?
• O que é a propriedade Z-Index e como ela funciona para controlar a sobreposição de elementos posicionados?

Oficina Cat Paintingoficina

Laboratório House Paintinglaboratório

• Build a House Painting

Revisão Css Positioningrevisão

• Revisão de Posicionamento CSS

Questionário Css Positioningquestionário

• Questionário sobre posicionamento em CSS

Aula Working With Attribute Selectorslecture

• "O que é o Seletor de Atributo e Como Ele Pode Ser Usado para Alvo de Links com os Atributos `href` e `title`?"
• Como Usar o Seletor de Atributo para Alvo de Elementos com os Atributos lang e data-lang?
• Como Usar o Seletor de Atributo para Alvo de Elementos de Lista Ordenada com o Atributo type?

Oficina Balance Sheetoficina

Revisão Css Attribute Selectorsrevisão

• Revisão dos Seletores de Atributo CSS

Questionário Css Attribute Selectorsquestionário

• Questionário sobre seletores de atributos em CSS

Laboratório Book Inventory Applaboratório

• Crie uma aplicação de inventário de livros

Aula Best Practices For Responsive Web Designlecture

• "O que é Responsive Web Design e qual é sua relação com ferramentas como `CSS Grid` e `Flexbox`?"
• Como Funcionam as Media Queries e Quais São Alguns Tipos e Recursos Comuns de Mídia?
• O que são Media Breakpoints e quais são os Breakpoints comuns no design moderno?
• O que é a abordagem Mobile First no Responsive Web Design?

Oficina Pianooficina

Revisão Responsive Web Designrevisão

• Revisão de Design Responsivo para Web

Questionário Responsive Web Designquestionário

• Questionário sobre design responsivo para a web

Laboratório Technical Documentation Páginalaboratório

• Criar uma página de documentação técnica

Aula Working With Css Variableslecture

• O que são CSS Custom Properties e como elas funcionam?
• O que é a regra @property e como ela funciona com fallbacks?

Oficina City Skylineoficina

Laboratório Availability Tablelaboratório

• Crie uma tabela de disponibilidade

Revisão Css Variablesrevisão

• Revisão de Variáveis CSS

Questionário Css Variablesquestionário

• Questionário sobre variáveis no CSS

Aula Working With Css Gridlecture

• O que é CSS Grid e como ele difere do Flexbox?
• Como Você Pode Criar Grades Flexíveis com a unidade fr?
• Como Você Pode Criar Espaços Entre Trilhas em uma Grade?
• Como você pode repetir listas de faixas em um layout de grade?
• Qual é a diferença entre uma grade implícita e explícita?
• O que é a função minmax() e como ela funciona?
• "Como Funcionam as Propriedades `grid-column` e `grid-row`?"
• "Como Você Pode Posicionar Itens na Grade Usando a Propriedade `grid-template-areas`?"

Oficina Magazineoficina

Laboratório Newspaper Layoutlaboratório

• Projetar um Layout de Jornal

Aula Debugging Csslecture

• Como Você Pode Usar a Ferramenta de Inspeção do DevTools e os Validadores de CSS para Depurar Seu CSS?

Revisão Css Gridrevisão

• Revisão do CSS Grid

Questionário Css Gridquestionário

• Questionário de grid no CSS

Laboratório Product Landing Páginalaboratório

• Criar uma página inicial para um produto

Aula Animations And Accessibilitylecture

• O que são Animações CSS e Como Elas Funcionam?
• Quais São as Preocupações de Acessibilidade ao Usar Animações e Como o prefers-reduced-motion Pode Ajudar?

Oficina Ferris Wheeloficina

Laboratório Moon Orbitlaboratório

• Crie uma órbita lunar

Oficina Flappy Penguinoficina

Laboratório Personal Portfoliolaboratório

• Crie um portfólio pessoal

Revisão Css Animationsrevisão

• revisão de animações css

Questionário Css Animationsquestionário

• Questionário sobre animações no CSS

Revisão Cssrevisão

• Revisão de CSS

Exam Responsive Web Design Certificaçãoexam

• Exame de Certificação em Design Responsivo para Web