Categorias
Estudos

31 coisas sobre Design Responsivo com Bootstrap que aprendi com o freeCodeCamp

Continuando a minha revisão de conceitos de programação que falei no post anterior, terminei a segunda parte da “Front End Development Certification” do freeCodeCamp, a parte “Responsive Design with Bootstrap”.

Essa parte eu já achei um pouco mais fraca, acho que por que eu já conheço o framework melhor, ela deu apenas algumas pinceladas em alguns conceitos bem básicos do Bootstrap, talvez pudesse trabalhar melhor a parte de layout e de elementos.

Por outro lado acho que o objetivo do freeCodeCamp não é aprofundar em um framework e sim dar uma boa base para que a pessoa possa daí aprender mais e etc.

No mais já penso que vou aprofundar mais no bootstrap num futuro próximo, por agora é continuar a estudar.

Segue abaixo as perguntas e respostas que tirei dessa parte, bem menos que as sobre HTML e CSS.


O que é o Bootstrap?

Um framework CSS.

O que é design responsivo?

É quando os elementos do seu design de adaptam ao tamanho da tela que estão sendo apresentados.

É necessário fazer uma versão especifica para celulares quando se utiliza design responsivo?

Não, o design vai se adaptar aos diferentes dispositivos.

Bootstrap: Como você adiciona o framework a uma página?

Adiciona a tag link que contêm o framework.

Bootstrap: Quais são as principais classes?

Os containers.

Bootstrap: Quais os dois principais containers?

.container e .container-fluid

Bootstrap: Pra que servem as classes container?

Elas contem todos os outros componentes e define a grid.

Bootstrap: Qual a diferença entre .container-fluid e .container?

.container-fluid é full-width, ocupa toda a tela.

.container tem um tamanho limitado.

Bootstrap: Qual classe faz com que uma imagem seja responsiva?

.img-responsive

Bootstrap: Qual classe centraliza textos?

.text-center

HTML: Qual elemento cria um botão?

<button>

Bootstrap: Qual classe estiliza um botão?

.btn

HTML: Qual o tamanho de um botão normalmente?

Do tamanho do texto que ele contêm.

CSS: Quando se define um elemento como block, o que acontece?

Ele ocupa toda o espaço horizontal disponível.

Bootstrap: Qual a classe define um botão como block?

.btn-block

Bootstrap: Qual classe deixa os botões com a cor primária do design?

.btn-primary

Bootstrap: Qual classe cria um botão de informações?

.btn-info

Bootstrap: Qual classe cria um botão de perigo?

.btn-danger

Bootstrap: Dentro de qual classe CSS você coloca as classes de colunas?

Dentro de uma .row

Bootstrap: Qual classe é usada para criar colunas de tamanho médio?

.col-md-*

Bootstrap: Qual classe é usada para criar colunas de tamanho extra pequeno?

.col-xs-*

Bootstrap: Qual a quantidade máxima de colunas de um layout?

12

Bootstrap: Qual classe colore o texto com a cor primária do layout?

.text-primary

CSS: Qual o elemento para aplicar classes inline?

<span>

Bootstrap: Quais duas classes são usadas para criar uma área de conteúdo e uma sidebar?

.col-md-8 e .col-md-4

Bootstrap: Como se cria três colunas no bootstrap?

Com três .col-md-4

Bootstrap: Como se cria duas colunas?

Com duas .col-md-6

Font Awesome: O que é o Font Awesome?

Uma biblioteca de ícones.

Font Awesome: Como o font-size padrão é definido?

Ele é herdado do elemento pai.

Font Awesome: Qual é o uso da tag <i>?

Ela é usada para adicionar ícones.

Font Awesome: Qual a classe principal?

.fa

Deixe um comentário

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