├── assets ├── css-logo.png ├── fav.ico ├── html-logo.png ├── javascript-logo.png ├── menu.png ├── react-logo.png ├── roadmap.png ├── tailwind-logo.png └── typescript-logo.png ├── css └── style.css ├── index.html └── js └── script.js /assets/css-logo.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/GabrielMendessDev/FrontEndRoadmap/e93e5fb488220b1ec94afed83faab56506af3e13/assets/css-logo.png -------------------------------------------------------------------------------- /assets/fav.ico: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/GabrielMendessDev/FrontEndRoadmap/e93e5fb488220b1ec94afed83faab56506af3e13/assets/fav.ico -------------------------------------------------------------------------------- /assets/html-logo.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/GabrielMendessDev/FrontEndRoadmap/e93e5fb488220b1ec94afed83faab56506af3e13/assets/html-logo.png -------------------------------------------------------------------------------- /assets/javascript-logo.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/GabrielMendessDev/FrontEndRoadmap/e93e5fb488220b1ec94afed83faab56506af3e13/assets/javascript-logo.png -------------------------------------------------------------------------------- /assets/menu.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/GabrielMendessDev/FrontEndRoadmap/e93e5fb488220b1ec94afed83faab56506af3e13/assets/menu.png -------------------------------------------------------------------------------- /assets/react-logo.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/GabrielMendessDev/FrontEndRoadmap/e93e5fb488220b1ec94afed83faab56506af3e13/assets/react-logo.png -------------------------------------------------------------------------------- /assets/roadmap.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/GabrielMendessDev/FrontEndRoadmap/e93e5fb488220b1ec94afed83faab56506af3e13/assets/roadmap.png -------------------------------------------------------------------------------- /assets/tailwind-logo.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/GabrielMendessDev/FrontEndRoadmap/e93e5fb488220b1ec94afed83faab56506af3e13/assets/tailwind-logo.png -------------------------------------------------------------------------------- /assets/typescript-logo.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/GabrielMendessDev/FrontEndRoadmap/e93e5fb488220b1ec94afed83faab56506af3e13/assets/typescript-logo.png -------------------------------------------------------------------------------- /css/style.css: -------------------------------------------------------------------------------- 1 | @import url('https://fonts.googleapis.com/css2?family=Poppins:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap'); 2 | 3 | *{ 4 | border: 0; 5 | margin: 0; 6 | box-sizing: border-box; 7 | font-family: 'Poppins', sans-serif; 8 | } 9 | 10 | html{ 11 | scroll-behavior: smooth; 12 | } 13 | 14 | header{ 15 | display: flex; 16 | justify-content: center; 17 | align-items: center; 18 | background-color: #191919; 19 | justify-content: space-between; 20 | position: fixed; 21 | width: 100%; 22 | z-index: 1; 23 | box-shadow: -8px 4px 47px -4px rgba(7, 7, 208, 0.483); 24 | } 25 | 26 | header img{ 27 | height: 5vh; 28 | margin: .8rem; 29 | } 30 | 31 | header a{ 32 | color: white; 33 | text-decoration: none; 34 | margin: .6rem; 35 | margin-right: 1.5rem; 36 | transition: all 0.4s; 37 | } 38 | 39 | header a:hover{ 40 | cursor: pointer; 41 | color: rgb(30, 30, 255); 42 | } 43 | 44 | 45 | .section #menuMobile{ 46 | display: none; 47 | background: #191919; 48 | flex-direction: column; 49 | text-align: justify; 50 | z-index: 1; 51 | padding: 1rem; 52 | gap: 1.3rem; 53 | position: fixed; 54 | align-items: center; 55 | right: 0; 56 | top: 5.2rem; 57 | animation: slideLeft 0.6s forwards; 58 | } 59 | 60 | @keyframes slideLeft { 61 | from { 62 | right: -15rem; 63 | } 64 | to { 65 | right: 0; 66 | } 67 | } 68 | 69 | @keyframes slideRight { 70 | from { 71 | right: 0; 72 | } 73 | to { 74 | right: -15rem; 75 | } 76 | } 77 | 78 | .section #menuMobile a{ 79 | text-decoration: none; 80 | color: white; 81 | } 82 | 83 | .section #menuMobile a:hover{ 84 | cursor: pointer; 85 | color: rgb(30, 30, 255); 86 | } 87 | 88 | #btnMenu{ 89 | background: none; 90 | display: none; 91 | cursor: pointer; 92 | } 93 | 94 | section{ 95 | width: 100%; 96 | height: 100%; 97 | position: relative; 98 | } 99 | 100 | .containerMain{ 101 | display: flex; 102 | align-items: center; 103 | flex-direction: column; 104 | background-color: #191919; 105 | padding: 3rem; 106 | } 107 | 108 | .containerMain h1{ 109 | display: flex; 110 | font-size: 2rem; 111 | font-weight: 700; 112 | padding: .5rem; 113 | color: white; 114 | align-items: center; 115 | justify-content: center; 116 | margin-top: 3rem; 117 | transition: all 0.3s; 118 | } 119 | 120 | 121 | .containerMain .containerContent{ 122 | display: flex; 123 | flex-direction: column; 124 | align-items: center; 125 | justify-content: center; 126 | padding: 1rem; 127 | margin: 0.5rem; 128 | max-width: 30rem; 129 | border-radius: .3rem; 130 | box-shadow: -8px 4px 47px -4px rgba(7, 7, 208, 0.483); 131 | } 132 | 133 | .containerImg{ 134 | position: relative; 135 | } 136 | 137 | .containerMain .containerImg img{ 138 | height: 48px; 139 | width: 48px; 140 | position: absolute; 141 | opacity: 0.8; 142 | right: 0; 143 | top: 0; 144 | } 145 | 146 | .containerMain .containerContent p{ 147 | font-size: 1rem; 148 | font-weight: 400; 149 | color: white; 150 | text-align: justify; 151 | padding: 1rem 3rem 0.3rem 3rem; 152 | transition: all 0.4s; 153 | } 154 | 155 | .containerMain .containerContent ul { 156 | list-style: none; /* Remove o marcador padrão */ 157 | padding: 2rem; 158 | } 159 | 160 | .containerMain .containerContent ul li { 161 | color: white; 162 | padding: 0.5rem 2rem; /* Adiciona espaçamento entre os itens */ 163 | border: 1px solid rgba(7, 7, 208, 0.483); /* Borda suave */ 164 | border-radius: 8px; /* Bordas arredondadas */ 165 | margin-bottom: 0.5rem; /* Espaçamento entre os itens */ 166 | display: flex; 167 | align-items: center; /* Alinha verticalmente */ 168 | transition: background 0.3s ease; /* Transição suave para o efeito hover */ 169 | } 170 | 171 | .containerMain .containerContent ul li::before { 172 | content: '\f00c'; /* Código Unicode do ícone (fa-check) */ 173 | font-family: 'Font Awesome 5 Free'; /* Define a fonte */ 174 | font-weight: 900; /* Define o peso do ícone */ 175 | margin-right: 1rem; /* Espaço entre o ícone e o texto */ 176 | color: #4CAF50; /* Cor do ícone */ 177 | } 178 | 179 | 180 | .containerMain .containerContent ul li:hover { 181 | background: rgba(7, 7, 208, 0.483); /* Fundo um pouco mais claro no hover */ 182 | box-shadow: -8px 4px 47px -4px rgba(7, 7, 208, 0.483); 183 | } 184 | 185 | 186 | .containerMain .saiba-mais{ 187 | display: flex; 188 | align-items: center; 189 | justify-content: center; 190 | padding-top: 2rem; 191 | } 192 | 193 | .containerMain .saiba-mais a{ 194 | color: rgb(205, 202, 202); 195 | font-weight: 500; 196 | transition: all .4s; 197 | } 198 | 199 | .containerMain .saiba-mais a:hover{ 200 | color: rgb(30, 30, 255); 201 | } 202 | 203 | /*Contact*/ 204 | .contact { 205 | width: 100%; 206 | overflow: hidden; 207 | background: #0f0e0e; 208 | display: flex; 209 | flex-direction: column; 210 | justify-content: center; 211 | align-items: center; 212 | font-size: 1.8rem; 213 | color: #c6d0d1; 214 | } 215 | 216 | .contact .footer .social{ 217 | display: flex; 218 | align-items: center; 219 | justify-content: center; 220 | padding: 1rem; 221 | gap: 2rem; 222 | } 223 | 224 | .contact .footer .social a{ 225 | color: white; 226 | font-size: 1.5rem; 227 | } 228 | 229 | .contact .footer .social a:hover{ 230 | transform: translateY(-.4rem); 231 | transition: all 0.4s; 232 | color: rgb(30, 30, 255); 233 | } 234 | 235 | 236 | .footer { 237 | text-align: center; 238 | margin-top: 1rem; 239 | margin-bottom: 1rem; 240 | } 241 | 242 | .footer p { 243 | font-weight: 400; 244 | font-size: 1rem; 245 | } 246 | 247 | .footer a{ 248 | text-decoration: none; 249 | transition: all 0.4s; 250 | } 251 | 252 | .footer a:hover{ 253 | text-decoration: underline; 254 | } 255 | 256 | spf { 257 | color: rgb(9, 9, 240); 258 | transition: all 0.4s; 259 | } 260 | 261 | spf:hover{ 262 | color: rgb(231, 227, 240); 263 | } 264 | 265 | @media only screen and (max-width: 480px) { 266 | .containerMain .containerImg img{ 267 | height: 40px; 268 | width: 40px; 269 | } 270 | 271 | #menuDesktop{ 272 | display: none; 273 | } 274 | 275 | .section #menuMobile{ 276 | display: none; 277 | } 278 | 279 | #btnMenu{ 280 | display: flex; 281 | } 282 | 283 | .containerMain .containerContent p{ 284 | font-size: 0.8rem; 285 | font-weight: 400; 286 | color: white; 287 | text-align: justify; 288 | padding: 1rem 1rem 0.3rem 1rem; 289 | transition: all 0.4s; 290 | } 291 | 292 | .containerMain .containerContent ul li { 293 | font-size: 0.8rem; 294 | } 295 | 296 | .containerMain h1{ 297 | font-size: 1.5rem; 298 | } 299 | 300 | .containerMain .saiba-mais a{ 301 | color: rgb(205, 202, 202); 302 | font-weight: 500; 303 | font-size: 0.8rem; 304 | transition: all .4s; 305 | } 306 | 307 | .contact { 308 | font-size: 0.8rem; 309 | } 310 | 311 | .footer p { 312 | font-weight: 400; 313 | font-size: 0.8rem; 314 | } 315 | } -------------------------------------------------------------------------------- /index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | Roadmap - Front-End 10 | 11 | 12 |
13 | logo-gabriel 14 | 24 | 25 | 26 |
27 |
28 | 29 | 39 | 40 | 41 |
42 |

O que é um Roadmap?

43 |
44 |
45 | roadmap 46 |

47 | Um roadmap, ou roteiro em português, é um plano estratégico que define os passos necessários para alcançar um objetivo específico. No contexto do desenvolvimento de software, um roadmap de front-end é um guia detalhado que descreve as tecnologias e habilidades que um desenvolvedor deve adquirir para se tornar proficiente no desenvolvimento de interfaces de usuário. 48 |

49 |
50 |
51 | Acesse o roadmap de front-end completo. 52 |
53 |
54 |
55 | 56 | 57 |
58 |

HTML

59 |
60 |
61 | HTML Logo 62 |

63 | HTML, ou HyperText Markup Language, é a linguagem padrão para a criação de páginas web. Ela permite estruturar o conteúdo, definir títulos, parágrafos, links, imagens e outros elementos importantes para a construção de uma página web. 64 |

65 |
    66 |
  • Elementos e Tags
    • 67 |
  • Atributos
    • 68 |
  • Formulários
    • 69 |
  • Semântica
    • 70 |
  • SEO Básico
    • 71 |
72 |
73 |
74 | Acesse o roadmap de front-end completo. 75 |
76 |
77 |
78 | 79 | 80 |
81 |

CSS

82 |
83 |
84 | CSS Logo 85 |

86 | CSS, ou Cascading Style Sheets, é a linguagem usada para descrever a apresentação de documentos HTML. CSS controla a aparência visual dos elementos da página, como cores, layout, fontes e espaçamento. 87 |

88 |
    89 |
  • Seletores e Combinadores
    • 90 |
  • Box Model
    • 91 |
  • Flexbox
    • 92 |
  • Grid Layout
    • 93 |
  • Responsividade
    • 94 |
95 |
96 |
97 | Acesse o roadmap de front-end completo. 98 |
99 |
100 |
101 | 102 | 103 |
104 |

Tailwind CSS

105 |
106 |
107 | Tailwind CSS Logo 108 |

109 | Tailwind CSS é um framework CSS utilitário que permite a criação de interfaces de usuário de maneira rápida e eficiente. Com classes utilitárias pré-definidas, é possível construir layouts customizáveis diretamente no HTML. 110 |

111 |
    112 |
  • Configuração
    • 113 |
  • Classes Utilitárias
    • 114 |
  • Customização
    • 115 |
  • Plugins
    • 116 |
  • Melhores Práticas
    • 117 |
118 |
119 |
120 | Acesse o roadmap de front-end completo. 121 |
122 |
123 |
124 | 125 | 126 |
127 |

JavaScript

128 |
129 |
130 | JavaScript Logo 131 |

132 | JavaScript é uma linguagem de programação que permite adicionar interatividade às páginas web. Com JavaScript, é possível criar efeitos dinâmicos, validar formulários, manipular o DOM e fazer requisições assíncronas a servidores. 133 |

134 |
    135 |
  • Sintaxe e Básico
    • 136 |
  • DOM Manipulation
    • 137 |
  • Eventos
    • 138 |
  • Fetch API / AJAX
    • 139 |
  • ES6+ e Modulos
    • 140 |
141 |
142 |
143 | Acesse o roadmap de front-end completo. 144 |
145 |
146 |
147 | 148 | 149 |
150 |

TypeScript

151 |
152 |
153 | TypeScript Logo 154 |

155 | TypeScript é um superset do JavaScript que adiciona tipagem estática à linguagem. Isso ajuda a detectar erros durante o desenvolvimento e facilita a manutenção de grandes bases de código. 156 |

157 |
    158 |
  • Tipos Básicos
    • 159 |
  • Interfaces e Tipos Personalizados
    • 160 |
  • Classes e Herança
    • 161 |
  • Genéricos
    • 162 |
  • Ferramentas e Configuração
    • 163 |
164 |
165 |
166 | Acesse o roadmap de front-end completo. 167 |
168 |
169 |
170 | 171 | 172 |
173 |

React

174 |
175 |
176 | React Logo 177 |

178 | React é uma biblioteca JavaScript para a construção de interfaces de usuário. Criada pelo Facebook, React permite a construção de componentes reutilizáveis que gerenciam seu próprio estado, tornando o desenvolvimento de interfaces mais modular e eficiente. 179 |

180 |
    181 |
  • Componentes e JSX
    • 182 |
  • Props e State
    • 183 |
  • Hooks
    • 184 |
  • Gerenciamento de Estado
    • 185 |
  • Roteamento
    • 186 |
187 |
188 |
189 | Acesse o roadmap de front-end completo. 190 |
191 |
192 |
193 | 194 |
195 | 208 | 209 | 213 | 217 | 218 | 219 | 220 | -------------------------------------------------------------------------------- /js/script.js: -------------------------------------------------------------------------------- 1 | const btnMenu = document.getElementById('btnMenu'); 2 | const menuMobile = document.getElementById('menuMobile'); 3 | menuMobile.style.display = 'none'; 4 | 5 | function clickMenu(){ 6 | if(menuMobile.style.display == 'none'){ 7 | menuMobile.style.display = 'flex'; 8 | menuMobile.style.animation = 'slideLeft 0.6s forwards'; 9 | }else{ 10 | menuMobile.style.animation = 'slideRight 0.6s forwards'; 11 | setTimeout(() => { 12 | menuMobile.style.display = 'none'; 13 | }, 600) 14 | } 15 | } 16 | 17 | btnMenu.addEventListener('click', clickMenu); --------------------------------------------------------------------------------