Categorias
Estudos

111 coisas sobre HTML 5 e CSS 3 que aprendi com o freeCodeCamp

Como falei num post anterior, comecei a estudar e revisar conceitos de programação através do freeCodeCamp.

Já terminei a primeira parte da “Front End Development Certification”, a parte “HTML5 and CSS”.

Um dos meus métodos de estudo é simplificar o que aprendi em cada lição em pequenas perguntas e respostas.

Como isso pode ser interessante pra outras pessoas que também estejam estudando pelo site, segue abaixo, 111 perguntas e respostas sobre HTML 5 e CSS 3 que aprendi no freeCodeCamp.


HTML: Como é uma tag de abertura? exemplo, título 1?

<h1>

HTML: Como é uma tag de fechamento? exemplo, título 1?

</h1>

HTML: Qual é a tag de título 1?

<h1>

HTML: Qual é a tag de título 2?

<h2>

HTML: Qual é a tag de título 3?

<h3>

HTML: Qual é a tag de título 4?

<h4>

HTML: Qual é a tag de título 5?

<h5>

HTML: Qual é a tag de título 6?

<h6>

HTML: Como este caracter < é chamado?

Menor Que

HTML: Como este caracter > é chamado?

Maior Que

HTML: As tags html também podem ser chamadas de?

elementos html

HTML: Qual é a tag de parágrafo?

<p>

HTML: Qual é a tag de abertura de comentários HTML?

<!--

HTML: Qual é a tag de fechamento de comentários HTML?

-->

CSS: Qual o atributo que pode mudar o estilo da tag?

style

CSS: Escreva o atributo que muda o estilo da tag para cor azul.

style="color: blue"

CSS: Pra que servem os seletores CSS?

Para estilizar elementos.

HTML: Como é chamado quando se escreve o CSS direto na tag usando o atributo style?

inline style

CSS: O que significa CSS?

Cascading Style Sheets

CSS: Qual tag pode ser inserida no documento para conter o CSS do mesmo?

<style>

CSS: O que é um seletor?

É o parâmetro CSS que seleciona o elemento que você quer estilizar.

CSS: O que são classes?

Classes são estilos reusáveis que podem ser adicionados a elementos html.

CSS: Escreva a classe css texto-azul na declaração abaixo.

.texto-azul {
  color: blue;
}

HTML: Adicione uma classe chamada texto-azul ao elemento abaixo.

<p class="texto-azul">texto em azul</p>

CSS: O seletor css que for uma classe deve começar com?

Um ponto

CSS: As declarações de classe devem ter ponto no início?

Não.

CSS: Classes podem ser adicionadas a mais de um elemento?

Sim

CSS: Qual propriedade CSS é usada para alterar o tamanho do texto de um elemento?

font-size

CSS: Mude o tamanho do texto do elemento abaixo para 16px.

p {
 font-size: 16px;
}

CSS: Qual a propriedade que seta as fontes usadas por um elemento?

font-family

CSS: Escreva a propriedade para setar o elemento abaixo para fontes Monospace.

p {
  font-family: Monospace;
}

HTML: Qual tag é usada para importar uma fonte do Google?

<link>

HTML: Qual atributo a tag link usa como url do item a ser importado?

href

HTML: Qual atributo a tag link usa para saber o relacionamento do link com o documento atual?

rel

HTML: Qual atributo a tag link usa para saber o tipo de documento que está sendo importando?

type

CSS: Quais são os 3 tipos de famílias de fontes que podem ser usadas por padrão?

Monospace, Serif, Sans-Serif

HTML: Qual a tag para inserir imagens?

<img>

HTML: Qual o atributo da tag image que aponta para o endereço da imagem?

src

HTML: Escreva uma tag de imagem com o source e texto alternativo vazios.

<img src"" alt="">

HTML: Qual atributo da tag de imagem é usado como texto alternativo caso a imagem não carregue?

alt

CSS: Qual propriedade define a largura do elemento?

width

CSS: Escreva a propriedade para deixar essa classe com apenas 100px de largura.

.imagem-pequena {
  width: 100px;
}

CSS: Qual a propriedade que adiciona uma borda a um elemento HTML?

border

CSS: Qual a propriedade que seta a cor da borda de um elemento HTML?

border-color

CSS: Qual propriedade seta a largura da borda de um elemento HTML?

border-width

CSS: Qual a propriedade que seta o estilo da borda de um elemento HTML?

border-style

HTML: Como você pode adicionar mais de uma classe a um elemento HTML?

Adicionando o nome de cada classe separado por espaços.

CSS: Qual propriedade arredonda os cantos de um elemento?

border-radius

CSS: Qual o valor a colocar na propriedade border-radius para se ter um circulo perfeito?

50%

HTML: Qual elemento é utilizado para linkar para outras páginas?

<a>

HTML: Como criar um link que não aponta pra lugar algum?

<a href="#">

HTML: Como se transforma uma imagem em um link?

Coloca-se a tag <img> dentro da tag <a>

HTML: Qual o elemento para se criar listas não ordenadas?

<ul>

HTML: Qual o elemento para se adicionar um item a uma lista?

<li>

HTML: Qual o elemento para se criar listas ordenadas?

<ol>

HTML: Qual o elemento usado para criar um campo de texto?

<input type="text">

HTML: Qual atributo do elemento input serve para adicionar um texto padrão?

placeholder

HTML: Qual elemento é usado para criar um formulário?

<form>

HTML: Qual o atributo do elemento form que define pra onde os dados serão enviados?

action

HTML: Qual elemento é utilizado para enviar um formulário?

<button type="submit">

HTML: Escreva um botão de envio de formulário com o texto Enviar

<button type="submit">Enviar</submit>

HTML: Como fazer para que um campo de formulário seja requerido?

Adicione o atributo required no elemento.

HTML: Um radio button tem que estar dentro de qual elemento?

label

HTML: Um radio button é um tipo de qual elemento?

input

HTML: Quais os dois elementos de um radio button?

form e label

HTML: Para que o radio button funcione, qual atributo delas tem que ser igual em todas elas?

name

HTML: Qual a utilidade do radio button?

Fazer com que o usuário escolha uma, e apenas uma, das opções pré-definidas.

HTML: Escreva um radio button com label opção 1 e atributo name opcoes.

<label><input type="radio" name="opcoes">opção 1</label>

HTML: Qual a utilidade das checkboxes?

Fazer com que o usuário possa escolher uma, ou mais, das opções pré-definidas.

HTML: Um input checkbox tem que estar dentro de qual elemento?

label

HTML: Uma checkbox é um tipo de qual elemento?

input

HTML: Para que a checkbox funcione, qual atributo delas tem que ser igual em todas elas?

name

HTML: Escreva uma checkbox com a label “Opção 1” e atributo name “opcoes”.

<label><input type="checkbox" name="opcoes">Opção 1</label>

HTML: Qual atributo faz com que a opção do radio button fique checada por padrão?

checked

HTML: Qual atributo faz com que a opção da checkbox fique checada por padrão?

checked

HTML: Pra que serve um elemento div?

Ele é um container genérico de elementos.

CSS: Qual a propriedade que muda a cor do fundo de um elemento?

background-color

CSS: Além de classes, que outro atributo pode ser utilizado para identificar um elemento?

id

CSS: Escreva a declaração para selecionar um elemento com id cat-photo-form

#cat-photo-form

CSS: O seletor de id deve começar com?

#

CSS: Qual o nome desse caracter? #

Cerquilha

HTML: Qual o formato de um elemento HTML?

Retangular

CSS: Quais as 3 propriedades que controlam o espaço ao redor de um elemento html?

margin, border e padding

CSS: O que a propriedade padding controla?

O tamanho entre o elemento e a sua borda.

CSS: Adicione um padding de 10px ao seletor abaixo.

.box {
  padding: 10px;
}

CSS: O que a propriedade margin controla?

O espaço entre a borda do elemento e os outros elementos ao seu redor.

CSS: Adicione uma margem de 10px ao seletor abaixo.

.box {
  margin: 10px;
}

CSS: O que acontece se você setar a margem de um elemento com valores negativos?

O elemento irá crescer.

CSS: Como se adiciona padding apenas a parte de cima de um elemento?

padding-top

CSS: Como se adicionar padding apenas a parte direita de um elemento?

padding-right

CSS: Como se adiciona padding apenas a parte de baixdo de um elemento?

padding-bottom

CSS: Como se adiciona padding apenas a parte esquerda de um elemento?

padding-left

CSS: Como se adiciona margem apenas a parte de cima de um elemento?

margin-top

CSS: Como se adiciona margem apenas a direita de um elemento?

margin-right

CSS: Como se adiciona margem apenas a parte de baixo de um elemento?

margin-bottom

CSS: Como se adiciona margem apenas a parte esquerda de um elemento?

margin-left

CSS: Em qual ordem se deve adicionar os 4 paddings abaixo?

.box {
  padding: top right bottom left
}

CSS: Em qual ordem se deve adicionar as 4 margins abaixo?

.box {
  margin: top right bottom left
}

HTML: Toda página HTML tem um elemento?

body

CSS: Qual o propósito da propriedade text-align?

Alinhar o texto do elemento selecionado.

CSS: Centralize o texto do elemento abaixo.

#titulo-centralizado { text-align: center; }

CSS: Se você estilizar o elemento body o que acontece com os outros elementos da página?

Eles herdam o estilo.

CSS: Classes aplicadas a um elemento tem prioridade sobre o estilo herdado do body?

Sim.

CSS: A ordem em que as classes são adicionadas no elemento altera como os estilos são aplicados?

Não.

CSS: A order que as declarações são feitas altera como os estilos são aplicados?

Sim, os estilos declarados por último tem prioridade.

CSS: Estilos aplicados no id do elemento tem prioridade sobre estilos aplicados nas classes?

Sim.

CSS: Estilos inline tem prioridade sobre os estilos aplicados na classe?

Sim.

CSS: Qual atributo muda a cor do elemento?

color

CSS: Qual atributo faz com que uma declaração tenha mais importância que qualquer outra?

!important

CSS: Faça com que estilo abaixo seja aplicado independente de outros estilos.

.class-super-importante { color: red !important; }

2 respostas em “111 coisas sobre HTML 5 e CSS 3 que aprendi com o freeCodeCamp”

Deixe um comentário

O seu endereço de e-mail não será publicado. Campos obrigatórios são marcados com *