DEV Community

Cover image for Pré-requisitos do curso de HTML e CSS feliz #00 #02
Marco Bruno 🤡
Marco Bruno 🤡

Posted on

2

Pré-requisitos do curso de HTML e CSS feliz #00 #02

Para acompanhar o curso de HTML e CSS feliz você precisará de 4 ferramentas. Todas elas são gratuitas e funcionam nos três sistemas operacionais mais usados no mercado de trabalho: o Windows, Linux e MacOS.

As ferramentas são:

  • Firefox;
  • Visual Studio Code;
  • Figma;
  • Discord.

Firefox

O Firefox é um navegador, assim como o Chrome, Edge, Safari, Brave, Opera e outros, e a Mozilla é a empresa por trás dele. Pessoalmente gosto mais de trabalhar no Firefox, por ser um navegador completo e muito mais leve que o famoso Chrome.

Durante o curso usaremos muito a ferramenta chamada Developer Tools (ferramentas de desenvolvimento). Em cada navegador existem particularidades e, como usarei o Firefox, sugiro que use o mesmo, pois isso facilitará o acompanhamento das aulas.

Caso não tenha o Firefox instalado, segue o link para instalação: https://www.mozilla.org/pt-BR/firefox/all

Visual Studio Code

O Visual Studio Code foi criado pela Microsoft e o chamamos carinhosamente de VSCode (é possível que você já tenha escutado esse nome navegando em assuntos dev). O VSCode é um editor de texto que, diferente do Word e Notepad, é focado para desenvolvedores(as) escreverem seus códigos.

Ele possui muitos recursos e durante o curso explicarei alguns deles.

Ah! E CUIDADO!!! O Visual Studio Code é diferente do Visual Studio. O que você precisa instalar é o VSCode. Segue o link para instalação: https://code.visualstudio.com

Figma

Para acessar e/ou editar o layout do projeto do curso você precisará usar uma ferramenta chamada Figma. Como o curso não é focado em design ou no planejamento do layout, não aprofundarei sobre a mesma.

Nosso foco, neste curso, é pegar o layout que foi planejado e criá-lo em código HTML e CSS, mas para isso precisamos conhecer o básico dessa ferramenta feliz (muito usada pelas pessoas que trabalham com UI e Design).

Se você é como eu e já quer sair fuçando tudo, deixo aqui um vídeo onde mostro detalhes interessantes sobre o Figma, para quem está começando e quer saber mais sobre como usá-la (mas ó, não esquece de terminar o post, ok? Tenho mais informações importantes para compartilhar :))

Abaixo deixo dois links para você: no primeiro você consegue acessar o layout do projeto do curso no Figma (mas sem poder alterá-lo) e no segundo você terá acesso ao arquivo Curso_de_HTML_e_CSS_feliz.fig para baixar, colocar na sua conta e poder alterar tudo do seu jeito!

  1. https://www.figma.com/file/GPuzBdwU29g86aSvHm3LXe/Curso-de-HTML-e-CSS-feliz-link-YouTube?node-id=0%3A1

  2. https://cdn.discordapp.com/attachments/784010824078458881/784013004869599262/Curso_de_HTML_e_CSS_feliz.fig

E, por último, mas não menos importante, temos o Discord.

Discord

Uma ferramenta para trocar mensagens por texto, áudio e vídeo. Nela temos uma comunidade onde você pode tirar suas dúvidas, comigo ou com outras pessoas da comunidade (que já fizeram ou estão fazendo o curso ou estão lá para trocar conhecimento e ajudar outros devs a serem mais felizes, rs).

A funcionalidade mais feliz no Discord é o compartilhamento de tela nas salas de áudio, onde você consegue mostrar qual exatamente é o problema que esta enfrentando no código. Lá você pode pedir ajuda, tirar dúvidas e, quando estiver pronto, ajudar outras pessoas também. Uma das coisas mais incríveis na comunidade dev é essa: tem muita informação, muita troca e sempre vai ter gente disposta a ajudar e contribuir na sua jornada.

Nosso servidor no Discord possui salas de dúvidas e cada uma tem um tema central. Fizemos isso para deixar a comunicação mais clara e feliz. Para entrar nessa comunidade bonita, com mais de 8 mil devs chavosos, "é só correr para o abraço": https://discord.gg/FP5UaAG

Nosso acordo feliz

Todo o curso e informações que compartilho são de graça. A única coisa que peço é, assim que tiver a oportunidade, ajude outras pessoas.
Se você começou a estudar agora, não se sinta pressionado a ajudar - apenas foque em aprender!!! - mas quando estiver pronto, contribua como puder para a comunidade :)

Image of Timescale

🚀 pgai Vectorizer: SQLAlchemy and LiteLLM Make Vector Search Simple

We built pgai Vectorizer to simplify embedding management for AI applications—without needing a separate database or complex infrastructure. Since launch, developers have created over 3,000 vectorizers on Timescale Cloud, with many more self-hosted.

Read more

Top comments (0)

Postmark Image

Speedy emails, satisfied customers

Are delayed transactional emails costing you user satisfaction? Postmark delivers your emails almost instantly, keeping your customers happy and connected.

Sign up