7 Dias de HTML/CSS: Desafio Grátis!

[{"selector":"#anim-2d928f78-f18a-42c4-a393-3e898a7d35b2","keyframes":{"opacity":[0,1]},"delay":0,"duration":600,"easing":"cubic-bezier(0.2, 0.6, 0.0, 1)","fill":"both"}] [{"selector":"#anim-8f0f6c57-9e60-4fb3-be35-1a98ee1f175e","keyframes":{"transform":["translate3d(0px, 134.38300%, 0)","translate3d(0px, 0px, 0)"]},"delay":0,"duration":600,"easing":"cubic-bezier(0.2, 0.6, 0.0, 1)","fill":"both"}] ● O que é HTML e CSS? ● Como funciona Front-end? ● Praticando com 7 Days Code ● Replicar LinkedIn: como? ● Conheça Natália F. Dev ● Participe do Desafio Grátis! Saiba mais!

O que é HTML e CSS?

[{"selector":"#anim-61cea286-9ebc-48d2-b541-df1124096b88 [data-leaf-element=\"true\"]","keyframes":{"transform":["translate(0%, 0%) scale(1.5)","translate(0%, 0%) scale(1)"]},"delay":0,"duration":1000,"easing":"cubic-bezier(.3,0,.55,1)","fill":"forwards"}] [{"selector":"#anim-0196a0e6-ecbb-41b3-ba63-c1157f1158be","keyframes":{"transform":["translate3d(-115.82278%, 0px, 0)","translate3d(0px, 0px, 0)"]},"delay":0,"duration":600,"easing":"cubic-bezier(0.4, 0.4, 0.0, 1)","fill":"both"}] [{"selector":"#anim-3806db32-abb0-4035-b6fc-c46a1bfaebc9","keyframes":{"opacity":[0,1]},"delay":0,"duration":600,"easing":"cubic-bezier(0.4, 0.4, 0.0, 1)","fill":"both"}] [{"selector":"#anim-388752b7-a113-4dcf-9c9e-857351a8ce27","keyframes":{"transform":["scale(0.15)","scale(1)"]},"delay":0,"duration":600,"easing":"cubic-bezier(0.4, 0.4, 0.0, 1)","fill":"forwards"}]

[{"selector":"#anim-6767c4fd-04ad-4678-ba97-2d3409167d77 [data-leaf-element=\"true\"]","keyframes":{"transform":["translate(0%, 0%) scale(1.5)","translate(0%, 0%) scale(1)"]},"delay":0,"duration":1000,"easing":"cubic-bezier(.3,0,.55,1)","fill":"forwards"}] [{"selector":"#anim-8948c4d2-ce0c-4944-a8ef-d623eb4cc8a7","keyframes":{"opacity":[0,1]},"delay":0,"duration":1000,"easing":"cubic-bezier(.3,0,.55,1)","fill":"both"}] [{"selector":"#anim-f48d195f-8b6b-48b4-93e3-52189c97d001","keyframes":{"transform":["scale(0.3333333333333333)","scale(1)"]},"delay":0,"duration":1000,"easing":"cubic-bezier(.3,0,.55,1)","fill":"forwards"}] HTML e CSS são a base do desenvolvimento web. HTML (HyperText Markup Language) é usado para estruturar conteúdo na web. CSS (Cascading Style Sheets) é usado para estilizar e dar layout a páginas web. Juntos, eles formam a estrutura e o design dos sites. Saiba mais!

Como funciona Front-end?

[{"selector":"#anim-10206326-6937-4ea8-bc96-c81376c7349b [data-leaf-element=\"true\"]","keyframes":{"transform":["translate(0%, 0%) scale(1.5)","translate(0%, 0%) scale(1)"]},"delay":0,"duration":1000,"easing":"cubic-bezier(.3,0,.55,1)","fill":"forwards"}] [{"selector":"#anim-194f7aa7-00f4-4253-9382-f702fec5cff0","keyframes":{"transform":["translate3d(-115.82278%, 0px, 0)","translate3d(0px, 0px, 0)"]},"delay":0,"duration":600,"easing":"cubic-bezier(0.4, 0.4, 0.0, 1)","fill":"both"}] [{"selector":"#anim-29652e1b-9946-4575-b072-59ab7918cbfc","keyframes":{"opacity":[0,1]},"delay":0,"duration":600,"easing":"cubic-bezier(0.4, 0.4, 0.0, 1)","fill":"both"}] [{"selector":"#anim-dfeb6073-6936-4efe-bf6e-a93b64bb65ac","keyframes":{"transform":["scale(0.15)","scale(1)"]},"delay":0,"duration":600,"easing":"cubic-bezier(0.4, 0.4, 0.0, 1)","fill":"forwards"}]

[{"selector":"#anim-4abb2c07-d822-4219-89de-6db30949638e [data-leaf-element=\"true\"]","keyframes":{"transform":["translate(0%, 0%) scale(1.5)","translate(0%, 0%) scale(1)"]},"delay":0,"duration":1000,"easing":"cubic-bezier(.3,0,.55,1)","fill":"forwards"}] [{"selector":"#anim-aff8ae0d-668c-4586-b52d-8d0c3f784f23","keyframes":{"opacity":[0,1]},"delay":0,"duration":1000,"easing":"cubic-bezier(.3,0,.55,1)","fill":"both"}] [{"selector":"#anim-bc445022-e2fd-4986-8622-e3dc7a3a23d6","keyframes":{"transform":["scale(0.3333333333333333)","scale(1)"]},"delay":0,"duration":1000,"easing":"cubic-bezier(.3,0,.55,1)","fill":"forwards"}] Front-end é a parte do site com a qual o usuário interage diretamente. É a interface gráfica exibida no navegador. Consiste em design e interatividade, usando código HTML, CSS e JavaScript. Ele funciona como a 'frente' do site, daí o nome. Saiba mais!

Praticando com 7 Days Code

[{"selector":"#anim-e2e2f1eb-f048-44ff-b371-3c8b231f81a3 [data-leaf-element=\"true\"]","keyframes":{"transform":["translate(0%, 0%) scale(1.5)","translate(0%, 0%) scale(1)"]},"delay":0,"duration":1000,"easing":"cubic-bezier(.3,0,.55,1)","fill":"forwards"}] [{"selector":"#anim-e87e2a2f-b782-4ba9-ae54-a2fc7005b83b","keyframes":{"transform":["translate3d(-115.82278%, 0px, 0)","translate3d(0px, 0px, 0)"]},"delay":0,"duration":600,"easing":"cubic-bezier(0.4, 0.4, 0.0, 1)","fill":"both"}] [{"selector":"#anim-ad1d989b-e479-4bb4-90a8-7ab89f4023d1","keyframes":{"opacity":[0,1]},"delay":0,"duration":600,"easing":"cubic-bezier(0.4, 0.4, 0.0, 1)","fill":"both"}] [{"selector":"#anim-d2552269-c968-4596-aed3-04e13a040acf","keyframes":{"transform":["scale(0.15)","scale(1)"]},"delay":0,"duration":600,"easing":"cubic-bezier(0.4, 0.4, 0.0, 1)","fill":"forwards"}]

[{"selector":"#anim-be0cf5d0-6eb6-40db-a0f9-63bf7b36fab7 [data-leaf-element=\"true\"]","keyframes":{"transform":["translate(0%, 0%) scale(1.5)","translate(0%, 0%) scale(1)"]},"delay":0,"duration":1000,"easing":"cubic-bezier(.3,0,.55,1)","fill":"forwards"}] [{"selector":"#anim-1c88a11f-b79b-409b-a630-0442b2a76ede","keyframes":{"opacity":[0,1]},"delay":0,"duration":1000,"easing":"cubic-bezier(.3,0,.55,1)","fill":"both"}] [{"selector":"#anim-b45e0674-6200-4acd-a798-bb2be4e62b5c","keyframes":{"transform":["scale(0.3333333333333333)","scale(1)"]},"delay":0,"duration":1000,"easing":"cubic-bezier(.3,0,.55,1)","fill":"forwards"}] Com o 7 Days Code, você pratica HTML e CSS por 7 dias consecutivos. Cada dia traz um novo desafio, permitindo que você solidifique seus conhecimentos enquanto cria um projeto sólido. É a prática em ação! Saiba mais!

Replicar LinkedIn: como?

[{"selector":"#anim-377de2e6-bfd0-4a3f-9db9-b8ddc85adad5 [data-leaf-element=\"true\"]","keyframes":{"transform":["translate(0%, 0%) scale(1.5)","translate(0%, 0%) scale(1)"]},"delay":0,"duration":1000,"easing":"cubic-bezier(.3,0,.55,1)","fill":"forwards"}] [{"selector":"#anim-e905a24c-3936-4009-8610-8de2ba18b51a","keyframes":{"transform":["translate3d(-115.82278%, 0px, 0)","translate3d(0px, 0px, 0)"]},"delay":0,"duration":600,"easing":"cubic-bezier(0.4, 0.4, 0.0, 1)","fill":"both"}] [{"selector":"#anim-503a66bf-c6e3-4cf6-849c-63cdf15a8d06","keyframes":{"opacity":[0,1]},"delay":0,"duration":600,"easing":"cubic-bezier(0.4, 0.4, 0.0, 1)","fill":"both"}] [{"selector":"#anim-37b4761c-ad80-4223-8c58-6227f52190ff","keyframes":{"transform":["scale(0.15)","scale(1)"]},"delay":0,"duration":600,"easing":"cubic-bezier(0.4, 0.4, 0.0, 1)","fill":"forwards"}]

[{"selector":"#anim-dff45186-3562-47a4-b7f5-5551e737c7ef [data-leaf-element=\"true\"]","keyframes":{"transform":["translate(0%, 0%) scale(1.5)","translate(0%, 0%) scale(1)"]},"delay":0,"duration":1000,"easing":"cubic-bezier(.3,0,.55,1)","fill":"forwards"}] [{"selector":"#anim-8396fed7-ef88-4d57-aa8e-85fe00aea385","keyframes":{"opacity":[0,1]},"delay":0,"duration":1000,"easing":"cubic-bezier(.3,0,.55,1)","fill":"both"}] [{"selector":"#anim-39d2a973-db6d-43e7-bb63-7f43400f0c9f","keyframes":{"transform":["scale(0.3333333333333333)","scale(1)"]},"delay":0,"duration":1000,"easing":"cubic-bezier(.3,0,.55,1)","fill":"forwards"}] No desafio 7 Days Code, um dos projetos envolve replicar a página do LinkedIn. Você aprende conceitos básicos de HTML e CSS e técnicas avançadas como Flexbox e Grid. É uma ótima maneira de praticar e aprender! Saiba mais!

Conheça Natália F. Dev

[{"selector":"#anim-e03a0bb0-0fab-4e56-9f40-bad7e5a914e0 [data-leaf-element=\"true\"]","keyframes":{"transform":["translate(0%, 0%) scale(1.5)","translate(0%, 0%) scale(1)"]},"delay":0,"duration":1000,"easing":"cubic-bezier(.3,0,.55,1)","fill":"forwards"}] [{"selector":"#anim-ec5a4ef7-dda8-4afb-b095-c49c7473d307","keyframes":{"transform":["translate3d(-115.82278%, 0px, 0)","translate3d(0px, 0px, 0)"]},"delay":0,"duration":600,"easing":"cubic-bezier(0.4, 0.4, 0.0, 1)","fill":"both"}] [{"selector":"#anim-ccf0becc-09d1-416a-92d6-c06c07efe173","keyframes":{"opacity":[0,1]},"delay":0,"duration":600,"easing":"cubic-bezier(0.4, 0.4, 0.0, 1)","fill":"both"}] [{"selector":"#anim-8004d84f-675b-4597-92b9-a5de66ee9128","keyframes":{"transform":["scale(0.15)","scale(1)"]},"delay":0,"duration":600,"easing":"cubic-bezier(0.4, 0.4, 0.0, 1)","fill":"forwards"}]

[{"selector":"#anim-8b5e0c74-136a-470a-aec6-46e96c0857b2 [data-leaf-element=\"true\"]","keyframes":{"transform":["translate(0%, 0%) scale(1.5)","translate(0%, 0%) scale(1)"]},"delay":0,"duration":1000,"easing":"cubic-bezier(.3,0,.55,1)","fill":"forwards"}] [{"selector":"#anim-6a24530b-9299-4cb4-addd-1cbb5c584940","keyframes":{"opacity":[0,1]},"delay":0,"duration":1000,"easing":"cubic-bezier(.3,0,.55,1)","fill":"both"}] [{"selector":"#anim-98c4e325-c04c-495c-9a45-6d0daf123fb4","keyframes":{"transform":["scale(0.3333333333333333)","scale(1)"]},"delay":0,"duration":1000,"easing":"cubic-bezier(.3,0,.55,1)","fill":"forwards"}] Natália F. Dev é uma desenvolvedora Front-end que começou sua carreira ensinando computação para crianças. Hoje, ela compartilha seu conhecimento em plataformas como YouTube e LinkedIn, com foco especial em CSS. Saiba mais!

Participe do Desafio Grátis!

[{"selector":"#anim-b0ed0ba6-eb12-4ee8-89d5-abc46e53b5fa [data-leaf-element=\"true\"]","keyframes":{"transform":["translate(0%, 0%) scale(1.5)","translate(0%, 0%) scale(1)"]},"delay":0,"duration":1000,"easing":"cubic-bezier(.3,0,.55,1)","fill":"forwards"}] [{"selector":"#anim-feca77cc-b320-47b1-b8ff-4e0d95c5a478","keyframes":{"transform":["translate3d(-115.82278%, 0px, 0)","translate3d(0px, 0px, 0)"]},"delay":0,"duration":600,"easing":"cubic-bezier(0.4, 0.4, 0.0, 1)","fill":"both"}] [{"selector":"#anim-0f73728b-014f-4e23-97bf-2eea8934d4b4","keyframes":{"opacity":[0,1]},"delay":0,"duration":600,"easing":"cubic-bezier(0.4, 0.4, 0.0, 1)","fill":"both"}] [{"selector":"#anim-96428153-0418-4871-a369-d75992a800c6","keyframes":{"transform":["scale(0.15)","scale(1)"]},"delay":0,"duration":600,"easing":"cubic-bezier(0.4, 0.4, 0.0, 1)","fill":"forwards"}]

[{"selector":"#anim-c77dbdef-679c-4aec-a3af-ad9c46b094f2 [data-leaf-element=\"true\"]","keyframes":{"transform":["translate(0%, 0%) scale(1.5)","translate(0%, 0%) scale(1)"]},"delay":0,"duration":1000,"easing":"cubic-bezier(.3,0,.55,1)","fill":"forwards"}] [{"selector":"#anim-52fc1451-1aa9-4b96-9d14-46c82454a1a8","keyframes":{"opacity":[0,1]},"delay":0,"duration":1000,"easing":"cubic-bezier(.3,0,.55,1)","fill":"both"}] [{"selector":"#anim-56a6776a-8328-41a8-a460-22210c57da60","keyframes":{"transform":["scale(0.3333333333333333)","scale(1)"]},"delay":0,"duration":1000,"easing":"cubic-bezier(.3,0,.55,1)","fill":"forwards"}] Aproveite a oportunidade única de participar do desafio 7 Days of Code de HTML e CSS gratuitamente! Pratique, aprenda e aperfeiçoe suas habilidades de Front-end. Não perca essa chance! Saiba mais!

Ler matéria completa

[{"selector":"#anim-26d57031-1bc5-4a50-87ca-4f5b2cfa07cf","keyframes":{"transform":["translate3d(-115.18988%, 0px, 0)","translate3d(0px, 0px, 0)"]},"delay":0,"duration":600,"easing":"cubic-bezier(0.4, 0.4, 0.0, 1)","fill":"both"}] [{"selector":"#anim-5f661cea-4784-4246-9af7-3157272b19d9","keyframes":{"opacity":[0,1]},"delay":0,"duration":600,"easing":"cubic-bezier(0.4, 0.4, 0.0, 1)","fill":"both"}] [{"selector":"#anim-dbbde45e-13e1-4c7c-ade2-2fa56b5b6904","keyframes":{"transform":["scale(0.15)","scale(1)"]},"delay":0,"duration":600,"easing":"cubic-bezier(0.4, 0.4, 0.0, 1)","fill":"forwards"}]