├── .gitignore ├── 1-elements ├── 01_star.html ├── 02_elemental.html ├── 03_newspaper.html ├── 04_corporate.html ├── 05_chef.html ├── 06_pet.html ├── 07_band.html └── blackpink.jpg ├── 2-structure ├── 08_blueprint.html ├── 09_family_tree.html ├── 10_craigslist_ad.html ├── 11_wiki_article.html ├── 12_lorem_ipsum.html ├── 13_power_rangers.html └── 14_top_8.html ├── 3-forms ├── 15_google.html ├── 16_sign_up.html ├── 17_sign_up.html ├── 18_rsvp.html ├── 19_contact_us.html └── 20_welp.html ├── 4-semantic-html ├── 22_the_header.html ├── 23_main_footer.html ├── 24_blog_posts.html ├── 25_figures.html └── 26_final_touches.html ├── LICENSE └── README.md /.gitignore: -------------------------------------------------------------------------------- 1 | .DS_Store 2 | 3 | # Other files and folders 4 | .settings/ 5 | 6 | # Executables 7 | *.swf 8 | *.air 9 | *.ipa 10 | *.apk 11 | 12 | # Project files, i.e. `.project`, `.actionScriptProperties` and `.flexProperties` 13 | # should NOT be excluded as they contain compiler settings and other important 14 | # information for Eclipse / Flash Builder. -------------------------------------------------------------------------------- /1-elements/01_star.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 |

December 25th, 2022

5 |

Create a magical website!

6 | -------------------------------------------------------------------------------- /1-elements/02_elemental.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 |

🔥 Fire

6 |

💧 Water

7 |

⛰️ Earth

8 |

🌪️ Air

9 | 10 | -------------------------------------------------------------------------------- /1-elements/03_newspaper.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 |

For First Time, Tests With Gene Therapy Begin

6 |

Jan. 30, 1991

7 |

Two cancer patients yesterday became the first people to receive
8 | gene therapy in an attempt to defeat otherwise incurable tumors.

9 |

In a simple procedure that lasted barely 20 minutes, the patients, a
10 | 29-year-old woman and a 42-year-old man, were each infused with
11 | about 100 million white blood cells. The cells enfolded a genetically
12 | engineered copy of a gene that makes a potent anti-cancer enzyme.

13 | 14 | -------------------------------------------------------------------------------- /1-elements/04_corporate.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 |

6 | Cutting Down, Ramping Up: 7 | We have a robust strategy for low-hanging fruits mission-critical objectives that move the needle at all costs. 8 | It's time to double down on revenue growth while cutting costs. 9 | This is a win-win initiative; a win for us and our amazing shareholders! 10 |

11 |

12 | P.S. After several strong sales months, we are printing Employee Appreciation Tees! 13 | Will go on sale Monday. 14 |

15 | 16 | -------------------------------------------------------------------------------- /1-elements/05_chef.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 |

Vanilla Cake 🍰

6 |

Ingredients:

7 | 17 |

Instructions:

18 |
    19 |
  1. Preheat the oven to 350° F.
    2. 20 |
  2. Butter two cake pans and line the bottoms with parchment paper.
    3. 21 |
  3. Butter the parchment and dust the pans with flour.
    4. 22 |
  4. Whisk 3 cups flour, the baking powder and salt in a bowl until combined.
    5. 23 |
  5. Beat the butter and the sugar in a large bowl with a mixer until light and fluffy.
    6. 24 |
  6. Beat in the eggs, vanilla, and flour, slowly, until smooth.
    7. 25 |
  7. Divide the batter between the prepared pans and put them in the preheated oven.
    8. 26 |
  8. Bake for 30-35 minutes, until the cakes are lightly golden on top.
    9. 27 |
  9. Transfer to racks and let cool 10 minutes, then remove the parchment.
    10. 28 |
  10. Enjoy! 🤌
    11. 29 |
30 | 31 | -------------------------------------------------------------------------------- /1-elements/06_pet.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 |

Missing Cat: Jules

6 | 7 |

3 year old cat with white fur and black eyes. Last seen on 123 Glendon Street.

8 |

If seen, please call this number. Thank you.

9 | 10 | -------------------------------------------------------------------------------- /1-elements/07_band.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 |

BLACKPINK 💕

6 | 7 |

BLACKPINK is a South Korean girl group formed by YG Entertainment. The group debuted in August 2016.
8 | They are currently the world's most successful Korean girl group. Their fandom name is BLINK. 🫰

9 |

The members are:

10 | 16 | Here is a link to BLACKPINK's website! 17 |

Their top 5 songs are:

18 |
    19 |
  1. 마지막처럼 (As If It's Your Last) - 2017
    2. 20 |
  2. 뚜두뚜두 (DDU-DU DDU-DU) - 2018
    3. 21 |
  3. How You Like That - 2020
    4. 22 |
  4. Kill This Love - 2019
    5. 23 |
  5. 붐바야 (BOOMBAYAH) - 2016
    6. 24 |
25 | Hwaiting! 🫰 26 | 27 | -------------------------------------------------------------------------------- /1-elements/blackpink.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/codedex-io/html-101/72b51c7a137b2faccdcd1740aceb9d9aedd04cd8/1-elements/blackpink.jpg -------------------------------------------------------------------------------- /2-structure/08_blueprint.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | Place your page title here. 8 | 9 | 10 |

11 | Place your paragraph text here. 12 |

13 | 14 | -------------------------------------------------------------------------------- /2-structure/09_family_tree.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | Family Tree 8 | 9 | 10 |

The Simpsons

11 |

🏡 Hometown: Springfield, IL

12 | 22 | 23 | 24 | -------------------------------------------------------------------------------- /2-structure/10_craigslist_ad.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | For Sale: Didgeridoo. Needs work 8 | 9 | 10 | 11 |

Didgeridoo. Needs work

12 | 13 | 14 | 15 | 16 | 17 |

Australian Aboriginal Didgeridoo. Needs work. Free to good home

18 | 19 | 22 | 23 | 24 | -------------------------------------------------------------------------------- /2-structure/11_wiki_article.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | Wiki Article 8 | 9 | 10 |

Shigeru Miyamoto

11 | Shigeru Miyamoto Wikipedia image 12 |

Shigeru Miyamoto is a video game designer famous for creating notable franchises including Super Mario Bros. and The Legend of Zelda. He has worked for Nintendo since 1977.

13 | 14 | 15 | -------------------------------------------------------------------------------- /2-structure/12_lorem_ipsum.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | Draft Title 8 | 9 | 10 |

Untitled

11 | 12 | Heading 1 13 | Heading 2 14 | 15 |
16 |

Heading 1

17 |

18 | Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. 19 |

20 |

21 | Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. 22 |

23 |
24 | 25 |
26 |

Heading 2

27 |

28 | Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. 29 |

30 |

31 | Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. 32 |

33 |
34 | 35 | 36 | 37 | -------------------------------------------------------------------------------- /2-structure/13_power_rangers.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | Power Rangers 8 | 34 | 35 | 36 |
37 |
38 |
39 |
40 |
41 |
42 |
43 |
44 |
45 |
46 | 47 | -------------------------------------------------------------------------------- /2-structure/14_top_8.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | MySpace Top 8 8 | 36 | 37 | 38 |
39 |

My Top 8 Friends!

40 |
41 |
42 |

My Friend Tom

43 | Tom from MySpace 44 |
45 | 46 |
47 |

My Friend Tom

48 | Tom from MySpace 49 |
50 | 51 |
52 |

My Friend Tom

53 | Tom from MySpace 54 |
55 | 56 |
57 |

My Friend Tom

58 | Tom from MySpace 59 |
60 |
61 | 62 |
63 |
64 |

My Friend Tom

65 | Tom from MySpace 66 |
67 | 68 |
69 |

My Friend Tom

70 | Tom from MySpace 71 |
72 | 73 |
74 |

My Friend Tom

75 | Tom from MySpace 76 |
77 | 78 |
79 |

My Friend Tom

80 | Tom from MySpace 81 |
82 |
83 |
84 | 85 | 86 | -------------------------------------------------------------------------------- /3-forms/15_google.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | Google 8 | 9 | 10 |
11 |

Search the web using Google!

12 |
13 | 14 |
15 | 16 | 17 | -------------------------------------------------------------------------------- /3-forms/16_sign_up.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | Sign Up 8 | 9 | 10 |
11 |

Sign Up

12 | Username: 13 |

14 | Email: 15 |

16 | Password: 17 |

18 | Confirm Password: 19 |

20 | 21 |
22 | 23 | 24 | -------------------------------------------------------------------------------- /3-forms/17_sign_up.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | Sign Up Page 8 | 9 | 10 |
11 |

Sign Up Page

12 | Username: 13 |

14 | Email: 15 |

16 | Password: 17 |

18 | Confirm Password: 19 |

20 | 21 |
22 | 23 | 24 | -------------------------------------------------------------------------------- /3-forms/18_rsvp.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | RSVP 8 | 9 | 10 |
11 |

RSVP

12 |

Come and make our special day more awesome!

13 |
14 | First Name: 15 |

16 | Last Name: 17 |

18 | Are you coming?
19 | Yes 20 | No 21 | Maybe 22 |

23 | Any dietary restrictions for main course?
24 | None
25 | Vegetarian
26 | Vegan
27 | Gluten-free
28 | Dairy-free 29 |

30 | 31 |
32 | 33 | -------------------------------------------------------------------------------- /3-forms/19_contact_us.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | Contact Us 8 | 9 | 10 |
11 |

Contact Us

12 | 13 |

14 |
15 | 16 |

17 | 18 |
19 | 20 | 21 | -------------------------------------------------------------------------------- /3-forms/20_welp.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | Welp! 8 | 9 | 10 |
11 |

Welp! Review Form

12 | 13 |

14 | 15 |

16 | 17 |
18 | No 19 | Not Sure 20 | Yes 21 |

22 | 23 |

24 |
25 | 26 |

27 | 28 |
29 | 30 | -------------------------------------------------------------------------------- /4-semantic-html/22_the_header.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | My Blog 8 | 9 | 10 | 11 |
12 |

My Blog

13 | 20 |
21 | 22 | 23 | -------------------------------------------------------------------------------- /4-semantic-html/23_main_footer.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | My Blog 8 | 9 | 10 |
11 |

My Blog

12 | 19 |
20 | 21 |
22 |
23 |

My Personal Blog

24 |
25 | 32 | 33 | 34 | -------------------------------------------------------------------------------- /4-semantic-html/24_blog_posts.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | My Blog 8 | 9 | 10 |
11 |

My Blog

12 | 19 |
20 |
21 |
22 | 23 |
24 |

About Me

25 |
26 |

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.

27 |
28 |
29 |
30 |
31 |

Stories

32 |
33 |
34 |

Title

35 |

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.

36 |
37 |

38 |
39 |

Title

40 |

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.

41 |
42 |

43 |
44 |
45 |

Title

46 |

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.

47 |
48 |
49 |
50 | 57 | 58 | 59 | -------------------------------------------------------------------------------- /4-semantic-html/25_figures.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | My Blog 8 | 9 | 10 |
11 |

My Blog

12 | 19 |
20 |
21 |
22 |
23 |

About Me

24 |

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.

25 |
26 |
27 |
28 |

Stories

29 |
30 | 31 |
32 | Obsidian 33 |
A piece of obsidian
34 |
35 |
36 |

Title

37 |

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.

38 |
39 |

40 |
41 | 42 |
43 | Obsidian 44 |
A piece of obsidian
45 |
46 |

Title

47 |

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.

48 |
49 |

50 |
51 | 52 |
53 | Obsidian 54 |
A piece of obsidian
55 |
56 |
57 |

Title

58 |

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.

59 |
60 |
61 |
62 | 69 | 70 | 71 | -------------------------------------------------------------------------------- /4-semantic-html/26_final_touches.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 23 | My Blog 24 | 25 | 26 |
27 |

My Blog

28 | 35 |
36 |
37 |
38 |
39 |

About Me

40 |

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.

41 |
42 |
43 |
44 |

Stories

45 |
46 |
47 | Obsidian 48 |
A piece of obsidian
49 |
50 |
51 |

Title

52 |

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.

53 |
54 |

55 |
56 |
57 | Obsidian 58 |
A piece of obsidian
59 |
60 |

Title

61 |

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.

62 |
63 |

64 |
65 |
66 | Obsidian 67 |
A piece of obsidian
68 |
69 |
70 |

Title

71 |

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.

72 |
73 |
74 |
75 | 82 | 83 | 84 | -------------------------------------------------------------------------------- /LICENSE: -------------------------------------------------------------------------------- 1 | MIT License 2 | 3 | Copyright (c) 2022 Codédex 4 | 5 | Permission is hereby granted, free of charge, to any person obtaining a copy 6 | of this software and associated documentation files (the "Software"), to deal 7 | in the Software without restriction, including without limitation the rights 8 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell 9 | copies of the Software, and to permit persons to whom the Software is 10 | furnished to do so, subject to the following conditions: 11 | 12 | The above copyright notice and this permission notice shall be included in all 13 | copies or substantial portions of the Software. 14 | 15 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR 16 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, 17 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE 18 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER 19 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, 20 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE 21 | SOFTWARE. 22 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 |
2 |
3 |

The Origins I: HTML 🌋

4 | GitHub repo with beginner-friendly problems in HTML 5 |
6 |
7 | 8 | Welcome to The Origins I: HTML GitHub repo! We are super excited to have you. Here, you will find all the solutions to the Codédex challenges. Feel free to make pull requests to add your own twists on the challenges! 9 | 10 | ### Website: www.codedex.io/html 11 | 12 | ## Elements 13 | 14 | - [`star.html`](https://github.com/codedex-io/html-101/blob/main/1-elements/01_star.html) 15 | - [`elemental.html`](https://github.com/codedex-io/html-101/blob/main/1-elements/02_elemental.html) 16 | - [`newspaper.html`](https://github.com/codedex-io/html-101/blob/main/1-elements/03_newspaper.html) 17 | - [`corporate.html`](https://github.com/codedex-io/html-101/blob/main/1-elements/04_corporate.html) 18 | - [`chef.html`](https://github.com/codedex-io/html-101/blob/main/1-elements/05_chef.html) 19 | - [`pet.html`](https://github.com/codedex-io/html-101/blob/main/1-elements/06_pet.html) 20 | - [`band.html`](https://github.com/codedex-io/html-101/blob/main/1-elements/07_band.html) 21 | 22 | ## Structure 23 | 24 | - [`blueprint.html`](https://github.com/codedex-io/html-101/blob/main/2-structure/08_blueprint.html) 25 | - [`family_tree.html`](https://github.com/codedex-io/html-101/blob/main/2-structure/09_family_tree.html) 26 | - [`craigslist_ad.html`](https://github.com/codedex-io/html-101/blob/main/2-structure/10_craigslist_ad.html) 27 | - [`wiki_article.html`](https://github.com/codedex-io/html-101/blob/main/2-structure/11_wiki_article.html) 28 | - [`lorem_ipsum.html`](https://github.com/codedex-io/html-101/blob/main/2-structure/12_lorem_ipsum.html) 29 | - [`power_rangers.html`](https://github.com/codedex-io/html-101/blob/main/2-structure/13_power_rangers.html) 30 | - [`top_8.html`](https://github.com/codedex-io/html-101/blob/main/2-structure/14_top_8.html) 31 | 32 | ## Forms 33 | 34 | - [`google.html`](https://github.com/codedex-io/html-101/blob/main/3-forms/15_google.html) 35 | - [`sign_up_v1.html`](https://github.com/codedex-io/html-101/blob/main/3-forms/16_sign_up.html) 36 | - [`sign_up_v2.html`](https://github.com/codedex-io/html-101/blob/main/3-forms/17_sign_up.html) 37 | - [`rsvp.html`](https://github.com/codedex-io/html-101/blob/main/3-forms/18_rsvp.html) 38 | - [`contact_us.html`](https://github.com/codedex-io/html-101/blob/main/3-forms/19_contact_us.html) 39 | - [`welp.html`](https://github.com/codedex-io/html-101/blob/main/3-forms/20_welp.html) 40 | 41 | ## Semantic HTML 42 | 43 | - [`the_header.html`](https://github.com/codedex-io/html-101/blob/main/4-semantic-html/22_the_header.html) 44 | - [`main_footer.html`](https://github.com/codedex-io/html-101/blob/main/4-semantic-html/23_main_footer.html) 45 | - [`blog_posts.html`](https://github.com/codedex-io/html-101/blob/main/4-semantic-html/24_blog_posts.html) 46 | - [`figures.html`](https://github.com/codedex-io/html-101/blob/main/4-semantic-html/25_figures.html) 47 | - [`final_touches.html`](https://github.com/codedex-io/html-101/blob/main/4-semantic-html/26_final_touches.html) 48 | 49 | --- 50 | 51 | Make sure to join the [Codédex Club or Workshops](https://www.codedex.io/community) for more problems! 💖 52 | --------------------------------------------------------------------------------