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”
Ótimo material, ajuda muito a revisar.
Oi Eder.
Que bom que o material ajudou! Espero que os estudos estejam indo bem!
Valeu pelo comentário!