Como fazer o screen front end de habilidades de desenvolvedor - HTML e CSS
HTML e CSS são duas das competências mais fundamentais do desenvolvedor de front-end. Seria difícil encontrar um desenvolvedor web que não tenha pelo menos uma compreensão básica das duas "stalwarts". No entanto, alguns acreditam que HTML e CSS não devem ter o mesmo respeito que outras linguagens porque nenhuma delas requer lógica interna. Isso porque HTML e CSS são linguagens declarativas que instruem um navegador web a renderizar páginas web em vez de usar código computacional.
Apesar do que alguns possam pensar, está se tornando cada vez mais valioso para os desenvolvedores possuir um profundo conhecimento e experiência destas duas línguas. A verificação das habilidades HTML e CSS de um desenvolvedor é tão importante quanto a verificação de habilidades em linguagens como Java e C++. Certamente, qualquer pessoa vagamente técnica deve ter um conhecimento básico de HTML e CSS. No final, é tudo o que você precisa, certo? Não exatamente.
HTML e CSS constituem a espinha dorsal do desenvolvimento frontal juntamente com JavaScript. Na verdade, você também encontrará um monte de desenvolvedores back-end que usam essas linguagens regularmente. Embora você nunca encontrará um desenvolvedor que só use essas linguagens, HTML e CSS são críticos o suficiente para o desenvolvimento de software moderno para garantir que desenvolvedores de front-end são capazes de usá-los eficazmente. Embora sejam simples de iniciar, as aplicações avançadas requerem habilidade e compreensão profundas. É essencial verificar se o seu desenvolvedor tem essa compreensão.
Confira mais qualidades de um engenheiro de software.
1. O que são HTML e CSS e para que são usados?
1.1 O que é HTML?
HTML ou HyperText Markup Language é a linguagem de marcação padrão para a criação de páginas web e aplicações web. As linguagens de marcação são diferentes das linguagens de programação na medida em que não executam nenhuma lógica. Em vez disso, o HTML é projetado para criar um documento estruturado usando elementos tais como imagens, formulários, listas, etc. Cabe então ao navegador interpretar este documento para criar as páginas web que você acaba visualizando (como aquela que você está lendo agora).
1.2 O que é CSS?
CSS ou Cascading Style Sheets fornecem uma definição padrão de como os diferentes elementos devem aparecer na página. O que eu quero dizer? Imagine que você quer um pintor para pintar sua casa, você poderia dizer-lhes a cor que você quer de cada parede individual. Isto seria semelhante a dar as suas instruções apenas usando HTML. Isso exigiria muitas instruções para os seus pintores e levaria mais tempo para escrever.
Mas se és como eu, queres que todas as paredes da tua casa sejam da mesma cor. Nesse caso, você diria ao seu pintor para pintar todas as paredes de uma cor fixa. Isto seria como dar instruções usando o CSS. Com CSS, você pode definir um aspecto padrão de um elemento em sua página para que sempre que você criar um novo elemento, todos os seus padrões de design estejam intactos. Isso requer menos instruções e significa que os novos elementos, como cores e fontes, serão consistentes com o resto da página.
1.3 Para que são usados HTML e CSS?
Usados juntos, HTML e CSS são as pedras angulares da World Wide Web. Ambos são muito populares, e os conceitos básicos são simples de aprender. Tomados com JavaScript, eles são duas das três habilidades essenciais do desenvolvedor front-end. Mas um desenvolvedor front-end precisa saber mais do que apenas os conceitos básicos para fazer um bom trabalho.
2. O que é importante para um recrutador de TI saber sobre as habilidades de HTML e CSS do desenvolvedor front-end?
2.1 Normas
O World Wide Web Consortium (W3C) é a organização de padrões internacionais que cria os padrões HTML e CSS. Dito isto, a última versão do HTML é HTML5, que segue o padrão WHATWG (chamado HTML Living Standard) e não o padrão do W3C. Não existe uma versão única do CSS porque desde o CSS 3, ele é dividido em módulos, e cada módulo é versionado de forma independente.
Quase todo desenvolvedor, muito menos um desenvolvedor front-end, deve ter pelo menos um entendimento básico de HTML e CSS. Um desenvolvedor HTML ou CSS raramente é uma posição autônoma. Na maioria das vezes, é apenas uma das habilidades de um desenvolvedor front end ou full-stack ou de um designer gráfico/web.
Os padrões não mudam com muita frequência. No entanto, novas funcionalidades chegam regularmente, por isso os programadores precisam de se manter actualizados. Nos últimos anos, tem havido um fluxo consistente de novas funcionalidades e atualizações do CSS. Tanto é assim que os desenvolvedores do back end podem nem mesmo estar cientes do quão poderosa a tecnologia se tornou.
2.2 Ferramentas
Cada navegador interpreta CSS e HTML de uma forma ligeiramente diferente. O desenvolvedor deve conhecer as diferenças entre os diferentes navegadores e seu suporte a diferentes versões HTML/CSS. Além disso, os desenvolvedores devem saber quais ferramentas eles podem usar para criar conteúdo HTML/CSS cross-browser.
Desenvolvedores front-end que usam frameworks JavaScript geralmente trabalham com bibliotecas que estão cheias de componentes prontos para uso. No entanto, criar uma aplicação pronta para a produção requer adaptação de estilo para o design do produto. Este tipo de adaptação muitas vezes requer conhecimento avançado de CSS.
Para facilitar e acelerar as páginas web, os desenvolvedores geralmente usam ferramentas adicionais como frameworks front-end (ou seja, Bootstrap) ou linguagem de folha de estilo (ou seja, LESS ou SCSS).
2.3 Experiência do usuário (UX)
O UX é um componente vital do desenvolvimento frontal. Um competente desenvolvedor front-end deve possuir a capacidade de visualizar páginas web ou aplicações a partir da perspectiva do utilizador. Isso significa otimizar o UX holisticamente. Sugerir melhorias para a aplicação, como remover cliques desnecessários ou melhorar o desempenho através da optimização da velocidade de carregamento da página, são dois exemplos de optimização.
O Web Design Responsivo (RWD) é outra técnica importante que os desenvolvedores precisam considerar para o UX. É a abordagem que sugere que o design e desenvolvimento deve responder ao comportamento e ambiente do usuário com base no tamanho da tela, plataforma e orientação.
Finalmente, a11y (que é uma abreviação do termo "acessibilidade") está se tornando um movimento amplamente discutido dentro dos círculos tecnológicos e outra importante consideração UX. Não se refere a um padrão, medida ou lei específica que tem a ver com tecnologia, mas sim a uma mudança na forma como os websites são construídos para responder pelas pessoas com deficiência. O projeto visa tornar as páginas da web mais digeríveis, atualizadas e perdoáveis para aqueles que têm deficiências, seja por deficiência visual ou por outra forma de enfermidade.
Fonte: Unsplash - Safar Safarov
3. Triagem das habilidades de HTML e CSS de um desenvolvedor front end usando seu currículo
A primeira dica que muitos recrutadores têm sobre os conhecimentos de HTML e CSS de um desenvolvedor de primeira linha é o que está escrito no currículo do candidato. Além das simples habilidades de HTML e CSS (que devem ser um dado adquirido para qualquer desenvolvedor de front end), é vital ver o quanto o candidato tem conhecimento e está atualizado com a pilha de tecnologia do front end. Aqui está um glossário de habilidades a serem observadas e um resumo de tudo o que seu candidato deve saber para ajudá-lo a entender melhor o que procurar em um desenvolvedor front-end.
3.1 Glossário HTML e CSS para recrutadores técnicos
| Estruturas front-end | Bootstrap, Foundation, Semantic UI, Pure, UIkit, Bulma |
| pré-processadores CSS | Sass, LESS, Stylus, CSS-Crush, Myth, Rework, Compass, PostCSS |
| frameworks HTML5 | Skeleton, HTML KickStart, Montage, SproutCore, Zebra, |
| Animações | Web Design Responsivo (RWD) |
| Acessibilidade | A11Y |
| Convenções | Modificador de Elemento de Bloco |
| Ferramentas | Módulos CSS, CSS no JS |
| Outros/Diversos | HTML5 Placa de Caldeira |
3.2 Padrões HTML - tipos de HTML
- HTML 4 - a versão básica de HTML recomendada pelo W3C em 1997
- XHTML - uma extensão do HTML4, apenas uma versão mais estrita do HTML 4. Incorporou algumas características do XML no HTML.
- HTML5 - última versão do padrão HTML. A mais utilizada.
3.3 Normas do CSS
- CSS 2 - Especificação CSS nível 2 publicada pelo W3C em 1998
- CSS 2.1 - CSS nível 2 revisão 1, erros corrigidos no CSS2
- CSS 3 - divide a especificação em diferentes seções chamadas módulos, uma grande mudança. O CSS 3 introduziu muitas novas funcionalidades como novos selectores, novas propriedades, alterações no modelo da caixa e muito mais.
3.4 Estruturas HTML e CSS
HTML e CSS básicos são fáceis de codificar, mas o nível de complexidade encontrado nos sites modernos pode ser muito demorado para codificar diretamente. Por sorte, os desenvolvedores não são obrigados a criar tudo do zero. Existem frameworks disponíveis que oferecem ajuda com componentes prontos para uso e fornecem uma maneira fácil de personalizar o visual de uma página.
As Frameworks mais populares a serem procuradas são:
- Pega de Botas (v4)
- Fundação (última versão 6)
3.5 Outras áreas de HTML e CSS que o seu desenvolvedor do front end deve saber sobre
Como os conceitos básicos do CSS são bastante fáceis de aprender, existem algumas áreas do CSS que requerem um esforço extra para serem usadas eficientemente pelos desenvolvedores. Estas incluem:
- Modelo CSS Flexbox
- rede CSS
- Modelo CSS Box
- Elementos de layout com posicionamento absoluto
- Elementos de layout com flutuadores
- Animações CSS
4. Perguntas e respostas de entrevistas em HTML/CSS
Você pode encontrar estas perguntas e mais aqui.
4.1 Perguntas e respostas da entrevista em HTML
O que faz um doctype?
O tipo de documento determina a que versão do HTML o documento se refere.
Que tipo de coisas você deve ter cuidado ao projetar ou desenvolver para sites multilíngues?
As respostas de um candidato a esta pergunta devem demonstrar se ele tem ou não experiência na construção de locais de grande escala de diferentes regiões do mundo. As respostas que incluem os seguintes tópicos são uma boa indicação de um candidato informado: apoio ao Unicode para codificação, da esquerda para a direita vs. da direita para a esquerda, automatização da tradução de moedas, datas e forma plural, e parametrização de cordas traduzidas.
Descreva a diferença entre , e .
As respostas a esta pergunta estão relacionadas com o conhecimento do candidato sobre como o JavaScript é executado dentro de uma aplicação web. Normalmente, os scripts são executados sequencialmente, e são técnicas para carregar scripts numa ordem diferente.
Porque é que é geralmente uma boa ideia posicionar o CSS <link href="">s entre <head></head> e JS <script>s just before </body>? Do you know any exceptions?</script>
As respostas a esta pergunta demonstram um elevado nível de compreensão da estrutura dos documentos HTML. Ligações CSS dentro de <head> assegurará que qualquer conteúdo dentro da página será correctamente estruturado desde o início da renderização (sem flashes temporários de conteúdo). Por outro lado, o carregamento do JS a partir do fundo da página <body> irá solicitar ao navegador que execute o JS depois de o conteúdo ter sido exibido.
O que é renderização progressiva?
As respostas demonstrarão a atenção de um candidato ao desempenho de seus sites. Renderização progressiva é uma técnica para carregar pedaços de páginas visualizadas mais rapidamente.
4.2 Perguntas e respostas da entrevista do CSS
Qual é a especificidade do selector CSS, e como funciona?
Esta pergunta foi feita para dizer se um candidato teve a oportunidade de construir e/ou manter grandes websites onde pode ter sido responsável por várias folhas de estilo (potencialmente conflituosas). Se há muitas folhas de estilo conflitantes aplicadas a um determinado bloco, o CSS precisa determinar qual é o mais importante.
Qual é a diferença entre "reiniciar" e "normalizar" o CSS? Qual você escolheria, e por quê?
As respostas demonstrarão se um candidato tem experiência com a remoção de diferenças entre navegadores. Reiniciar é remover estilos padrão e normalizar é unificar os resultados.
Descreva os flutuadores e como eles funcionam.
As respostas determinam aspectos fundamentais do CSS. Os flutuadores determinam como colocar um elemento dentro de um recipiente.
Descreva BFC (Block Formatting Context) e como ele funciona.
A resposta determina se o candidato entende como os blocos estruturam a página e como eles podem se ajustar um ao outro.
Quais são as várias técnicas de compensação, e quais são apropriadas para que contexto?
As respostas a esta pergunta demonstram um conhecimento fundamental do CSS. As 3 técnicas mais comuns são: "clear: both", overflow property e ":after" pseudo-selector.
Como você abordaria a correção de problemas de estilo específicos do navegador?
As respostas a esta pergunta devem estar relacionadas com se o candidato não entende como garantir uma aparência consistente para os usuários através de muitos dispositivos diferentes. Um exemplo de solução poderia ser o normalize.css.
Como você serve suas páginas para navegadores com restrições de recursos?
As respostas demonstrarão a consciência dos candidatos de que alguns usuários podem usar versões mais antigas de navegadores e que as funcionalidades CSS dentro da base de código podem não ser suportadas. Isto é de particular importância na criação de sites de grande escala, como sites de publicação de notícias.
Que técnicas/processos você usa?
Degradação graciosa - fornece um recurso de recurso de navegação em falta para que, se algo não for suportado, um UX similar seja fornecido.
Aprimoramento progressivo - foca no fornecimento de recursos para usuários básicos e na adição de novas funcionalidades somente quando um navegador os suporta.
Quais são as diferentes formas de ocultar visualmente o conteúdo (e torná-lo disponível apenas para leitores de tela)?
As respostas a esta pergunta verificam se o candidato tem experiência em fornecer acessibilidade a websites (a11y), ou seja, assegurar um UX igual para pessoas com deficiência. Este cenário particular deve ocorrer onde o conteúdo é visualmente aparente para usuários avistados e a informação de retorno está disponível para que os leitores de tela forneçam informações.
5. Triagem técnica das habilidades de desenvolvedor de HTML e CSS front end usando um teste online
Os desenvolvedores do front end existem para construir o front end de páginas web e aplicativos. Embora seja importante ver se um desenvolvedor está ciente dos conceitos essenciais, é mais importante saber se ele pode aplicá-los ao trabalho real. Isso pode ser feito com um teste de codificação ou entrevista de programaçãomas nem todas as plataformas para estes testes são criadas iguais.
5.1 Quais testes de codificação HTML e CSS você deve escolher para testar as habilidades do desenvolvedor front-end?
Ao procurar o teste de codificação on-line HTML e CSS certo, você deve certificar-se de que eles correspondem aos seguintes critérios:
- O teste deve refletir o trabalho real que está sendo feito, utilizando HTML e CSS em projetos front-end reais.
- Tempo-eficiente - uma ou duas horas no máximo.
- Enviado automaticamente e pode ser levado para qualquer lugar para lhe dar flexibilidade a si e ao seu candidato.
- Vá além de verificar se o código renderiza uma página, mas também verifique a eficiência do código e o quão bem ele renderiza em múltiplas plataformas.
- Estar o mais próximo possível do ambiente natural de desenvolvimento frontal e deixar o candidato ter acesso aos tipos de recursos que normalmente teria no trabalho.
- Proporcionar aos candidatos acesso a todas as bibliotecas, estruturas e outras ferramentas que eles normalmente usariam, incluindo as mais importantes para o trabalho
- Fazer corresponder as capacidades do candidato ao teste apropriado
6. Testes de codificação de HTML e CSS online para avaliar as habilidades do desenvolvedor front-end
A metodologia RealLifeTestingTM do DevSkiller é construída para testar os desenvolvedores como se eles já estivessem no trabalho. Os desenvolvedores não recebem testes de página única para alcançar um resultado pré-determinado. No DevSkiller, os desenvolvedores do front-end são testados com projetos completos e de múltiplos arquivos que eles desenvolvem para mostrar toda a extensão de suas habilidades. Aqui estão alguns testes pré-fabricados que incorporam HTML e CSS.
- Competências testadas
- Duração
- 51 minutos, no máximo.
- Avaliação
- Automático
- Visão geral dos testes
-
Perguntas de escolha
avaliação do conhecimento de Datilografia
Lacunas de código
avaliação do conhecimento de JavaScript, Reagir
Perguntas de escolha
avaliação do conhecimento de HTML, CSS
Tarefa de programação - Nível: Fácil
TypeScript | Ganchos de Reacção | Gestão do Estado dos Filmes - Aplicação completa de gestão de filmes utilizando Ganchos de Reacção, implementando a gestão do estado para as visualizações existentes.
- Competências testadas
- Duração
- 49 minutos, no máximo.
- Avaliação
- Automático
- Visão geral dos testes
-
Perguntas de escolha
avaliação do conhecimento de .NET, C#, Padrões de mensagem, WCF, Aplicações Web & Serviços Web, Windows Communication Foundation, Metadados
Lacunas de código
avaliação do conhecimento de HTML, HTML5, CSS
Tarefa de programação - Nível: Difícil
.NET | RSA Decryption WCF Service - Concluir a implementação da interface WCF que pode decodificar e verificar dados criptografados usando RSA.
- Competências testadas
- Duração
- 62 minutos, no máximo.
- Avaliação
- Automático
- Visão geral dos testes
-
Perguntas de escolha
avaliação do conhecimento de JavaScript, Redux
Lacunas de código
avaliação do conhecimento de HTML, HTML5, CSS
Tarefa de programação - Nível: Médio
JavaScript | Redux Selectors | Treinamentos do Departamento de RH - Implementar corretamente os redutores e seletores redux.
- Competências testadas
- Duração
- 85 minutos, no máximo.
- Avaliação
- Automático
- Visão geral dos testes
-
Tarefa de programação - Nível: Difícil
HTML/CSS | Home Page - Definições de propriedades CSS completas para que a página exiba a tela do carregador de splash apropriado antes de exibir a página inicial.
Tarefa de programação - Nível: Difícil
JavaScript | Memorização funcional - Escreva as duas versões do mecanismo genérico de memorização.
- Competências testadas
- Duração
- 65 minutos, no máximo.
- Avaliação
- Automático
- Visão geral dos testes
-
Perguntas de escolha
avaliação do conhecimento de JavaScript, HTML, CSS
Tarefa de programação - Nível: Fácil
JavaScript | Vue.js | Calendar Notes - Implemente uma aplicação com a qual o utilizador pode adicionar uma nota para uma data escolhida a partir de um calendário.
- Competências testadas
- Duração
- 57 minutos, no máximo.
- Avaliação
- Automático
- Visão geral dos testes
-
Perguntas de escolha
avaliação do conhecimento de ES6, JavaScript, HTML, CSS, Acessibilidade
Tarefa de programação - Nível: Difícil
JavaScript | Memorização funcional - Escreva as duas versões do mecanismo genérico de memorização.
- Competências testadas
- Duração
- 63 minutos, no máximo.
- Avaliação
- Automático
- Visão geral dos testes
- Competências testadas
- Duração
- 79 minutos, no máximo.
- Avaliação
- Automático
- Visão geral dos testes
- Competências testadas
- Duração
- 60 minutos, no máximo.
- Avaliação
- Automático
- Visão geral dos testes
-
Lacunas de código
avaliação do conhecimento de SQL
Perguntas de escolha
avaliação do conhecimento de ES6, JavaScript, CSS, HTML, WCAG 2.0, Acessibilidade na Web
Tarefa de programação - Nível: Médio
PHP | Repositório de Categorias - Implemente consultas DOP que retornarão resultados válidos sobre filmes aos usuários.
- Competências testadas
- Duração
- 133 minutos, no máximo.
- Avaliação
- Automático
- Visão geral dos testes
-
Perguntas de escolha
avaliação do conhecimento de AJAX, JavaScript, Desenvolvimento Web, ES6, Datilografia, CSS, HTML
Tarefa de programação - Nível: Difícil
JavaScript | Consultas nas Redes Sociais | Encontrar amigos pelo nome - Implementar uma função para encontrar os amigos do usuário pelo nome deles.
Tarefa de programação - Nível: Difícil
CSS/HTML - Barra de navegação Flexbox - Definição completa de CSS e utilização do Flexbox para layout de componentes.
Partilhar correio
