This is a basic static HTML starter project you can build on however you like. No need to save. While you develop your site using glitch, your changes will happen 🪄 immediately in the preview window. You can upload assets like images or audio in assets to the left. The rest is up to you and your imagination. Look back at this document as much as needed and remember that you are awesome!!
-
README.md: That's this file, that will guide you through this workshop and beyond. -
index.html: This is the default home page for your website -
style.css: CSS files add styling rules to your content. -
script.js: If you're feeling fancy you can add interactivity to your site with JavaScript. -
portfolio-example: This folder contains a working, responsive website that you can reverse engineer to your hearts content.
Glitch is a friendly community where millions of people come together to build web apps and websites.
- Need more help? Check out our Help Center for answers to any common questions.
- Ready to make it official? Become a paid Glitch member to boost your app with private sharing, more storage and memory, domains and more.
-
HTML tag: It is the root of the html document which is used to specify that the document is html.
- Syntax:
<html> Statements... </html>
- Code:
<html><head><title>Title of your web page</title></head><body>HTML web page contents </body></html>
- Syntax:
-
Head tag: Head tag is used to contain all the head element in the html file. It contains the title, style, meta, … etc tag.
- Syntax:
<head> Statements... </head>
- Code:
<head>Contains elements describing the document</head>
- Syntax:
-
Body tag: It is used to define the body of html document. It contains image, tables, lists, … etc.
- Syntax:
<body> Statements... </body>
- Code:
<body>The content of your HTML page</body>
- Syntax:
-
Title tag: It is used to define the title of html document.
- Syntax:
<title> Statements... </title>
- Code:
<title>tab name</title>
- Syntax:
-
Heading tag: It is used to define the heading of html document.
- Syntax:
<h1> Statements... </h><h2> Statements... </h2><h3> Statements... </h3><h4> Statements... </h4><h5> Statements... </h5><h6> Statements... </h6>
- Code:
<h1> Heading 1 </h1>
<h2> Heading 2 </h2>
<h3> Heading 3 </h3>
<h4> Heading 4 </h4>
<h5> Heading 5 </h5>
<h6> Heading 6 </h6>
- Syntax:
-
Paragraph tag: It is used to define paragraph content in html document.
- Syntax:
<p> Statements... </p>
- Code:
<p>GeeksforGeeks: Computer science portal</p>
- Syntax:
-
Anchor tag: It is used to link one page to another page.
- Syntax:
<a href="..."> Statements... </a>
- Code:
<a href="https://www.geeksforgeeks.org/">GeeksforGeeks</a>
- Syntax:
-
List tag: It is used to list the content.
- Syntax:
<li> Statements... </li>
- Code:
<li>List item 1</li><li>List item 2</li>
- Syntax:
-
Ordered List tag: It is used to list the content in a particular order.
- Syntax:
<ol> Statements... </ol>
- Code:
<ol><li>List item 1</li><li>List item 2</li><li>List item 3</li><li>List item 4</li></ol>
- Syntax:
-
Unordered List tag: It is used to list the content without order.
- Syntax:
<ul> Statements... </ul>
- Code:
<ul><li>List item 1</li><li>List item 2</li><li>List item 3</li><li>List item 4</li></ul>
- Syntax:
-
Comment tag: It is used to set the comment in html document. It is not visible on the browser.
- Syntax:
<!-- Statements... -->
- Code:
<!--Comment section-->
- Syntax:
-
Image tag: It is used to add image element in html document.
- Syntax:
<img>
- Code:
<img src="gfg.jpg" width="40"height="40" border="0">
- Syntax:
-
Link tag: It is used to link the content from external source.
- Syntax:
<link>
- Code:
<head><link rel="stylesheet" type="text/css" href="style.css"></head>
- Syntax:
-
Meta tag: It is used to specify the page description. For example: last modifier, authors, … etc.
- Syntax:
<meta> Statements ... <meta>
- Code:
<meta name="Description" content="Description of your site"><meta name="keywords" content="keywords describing your site">
- Syntax:
- Creates great and aesthetically pleasing backgrounds
- A cheatsheet for jquery
- For creating good color palettes for your website.
- For when you want to know if an HTML tag is supported on a certain web browser.
- This won't be all that relevant for the majority of y'all; however, if you just want to play around with it... here you are.
- For when you want to be reminded of how far we have come since the good ol' days.
- If you want to make documentation as good or better than this then follow me
- HTML:
- CSS;
- A great start for learning CSS, hands on, CSS and very thorough
- Another good site
- Presentation on how to make good looking CSS
"Straight from the horse's mouth"
- How to organize your tags.
-
Bootstrap 5 tutorial.
- JavaScript:
- Wanna speed run JavaScript and inflate your projects list?
- Another good site
"Straight from the horse's mouth"