https://github.com/henriqueotogami/aula-html5-css3
Curso de HTML5 + CSS3 do Bootcamp Desenvolvedor FullStack Python 2020, na Digital Innovation One. Meu primeiro projeto de página da web.
https://github.com/henriqueotogami/aula-html5-css3
css3 dark-theme digital-innovation-one google-fonts-api html5
Last synced: about 1 year ago
JSON representation
Curso de HTML5 + CSS3 do Bootcamp Desenvolvedor FullStack Python 2020, na Digital Innovation One. Meu primeiro projeto de página da web.
- Host: GitHub
- URL: https://github.com/henriqueotogami/aula-html5-css3
- Owner: henriqueotogami
- License: mit
- Created: 2020-07-11T17:17:00.000Z (almost 6 years ago)
- Default Branch: master
- Last Pushed: 2025-03-04T05:29:48.000Z (over 1 year ago)
- Last Synced: 2025-03-04T06:27:49.123Z (over 1 year ago)
- Topics: css3, dark-theme, digital-innovation-one, google-fonts-api, html5
- Language: CSS
- Homepage:
- Size: 11.8 MB
- Stars: 1
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
Mobile: 736px X 414px
Desktop: 1042px X 1920px
# Aula HTML5 + CSS3
## [Rafael Galleani](https://www.github.com/rafegal)
### Bootcamp Desenvolvedor Full Stack Python
### Digital Innovation One
##### [Meu perfil na plataforma da Digital Innovation One (clique aqui).](https://web.digitalinnovation.one/users/henrique_map)
##### 12/07/2020
----------------------------------------------------
### Descrição:
A princípio, foi construído uma página web bem simples, introduzindo os conceitos básicos.
#### HTML5:
- [x] head;
- [x] meta;
- [x] title;
- [x] link;
- [x] body;
- [x] nav;
- [x] p;
- [x] ul;
- [x] li;
- [x] id;
- [x] class;
- [x] a;
- [x] h1;
- [x] section;
- [x] h2;
- [x] img;
- [x] footer.
#### CSS3:
- [x] margin;
- [x] color;
- [x] font-family;
- [x] font-size;
- [x] width;
----------------------------------------------------
### Autodesafio
#### 19/08/2020
Depois de concluir o Bootcamp, por ser muito conteúdo, decidi recomeçar e refazer algumas coisas. Esse repositório foi o primeiro a ser refeito, e o resultado foi uma página pessoal que eu idealizei no [Canva (clique aqui).](https://www.canva.com/design/DAEFRHMAEkc/uwp1R5w4ZUOlaZV_6io8ZA/view?utm_content=DAEFRHMAEkc&utm_campaign=designshare&utm_medium=link&utm_source=sharebutton)
##### Metas
- [x] Responsividade;
- [x] Dark theme;
- [x] CSS puro, sem framework;
- [x] Apenas uma página web;
- [x] Minimalista.
### Resultado
#### Pode ser visto no topo deste README.
Anexei capturas de tela de diferentes dispositivos neste repositório mostrando o comportamento da página.
### Aprendizado
#### HTML5
- [x] Utilização do [fonts.googleapis.com](https://fonts.googleapis.com) no arquivo index.html;
- [x] Utilização da tag hr;
- [x] Utilização da fonte Roboto;
#### CCS3
- [x] Utilização de variáveis para armazenar as cores em hexadecimal no :root{};
- [x] Utilização de Flex-box e grid-template;
- [x] Utilização de Position: absolute e relative;
- [x] Utilização de filter: brightness() nos ícones ao passar o mouse ( img:hover {} );
- [x] Utilização de box-shadow para a sensação de profundidade;
- [x] Utilização de @media para configuração das larguras de tela acima de 480px, e 900px separadamente.
#### Ferramentas
- [x] Utilização do Chrome DevTools;
- [x] Utilização do [Picular](https://picular.co/) para seleção das cores;
- [x] Utilização do [Adobe Color Wheel](https://color.adobe.com/pt/create/color-wheel) para identificar cores complementares;
#### Vídeos
- [x] Vídeo da [Rocketseat](https://www.youtube.com/watch?v=dUkkOdhyO1w) sobre flexbox;
- [x] Vídeo da [Rocketseat](https://www.youtube.com/watch?v=HN1UjzRSdBk) sobre grid-template;
#### Créditos
- [x] Utilização do ícone [Github (clique aqui) Autor: Xinh Studio](https://www.iconfinder.com/icons/765041/github_gloss_media_social_square_icon);
- [x] Utilização do ícone [E-mail (clique aqui) Autor: José Garcia](https://www.iconfinder.com/icons/306931/email_inbox_mail_message_icon);
- [x] Utilização do ícone [LinkedIn (clique aqui) Autor: Rudez Studio](https://www.iconfinder.com/icons/986950/linkedin_icon);
- [x] Utilização do ícone [WhatsApp (clique aqui) Autor: Rudez Studio](https://www.iconfinder.com/icons/986960/whatsapp_icon);
- [x] Utilização do ícone [Rocket Blue (clique aqui) Autor: Squid.ink](https://www.iconfinder.com/icons/416398/aliens_exploration_fuel_nasa_rocket_space_spaceship_icon);
- [x] Utilização do ícone [Python (clique aqui) Autor: Flatart](https://www.iconfinder.com/icons/4375050/logo_python_icon);
- [x] Utilização do ícone [HTML5 (clique aqui) Autor: Flatart](https://www.iconfinder.com/icons/4373229/html5_logo_logos_icon);
- [x] Utilização do ícone [CSS3 (clique aqui) Autor: Flatart](https://www.iconfinder.com/icons/2916226/css3_marketing_media_social_website_icon);
- [x] Utilização do ícone [PostgreSQL (clique aqui) Autor: Iconfinder](https://www.iconfinder.com/icons/4691328/postgresql_icon);
- [x] Utilização do ícone [JavaScript (clique aqui) Autor: Erik Ragnar Eliasson](https://www.iconfinder.com/icons/652581/code_command_develop_javascript_language_programming_software_icon);
- [x] Utilização do ícone [Swift (clique aqui) Autor: Samat Odedara](https://www.iconfinder.com/icons/1010066/apple_code_logo_swift_icon);
- [x] Utilização do ícone [Rocket Gold (clique aqui) Autor: Freepik](https://www.flaticon.com/free-icon/rocket_123369).
----------------------------------------------------
### IDE: Visual Studio Code
#### Tema: Monokai Pro.
#### Extensões: Grammarly, HTML Snippets, GitLens.