Website Responsivo de Portfólio usando HTML5, CSS3, JavaScript

Converter Modelo de Portfólio do Figma para um Website Responsivo usando HTML5, CSS3, SASS, Bootstrap5 e JavaScript

Bem-vindo a este curso de treinamento da Cheetah Academy. Espero que este curso seja altamente benéfico para você e o ajude a aprimorar suas habilidades de programação. O objetivo deste curso é ajudar iniciantes no desenvolvimento web front-end que não possuem um portfólio apresentável ou têm dificuldade em criar um produto final. Ao longo deste treinamento, vamos focar nos seguintes objetivos:

Melhorar suas habilidades e dar passos em direção a se tornar um profissional

Ensinar as habilidades básicas necessárias para criar um produto valioso

Ajudar você a criar um portfólio bom e apresentável

Se você tem um entendimento básico de HTML5, CSS3, SASS, Bootstrap5 e JavaScript, mas tem dificuldade em utilizá-los para criar um website pessoal, este curso é perfeito para você. Você aprenderá como desenvolver um website pessoal usando HTML5, CSS3, SASS, Bootstrap5 e JavaScript. Vamos explorar o papel de cada ferramenta, biblioteca, linguagem de programação e framework:

Qual é o papel do Figma neste tutorial?

Primeiramente, o website deve ser criado usando aplicativos gráficos como Photoshop, Sketch, Adobe XD e Figma. Em seguida, um desenvolvedor web front-end irá codificar o website usando linguagens, bibliotecas e frameworks web como HTML5, CSS3, SASS, Bootstrap5, JavaScript, jQuery, Vue.js, React e Angular para transformá-lo em um website estático. O Figma determina todos os componentes, cores, tamanhos de fonte, margens, preenchimentos, etc. Você aprenderá como extrair esses valores do arquivo do Figma e convertê-los em código.

Qual é o papel do HTML5 neste tutorial?

O HTML5 serve como base para os websites e aplicações web de hoje em dia. Ele introduz tags semânticas como MAIN, SECTION, HEADER, FOOTER e ASIDE para diferenciar as seções de um website. Anteriormente, as tags DIV eram usadas para dividir a página de um website em diferentes seções, diferenciadas por CLASS e ID.

Qual é o papel do CSS3 neste tutorial?

O CSS3 é essencial para melhorar o apelo visual de websites baseados em HTML. Ele permite adicionar cor, estilo e beleza a um website. Neste tutorial, vamos focar na terceira versão do CSS3, que introduz recursos atraentes como transições, animações, fontes incorporadas e sombras. Utilizando o CSS3 extensivamente, você pode tornar seu website mais visualmente atraente.

Qual é o papel do SASS neste tutorial?

O SASS é um pré-processador CSS que permite uma codificação CSS mais rápida. Ele inclui recursos como variáveis, aninhamento e herança, que aceleram o processo de escrita. No entanto, os navegadores não entendem códigos SASS diretamente, então eles precisam ser convertidos para CSS usando um compilador. Este curso irá ensinar você a trabalhar de forma prática com o SASS, melhorando suas habilidades nessa área. Trabalhar com um pré-processador CSS é uma habilidade valiosa para desenvolvedores web front-end hoje em dia.

Qual é o papel do Bootstrap5 neste tutorial?

Ao criar um website usando HTML e CSS, é crucial garantir que ele seja responsivo e seja exibido corretamente em vários dispositivos. O Bootstrap fornece uma estrutura de grade pré-fabricada que simplifica o processo de criação de um website responsivo. Seguindo as regras do Bootstrap, você pode criar um website que se adapta bem a diferentes dispositivos com dimensões variadas. A versão mais recente do Bootstrap usada neste tutorial é o Bootstrap5, que utiliza flex para criar grades e possui recursos semelhantes ao Bootstrap4 com pequenas alterações. Notavelmente, o jQuery foi substituído por JavaScript puro.

Qual é o papel do JavaScript neste tutorial?

O JavaScript é a linguagem de programação mais popular globalmente e desempenha um papel significativo neste curso. Ao utilizar o JavaScript, nosso objetivo é aprimorar suas habilidades em JavaScript. Este curso se concentra no JavaScript puro em vez de depender do jQuery e seus plugins. O JavaScript serve como base para bibliotecas e frameworks JavaScript como jQuery, React, Vue.js, Angular e Svelte. Portanto, um entendimento sólido de JavaScript é essencial para aprender essas bibliotecas e frameworks. Acreditamos que o JavaScript é o coração do desenvolvimento front-end.

Quais são as características deste website?

- Dois modos escuros e claros que podem ser alternados usando JavaScript. - Animação de chuva de meteoros incluída no website. - Seção de biografia mostrando habilidades críticas, idiomas estrangeiros, habilidades de programação, anos de experiência e outras informações relevantes. - Seção de currículo exibindo formação educacional e experiência de trabalho. - Seção de portfólio para visualizar e explorar portfólios individuais. - Seção de depoimentos mostrando feedback de clientes. - Link para download de currículo pessoal. - Links pessoais para redes sociais.

O que você aprenderá

- Melhorar habilidades em HTML5 e CSS3. - Aprimorar habilidades em SCSS. - Fortalecer habilidades em Bootstrap5. - Melhorar habilidades em JavaScript. - Desenvolver websites responsivos que sejam exibidos corretamente em vários dispositivos. - Entender como HTML5, CSS3, SCSS, Bootstrap5 e JavaScript trabalham juntos. - Criar animações e transições usando CSS3 e JavaScript. - Trabalhar com JavaScript puro em vez de depender do jQuery e seus plugins. - Construir um website de portfólio usando HTML5, CSS3, SCSS, Bootstrap5 e JavaScript. - Familiarizar-se com ferramentas como o plugin Emmet para melhorar a velocidade de codificação. - Desenvolver websites com modos escuros e claros usando JavaScript.