questões técnicas de entrevista para dev

Saber fazer e saber conversar sobre assuntos técnicos nos dá confiança na entrevista para uma vaga de desenvolvedor. Pesquisando, encontrei um repositório com diversas perguntas e respostas interessantes. Vamos a detalhes em css.

awesome developer interview questions

perguntas incríveis da entrevista para desenvolvedor

Durante a explicação de código ou até mesmo quando questionado sobre como é feito determinada tarefa ou o porque é feito determinada tarefa é preciso saber construir essa resposta de forma objetiva e com clareza.

Por isso, treinar perguntas e respostas de conteúdo técnico pode ajudar a fixar esses detalhes.

css

1. Quais são as diferentes maneiras de integrar um CSS em uma página da Web?

Existem três maneiras de integrar CSS em uma página da Web

Inline : Elementos HTML podem ter CSS aplicado a eles através do atributo STYLE.
Embutido: Colocando o código em um elemento STYLE dentro do elemento HEAD.
Linkado/ Importado: Coloque o CSS em um arquivo externo e vincule-o através de um elemento de link.

2. Como você pode eliminar a borda azul em torno de imagens vinculadas na página da web?

Isso pode ser feito especificando a propriedade border para imagens vinculadas em seu CSS como none:

a img { border: none ; }

3. Como faço para combinar várias planilhas em uma?

Várias planilhas podem ser combinadas usando a tag <link> e com o atributo title. O valor do título permite que uma ou mais tags <link> sejam vinculadas umas às outras. Após a combinação, esse tema será aplicado como combinado e será mostrado ao usuário.

A sintaxe dele será a seguinte:

<link rel= “text/css” href=”default.css” title=”combined”>
<link rel= “text/css” href=”style.css” title=”combined”>
<link rel= “texto /css” href=”para.css” title=”combinado”>

Outra forma de combinar as folhas de estilo é o uso de import que pode ser usado na tag <style> e a sintaxe pode ser dada da seguinte forma:

@import url(site_url);

4. Qual é o uso e a sintaxe da classe em CSS?

Classe é um grupo de atributos e propriedades que identificam exclusivamente o estilo que pode ser anexado a qualquer elemento. Ele também define instâncias para diferentes elementos aos quais o mesmo estilo pode ser anexado.

O exemplo a seguir mostra o uso da classe em CSS:
P {color:red} : Mostrará a cor vermelha do texto em todos os parágrafos. Isso pode ser incluído em cada elemento onde a tag de parágrafo pode ser usada.

Pode ser dado um estilo a um parágrafo e outro estilo a outros parágrafos. Uma classe não pode ter nenhuma associação com o elemento específico. Mas qualquer elemento ao qual a classe específica está anexada terá o mesmo estilo.

CSS

H1.prop1 {color: red} /* uma classe de seletor P */
H2.prop2 {color: blue} /* outra classe de seletor P */
.prop3 {color: green} /* pode ser anexado a qualquer elemento * /

HTML

<h1 class=prop1>Este parágrafo será vermelho</P>
<h2 class=prop2>Este parágrafo será azul</P>
<p class=prop3>Este parágrafo será verde</P>
<h3 class=prop3 >Este item da lista ficará verde</LI>

5. Qual é o propósito dos pseudo-elementos?

Os pseudo elementos permitem o uso da parte do elemento e não do elemento em si.

Eles são aplicados ao elemento de nível de bloco, que é usado para o bloco completo para o qual o CSS está sendo escrito. Isso permite que a subparte de um elemento seja estilizada como parágrafos e títulos.

selector:pseudo-element {property:value;}
p: primeira linha {text-transform: lowercase;}

6. Como as pseudo-classes são diferentes dos pseudo-elementos?

Pseudoclasses são usadas para adicionar estilo e efeitos especiais a alguns seletores que estão sendo usados ​​dentro de alguma classe.

selector:pseudo-class {property:value;}
a:link {color:#FF0000;}

pseudoclasses também podem ser combinadas com outras classes.

selector.class:pseudo-class {property:value;}
a.red:visited {color:#FF0000;}

7. Qual é a diferença entre id e classe?

O id e a classe estão sendo usados ​​em HTML e incluem os valores do CSS. A diferença é a seguinte:

  1. Id é um atributo que atribui um nome exclusivo a um determinado elemento, enquanto class define um elemento com um determinado conjunto de propriedades que podem ser usadas para um bloco completo.
    2. Id pode ser usado para um elemento e o identifica exclusivamente, enquanto class é usado como elemento de bloco e aplicado a muitas tags onde é usado.
    3. Id restringe o uso de propriedades a um elemento específico, enquanto class aplica as regras e propriedades a um bloco ou grupo de elementos específico.

8. Quais são as diferentes disposições fornecidas em css para definir a dimensão de um elemento?

Em css, o usuário pode escolher entre várias propriedades de dimensão para estilizar um elemento. A lista de propriedades de dimensão css são:

1. height : Esta propriedade permite ao usuário especificar a altura de um elemento específico.
2. max-height : Permite ao usuário definir a altura máxima de um elemento.
3. max-width : Especifica a largura máxima de um elemento.
4. min-height : Permite ao usuário especificar a altura mínima de um elemento.
5. min-width : Usado para definir a largura mínima de um elemento.
6. largura : Esta propriedade é usada para definir a largura de um elemento.

img.big {height:100px} <! — especifica a altura de um elemento →
img.big {max-height:100px} <! — especifica a altura máxima do elemento →

9. Explique o conceito do modelo de caixa em css.

CSS usa o conceito de um modelo de caixa que implica que cada elemento HTML é uma caixa. Este termo é usado quando estamos falando de design e layout. O modelo de caixa CSS é na verdade uma caixa que envolve um elemento HTML.

Uma caixa é composta pelos seguintes componentes:

1. margins: Usado para limpar uma área ao redor de uma borda.
2. border : A borda contorna o preenchimento e o conteúdo.
3. padding: Usado para limpar a área ao redor do conteúdo.
4. content: Contém o conteúdo real da caixa que é o texto e as imagens.

É importante observar que quando um usuário define a altura e a largura de um elemento, ele o faz apenas para a área de conteúdo. Para saber o tamanho de preenchimento do elemento, o usuário também deve especificar as outras camadas, ou seja, a borda de preenchimento e as margens.

p
{
width:220px;
padding:10px;
border:5px solid gray;
margin:0px;
}

A largura total de um elemento é calculada assim:

Total element width = width + left padding + right padding + left border + right border + left margin + right margin

A altura total de um elemento é calculada assim:

Total element height = height + top padding + bottom padding + top border + bottom border + top margin + bottom margin

10. Qual é o objetivo do índice z? Explique com a ajuda de um exemplo.

Ao usar css para posicionar elementos html, eles podem se sobrepor. O índice z i usado para especificar qual elemento se sobrepõe a qual elemento. O índice z é um número que pode ter um valor positivo ou negativo.

Por padrão, o valor do índice z é zero. Caso os elementos tenham o mesmo número de z-index especificado, o navegador os colocará em camadas de acordo com a ordem em que aparecem no HTML.

Para fechar essa lista com uma exemplificação do poder do css, vou abrir essa página no F12 do navegador Google Chrome.

Fiz duas alterações, mudei o texto do botão de Publish para Alterei aqui e mudei a cor do botão de ver para amarelo. Fazer isso diretamente no navegador nos dá o poder de testar o frontend diretamente no ambiente em produção.

Essas e outras perguntas e respostas estão no repositório da DopplerHQ no Github.

Utilizei o link a seguir para a maioria das questões que listei aqui.

Para buscar respostas e outros detalhes sobre css e web temos o a documentação oficial da mozilla.

Espero que tenha gostado. Deixe seu aplauso e até o próximo artigo.

--

--

--

Developer Frontend Web — Javascript | ReactJS https://linktr.ee/douglasabnovato

Love podcasts or audiobooks? Learn on the go with our new app.

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store
douglasabnovato

douglasabnovato

Developer Frontend Web — Javascript | ReactJS https://linktr.ee/douglasabnovato

More from Medium

Polyfills And Helpers — How To Save Your Bundle Size

How to Prevent Scroll (& Touch Move) On Mobile Web Parent Elements — while allowing it on children

Why you and your company probably shouldn’t use Vue: The Hard Way

How to quickly create div classes in your React App using VSCode on Mac

Image showing how to reach settings.json in VSCode by pressing Command+Shift+P on a Mac