0% acharam este documento útil (0 voto)

9 visualizações3 páginas

Exercicios Avancados HTML CSS JS

O documento apresenta uma lista de exercícios avançados sobre HTML, CSS e JavaScript, abordando tópicos como atributos data-*, a tag <template>, acessibilidade com aria-label, API de geolocalização, estrutura semântica de páginas, animações em CSS, manipulação de DOM e consumo de APIs. Cada questão propõe um desafio prático que visa aprofundar o conhecimento do leitor nas tecnologias web. O conteúdo é voltado para desenvolvedores que buscam aprimorar suas habilidades em desenvolvimento front-end.

Enviado por

caadalberto56

Direitos autorais

Levamos muito a sério os direitos de conteúdo. Se você suspeita que este conteúdo é seu, reivindique-o aqui.

Formatos disponíveis

Baixe no formato PDF, TXT ou leia on-line no Scribd

0% acharam este documento útil (0 voto)

9 visualizações3 páginas

Exercicios Avancados HTML CSS JS

Enviado por

caadalberto56

Direitos autorais

Levamos muito a sério os direitos de conteúdo. Se você suspeita que este conteúdo é seu, reivindique-o aqui.

Formatos disponíveis

Baixe no formato PDF, TXT ou leia on-line no Scribd

Exercícios Avançados - HTML, CSS e JavaScript

1. O que são data-* attributes em HTML e como podem ser usados com JavaScript?

2. Como funciona a tag <template> e para que ela é útil?

3. Explique o funcionamento do atributo 'aria-label' e sua importância.

4. O que é a API de geolocalização e como o HTML pode interagir com ela?

5. Diferencie <article>, <section> e <aside> com exemplos práticos.

6. Como criar um formulário completo com validação nativa em HTML?

7. Qual a função do atributo 'autocomplete' em um formulário?

8. Para que serve a tag <fieldset> e como é usada com <legend>?

9. O que é o atributo 'required' e como ele impacta o envio de formulários?

10. Qual a diferença entre 'readonly' e 'disabled' em campos de input?

11. Explique como funciona a tag <progress> e <meter>.

12. Como incorporar vídeos responsivos em HTML com <video>?

13. Quais os benefícios do uso da tag <picture> para imagens?

14. Como tornar uma tabela acessível e responsiva?

15. Como implementar uma estrutura básica de blog com tags semânticas?

16. O que é um pseudo-elemento e como se aplica (::before, ::after)?

17. Como funciona o posicionamento sticky em CSS?

18. Explique a diferença entre grid layout e flexbox.

19. Como criar um layout responsivo com media queries avançadas?

20. O que é o efeito parallax e como pode ser feito com CSS puro?

21. Como criar uma animação com keyframes em CSS?

22. O que é a propriedade 'clamp()' e onde ela pode ser útil?

23. Explique o que é uma variável CSS e como usá-la.

24. Qual a diferença entre 'rem', 'em' e 'vh/vw'?

25. Como criar um botão com efeito hover animado?

26. O que faz a propriedade 'object-fit'?

27. Como centralizar absolutamente um elemento no centro da tela?

28. Como aplicar efeito de glassmorphism com CSS?

29. O que são mix-blend-mode e backdrop-filter?

30. Como aplicar um reset ou normalize em CSS e por quê?

31. O que são promessas (Promises) e como funcionam?

32. Explique a diferença entre síncrono e assíncrono em JavaScript.

33. Como consumir uma API usando fetch() e tratar os dados?

34. O que é async/await e quando usar?

35. Como manipular múltiplos elementos do DOM com querySelectorAll()?

36. Como criar uma galeria de imagens dinâmica com JavaScript?

37. O que são closures em JavaScript?

38. O que é escopo léxico?

39. Explique a diferença entre shallow copy e deep copy.

40. Como validar formulários usando JavaScript?

41. Como criar um componente de carrossel manual com HTML, CSS e JS?

42. Como armazenar dados no localStorage e recuperá-los?

43. Explique como funciona o event delegation.

44. Como criar e manipular classes CSS com JavaScript?

45. O que é debounce e throttle em eventos de input?

46. Como criar uma função que calcula o tempo restante até uma data futura?

47. O que é destruição de arrays e objetos e por que é útil?

48. Como criar uma SPA simples com navegação baseada em hash (#)?

Exercicios Avancados HTML CSS JS

Enviado por

Exercicios Avancados HTML CSS JS

Enviado por

Exercícios Avançados - HTML, CSS e JavaScript

2. Como funciona a tag <template> e para que ela é útil?

3. Explique o funcionamento do atributo 'aria-label' e sua importância.

4. O que é a API de geolocalização e como o HTML pode interagir com ela?

5. Diferencie <article>, <section> e <aside> com exemplos práticos.

6. Como criar um formulário completo com validação nativa em HTML?

7. Qual a função do atributo 'autocomplete' em um formulário?

8. Para que serve a tag <fieldset> e como é usada com <legend>?

9. O que é o atributo 'required' e como ele impacta o envio de formulários?

10. Qual a diferença entre 'readonly' e 'disabled' em campos de input?

11. Explique como funciona a tag <progress> e <meter>.

12. Como incorporar vídeos responsivos em HTML com <video>?

13. Quais os benefícios do uso da tag <picture> para imagens?

14. Como tornar uma tabela acessível e responsiva?

16. O que é um pseudo-elemento e como se aplica (::before, ::after)?

17. Como funciona o posicionamento sticky em CSS?

18. Explique a diferença entre grid layout e flexbox.

19. Como criar um layout responsivo com media queries avançadas?

21. Como criar uma animação com keyframes em CSS?

22. O que é a propriedade 'clamp()' e onde ela pode ser útil?

23. Explique o que é uma variável CSS e como usá-la.

24. Qual a diferença entre 'rem', 'em' e 'vh/vw'?

25. Como criar um botão com efeito hover animado?

26. O que faz a propriedade 'object-fit'?

27. Como centralizar absolutamente um elemento no centro da tela?

28. Como aplicar efeito de glassmorphism com CSS?

29. O que são mix-blend-mode e backdrop-filter?

30. Como aplicar um reset ou normalize em CSS e por quê?

31. O que são promessas (Promises) e como funcionam?

32. Explique a diferença entre síncrono e assíncrono em JavaScript.

33. Como consumir uma API usando fetch() e tratar os dados?

34. O que é async/await e quando usar?

35. Como manipular múltiplos elementos do DOM com querySelectorAll()?

36. Como criar uma galeria de imagens dinâmica com JavaScript?

37. O que são closures em JavaScript?

38. O que é escopo léxico?

39. Explique a diferença entre shallow copy e deep copy.

40. Como validar formulários usando JavaScript?

42. Como armazenar dados no localStorage e recuperá-los?

43. Explique como funciona o event delegation.

44. Como criar e manipular classes CSS com JavaScript?

45. O que é debounce e throttle em eventos de input?

47. O que é destruição de arrays e objetos e por que é útil?

49. Como transformar uma string em slug (formato URL amigável)?

50. O que são módulos ES6 e como funcionam com import/export?

Você também pode gostar