├── .vscode └── settings.json ├── 1.WEBDEV ├── 1.Introduction to HTML │ ├── boiler-plate.html │ ├── headings.html │ ├── image gallery.html │ ├── images │ │ └── Rania.png │ ├── index.html │ ├── links.html │ └── paraghraphs.html ├── 2.CSS Basics │ ├── index.html │ └── style.css ├── 3.CSS Tic tac toe │ ├── index.html │ └── style.css ├── 4.CSS Articles │ ├── example.css │ ├── example.html │ ├── index.html │ └── style.css ├── 5.CSS Exercice │ ├── index.html │ └── style.css ├── 6.Image Gallery with flex │ ├── images │ │ ├── Dog.jpg │ │ ├── Penguine.jpg │ │ ├── Turtle.jpg │ │ └── Whale.jpg │ ├── index.html │ └── style.css └── Mustapha.jpeg ├── 2.Algorithms ├── Algorithm Instructions.txt ├── Algorithm Ressources.txt ├── Algorithm Structure.txt ├── Arrays.txt ├── Arthmetic op.txt ├── Conditions switch.txt ├── Functions.txt ├── Linear Equation.txt ├── Loops.txt ├── Multi d Arrays.txt ├── conditions.txt ├── logic op.txt ├── primitive types.txt ├── recipe.txt ├── solving a game.txt ├── transportations.txt └── variables explanations.dio ├── 4.Creating a static wesite ├── images │ ├── Celeb.jpg │ ├── MC.svg │ ├── background.jpg │ ├── brand2.png │ ├── facebook-f-brands.svg │ ├── instagram-brands.svg │ ├── linkedin-in-brands.svg │ └── xteam1.jpg ├── index.html ├── js │ └── jquery-3.6.0.min.js ├── owl │ ├── owl.carousel.min.css │ ├── owl.carousel.min.js │ └── owl.theme.default.min.css └── style.css └── 5.Dom manipulations ├── Session 1 ├── exercise.html ├── index.html └── style.css └── Session 2 ├── exercise.html ├── exercise2.html ├── index.html └── style.css /.vscode/settings.json: -------------------------------------------------------------------------------- 1 | { 2 | "liveServer.settings.port": 5501 3 | } -------------------------------------------------------------------------------- /1.WEBDEV/1.Introduction to HTML/boiler-plate.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | Boiler plate 5 | 6 | 7 | 8 |

9 | Hi again i'm a paragraph 10 |

11 |
12 | 13 | 14 |
15 | 16 | 17 | 18 | -------------------------------------------------------------------------------- /1.WEBDEV/1.Introduction to HTML/headings.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | Document 8 | 9 | 10 |

some text here mainly used for the main title

11 |

some text here mainly used for the secondary title

12 |

some text here mainly used for the 3rd level of titles

13 |

some text here mainly used for the 4th level of titles

14 |
some text here mainly used for the 5th level of titles
15 |
some text here mainly used for the 6th level of titles
16 |

some text just a paragraph

17 | 18 | 19 | -------------------------------------------------------------------------------- /1.WEBDEV/1.Introduction to HTML/image gallery.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | Document 5 | 6 | 7 | Mustapha profile picture 8 | Rania's Picture 9 | 10 | 11 | -------------------------------------------------------------------------------- /1.WEBDEV/1.Introduction to HTML/images/Rania.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/MicroClub-USTHB/Fullstack/980c5d63da5a691c22808b9958f7210f295227da/1.WEBDEV/1.Introduction to HTML/images/Rania.png -------------------------------------------------------------------------------- /1.WEBDEV/1.Introduction to HTML/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | paragraph 5 | 6 | 7 | 8 |
9 |

10 | Hello MC people we are going to start a better chapter of our life which is Web Dev. 11 | am i going to refresh the page everytime ??? 12 | Nope i dont have to :) 13 |

14 |

15 | another paraghraph. 16 | here we go 17 |

18 |
19 |
20 |

21 | diffrent division 22 |

23 |
24 | 25 | 26 | -------------------------------------------------------------------------------- /1.WEBDEV/1.Introduction to HTML/links.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | Document 5 | 6 | 7 | Here check a none cool thing 10 | 11 | Mustapha profile picture 16 | 17 | 18 | 19 | -------------------------------------------------------------------------------- /1.WEBDEV/1.Introduction to HTML/paraghraphs.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | Document 5 | 6 | 7 |

8 | This is a paragraph that doesn't care about 9 | jumping the line. 10 |

11 | 
12 |         This is a paragraph that does care about 
13 |         jumping the line.
14 |
15 | 16 | -------------------------------------------------------------------------------- /1.WEBDEV/2.CSS Basics/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | CSS BASCIS 5 | 6 | 7 | 8 | 9 |

This is the first H1

10 |
11 | 12 |

This is a random text

13 |

Lorem ipsum dolor sit amet consectetur adipisicing elit. Omnis, ducimus possimus provident excepturi quod eaque laudantium expedita, quaerat ut libero velit reiciendis itaque dolore nihil aliquam? Dolore obcaecati maiores velit.

14 | 15 |
16 |

Lorem ipsum dolor sit amet consectetur adipisicing elit. Iusto ratione odio aut nulla sequi illo assumenda adipisci ab quisquam fuga consequuntur soluta, ex dicta quos deleniti in. Architecto, dicta quas.

17 |

Lorem ipsum dolor sit amet consectetur adipisicing elit. Omnis, ducimus possimus provident excepturi quod eaque laudantium expedita, quaerat ut libero velit reiciendis itaque dolore nihil aliquam? Dolore obcaecati maiores velit.

18 |
    19 |
  1. go shoping
    2. 20 |
  2. Study fullstack
    3. 21 |
  3. Study fullstack
    4. 22 |
  4. Study fullstack
    5. 23 |
  5. Study fullstack
    6. 24 |
  6. Study fullstack
    7. 25 |
  7. Study fullstack
    8. 26 |
  8. Study fullstack
    9. 27 |
  9. Study fullstack
    10. 28 |
29 | 30 | 31 | visted google 32 | 33 | -------------------------------------------------------------------------------- /1.WEBDEV/2.CSS Basics/style.css: -------------------------------------------------------------------------------- 1 | 2 | h1{ 3 | font-size: 50px; 4 | font-family: Roboto,Arial, sans-serif; 5 | } 6 | h1,p{ 7 | background-color: aqua; 8 | } 9 | .TobePurple{ 10 | color: purple; 11 | } 12 | p{ 13 | color : red; 14 | background-color: yellow; 15 | font-size: 8px; 16 | } 17 | #SoSpecial{ 18 | list-style:georgian; 19 | color: black; 20 | background-color: chartreuse; 21 | } 22 | .specialList{ 23 | list-style:circle; 24 | } 25 | #SoSpecial{ 26 | color: white; 27 | } 28 | div p span{ 29 | color: darkgoldenrod; 30 | background-color: darkblue; 31 | } 32 | div>h1{ 33 | background-color: darkgrey; 34 | } 35 | li:hover{ 36 | color:crimson; 37 | } 38 | input:checked{ 39 | transform: scale(2); 40 | } 41 | a:visited{ 42 | color: gold; 43 | } 44 | ol{ 45 | position: relative; 46 | } 47 | ol>li:nth-child(5){ 48 | color: brown; 49 | /*position: absolute; 50 | left: 50px; 51 | top: 100px;*/ 52 | } 53 | p::first-letter{ 54 | font-size: 20px; 55 | } 56 | .specialH1{ 57 | /* color: #649b0d; */ 58 | color: rgb(201 99 12); 59 | border: 3px dashed black; 60 | padding: 10px; 61 | padding: 0 100px; 62 | margin: 10px 5px 50px 2px; 63 | width: 600px; 64 | box-sizing: border-box; 65 | 66 | } 67 | *{ 68 | margin: 0; 69 | } 70 | div{ 71 | display: inline; 72 | } 73 | div *{ 74 | width: 200px; 75 | } -------------------------------------------------------------------------------- /1.WEBDEV/3.CSS Tic tac toe/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | Tic tac toe 5 | 6 | 7 | 8 |

Tic Tac Toe

9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | 17 | 18 | 19 | 20 | 21 | 22 | 23 | 24 | 25 | 26 | 27 |
X O
28 | 29 | 30 | 31 | -------------------------------------------------------------------------------- /1.WEBDEV/3.CSS Tic tac toe/style.css: -------------------------------------------------------------------------------- 1 | table{ 2 | margin: auto; 3 | } 4 | td{ 5 | width: 50px; 6 | height: 50px; 7 | font-size: 40px; 8 | text-align: center; 9 | } 10 | .vertical{ 11 | border-left: 4px solid #920f0f; 12 | border-right: 4px solid #920f0f; 13 | } 14 | .horizontal{ 15 | border-top: 4px solid #920f0f; 16 | border-bottom: 4px solid #920f0f; 17 | 18 | } -------------------------------------------------------------------------------- /1.WEBDEV/4.CSS Articles/example.css: -------------------------------------------------------------------------------- 1 | *{ 2 | box-sizing: border-box; 3 | font-family: 'Source Sans Pro', sans-serif; 4 | } 5 | body{ 6 | margin:0; 7 | width: 100%; 8 | } 9 | .bordred{ 10 | margin: 100px auto; 11 | width: 50%; 12 | border: 15px solid #bdc3c7; 13 | border-radius: 5px; 14 | padding: 20px; 15 | } 16 | .Article:not(:last-child){ 17 | margin-bottom: 40px; 18 | } 19 | .Article .Date{ 20 | text-transform: uppercase; 21 | color: #3498db; 22 | margin-top: 0; 23 | } 24 | .Article h2{ 25 | color: #2c3e50; 26 | } 27 | .Article p:first-of-type{ 28 | border-left: 5px solid #bdc3c7; 29 | padding-left: 5px; 30 | } -------------------------------------------------------------------------------- /1.WEBDEV/4.CSS Articles/example.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | Articles 5 | 9 | 10 | 11 | 12 | 13 |
14 |
15 |

Mars 01 2022

16 |

This is the first Fullstack Article

17 |

18 | Lorem ipsum dolor sit amet consectetur, adipisicing elit. 19 | Doloribus quos nisi itaque maiores. Ullam nisi doloribus 20 | debitis laborum quod voluptas voluptatem culpa ut eveniet 21 | beatae eum, tempore quasi voluptatibus exercitationem. 22 |

23 |

24 | repellendus impedit, earum aliquam accusantium officiis! 25 | Molestias nesciunt explicabo, quam magnam, dolorem 26 | voluptatum quo in, delectus perferendis consequatur 27 | accusamus inventore nobis nisi aperiam nostrum. Ex totam 28 | nemo mollitia explicabo numquam id. 29 |

30 |

31 | Atque veniam cum fuga ipsam nemo quaerat impedit omnis ratione amet at cupiditate 32 | exercitationem aliquid molestiae ullam autem nulla 33 | consequuntur dolorum sint, repellendus et laboriosam quo 34 | corporis! Laudantium eius voluptas eveniet facilis ipsa 35 | repellendus fugiat inventore assumenda tenetur adipisci. 36 |

37 |
38 |
39 |

Mars 02 2022

40 |

Another Fullstack Article

41 |

42 | Lorem ipsum dolor sit amet consectetur, adipisicing elit. 43 | Doloribus quos nisi itaque maiores. Ullam nisi doloribus 44 | debitis laborum quod voluptas voluptatem culpa ut eveniet 45 | beatae eum, tempore quasi voluptatibus exercitationem. 46 |

47 |

48 | repellendus impedit, earum aliquam accusantium officiis! 49 | Molestias nesciunt explicabo, quam magnam, dolorem 50 | voluptatum quo in, delectus perferendis consequatur 51 | accusamus inventore nobis nisi aperiam nostrum. Ex totam 52 | nemo mollitia explicabo numquam id. 53 |

54 |

55 | Atque veniam cum fuga ipsam nemo quaerat impedit omnis ratione amet at cupiditate 56 | exercitationem aliquid molestiae ullam autem nulla 57 | consequuntur dolorum sint, repellendus et laboriosam quo 58 | corporis! Laudantium eius voluptas eveniet facilis ipsa 59 | repellendus fugiat inventore assumenda tenetur adipisci. 60 |

61 |
62 |
63 | 64 | 65 | -------------------------------------------------------------------------------- /1.WEBDEV/4.CSS Articles/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | Articles 5 | 9 | 10 | 11 | 12 |
13 |
14 |

Mars 01 2022

15 |

This is the first Web Dev Article

16 |

17 | Lorem ipsum dolor sit amet, consectetur adipisicing elit. 18 | Voluptatum labore, aliquid sit quia expedita cum laboriosam 19 | velit aspernatur tenetur hic quis excepturi aperiam. Dolorem 20 | maxime eveniet magni quo esse voluptates? 21 |

22 |

23 | Lorem ipsum dolor sit amet consectetur, adipisicing elit. 24 | Nulla quidem id adipisci necessitatibus aliquid minus 25 | dolorem, iure, enim, quos in animi assumenda delectus 26 | similique aut porro amet eum! Nisi, aut? 27 |

28 |

29 | Lorem ipsum, dolor sit amet consectetur adipisicing elit. 30 | Ratione libero facere soluta iure quam nostrum, hic alias id 31 | adipisci distinctio aperiam quis molestias dolor fuga 32 | voluptatum exercitationem, vel repellendus. Quos? 33 |

34 |
35 |
36 |

Mars 02 2022

37 |

This is another Article by Fullstack trainees

38 |

39 | Lorem ipsum dolor sit amet, consectetur adipisicing elit. 40 | Voluptatum labore, aliquid sit quia expedita cum laboriosam 41 | velit aspernatur tenetur hic quis excepturi aperiam. Dolorem 42 | maxime eveniet magni quo esse voluptates? 43 |

44 |

45 | Lorem ipsum dolor sit amet consectetur, adipisicing elit. 46 | Nulla quidem id adipisci necessitatibus aliquid minus 47 | dolorem, iure, enim, quos in animi assumenda delectus 48 | similique aut porro amet eum! Nisi, aut? 49 |

50 |

51 | Lorem ipsum, dolor sit amet consectetur adipisicing elit. 52 | Ratione libero facere soluta iure quam nostrum, hic alias id 53 | adipisci distinctio aperiam quis molestias dolor fuga 54 | voluptatum exercitationem, vel repellendus. Quos? 55 |

56 |
57 |
58 | 59 | 60 | -------------------------------------------------------------------------------- /1.WEBDEV/4.CSS Articles/style.css: -------------------------------------------------------------------------------- 1 | 2 | *{ 3 | box-sizing: border-box; 4 | font-family: "Source Sans Pro",sans-serif; 5 | } 6 | 7 | .border{ 8 | border: 15px solid #bdc3c7; 9 | width:50%; 10 | margin: 100px auto; 11 | border-radius: 5px; 12 | padding: 20px; 13 | } 14 | .Article:not(:last-of-type){ 15 | margin-bottom: 40px; 16 | } 17 | .Date{ 18 | text-transform: uppercase; 19 | color: #3498db; 20 | margin-top: 0; 21 | } 22 | p:first-of-type{ 23 | border-left: 5px solid #bdc3c7; 24 | padding-left: 10px; 25 | } -------------------------------------------------------------------------------- /1.WEBDEV/5.CSS Exercice/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | CSS Exercise 5 | 6 | 7 | 8 |

CSS Exercise

9 | 10 |

PARAGRAPH NOT INSIDE A DIV

11 | 12 |
13 |

A hello paragraph with a class

14 |

A special paragraph with an ID

15 | 16 |

Color me please

17 | 18 |

19 | Roof party yr hella synth, Wes Anderson narwhal four dollar 20 | toast before they sold out retro lo-fi. Austin iPhone pop-up 21 | farm-to-table, PBR&B McSweeney's ennui messenger bag distillery 22 | before they sold out Portland wolf fanny pack YOLO. Locavore 23 | slow-carb trust fund farm-to-table. Pinterest gastropub lo-fi, 24 | McSweeney's trust fund VHS shabby chic ugh Austin twee. 25 | Messenger bag banjo lumbersexual, whatever 3 wolf moon XOXO 26 | normcore. Pug fanny pack 3 wolf moon, typewriter organic chia 27 | mustache scenester seitan shabby chic Blue Bottle salvia ugh 28 | iPhone. Fanny pack Williamsburg direct trade, cold-pressed 29 | disrupt flannel listicle health goth asymmetrical freegan 30 | mixtape street art pour-over whatever. 31 |

32 |
33 | 34 |
35 |

MC's list of events

36 | 37 | 45 |
46 | 47 |
48 |

Here Again to chat with you all

49 | 50 |

51 | Lorem ipsum dolor sit amet, consectetur adipisicing elit. 52 | Possimus blanditiis magnam itaque voluptatum. Aut perspiciatis 53 | excepturi nulla itaque nisi, expedita odio unde, dignissimos 54 | omnis temporibus enim distinctio et totam eius? Lorem ipsum 55 | dolor sit amet consectetur adipisicing elit. Itaque, ea. Velit 56 | ratione dolores voluptatem reprehenderit error nesciunt dicta! 57 | Sit ut sapiente laboriosam illo assumenda fuga tempora quaerat 58 | maxime eum? Et? 59 |

60 | 61 |

The second paragraph inside this div!

62 |
63 | 64 |

PARAGRAPH NOT INSIDE A DIV

65 | 66 |
67 |

I hate my color

68 | 69 |

70 | Lorem ipsum dolor sit amet consectetur adipisicing elit. Esse, 71 | debitis! Qui molestias aliquam dolorem dicta ad maxime neque 72 | consectetur ea magnam, aut nemo, ab, velit ipsam totam rem 73 | sapiente fugit. Lorem ipsum dolor sit amet consectetur 74 | adipisicing elit. Iure ad similique impedit adipisci, sed optio 75 | repudiandae unde numquam et rem ipsam earum deleniti voluptas 76 | quisquam sint laboriosam facilis velit a molestias. Vitae iste, 77 | nihil accusantium deleniti possimus sed earum ducimus, aperiam 78 | fugiat eius accusamus sunt? Numquam, cum ut. Ex, iste ducimus? 79 | Fuga numquam architecto deserunt, hic similique voluptas itaque 80 | porro saepe provident consequuntur, incidunt ut in atque 81 | quisquam quidem animi neque facilis id sed quas? Veritatis dicta 82 | nisi quibusdam quia impedit a pariatur atque, aut quis 83 | reiciendis esse voluptatibus ut aspernatur quisquam omnis rem 84 | fuga molestiae. Officia modi quidem minus quisquam! Repudiandae 85 | id quod officiis neque consequuntur sit non, ipsam tempore 86 | voluptatem ipsum porro odit at distinctio repellendus optio 87 | consequatur est maiores nesciunt fuga. Tempore incidunt corporis 88 | aliquid nobis officiis illum vero at consequatur suscipit 89 | provident eius repudiandae ullam reprehenderit, alias, totam ex 90 | quidem voluptatum excepturi odio! Temporibus doloribus error 91 | excepturi! Alias expedita aut, magnam aliquid unde mollitia 92 | itaque consequatur sint! Impedit officiis dolorum consectetur 93 | sequi quia mollitia eos veritatis cum odio accusamus ipsa ut 94 | corporis repudiandae praesentium, enim quaerat culpa ab velit 95 | nobis perferendis cupiditate nihil nesciunt est ipsum. Quod, 96 | odit deserunt. Autem quisquam ipsam voluptatum quibusdam quidem 97 | saepe aliquam consectetur provident magnam quae. Temporibus 98 | dicta facilis maiores praesentium, impedit est tempore animi! 99 | Enim deserunt commodi molestiae quibusdam natus impedit a 100 | officiis qui ut ipsam aliquam debitis veritatis illo ratione 101 | necessitatibus iusto nam, labore repudiandae dicta 102 | exercitationem nostrum accusamus. Dignissimos facere quo placeat 103 | iusto quasi modi natus eaque! Corporis, rem reprehenderit quia 104 | dolores debitis nihil commodi tenetur sapiente voluptates illo 105 | quam, nostrum ab suscipit? Doloribus, pariatur cumque asperiores 106 | expedita quibusdam perferendis, tempora optio odit quia fuga 107 | rerum magnam ea exercitationem numquam quos ad porro 108 | consequuntur. Doloremque voluptates hic, blanditiis dolore 109 | provident aliquam rerum sequi quidem architecto alias? 110 | Reprehenderit iste officia minima inventore iure repellat eaque, 111 | illum cumque! Doloremque magnam ullam similique eius 112 | praesentium, alias dicta? Odio quos explicabo excepturi suscipit 113 | minus et, fugiat quae ipsam ipsa repellat architecto debitis 114 | quis officia magnam error laudantium tempore molestiae? Commodi, 115 | magnam eveniet. Consequuntur eius nisi dolore ipsum minus libero 116 | tempore neque quaerat ex. 117 |

118 | 119 |

One last paragraph here!

120 | 121 | Wassim's picture 122 | just a link to MC facebook 123 |
124 |
125 |
126 | 127 | 128 |
129 |
130 |
131 | 132 |

PARAGRAPH NOT INSIDE A DIV

133 | 134 | 135 | -------------------------------------------------------------------------------- /1.WEBDEV/5.CSS Exercice/style.css: -------------------------------------------------------------------------------- 1 | /* Style the HTML elements according to the following instructions. 2 | DO NOT ALTER THE EXISTING HTML TO DO THIS. WRITE ONLY CSS! 3 | 4 | /* Give the element a background of #0fcf90*/ 5 | 6 | /* Make the

element #b9105e*/ 7 | 8 | /* Make all

elements orange */ 9 | 10 | /* Make all
  • elements blue(pick your own hexadecimal blue)*/ 11 | 12 | /*Change the background on every paragraph to be yellow*/ 13 | 14 | /*Make all inputs have a 3px red border*/ 15 | 16 | /* Give everything with the class 'hello' a white background*/ 17 | 18 | /* Give the element with id 'special' a 2px solid blue border(pick your own rgb blue)*/ 19 | 20 | /*Make all the

    's that are nested inside of divs 25px font(font-size: 25px)*/ 21 | 22 | /*Make only inputs with type 'text' have a gray background*/ 23 | 24 | /* Give both

    's inside the 3rd

    a pink background*/ 25 | 26 | /* Give the 2nd

    inside the 3rd

    a 5px white border*/ 27 | 28 | /* Make the in the 3rd
    element white and 20px font(font-size:20px)*/ 29 | 30 | 31 | /*BONUS CHALLENGES*/ 32 | /*You may need to research some other selectors and properties*/ 33 | 34 | /*Make all "checked" checkboxes have a left margin of 50px(margin-left: 50px)*/ 35 | 36 | /* Make the