-
Notifications
You must be signed in to change notification settings - Fork 3
Expand file tree
/
Copy pathindex.html
More file actions
1115 lines (1062 loc) · 66.9 KB
/
Copy pathindex.html
File metadata and controls
1115 lines (1062 loc) · 66.9 KB
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
287
288
289
290
291
292
293
294
295
296
297
298
299
300
301
302
303
304
305
306
307
308
309
310
311
312
313
314
315
316
317
318
319
320
321
322
323
324
325
326
327
328
329
330
331
332
333
334
335
336
337
338
339
340
341
342
343
344
345
346
347
348
349
350
351
352
353
354
355
356
357
358
359
360
361
362
363
364
365
366
367
368
369
370
371
372
373
374
375
376
377
378
379
380
381
382
383
384
385
386
387
388
389
390
391
392
393
394
395
396
397
398
399
400
401
402
403
404
405
406
407
408
409
410
411
412
413
414
415
416
417
418
419
420
421
422
423
424
425
426
427
428
429
430
431
432
433
434
435
436
437
438
439
440
441
442
443
444
445
446
447
448
449
450
451
452
453
454
455
456
457
458
459
460
461
462
463
464
465
466
467
468
469
470
471
472
473
474
475
476
477
478
479
480
481
482
483
484
485
486
487
488
489
490
491
492
493
494
495
496
497
498
499
500
501
502
503
504
505
506
507
508
509
510
511
512
513
514
515
516
517
518
519
520
521
522
523
524
525
526
527
528
529
530
531
532
533
534
535
536
537
538
539
540
541
542
543
544
545
546
547
548
549
550
551
552
553
554
555
556
557
558
559
560
561
562
563
564
565
566
567
568
569
570
571
572
573
574
575
576
577
578
579
580
581
582
583
584
585
586
587
588
589
590
591
592
593
594
595
596
597
598
599
600
601
602
603
604
605
606
607
608
609
610
611
612
613
614
615
616
617
618
619
620
621
622
623
624
625
626
627
628
629
630
631
632
633
634
635
636
637
638
639
640
641
642
643
644
645
646
647
648
649
650
651
652
653
654
655
656
657
658
659
660
661
662
663
664
665
666
667
668
669
670
671
672
673
674
675
676
677
678
679
680
681
682
683
684
685
686
687
688
689
690
691
692
693
694
695
696
697
698
699
700
701
702
703
704
705
706
707
708
709
710
711
712
713
714
715
716
717
718
719
720
721
722
723
724
725
726
727
728
729
730
731
732
733
734
735
736
737
738
739
740
741
742
743
744
745
746
747
748
749
750
751
752
753
754
755
756
757
758
759
760
761
762
763
764
765
766
767
768
769
770
771
772
773
774
775
776
777
778
779
780
781
782
783
784
785
786
787
788
789
790
791
792
793
794
795
796
797
798
799
800
801
802
803
804
805
806
807
808
809
810
811
812
813
814
815
816
817
818
819
820
821
822
823
824
825
826
827
828
829
830
831
832
833
834
835
836
837
838
839
840
841
842
843
844
845
846
847
848
849
850
851
852
853
854
855
856
857
858
859
860
861
862
863
864
865
866
867
868
869
870
871
872
873
874
875
876
877
878
879
880
881
882
883
884
885
886
887
888
889
890
891
892
893
894
895
896
897
898
899
900
901
902
903
904
905
906
907
908
909
910
911
912
913
914
915
916
917
918
919
920
921
922
923
924
925
926
927
928
929
930
931
932
933
934
935
936
937
938
939
940
941
942
943
944
945
946
947
948
949
950
951
952
953
954
955
956
957
958
959
960
961
962
963
964
965
966
967
968
969
970
971
972
973
974
975
976
977
978
979
980
981
982
983
984
985
986
987
988
989
990
991
992
993
994
995
996
997
998
999
1000
<!DOCTYPE html>
<html lang="pt-br">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="styles/root.css">
<link rel="stylesheet" href="styles/index.css">
<link rel="stylesheet" href="styles/mainContent.css">
<link rel="stylesheet" href="styles/collapse.css">
<link rel="stylesheet" href="styles/footer.css">
<title>CSRoadMap</title>
<link rel="shortcut icon" href="images/White/IconeWhite.png" type="image/x-icon" />
</head>
<body>
<a id="Header"></a>
<div class="Header">
<img class="Logo" src="images/White/IconeWhite.png" alt="logo">
<button id="ChangeThemeBTM"></button>
</div>
<div class="AlignThemes None Animate">
<div class="LogoSpace"></div>
<div class="ThemesMenu Flex">
<h1>Themas</h1>
<button id="Light">Claro</button>
<button id="Dark">Escuro</button>
<button id="ColorBlind">Daltônico</button>
</div>
</div>
<div class="Content Center">
<div class="Message Center">
<h1 class="Title">
Facilite a sua formação e <br>
aprendizado com <br> o nosso RoadMap!
</h1>
<span class="Description">
Estudantes da faculdade Dom Helder Camara criaram esse roadmap open-source para ajudar <br> no
aprendizado de quem cursa Ciência da Computação
</span>
<div class="LearningRoads">
<button id="Math" class="RoadButton">Matemática</button>
<button id="Code" class="RoadButton">Programação</button>
</div>
</div>
<div class="MainContent None Animate">
<div class="SubLearningRoads">
<div class="MathRoads">
</div>
<div class="CodeSubLearningRoads None">
<button id="SubWebFront">Front-End</button>
<button id="SubWebBack">Back-End</button>
</div>
</div>
<!-- AREA DOS MODAIS -->
<!-- FRONT -->
<div class="ModalContainer HTML None">
<div class="Modal">
<div class="CollapseHeader">
<h2>HTML (HyperText Markup Language)</h2> <button id="HtmlCloseButton">X</button>
</div>
<div class="CollapseContent">
O HTML é a espinha dorsal de uma página web. Ele fornece a estrutura básica, permitindo que você
defina títulos, parágrafos, listas, links e outros elementos. Utilizando tags HTML, você marca o
conteúdo para que o navegador entenda como apresentá-lo. HTML é estático por natureza, o que
significa que define a estrutura e o conteúdo, mas não lida com interatividade ou estilo.
<br>
<h3>Nível Inicial:</h3>
<br>
<h4>Introdução HTML:</h4>
<ul>
<li>Compreenda a estrutura básica de uma página HTML.</li>
<li>Aprenda sobre tags, elementos e atributos HTML.</li>
<h4>Elementos Básicos:</h4>
<li>Familiarize-se com elementos essenciais como <head>, <body>, <p>,
<h1>-
<h6>, <ul>, <ol>, <li>, <a>,
etc.</li>
<li>Entenda a semântica HTML.</li>
<h4>Formulários:</h4>
<li> Aprenda a criar formulários usando elementos como <form>, <input>,
<textarea>,
<select>, e outros.</li>
<li>Experimente diferentes tipos de entrada e validações.</li>
</ul>
<br>
<h3>Nível Intermediário:</h3>
<br>
<h4>Multimídia:</h4>
<ul>
<li>Inclua imagens com <img> e vídeos com <video></li>
<li>Explore elementos de áudio com <audio>.</li>
<h4> Tabelas e Listas Avançadas:</h4>
<li> Crie tabelas usando <table>,<tr>,<td>, etc.</li>
<li>Utilize listas aninhadas e personalizadas.</li>
<h4>HTML Semântico:</h4>
<li>Compreenda a importância dos elementos semânticos, como <header>,
<nav>,
<main>, <article>, <section>, <footer>, etc.</li>
<li>Utilize esses elementos para estruturar melhor
o
conteúdo.</li>
</ul>
<br>
<h3>Nível Avançado:</h3>
<br>
<h4>Acessibilidade:</h4>
<li>Aprenda sobre boas práticas de acessibilidade.</li>
<li>Utilize atributos como aria-* para melhorar a
acessibilidade.</li>
<h4>Formulários Avançados:</h4>
<li>Explore campos de formulário avançados, como
<fieldset>, <legend>, <input type='data'>, <input type='range'>,
etc.</li>
<h4>Integração com CSS:</h4>
<li>Entenda como estilos CSS podem ser
aplicados aos elementos HTML.</li>
<li> Explore classes, IDs e seletores.</li>
<h4>Meta Tags e SEO:</h4>
<li>Utilize meta tags para melhorar o SEO.</li>
<li>Entenda a importância do atributo alt em
imagens.</li>
<h4> Prática e Projetos:</h4>
<li>Construa páginas web simples para praticar
os conceitos.</li>
<li>Crie formulários funcionais.
Adote a semântica HTML em projetos reais.
</li>
</div>
<div class="CollapseFooter ">
<h2>Playlist com o conteúdo citado acima:</h2>
<a target="_blank"
href=" https://www.youtube.com/watch?v=jgQjeqGRdgA&list=PLHz_AreHm4dkZ9-atkcmcBaMZdmLHft8n&index=2">
Curso em Vídeo </a>
<h3>Sites com o conteúdo citado acima:</h3>
<a target="_blank" href=" https://developer.mozilla.org/en-US/docs/Web/HTML ">
Mozilla Developer Network (MDN) - HTML
</a>
<a target="_blank" href=" https://www.w3schools.com/html/">
W3Schools - HTML</a>
<a target="_blank" href=" https://www.khanacademy.org/computing/computer-programming/html-css ">
Khan Academy – HTML </a>
<a target="_blank" href=" https://www.sololearn.com/Course/HTML/">
SoloLearn - HTML Fundamentals </a>
<a target="_blank"
href=" https://www.coursera.org/learn/html-css-javascript-for-web-developers ">
Coursera - HTML</a>
</div>
</div>
</div>
<div class="ModalContainer CSS None">
<div class="Modal">
<div class="CollapseHeader">
<h2>CSS (Cascading Style Sheets)</h2> <button id="CssCloseButton">X</button>
</div>
<div class="CollapseContent">
O CSS é responsável pela apresentação e pelo estilo de uma página web. Ele permite que você
altere a cor do texto, o plano de fundo, o espaçamento entre elementos, o layout da página e
muito mais. Ao separar a estrutura do conteúdo (HTML) do estilo (CSS), você pode alterar a
aparência de várias páginas com facilidade. CSS é fundamental para criar layouts responsivos e
tornar uma página visualmente atraente.
<br>
<br>
<h3>Nível Inicial:</h3>
<br>
<h4>Entendimento Básico:</h4>
<ul>
<li>Compreenda o que é CSS e seu papel no desenvolvimento web</li>
<li>Familiarize-se com seletores, propriedades e valores básicos.</li>
<h4>Estilo de Texto e Cores:</h4>
<li>Aprenda a estilizar texto usando propriedades como <strong>
font-family</strong>,<strong> font-size</strong>, <strong>color</strong> e
<strong>text-align</strong>.
</li>
<li>Experimente com cores usando <strong>backgorund-color</strong> e <strong>
color.</strong></li>
<h4>Layout Básico:</h4>
<li>Explore propriedades de layout, como <strong>margin</strong> , <strong>
padding</strong>, <strong>display </strong>e <strong> float</strong>
</li>
<li>Compreenda a diferença entre <strong> block</strong>, inline e
<strong>inline-block</strong> elements.
</li>
</ul>
<br>
<h3>Nível Intermediário:</h3>
<br>
<h4>Box Model:</h4>
<ul>
<li>Entenda o modelo de caixa <strong> (box model)</strong> e como <strong> margin</strong>,
<strong>border</strong> e <strong>padding</strong>
afetam o layout.
</li>
<li>Utilize <strong>box-sizing</strong> para controlar o dimensionamento da caixa.</li>
<h4>Flexbox e Grid:</h4>
<li>Domine as propriedades Flexbox para criar layouts flexíveis.</li>
<li>Aprenda a usar o sistema de grid para layouts mais complexos.</li>
<h4>Responsividade:</h4>
<li>Introduza técnicas de design responsivo usando media queries.</li>
<li>Faça layouts que se ajustem a diferentes tamanhos de tela.</li>
</ul>
<br>
<h3>Nível Avançado:</h3>
<br>
<h4>Transições e Animações:</h4>
<li>Experimente com transições e animações CSS para adicionar dinamismo.</li>
<li>Utilize <strong>@keyframes</strong> para criar animações personalizadas</li>
<li>Utilize propriedades como <strong>transform</strong> e <strong> perspective</strong>.</li>
<h4>Pré-processadores CSS:</h4>
<li>Introduza-se em pré-processadores CSS como Sass ou Less.</li>
<li>Aprenda sobre variáveis, mixins e aninhamento.</li>
<h4>Frameworks CSS:</h4>
<li>Familiarize-se com frameworks CSS populares, como Bootstrap ou Tailwind CSS.</li>
<li>Entenda como usar esses frameworks para agilizar o desenvolvimento.</li>
<h4>Prática e Projetos:</h4>
<li>Aplique seus conhecimentos através de projetos práticos.</li>
<li>Refatore e otimize seu código à medida que ganha experiência</li>
<li>Participe de comunidades online para aprender com outros desenvolvedores e obter feedback.
</li>
</div>
<div class="CollapseFooter">
<h2> Playlist com o conteúdo citado acima:</h2>
<a target="_blank"
href=" https://www.youtube.com/watch?v=byqhpuVpvEI&list=PLHz_AreHm4dkZ9-atkcmcBaMZdmLHft8n&index=38">
Curso em video em </a>
<h3>Sites com o conteúdo citado acima:</h3>
<a target="_blank" href=" https://developer.mozilla.org/en-US/docs/Web/CSS "> MDN - CSS </a>
<a target="_blank" href=" https://www.w3schools.com/css/"> W3Schools - CSS </a>
<a target="_blank" href=" https://www.sololearn.com/Course/CSS/"> SoloLearn - CSS</a>
<a target="_blank" href=" https://www.codecademy.com/learn/learn-css "> Codecademy - CSS </a>
</div>
</div>
</div>
<div class="ModalContainer JS None">
<div class="Modal">
<div class="CollapseHeader">
<h2>JavaScript</h2> <button id="JsCloseButton">X</button>
</div>
<div class="CollapseContent">
JavaScript é a linguagem de programação que adiciona dinamismo e interatividade às páginas web.
Ele permite que você manipule o conteúdo HTML em tempo real, responda a eventos do usuário (como
cliques e movimentos do mouse) e faça solicitações a servidores para obter ou enviar dados.
JavaScript é crucial para criar experiências interativas, como carregamento de conteúdo
dinâmico, validação de formulários e animações.
<br>
<br>
<h3>Nível Inicial:</h3>
<br>
<h4>Introdução ao JavaScript:</h4>
<ul>
<li>Compreenda o que é JavaScript e seu papel no desenvolvimento web.</li>
<li>Aprenda a incluir scripts em páginas HTML</li>
<h4>Variáveis e Tipos de Dados:</h4>
<li>Declare variáveis e compreenda os diferentes tipos de dados.</li>
<li>Explore strings, números, booleanos e arrays.</li>
<h4>Operadores e Expressões:</h4>
<li>Utilize operadores aritméticos, lógicos e de comparação.</li>
<li>Crie expressões condicionais com <strong>if, else if e else</strong>
</li>
</ul>
<br>
<h3>Nível Intermediário:</h3>
<br>
<h4>Estruturas de Controle de Fluxo:</h4>
<ul>
<li>Utilize loops <strong>for, while e do-while.</strong>
</li>
<li>Compreenda como usar <strong> break</strong> e <strong>continue</strong>.</li>
<h4>Funções:</h4>
<li>Declare funções simples e compreenda escopo.</li>
<li>Passe parâmetros para funções e retorne valores.</li>
<h4>Objetos e Arrays:</h4>
<li>Crie objetos e arrays.</li>
<li>Acesse propriedades de objetos e elementos de arrays..</li>
</ul>
<br>
<h3>Nível Avançado:</h3>
<br>
<h4>Manipulação do DOM:</h4>
<li>Entenda o Document Object Model (DOM).</li>
<li>Manipule elementos HTML usando JavaScript.</li>
<h4>Eventos:</h4>
<li>Responda a eventos do usuário (cliques, teclas pressionadas, etc.). </li>
<li>Adicione e remova event listeners</li>
<h4>Ajax e Requisições HTTP:</h4>
<li>Realize solicitações HTTP assíncronas com XMLHttpRequest ou Fetch API.</li>
<li>Compreenda o conceito de Promises</li>
<h4>Prática e Projetos:</h4>
<li>Construa pequenos scripts para manipular elementos na página.</li>
<li>Crie formulários interativos e valide entradas com JavaScript</li>
<li>Desenvolva jogos simples para praticar lógica de programação.
</li>
</div>
<div class="CollapseFooter">
<h2> Playlist com o conteúdo citado acima: </h2>
<a href=" https://www.youtube.com/watch?v=BXqUH86F-kA&list=PLntvgXM11X6pi7mW0O4ZmfUI1xDSIbmTm ">Curso
em video</a>
<h3>Sites com o conteúdo citado acima:</h3>
<a href=" https://eloquentjavascript.net/"> Eloquent JavaScript by Marijn Haverbeke </a>
<a href=" https://javascript.info/"> JavaScript.info </a>
<a href=" https://github.com/getify/You-Dont-Know-JS "> You Don't Know JS (book series) by Kyle
Simpson </a>
<a href=" https://netninja.dev/p/modern-javascript-tutorial "> The Net Ninja - Modern JavaScript
Tutorial </a>
<a href=" https://javascript.info "> JavaScriptInfo </a>
</div>
</div>
</div>
<div class="ModalContainer REACT None">
<div class="Modal">
<div class="CollapseHeader">
<h2>REACT</h2> <button id="ReactCloseButton">X</button>
</div>
<div class="CollapseContent">
React é uma biblioteca JavaScript usada para construir interfaces de usuário interativas.
Baseia-se na criação de componentes reutilizáveis, cada um responsável por uma parte específica
da interface. Utiliza um Virtual DOM para otimizar atualizações de interface, comparando e
atualizando apenas as partes afetadas. JSX é uma extensão de JavaScript usada para escrever
código de maneira mais declarativa.
<br>
<br>
<h3>Nível Inicial:</h3>
<br>
<h4>JavaScript Moderno:</h4>
<ul>
<li>Compreender os conceitos fundamentais do ECMAScript 6 (ES6).</li>
<li>Familiarizar-se com Arrow Functions, Destructuring, Classes e Módulos.
HTML e CSS:
</li>
<li>Ter uma compreensão sólida de HTML e CSS, já que React frequentemente é utilizado em
conjunto com essas tecnologias.
</li>
<li>DOM (Document Object Model): </li>
<li>Entender como o DOM funciona e como o React interage com ele.</li>
<li>Aprender sobre componentes, props e state</li>
<li>Criar componentes simples para entender a estrutura básica do React.</li>
<li>Trabalhar com eventos no React e entender como lidar com interações do usuário.</li>
<h4>Listas e Chaves:</h4>
<li>Compreender como renderizar listas de elementos em React.</li>
<li>Entender a importância das chaves (keys).</li>
<li>Aprender a lidar com formulários e controle de componentes em React.</li>
<li>Compreender os métodos do ciclo de vida dos componentes em React (componentDidMount,
componentDidUpdate, componentWillUnmount, etc.)..</li>
</ul>
<br>
<h3>Nível Intermediário:</h3>
<br>
<h4>Context API:</h4>
<ul>
<li>Entender e utilizar o Context API para gerenciar o estado em aplicações React mais
complexas.
</li>
<li>Aprender o básico do Redux para gerenciar o estado de forma mais escalável.</li>
<li>Compreender conceitos como actions, reducers e store.</li>
</ul>
<br>
<h3>Nível Avançado:</h3>
<br>
<h4>React Router:</h4>
<li>Utilizar o React Router para a navegação entre páginas em aplicações React de página única
(SPA).</li>
<li>Compreender como os hooks substituem o uso de classes em componentes funcionais.</li>
<li>Dominar hooks como useState, useEffect, useContext, entre outros.</li>
<li>Compreender como os hooks substituem o uso de classes em componentes funcionais</li>
<li>Compreender como os hooks substituem o uso de classes em componentes funcionais</li>
<h4>Testes em React:</h4>
<li>Aprender a escrever testes para componentes React usando bibliotecas como Jest e React
Testing Library.</li>
<li>Server-Side Rendering (SSR) e Static Site Generation (SSG):</li>
<h4>Compreender como implementar SSR e SSG para melhorar o desempenho e a SEO.</h4>
<li>Aprender a integrar GraphQL em aplicações React para uma comunicação eficiente com o
servidor.</li>
<h4>Webpack e Babel:</h4>
<li>Compreender o papel do Webpack e Babel no desenvolvimento React.</li>
<li>Utilizar o Storybook para desenvolver componentes isolados e documentação.</li>
<li>Explorar o Next.js para construção de aplicações React escaláveis e otimizadas.</li>
</div>
<div class="CollapseFooter">
<h2> Playlist com o conteúdo citado acima: </h2>
<a href=" https://www.youtube.com/watch?v=FXqX7oof0I4&list=PLnDvRpP8BneyVA0SZ2okm-QBojomniQVO ">
Curso em video REACT</a>
<h3>Sites com o conteúdo citado acima:</h3>
<a href=" https://reactjs.org/">Redux</a>
<a href=" https://egghead.io/browse/libraries/react "> Egghead - React Courses </a>
<a
href=" https://developer.mozilla.org/en-US/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/React_getting_started">
MDN Web Docs - React </a>
</div>
</div>
</div>
<!-- ACABA FRONT -->
<!-- BACK -->
<div class="ModalContainer PHYTON None">
<div class="Modal">
<div class="CollapseHeader">
<h2>Python</h2> <button id="PhytonCloseButton">X</button>
</div>
<div class="CollapseContent">
Python é uma linguagem de programação de alto nível, fácil de ler e escrever. É conhecida por
sua simplicidade e produtividade, tornando-a uma escolha popular para iniciantes em programação.
Python é uma linguagem interpretada, o que significa que não precisa ser compilada antes da
execução. É amplamente utilizada em desenvolvimento web, ciência de dados, automação e
inteligência artificial.
<br>
<br>
<h3>Nível Inicial:</h3>
<br>
<h4>Instalação e Configuração:</h4>
<ul>
<li>Instale o Python em seu sistema e configure o ambiente.</li>
<li>Compreenda a diferença entre Python 2 e Python 3
</li>
<h4>Sintaxe Básica:</h4>
<li>Aprenda a estrutura básica de um script Python</li>
<li>Explore variáveis, tipos de dados e operadores.</li>
<h4>Sintaxe Básica:</h4>
<li>Utilize estruturas de controle (if, else, elif, for, while).</li>
<li>Trabalhe com loops e iteração.</li>
</ul>
<br>
<h3>Nível Intermediário:</h3>
<br>
<h4>Estruturas de Dados:</h4>
<ul>
<li>Compreenda listas, tuplas, dicionários e conjuntos.
</li>
<li>Manipule essas estruturas de dados de forma eficiente.</li>
<h4>Funções e Módulos:</h4>
<li>Declare funções e compreenda escopo.</li>
<li>Organize o código em módulos reutilizáveis.</li>
<h4>Manipulação de Arquivos:</h4>
<li>Aprenda a ler e escrever em arquivos.</li>
<li>Compreenda operações de entrada e saída.</li>
</ul>
<br>
<h3>Nível Avançado:</h3>
<br>
<h4>Programação Orientada a Objetos (OOP):</h4>
<li>Compreenda os princípios de OOP em Python.</li>
<li>Crie classes, objetos, métodos e herança</li>
<h4>Bibliotecas e Frameworks:</h4>
<li>Familiarize-se com bibliotecas populares como NumPy (para computação numérica) e pandas
(para manipulação de dados).</li>
<li>Explore frameworks web como Flask ou Django.</li>
<h4>Trabalho com APIs e Dados Web:</h4>
<li>Realize chamadas a APIs usando a biblioteca requests.</li>
<li>Análise de dados JSON e XML.</li>
<h4>Prática e Projetos:</h4>
<li>Resolva problemas de algoritmos usando Python.</li>
<li>Desenvolva scripts para automação de tarefas.</li>
<li>Participe em projetos de código aberto ou contribua para a comunidade Python.</li>
</div>
<div class="CollapseFooter">
<h2> Playlist com o conteúdo citado acima: </h2>
<a href=" https://www.youtube.com/watch?v=S9uPNppGsGo&list=PLvE-ZAFRgX8hnECDn1v9HNTI71veL3oW0">
Curso em video python</a>
<h3>Sites com o conteúdo citado acima:</h3>
<a href=" https://docs.python.org/3/">Python.org - Python Documentation</a>
<a href=" https://www.w3schools.com/python/">w3schools - Python Tutorial</a>
<a href=" https://www.coursera.org/specializations/python">Coursera - Python for Everybody
Specialization</a>
</div>
</div>
</div>
<div class="ModalContainer JAVA None">
<div class="Modal">
<div class="CollapseHeader">
<h2>Java</h2><button id="JavaCloseButton">X</button>
</div>
<div class="CollapseContent">
Java é uma linguagem de programação de propósito geral que se destaca por sua portabilidade,
sendo projetada para ser independente de plataforma. Isso significa que os programas Java podem
ser executados em qualquer dispositivo que tenha uma máquina virtual Java (JVM). Java é
conhecida por ser orientada a objetos, o que incentiva o desenvolvimento modular e reutilizável
de software.
<br>
<br>
<h3>Nível Inicial:</h3>
<br>
<h4>Configuração do Ambiente:</h4>
<ul>
<li>Instale e configure o ambiente de desenvolvimento Java.</li>
<li>Compreenda o processo de compilação e execução
</li>
<h4>Sintaxe Básica:</h4>
<li>Aprenda a estrutura básica de uma classe Java</li>
<li>Explore variáveis, tipos de dados e operadores.</li>
<h4>Controle de Fluxo:</h4>
<li>Utilize estruturas de controle (if, else, switch).</li>
<li>Trabalhe com loops (for, while, do-while).</li>
</ul>
<br>
<h3>Nível Intermediário:</h3>
<br>
<h4>Orientação a Objetos:</h4>
<ul>
<li>Compreenda os conceitos fundamentais de OOP (Programação Orientada a Objetos).
</li>
<li>Crie classes, objetos, métodos e herança.
</li>
<h4>Coleções e Estruturas de Dados:</h4>
<li>Explore coleções como Listas, Sets e Maps.</li>
<li>Compreenda arrays multidimensionais.</li>
<h4>Manipulação de Arquivos e Exceções:</h4>
<li>Aprenda a ler e escrever em arquivos.</li>
<li>Compreenda tratamento de exceções.</li>
</ul>
<br>
<h3>Nível Avançado:</h3>
<br>
<h4>Threads e Concorrência:</h4>
<li>Introduza programação concorrente com threads.</li>
<li>Compreenda sincronização e threads seguras.</li>
<h4>JavaFX (Interface Gráfica):</h4>
<li>Aprenda a criar interfaces gráficas usando JavaFX.</li>
<li>Explore eventos e interações do usuário.</li>
<h4>Frameworks e Bibliotecas:</h4>
<li>Familiarize-se com frameworks populares como Spring.</li>
<li>Explore bibliotecas úteis para tarefas específicas.</li>
<h4>Prática e Projetos:</h4>
<li>Desenvolva aplicações simples para praticar a sintaxe..</li>
<li>Construa projetos que utilizem conceitos de OOP.</li>
<li>Participe em hackathons ou contribua para projetos open source em Java.</li>
</div>
<div class="CollapseFooter">
<h2> Playlist com o conteúdo citado acima: </h2>
<a href=" https://www.youtube.com/watch?v=sTX0UEplF54&list=PLHz_AreHm4dkI2ZdjTwZA4mPMxWTfNSpR ">Curso
em video java</a>
<h3>Sites com o conteúdo citado acima:</h3>
<a href=" https://docs.oracle.com/javase/tutorial/"> Oracle Java Tutorials </a>
<a href=" https://www.codecademy.com/learn/learn-java "> Codecademy - Learn Java </a>
<a href=" https://www.amazon.com/Java-Complete-Reference-Eleventh/dp/1260440230"> Java
Programming - Java: The Complete Reference </a>
</div>
</div>
</div>
<div class="ModalContainer C None">
<div class="Modal">
<div class="CollapseHeader">
<h2>C</h2> <button id="cCloseButton">X</button>
</div>
<div class="CollapseContent">
C é uma linguagem de programação de propósito geral que foi desenvolvida originalmente para
implementar o sistema operacional Unix. É conhecida por sua eficiência e controle direto sobre o
hardware do computador. C é uma linguagem de baixo nível, o que significa que oferecem muita
flexibilidade e controle, mas requer mais atenção aos detalhes em comparação com linguagens de
alto nível.
<br>
<br>
<h3>Nível Inicial:</h3>
<br>
<h4>Sintaxe Básica:</h4>
<ul>
<li>Compreenda a estrutura básica de um programa em C.</li>
<li>Aprenda sobre variáveis, tipos de dados e operadores.
</li>
<h4>Controle de Fluxo:</h4>
<li>Utilize estruturas de controle como if, else, switch.</li>
<li>Entenda e pratique loops (for, while, do-while).</li>
<h4>Funções:</h4>
<li>Declare funções e compreenda os conceitos de escopo.</li>
<li>Passe parâmetros para funções e retorne valores.</li>
</ul>
<br>
<h3>Nível Intermediário:</h3>
<br>
<h4>Arrays e Strings:</h4>
<ul>
<li>Trabalhe com arrays e strings em C.
</li>
<li>Compreenda ponteiros e a relação com arrays.
</li>
<h4>Estruturas de Dados Simples:</h4>
<li>Introduza estruturas (struct) para organizar dados relacionados.</li>
<li>Compreenda a manipulação de dados com ponteiros.</li>
<h4>Memória Dinâmica:</h4>
<li>Utilize alocação dinâmica de memória (malloc, free, realloc).</li>
<li>Compreenda a importância de liberar a memória adequadamente.</li>
</ul>
<br>
<h3>Nível Avançado:</h3>
<br>
<h4>Apontadores e Ponteiros para Funções:</h4>
<li>Explore apontadores em profundidade.</li>
<li>Compreenda ponteiros para funções e sua aplicação.</li>
<h4>Manipulação de Arquivos:</h4>
<li>Aprenda a ler e escrever em arquivos em C.</li>
<li>Compreenda operações de entrada e saída (stdio.h).</li>
<h4>Threads e Concorrência:</h4>
<li>Introduza programação concorrente com threads.</li>
<li>Compreenda sincronização e semáforos.</li>
<h4>Prática e Projetos:</h4>
<li>Implemente algoritmos clássicos em C.</li>
<li>Desenvolva projetos pequenos para consolidar conceitos.</li>
<li>Participe em desafios de programação.</li>
</div>
<div class="CollapseFooter">
<h2> Playlist com o conteúdo citado acima: </h2>
<a href=" https://www.youtube.com/watch?v=2w8GYzBjNj8&list=PLpaKFn4Q4GMOBAeqC1S5_Fna_Y5XaOQS2">Curso
em video C</a>
<h3>Sites com o conteúdo citado acima:</h3>
<a href=" https://www.geeksforgeeks.org/c-programming-language/"> GeeksforGeeks - C Programming
Language </a>
<a href=" https://www.learn-c.org/"> Learn-C.org </a>
<a href=" https://www.amazon.com/C-Programming-Language-2nd/dp/0131103628"> C Programming - The
C Programming Language Book </a>
</div>
</div>
</div>
<div class="ModalContainer PHP None">
<div class="Modal">
<div class="CollapseHeader">
<h2>PHP</h2> <button id="PhpCloseButton">X</button>
</div>
<div class="CollapseContent">
O PHP é uma linguagem de programação server-side amplamente utilizada para desenvolvimento web.
Originalmente, a sigla PHP significava "Personal Home Page," mas agora é reconhecida como
"Hypertext Preprocessor," indicando seu papel principal na pré-processamento de hipertexto para
a web.
<br>
<br>
<h3>Nível Inicial:</h3>
<br>
<h4>Sintaxe Básica e Estrutura:</h4>
<ul>
<li>Compreender a sintaxe fundamental do PHP.
</li>
<li>Trabalhar com variáveis, tipos de dados e operadores.
</li>
<h4>Controle de Fluxo:</h4>
<li>Utilizar estruturas condicionais (if, else) e loops (for, while).</li>
<h4>Funções e variáveis:</h4>
<li>Criar e chamar funções.</li>
<li>Compreender escopo de variáveis</li>
<li>Entender as diferenças entre arrays associativos e indexados.</li>
</ul>
<br>
<h3>Nível Intermediário:</h3>
<br>
<h4>Formulários e Superglobais:</h4>
<ul>
<li>Processar dados de formulários em PHP.
</li>
<li>Compreender o uso de variáveis superglobais como $_GET e $_POST.
</li>
<h4>Trabalhar com Banco de Dados (MySQL, por exemplo):</h4>
<li>Conectar-se a um banco de dados usando MySQLi ou PDO.</li>
<li>Realizar operações CRUD (Create, Read, Update, Delete).</li>
<h4>Tratamento de Erros e Exceções:</h4>
<li>Implementar tratamento de erros.</li>
<li>Utilizar exceções para lidar com situações inesperadas.</li>
</ul>
<br>
<h3>Nível Avançado:</h3>
<br>
<h4>Programação Orientada a Objetos (OOP):</h4>
<li>Compreender os conceitos de OOP em PHP.</li>
<li>Criar classes, métodos e propriedades</li>
<h4>Frameworks PHP (Laravel, Symfony):</h4>
<li>Explorar frameworks populares como Laravel ou Symfony</li>
<li>Aprender sobre MVC (Model-View-Controller) e práticas avançadas de desenvolvimento.</li>
<h4>APIs RESTful:</h4>
<li>Compreender o conceito de APIs RESTful.</li>
<li>Construir uma API simples usando PHP</li>
<br>
<h3>Desenvolvimento Web:</h3>
<br>
<h4>Template Engines (Twig, por exemplo):</h4>
<li>Utilizar template engines para separar a lógica de negócios da apresentação.</li>
<li>Segurança em PHP:</li>
<li>Aplicar boas práticas de segurança, como validação de entrada, prevenção de SQL injection
e XSS.</li>
<h4>Prática e Projetos:</h4>
<li>Implemente algoritmos clássicos em PHP.</li>
<li>Desenvolva projetos pequenos para consolidar conceitos.</li>
<li>Participe em desafios de programação.</li>
</div>
<div class="CollapseFooter">
<h2> Playlist com o conteúdo citado acima: </h2>
<a href=" https://www.youtube.com/watch?v=S9uPNppGsGo&list=PLvE-ZAFRgX8hnECDn1v9HNTI71veL3oW0">Curso
em video php</a>
<h3>Sites com o conteúdo citado acima:</h3>
<a href=" https://www.php.net/"> php net</a>
<a href="https://www.w3schools.com/php/"> W3Schools - PHP </a>
<a href=" https://www.tutorialspoint.com/php/index.htm"> TutorialsPoint - PHP </a>
</div>
</div>
</div>
<!-- ACABA BACK -->
<!-- MAT -->
<div class="ModalContainer GAAL None">
<div class="Modal">
<div class="CollapseHeader">
<h2>Geometria Analítica e Algebra Linear (GAAL)</h2> <button id="GaalCloseButton">X</button>
</div>
<div class="CollapseContent">
A Geometria Analítica e a Álgebra Linear são duas disciplinas fundamentais na matemática que se
complementam e desempenham papéis cruciais em diversas áreas. A Geometria Analítica utiliza
conceitos da álgebra para estudar propriedades geométricas por meio de coordenadas, permitindo a
representação e análise de figuras geométricas no plano ou no espaço. Isso é alcançado ao
associar pontos a pares (ou trios) de números, o que facilita a formulação de equações e a
resolução de problemas geométricos usando métodos algébricos. Por outro lado, a Álgebra Linear
concentra-se no estudo de espaços vetoriais e transformações lineares, utilizando conceitos como
vetores e matrizes. Essas ferramentas são essenciais para modelar e resolver sistemas de
equações lineares, além de terem aplicações extensivas em diversas disciplinas, como física,
estatística, ciência da computação e engenharia. Juntas, Geometria Analítica e Álgebra Linear
proporcionam uma poderosa estrutura matemática para analisar e entender fenômenos geométricos e
sistemas lineares de forma precisa e eficaz.
<br>
<br>
<h4> Coordenadas Cartesianas: </h4>
<br>
<ul>
<li> Compreender o sistema de coordenadas cartesianas bidimensional e tridimensional. </li>
<li> Representar pontos, retas e planos no espaço. </li>
<h4> Vetores no Plano e no Espaço :</h4>
<li> Entender a definição e propriedades básicas dos vetores. </li>
<li> Realizar operações vetoriais como soma, subtração e multiplicação por escalar. </li>
<h4> Produtos Vetoriais e Escalares :</h4>
<li> Compreender as definições e aplicações dos produtos vetoriais e escalares. </li>
<li> Utilizar esses produtos em contextos geométricos e físicos. </li>
<h4> Equações da Reta e do Plano: </h4>
<li> Derivar e trabalhar com equações paramétricas e simétricas de retas. </li>
<li> Compreender as formas geral e paramétrica das equações de planos. </li>
</ul>
<br>
<h3> Álgebra Linear </h3>
<h4> Matrizes e Operações Matriciais: </h4>
<br>
<ul>
<li> Definir matrizes e realizar operações como adição, subtração e multiplicação por
escalar. </li>
<li> Entender a multiplicação de matrizes. </li>
<h4> Determinantes: </h4>
<li> Compreender a definição de determinante e suas propriedades. </li>
<li> Calcular determinantes para matrizes de ordem 2 e 3. </li>
<h4> Sistemas Lineares: </h4>
<li> Resolver sistemas lineares usando métodos como eliminação de Gauss e matriz inversa.
</li>
<li> Interpretar geometricamente a solução de sistemas lineares. </li>
<h4> Espaço Vetorial: </h4>
<li> Entender as propriedades de espaços vetoriais. </li>
<li> Identificar subespaços vetoriais. </li>
<h4> Transformações Lineares: </h4>
<li> Compreender transformações lineares e suas propriedades. </li>
<li> Representar transformações lineares por matrizes. </li>
<h4> Diagonalização: </h4>
<li> Entender o processo de diagonalização de uma matriz. </li>
<li> Aplicar diagonalização para simplificar cálculos em álgebra linear. </li>
</ul>
<h3> Tópicos Avançados </h3>
<br>
<h4> Autovalores e Autovetores: </h4>
<li> Compreender o significado e as aplicações de autovalores e autovetores. </li>
<li> Calcular autovalores e autovetores de uma matriz. </li>
<h4> Formas Canônicas: </h4>
<li> Explorar formas canônicas como a forma de Jordan. </li>
<li> Entender a importância dessas formas na simplificação de cálculos. </li>
</div>
<div class="CollapseFooter">
<h2> Playlist com o conteúdo citado acima: </h2>
<a href=" https://www.youtube.com/watch?v=3ZIe8ZApk7s&list=PL_7But9yaahhHQ92FUtOJvczX6TUkpwYs "
target="_blank">GAAL gratuito</a>
</div>
</div>
</div>
<div class="ModalContainer DISCRETA None">
<div class="Modal">
<div class="CollapseHeader">
<h2>Matemática Discreta</h2> <button id="DiscretaCloseButton">X</button>
</div>
<div class="CollapseContent">
A Matemática Discreta é um ramo da matemática que lida com estruturas e conceitos que são
distintos e separados, ao contrário da Matemática Contínua, que abrange conceitos como cálculo e
análise. Ela engloba temas como teoria dos conjuntos, lógica matemática, teoria dos grafos,
combinatória e álgebra booleana. A Matemática Discreta é essencial em diversas áreas da ciência
da computação, pois fornece ferramentas conceituais e teóricas para modelar e resolver problemas
em sistemas discretos, como algoritmos, estruturas de dados e teoria da computação. Além disso,
desempenha um papel crucial na construção de fundamentos para a criptografia, teoria da
informação e design de circuitos digitais. A abordagem discreta permite analisar situações
específicas e finitas, tornando-se uma ferramenta valiosa para resolver problemas práticos em
computação e outras disciplinas relacionadas.
<br>
<br>
<h3> Lógica Proposicional: </h3>
<ul>
<li> Compreender proposições e conectivos lógicos. </li>
<li> Construir tabelas-verdade e simplificar expressões lógicas. </li>
<h4> Lógica de Predicados: </h4>
<li> Introdução aos quantificadores existenciais e universais. </li>
<li> Traduzir sentenças para lógica de predicados. </li>
<h4> Conjuntos e Operações: </h4>
<li> Entender a definição de conjuntos. </li>
<li> Realizar operações de união, interseção e diferença. </li>
<h4> Diagramas de Venn: </h4>
<li> Representar conjuntos visualmente usando diagramas de Venn. </li>
<br>
<h3> Teoria dos Números: </h3>
<br>
<h4> Divisibilidade e Máximo Comum Divisor :</h4>
<li> Compreender conceitos fundamentais de teoria dos números. </li>
<li> Aplicar o algoritmo de Euclides para calcular o MCD. </li>
<h4> Congruências: </h4>
<li> Explorar a aritmética modular e resolver congruências lineares. </li>
<h4> Álgebra Booleana e Circuitos Lógicos </h4>
<li> Entender a relação entre álgebra booleana e portas lógicas. </li>
<li> Projetar e simplificar circuitos lógicos. </li>
<h4> Grafos e Suas Representações: </h4>
<li> Introdução aos conceitos de grafos, vértices e arestas. </li>
<li> Representar grafos por meio de matrizes de adjacência e listas de adjacência. </li>
<h4> Caminhos e Circuitos: </h4>
<li> Entender caminhos, circuitos e ciclos em grafos. </li>
<li> Aplicar algoritmos para encontrar caminhos e ciclos. </li>
<h4> Árvores: </h4>
<li> Compreender árvores como grafos especiais. </li>
<li> Explorar propriedades e tipos de árvores. </li>
<br>
<h3> Combinatória: </h3>
<br>
<h4> Princípio Fundamental da Contagem: </h4>
<li> Utilizar o princípio fundamental da contagem para contar possibilidades. </li>
<h4> Permutações e Combinações: </h4>
<li> Compreender e aplicar fórmulas para permutações e combinações. </li>
</ul>
</div>
<div class="CollapseFooter">
<h2> Playlist com o conteúdo citado acima: </h2>
<a href=" https://www.youtube.com/watch?v=QE6ruiq632o&list=PLrOyM49ctTx-HWypJVvn_zMO1o7oOAfVx "
target="_blank">Mat Discreta gratuito </a>
</div>
</div>
</div>
<div class="ModalContainer C1 None">
<div class="Modal">
<div class="CollapseHeader">
<h2>Cálculo I</h2> <button id="c1CloseButton">X</button>
</div>
<div class="CollapseContent">
O Cálculo I é uma disciplina fundamental na matemática que se concentra no estudo de conceitos
relacionados a taxas de mudança e acumulação, especialmente aplicados a funções reais de uma
variável. Esse campo abrange tópicos como limites, derivadas e integrais. Limites são utilizados
para analisar o comportamento de funções à medida que a variável se aproxima de um determinado
valor. As derivadas, por sua vez, representam taxas instantâneas de variação, sendo cruciais
para entender a inclinação e concavidade de curvas. As integrais, por outro lado, descrevem a
acumulação de quantidades ao longo de um intervalo, fornecendo ferramentas poderosas para
calcular áreas sob curvas e resolver problemas de acumulação. O Cálculo I é essencial em
diversas disciplinas, como física, engenharia, economia e ciências computacionais, sendo a base
para compreender fenômenos variáveis e modelar situações dinâmicas. Essa disciplina é o ponto de
partida para uma compreensão mais profunda e avançada do cálculo em cursos subsequentes.
<br>
<br>
<h4> Números e Operações Básicas: </h4>
<ul>
<li> Revisar operações fundamentais com números reais. </li>
<li> Entender propriedades de adição, subtração, multiplicação e divisão. </li>
<h4> Funções e Gráficos: </h4>
<li> Compreender o conceito de função. </li>
<li> Representar e interpretar gráficos de funções elementares. </li>
<h4> Limite e Continuidade: </h4>
<li> Introdução ao conceito de limite. </li>
<li> Compreender a continuidade de funções em pontos específicos. </li>
</ul>
<br>
<h3> Derivadas e Aplicações: </h3>
<br>
<ul>
<li> Definir derivadas e aplicar regras de derivação para funções polinomiais e
exponenciais. </li>
<li> Entender a interpretação geométrica da derivada. </li>
<h4> Derivadas de Funções Trigonométricas: </h4>
<li> Calcular derivadas de funções trigonométricas. </li>
<li> Aplicar identidades trigonométricas na diferenciação. </li>
<h4> Aplicações da Derivada: </h4>
<li> Resolver problemas de taxa de variação, otimização e análise de gráficos utilizando
derivadas. </li>
<li> Entender a relação entre derivada e inclinação da tangente. </li>
</ul>
</div>
<div class="CollapseFooter">
<h2> Playlist com o conteúdo citado acima: </h2>
<a href=" https://www.youtube.com/watch?v=jQI0bsCtdws&list=PLEfwqyY2ox86LhxKybOY3_IG-7R5herLC "
target="_blank">Cálculo I gratuito</a>
</div>
</div>
</div>
<!-- ACABA MAT -->
<!-- AQUI TERMINA AREA DOS MODAIS -->
<!-- AQUI COMEÇA A ÁREA DOS CARDS -->
<!-- WEB CARDS -->
<hr class="CardLine None">
<!-- FRONT -->
<div class="Cards WebFrontCards None Animate">
<div id="Html" class="Card">
<div class="BackGroundCard">
<img src="images/White/HTMLCardBlack.jpg" alt="HTML5-Image" id="HTMLCard">
</div>
<img src="images/White/HTMLTitleBlack.jpg" alt="HTML5-Title" class="TitleCard" id="HTMLTitle">
</div>
<div id="Css" class="Card">
<div class="BackGroundCard">
<img src="images/White/CSSCardBlack.jpg" alt="CSS-Image" id="CSSCard">
</div>
<img src="images/White/CSSTitleBlack.jpg" alt="CSS-Title" class="TitleCard" id="CSSTitle">
</div>
<div id="Js" class="Card">
<div class="BackGroundCard">
<img src="images/White/JSCardBlack.jpg" alt="JS-Image" class="JSCard">
</div>
<img src="images/White/JSTitleBlack.jpg" alt="JS-Title" class="TitleCard JSTitle">
</div>
<div id="React" class="Card">
<div class="BackGroundCard">
<img src="images/White/ReactCardBlack.jpg" alt="REACT-Image" id="ReactCard">
</div>
<img src="images/White/ReactTitleBlack.jpg" alt="REACT-Title" class="TitleCard" id="ReactTitle">
</div>
</div>
<!-- END FRONT -->
<!-- BACK -->
<div class="Cards WebBackCards None Animate">
<div id="Phyton" class="Card">
<div class="BackGroundCard">
<img src="images/White/PythonCardBlack.jpg" alt="PYTHON-Image" id="PythonCard">
</div>
<img src="images/White/PythonTitleBlack.jpg" alt="PYTHON-Title" class="TitleCard" id="PythonTitle">
</div>
<div id="Java" class="Card">
<div class="BackGroundCard">
<img src="images/White/JavaCardBlack.jpg" alt="JAVA-Image" id="JavaCard">
</div>
<img src="images/White/JavaTitleBlack.jpg" alt="JAVA-Title" class="TitleCard" id="JavaTitle">
</div>
<div id="c" class="Card">
<div class="BackGroundCard">
<img src="images/White/CCardBlack.jpg" alt="C-Image" id="CCard">
</div>
<img src="images/White/CTitleBlack.jpg" alt="C-Title" class="TitleCard" id="CTitle">
</div>
<div id="Php" class="Card">
<div class="BackGroundCard">
<img src="images/White/PHPCardBlack.jpg" alt="PHP-Image" id="PHPCard">
</div>
<img src="images/White/PHPTitleBlack.jpg" alt="PHP-Title" class="TitleCard" id="PHPTitle">
</div>
</div>
<!-- END BACK -->
<!-- Math Cards -->
<div class="Cards MathCards None Animate">
<div id="Gaal" class="Card">
<div class="BackGroundCard">
<img src="images/White/GaalCardBlack.jpg" alt="Gaal-Image" id="GAALCard">
</div>
<img src="images/White/GaalTitleBlack.jpg" alt="Gaal-Title" class="TitleCard" id="GAALTitle">
</div>
<div id="Discreta" class="Card">
<div class="BackGroundCard">
<img src="images/White/DiscretaCardBlack.jpg" alt="Discreta-Image" id="DiscretaCard">
</div>
<img src="images/White/DiscretaTitleBlack.jpg" alt="Discreta-Title" class="TitleCard"