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