{"id":26236150,"url":"https://github.com/drshika/gwc-html-workshop","last_synced_at":"2026-02-02T03:02:37.134Z","repository":{"id":280950602,"uuid":"943669899","full_name":"drshika/gwc-html-workshop","owner":"drshika","description":"Code and Tutorial for Girls Who Code HTML workshop","archived":false,"fork":false,"pushed_at":"2025-03-12T03:33:40.000Z","size":19284,"stargazers_count":0,"open_issues_count":0,"forks_count":0,"subscribers_count":1,"default_branch":"main","last_synced_at":"2025-06-22T07:41:03.097Z","etag":null,"topics":["girlswhocode","html","learn-to-code","learning-exercise","tutorial","web-development"],"latest_commit_sha":null,"homepage":"","language":"HTML","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/drshika.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2025-03-06T04:37:59.000Z","updated_at":"2025-03-12T03:37:36.000Z","dependencies_parsed_at":"2025-03-06T07:51:57.032Z","dependency_job_id":null,"html_url":"https://github.com/drshika/gwc-html-workshop","commit_stats":null,"previous_names":["drshika/gwc-html-workshop"],"tags_count":0,"template":false,"template_full_name":null,"purl":"pkg:github/drshika/gwc-html-workshop","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/drshika%2Fgwc-html-workshop","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/drshika%2Fgwc-html-workshop/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/drshika%2Fgwc-html-workshop/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/drshika%2Fgwc-html-workshop/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/drshika","download_url":"https://codeload.github.com/drshika/gwc-html-workshop/tar.gz/refs/heads/main","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/drshika%2Fgwc-html-workshop/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":286080680,"owners_count":29002632,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2026-02-02T01:32:03.847Z","status":"online","status_checked_at":"2026-02-02T02:00:07.448Z","response_time":58,"last_error":null,"robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":true,"can_crawl_api":true,"host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["girlswhocode","html","learn-to-code","learning-exercise","tutorial","web-development"],"created_at":"2025-03-13T03:27:33.006Z","updated_at":"2026-02-02T03:02:37.116Z","avatar_url":"https://github.com/drshika.png","language":"HTML","funding_links":[],"categories":[],"sub_categories":[],"readme":"# Workshop #1 - HTML Hello World!\n## Girls Who Code Club @ Dekalb Library\n\nToday we're going to learn how to build a basic HTML website.\n\n## Setup\n\n1. Go to [Trinket](https://trinket.io/) and log in/sign up.\n![Trinket Homepage](./images/trinket1.png)\n2. Navigate to the `home` page.\n3. Click on the `+` button on the top left and select `New Project`.\n![Trinket New Project](./images/trinket2.png)\n4. Select `HTML` and name your project `hello_world`.\n\n## What is HTML?\n\nHTML, which stands for Hypertext Markup Language, helps to organize and categorize content on a website. HTML is made up of elements, which are represented by tags. Tags tell the browser how to display the content on the page. Tags also can have attributes, which are used to provide additional information about the element.\n\n## How do you organize your content?\n\nSectioning tags help us create the larger structure of our website by dividing our content into sections (sort of like a beginning, middle, and end). We can use these tags to group elements together based on where they live on the webpage. All of the tags come in a **sandwich** so each opening tag should have a closing tag (but some of the tags self close, we will get to that later). \n\n- The `\u003cbody\u003e` tag holds the content of an HTML document. There can only be one `\u003cbody\u003e` tag.\n- The `\u003cnav\u003e` tag holds the navigation bar in an HTML document.\n- The `\u003cheader\u003e` tag holds the introductory content in an HTML document.\n- The `\u003cmain\u003e` tag holds the dominant content of the `\u003cbody\u003e` of an HTML document. There can only be one `\u003cmain\u003e` tag on a page. We don't want to put anything in here that repeats on other pages, like the navigation bar.\n\n## Simple HTML Structure\n\nYou should already have an index.html file created in your Trinket project. If you don't, you can create a new file by clicking the `+` button on the left sidebar and selecting `New file`. Then name it `index.html`.\n\n1. Add the html tag: `\u003chtml\u003e`\n    - This is the root element of the HTML document.    \n2. Add the body tag: `\u003cbody\u003e`\n    - This is the container for the content of the HTML document.\n3. Add the main tag: `\u003cmain\u003e`\n    - The main element is the unique core content of that specific page. You can only have one main element per page.\n4. Add your hello world inside the `\u003cmain\u003e\u003c/main\u003e` tags.\n\n```html\n\u003chtml\u003e\n\u003cbody\u003e\n    \u003cmain\u003e\n        hello world\n    \u003c/main\u003e\n\u003c/body\u003e\n\u003c/html\u003e\n```\n\nThat should look like this:\n\n![Hello World](./images/1demo.png)\n\nCongratulations! You've just created your first HTML document and said hello to the world! Now let's give your site a fun name.\n\n## Styling\n\nThe website looks a bit plain right now. Let's add an external stylesheet to make it look a bit nicer.\n\nCopy and paste this line to the head tag. This will load the external stylesheet when the page loads.\n```html\n\u003clink rel=\"stylesheet\" href=\"https://cdn.jsdelivr.net/npm/@exampledev/new.css@1.1.2/new.min.css\"\u003e\n```\n\n- The `\u003chead\u003e` tag is used to specify the metadata of the HTML document.\n- The `\u003clink\u003e` tag is used to link to an external stylesheet.\n    - The link tag is a self closing tag.\n- The `rel` attribute is used to specify the relationship between the current document and the linked resource.\n- The `href` attribute is used to specify the URL of the linked resource.\n\nAnd here's the code after adding the stylesheet:\n\n```html\n\u003chtml\u003e\n    \u003c!-- Add these new stylesheet links in the head tag --\u003e\n    \u003chead\u003e\n        \u003clink rel=\"stylesheet\" href=\"https://cdn.jsdelivr.net/npm/@exampledev/new.css@1.1.2/new.min.css\"\u003e\n    \u003c/head\u003e\n    \u003cbody\u003e\n        \u003cmain\u003e\n            hello world\n        \u003c/main\u003e\n    \u003c/body\u003e\n\u003c/html\u003e\n```\n\n## Adding a Title\n\nLet's add our website title and give it a fun color. You can use a color picker to pick your favorite color: [w3 Schools Color Picker](https://www.w3schools.com/colors/colors_picker.asp)\n\n- The `\u003cheader\u003e` tag is used to create a header for the webpage.\n- The `\u003ch1\u003e` tag is used to create a heading for the webpage.\n    - The `style` attribute is used to specify the style of the element.\n    - The `color` property is used to specify the color of the text.\n\n```html\n\u003chtml\u003e\n\u003chead\u003e \n    \u003clink rel=\"stylesheet\" href=\"https://cdn.jsdelivr.net/npm/@exampledev/new.css@1.1.2/new.min.css\"\u003e\n\u003c/head\u003e\n\u003cbody\u003e\n    \u003c!-- added the header section and heading--\u003e\n    \u003cheader\u003e\n        \u003ch1 style=\"color: #008B8B;\"\u003eDrshika's Awesome Website!\u003c/h1\u003e\n    \u003c/header\u003e\n    \u003cmain\u003e\n        hello world\n    \u003c/main\u003e\n\u003c/body\u003e\n\u003c/html\u003e\n```\n\nThat should look like this:\n\n![Styling](./images/2demo.png)\n\n## Adding Content\n\nWe can also start to add some information to our webpage. Let's start by adding our school name and and some fun facts about ourselves.\n\n\n- The `\u003cp\u003e` tag is used to create a paragraph of text.\n- The `\u003ca\u003e` tag is used to create a hyperlink.  \n- The `\u003cul\u003e` tag is used to create an unordered list.\n- The `\u003cli\u003e` tag is used to create a list item.\n- The `\u003cem\u003e` tag is used to create an italic text.\n- The `\u003cstrong\u003e` tag is used to create a bold text.\n\nhere is the code after adding fun facts and info:\n```html\n\u003chtml\u003e\n\u003chead\u003e  \n    \u003clink rel=\"stylesheet\" href=\"https://cdn.jsdelivr.net/npm/@exampledev/new.css@1.1.2/new.min.css\"\u003e\n\u003c/head\u003e\n\u003cbody\u003e\n    \u003cheader\u003e\n        \u003ch1 style=\"color: #008B8B;\"\u003eDrshika's Awesome Website!\u003c/h1\u003e\n    \u003c/header\u003e\n    \u003cmain\u003e\n        \u003c!-- removed hello world, added the main section and the paragraphs --\u003e\n        \u003cp\u003eI'm currently a \u003cem\u003e17th grader\u003c/em\u003e at the \u003ca href=\"https://www.bklynlibrary.org/\"\u003eBrooklyn Public Library's\u003c/a\u003e Girls Who Code Club.\u003c/p\u003e\n        \u003cp\u003eSome \u003cstrong\u003efun\u003c/strong\u003e facts about me:\u003c/p\u003e\n        \u003cul\u003e\n            \u003cli\u003eI love to eat pesto pasta\u003c/li\u003e\n            \u003cli\u003eMy favorite TV show is \u003ca href=\"https://www.imdb.com/title/tt4955642\"\u003eThe Good Place\u003c/a\u003e\u003c/li\u003e\n            \u003cli\u003eMy favorite sport is swimming\u003c/li\u003e\n        \u003c/ul\u003e\n    \u003c/main\u003e\n\u003c/body\u003e\n\u003c/html\u003e\n```\n\nThat should look like this:\n\n![Content](./images/3demo.png)\n\n## Adding Images\n\nThe `\u003cimg\u003e` tag is used to embed an image in an HTML document. Let's add an image of our favorite animal to our webpage. Mine is a penguin. \n\n```html \n\u003cimg src=\"https://www.pewtrusts.org/-/media/post-launch-images/2022/11/gettyimages1198849037jpgmaster/16x9_m.jpg\"\u003e\n```\n\nThe image tag is a self closing tag.\n\nAnd here's our code so far:\n\n```html\n\u003chtml\u003e\n\u003chead\u003e  \n    \u003clink rel=\"stylesheet\" href=\"https://cdn.jsdelivr.net/npm/@exampledev/new.css@1.1.2/new.min.css\"\u003e\n\u003c/head\u003e\n\u003cbody\u003e\n    \u003cheader\u003e\n        \u003ch1 style=\"color: #008B8B;\"\u003eDrshika's Awesome Website!\u003c/h1\u003e\n    \u003c/header\u003e\n    \u003cmain\u003e\n        \u003cp\u003eI'm currently a \u003cem\u003e17th grader\u003c/em\u003e at the \u003ca href=\"https://www.bklynlibrary.org/\"\u003eBrooklyn Public Library's\u003c/a\u003e Girls Who Code Club.\u003c/p\u003e\n        \u003cp\u003eSome \u003cstrong\u003efun\u003c/strong\u003e facts about me:\u003c/p\u003e\n        \u003cul\u003e\n            \u003cli\u003eI love to eat pesto pasta\u003c/li\u003e\n            \u003cli\u003eMy favorite TV show is \u003ca href=\"https://www.imdb.com/title/tt4955642\"\u003eThe Good Place\u003c/a\u003e\u003c/li\u003e\n            \u003cli\u003eMy favorite sport is swimming\u003c/li\u003e\n        \u003c/ul\u003e\n        \u003c!-- added the image tag --\u003e\n        \u003cimg src=\"https://www.pewtrusts.org/-/media/post-launch-images/2022/11/gettyimages1198849037jpgmaster/16x9_m.jpg\"\u003e\n    \u003c/main\u003e\n\u003c/body\u003e\n\u003c/html\u003e\n```\n\nThat should look like this:\n\n![Images](./images/4demo.png)\n\n## Creating a new Page\n\nTo add another page to our website, we need to create a new HTML file. Let's create a new file called `projects.html`. Let's start by adding the basic HTML structure to the new page.\n\n```html\n\u003c!-- created basic projects.html page --\u003e\n\u003chtml\u003e\n\u003chead\u003e\n    \u003clink rel=\"stylesheet\" href=\"https://cdn.jsdelivr.net/npm/@exampledev/new.css@1.1.2/new.min.css\"\u003e\n\u003c/head\u003e\n\u003cbody\u003e\n    \u003cheader\u003e\n        \u003ch1\u003eProjects\u003c/h1\u003e\n    \u003c/header\u003e\n    \u003cmain\u003e\n        \u003cp\u003eHere are some of the projects we will build together:\u003c/p\u003e\n    \u003c/main\u003e\n\u003c/body\u003e\n\u003c/html\u003e\n```\n\nThat should look like this:\n\n![New Page](./images/5demo.png)\n\n## Navigating between pages\n\nTo be able to navigate to the projects page, we need to add a link to the projects page from the *home* page. We can do this by adding the link within the `nav` tags in the `index.html` page. Within the `nav` tags, we can add a link to the projects page by using the `a` tag. I am also adding a link to the home page within the `nav` tags to stay consistent with the menu we will add to the `projects.html` page.\n\n```html\n\u003chtml\u003e\n\u003chead\u003e  \n    \u003clink rel=\"stylesheet\" href=\"https://cdn.jsdelivr.net/npm/@exampledev/new.css@1.1.2/new.min.css\"\u003e\n\u003c/head\u003e\n\u003cbody\u003e\n    \u003cheader\u003e\n        \u003ch1 style=\"color: #008B8B;\"\u003eDrshika's Awesome Website!\u003c/h1\u003e\n        \u003c!-- added the navigation menu --\u003e\n        \u003cnav\u003e\n            \u003ca href=\"index.html\"\u003eHome\u003c/a\u003e\n            \u003ca href=\"projects.html\"\u003eProjects\u003c/a\u003e\n        \u003c/nav\u003e\n    \u003c/header\u003e\n    \u003cmain\u003e\n        \u003cp\u003eI'm currently a \u003cem\u003e17th grader\u003c/em\u003e at the \u003ca href=\"https://www.bklynlibrary.org/\"\u003eBrooklyn Public Library's\u003c/a\u003e Girls Who Code Club.\u003c/p\u003e\n        \u003cp\u003eSome \u003cstrong\u003efun\u003c/strong\u003e facts about me:\u003c/p\u003e\n        \u003cul\u003e\n            \u003cli\u003eI love to eat pesto pasta\u003c/li\u003e\n            \u003cli\u003eMy favorite TV show is \u003ca href=\"https://www.imdb.com/title/tt4955642\"\u003eThe Good Place\u003c/a\u003e\u003c/li\u003e\n            \u003cli\u003eMy favorite sport is swimming\u003c/li\u003e\n        \u003c/ul\u003e\n        \u003cimg src=\"https://www.pewtrusts.org/-/media/post-launch-images/2022/11/gettyimages1198849037jpgmaster/16x9_m.jpg\"\u003e\n    \u003c/main\u003e\n\u003c/body\u003e\n\u003c/html\u003e\n```\n\nThat should look like this:\n\n![Navigation](./images/6demo.png)\n\n## Creating an Ordered list\n\nGoing back to the *projects* page, let's create an ordered list of the projects we will build together. Ordered lists are simmilar to create as unordered lists but the HTML tag you have to use is different. Let's also add the navigation menu to the `projects.html` page to get back to the home page.\n\n- The `\u003col\u003e` tag is used to create an ordered list.\n    - The `type` attribute is used to specify the type of list. I've chosen roman numerals for this list but you can choose from a variety of other types like `1`, `A`, `a`, `I`, `i`.\n- The `\u003cli\u003e` tag is used to create a list item.\n\n```html\n\u003chtml\u003e\n\u003chead\u003e\n    \u003clink rel=\"stylesheet\" href=\"https://cdn.jsdelivr.net/npm/@exampledev/new.css@1.1.2/new.min.css\"\u003e\n\u003c/head\u003e\n\u003cbody\u003e\n    \u003cheader\u003e\n        \u003ch1\u003eProjects\u003c/h1\u003e\n        \u003c!-- added the navigation menu --\u003e\n        \u003cnav\u003e\n            \u003ca href=\"index.html\"\u003eHome\u003c/a\u003e\n            \u003ca href=\"projects.html\"\u003eProjects\u003c/a\u003e\n        \u003c/nav\u003e\n    \u003c/header\u003e\n    \u003cmain\u003e\n        \u003cp\u003eHere are some of the projects we will build together:\u003c/p\u003e\n        \u003c!-- added the ordered list of projects --\u003e\n        \u003col type=\"I\"\u003e\n            \u003cli\u003eGirls Who Code Website\u003c/li\u003e\n            \u003cli\u003eRecipes Website\u003c/li\u003e\n        \u003c/ol\u003e\n    \u003c/main\u003e\n\u003c/body\u003e\n\u003c/html\u003e\n```\n\nThat should look like this:\n\n![Ordered List](./images/7demo.png)\n\n## [BONUS] Interactive Elements\n\nThere are many ways to make your website interactive. HTML elements like `button`, `input`, and `select` (dropdowns) are some examples but all require some JavaScript to make them useful. \n\nFor the scope of this workshop, we will use the `details` and `summary` tags to create an interactive element. Let's put our animal image into a suprise component that will show when the user clicks clicks to access the summary. \n\n- The `\u003cdetails\u003e` tag is used to create a details element.\n- The `\u003csummary\u003e` tag is used to create a summary element.\n\n```html\n\u003chtml\u003e\n\u003chead\u003e  \n    \u003clink rel=\"stylesheet\" href=\"https://cdn.jsdelivr.net/npm/@exampledev/new.css@1.1.2/new.min.css\"\u003e\n\u003c/head\u003e\n\u003cbody\u003e\n    \u003cheader\u003e\n        \u003ch1 style=\"color: #008B8B;\"\u003eDrshika's Awesome Website!\u003c/h1\u003e\n        \u003cnav\u003e\n            \u003ca href=\"index.html\"\u003eHome\u003c/a\u003e\n            \u003ca href=\"projects.html\"\u003eProjects\u003c/a\u003e\n        \u003c/nav\u003e\n    \u003c/header\u003e\n    \u003cmain\u003e\n        \u003cp\u003eI'm currently a \u003cem\u003e17th grader\u003c/em\u003e at the \u003ca href=\"https://www.bklynlibrary.org/\"\u003eBrooklyn Public Library's\u003c/a\u003e Girls Who Code Club.\u003c/p\u003e\n        \u003cp\u003eSome \u003cstrong\u003efun\u003c/strong\u003e facts about me:\u003c/p\u003e\n        \u003cul\u003e\n            \u003cli\u003eI love to eat pesto pasta\u003c/li\u003e\n            \u003cli\u003eMy favorite TV show is \u003ca href=\"https://www.imdb.com/title/tt4955642\"\u003eThe Good Place\u003c/a\u003e\u003c/li\u003e\n            \u003cli\u003eMy favorite sport is swimming\u003c/li\u003e\n        \u003c/ul\u003e\n        \u003c!-- put the image tag inside the details tag under the summary tag --\u003e\n        \u003cdetails\u003e\n            \u003csummary\u003eClick me for a cute suprise!\u003c/summary\u003e\n            \u003cimg src=\"https://www.pewtrusts.org/-/media/post-launch-images/2022/11/gettyimages1198849037jpgmaster/16x9_m.jpg\"\u003e\n        \u003c/details\u003e\n    \u003c/main\u003e\n\u003c/body\u003e\n\u003c/html\u003e\n```\n\nThat should look like this:\n\n![Interactive](./images/8demo.png)\n\nAnd here is a gif of the interactive element:\n\n![Interactive](./images/details.gif)\n\n## Conclusion\n\nYou've just built your first HTML website! You can keep adding more and more elements to your website to make it more and more interesting. Here are some ideas:\n\n- Add a video\n- Change the styling (fonts, colors, background, etc.)\n- Add a form\n\nHope you had fun! See you next time!\n\n## Acknowledgements\n\n- [New.css](https://newcss.net/)\n- [Inter Font](https://fonts.google.com/specimen/Inter)\n- [Penguin Image](https://www.pewtrusts.org/-/media/post-launch-images/2022/11/gettyimages1198849037jpgmaster/16x9_m.jpg)\n- [Girls Who Code HTML Tutorial](https://girlswhocode.com/programs/code-at-home)\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fdrshika%2Fgwc-html-workshop","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fdrshika%2Fgwc-html-workshop","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fdrshika%2Fgwc-html-workshop/lists"}