Import of glitchdotcom/glitch-hello-website
This commit is contained in:
Glitch (glitch-hello-website)
parent
ed6f42c944
commit
8fb1d937b5
4 changed files with 142 additions and 18 deletions
25
README.md
25
README.md
|
|
@ -1,17 +1,32 @@
|
|||
# Hello, and welcome to Glitch
|
||||
This is a basic HTML starter project you can build on however you like. No need to save. While you develop your site, your changes will happen 🪄 immediately in the preview window. You can upload assets like images or audio in `assets` to the left. Stylesheets and JavaScript live in the `public` folder. The rest is up to you and your imagination.
|
||||
# Hello website!
|
||||
|
||||
This is a basic HTML starter project you can build on however you like. No need to save. While you develop your site, your changes will happen ✨ immediately in the preview window. On the left you'll see the files that make up your site, including HTML, JavaScript, and CSS. You can upload assets like images or audio in `assets`. The rest is up to you and your imagination. 🦄
|
||||
|
||||
## What's in this project?
|
||||
|
||||
← `README.md`: That's this file, where you can tell people what your cool website does and how you built it.
|
||||
|
||||
← `index.html`: This is the main HTML page for your site.
|
||||
← `index.html`: This is the main web page for your site. The HTML defines the structure and content of the page using _elements_. You'll see references in the HTML to the JS and CSS files. Try clicking the image in the center of the page!
|
||||
|
||||
← `style.css`: CSS files add styling rules to your content.
|
||||
← `style.css`: CSS files add styling rules to your content. The CSS applies styles to the elements in your HTML page. The style rules also make the image move when you click it.
|
||||
|
||||
← `script.js`: If you're feeling fancy you can add interactivity to your site with JavaScript.
|
||||
← `script.js`: If you're feeling fancy you can add interactivity to your site with JavaScript. The code in the JavaScript file runs when the page loads, and when the visitor clicks the button you can add below.
|
||||
|
||||
Open each file and check out the comments (in gray) for more info.
|
||||
|
||||
## Next steps 🚀
|
||||
|
||||
Make an edit to your website! In `index.html`, add this code on the line after the comment with "ADD BUTTON HERE" in it (you can copy and paste the button element HTML):
|
||||
|
||||
```html
|
||||
<button>
|
||||
Click me!
|
||||
</button>
|
||||
```
|
||||
|
||||
Look at the page to see the button. Click it!
|
||||
|
||||
Open `script.js` to see the script that makes the button rotate.
|
||||
|
||||
|
||||
|
||||
|
|
|
|||
65
index.html
65
index.html
|
|
@ -1,43 +1,88 @@
|
|||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<!--
|
||||
This is the page head - it contains info the browser uses to display the page
|
||||
You won't see what's in the head in the page
|
||||
Scroll down to the body element for the page content
|
||||
-->
|
||||
|
||||
<meta charset="utf-8" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1" />
|
||||
<link rel="icon" href="https://glitch.com/favicon.ico" />
|
||||
|
||||
<!--
|
||||
This is an HTML comment
|
||||
You can write text in a comment and the content won't be visible in the page
|
||||
-->
|
||||
|
||||
<title>Hello World!</title>
|
||||
|
||||
<!-- meta tags for SEO and social sharing -->
|
||||
<!-- Meta tags for SEO and social sharing -->
|
||||
<link rel="canonical" href="https://glitch-hello-website.glitch.me/" />
|
||||
<meta name="description" content="A simple website, built with Glitch. Remix it to get your own." />
|
||||
<meta
|
||||
name="description"
|
||||
content="A simple website, built with Glitch. Remix it to get your own."
|
||||
/>
|
||||
<meta name="robots" content="index,follow" />
|
||||
<meta property="og:title" content="Hello World!" />
|
||||
<meta property="og:type" content="article" />
|
||||
<meta property="og:url" content="https://glitch-hello-website.glitch.me/" />
|
||||
<meta property="og:description" content="A simple website, built with Glitch. Remix it to get your own." />
|
||||
<meta property="og:image" content="https://cdn.glitch.com/605e2a51-d45f-4d87-a285-9410ad350515%2Fhello-website-social.png?v=1616712748147" />
|
||||
<meta
|
||||
property="og:description"
|
||||
content="A simple website, built with Glitch. Remix it to get your own."
|
||||
/>
|
||||
<meta
|
||||
property="og:image"
|
||||
content="https://cdn.glitch.com/605e2a51-d45f-4d87-a285-9410ad350515%2Fhello-website-social.png?v=1616712748147"
|
||||
/>
|
||||
<meta name="twitter:card" content="summary" />
|
||||
|
||||
<!-- import the webpage's stylesheet -->
|
||||
|
||||
<!-- Import the webpage's stylesheet -->
|
||||
<link rel="stylesheet" href="/style.css" />
|
||||
|
||||
<!-- import the webpage's javascript file -->
|
||||
<!-- Import the webpage's javascript file -->
|
||||
<script src="/script.js" defer></script>
|
||||
</head>
|
||||
<body>
|
||||
<!-- the wrapper and content divs set margins and positioning -->
|
||||
<!--
|
||||
This is the body of the page
|
||||
Look at the elements and see how they appear in the rendered page on the right
|
||||
Each element is defined using tags, with < and > indicating where each one opens and closes
|
||||
There are elements for sections of the page, images, text, and more
|
||||
The elements include attributes referenced in the CSS for the page style
|
||||
-->
|
||||
|
||||
<!-- The wrapper and content divs set margins and positioning -->
|
||||
<div class="wrapper">
|
||||
<div class="content" role="main">
|
||||
<!-- this is the start of content for our page -->
|
||||
<!-- This is the start of content for our page -->
|
||||
<h1 class="title">Hello World!</h1>
|
||||
|
||||
<img
|
||||
src="https://cdn.glitch.com/a9975ea6-8949-4bab-addb-8a95021dc2da%2Fillustration.svg?v=1618177344016"
|
||||
class="illustration"
|
||||
alt="Editor illustration"
|
||||
title="Click the image!"
|
||||
/>
|
||||
<!-- Instructions on using this project -->
|
||||
<div class="instructions">
|
||||
<h2>
|
||||
Using this project
|
||||
</h2>
|
||||
<p>
|
||||
This is the Glitch <strong>Hello Website</strong> project. You can
|
||||
use it to build your own site. Check out README.md in the editor for
|
||||
more info and next steps you can take!
|
||||
</p>
|
||||
<!-- ADD BUTTON HERE -->
|
||||
|
||||
<!-- Once you've added the button from the readme, click it in the page -->
|
||||
<!-- Check out the function in script.js to see how it works -->
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<!-- the footer holds our remix button — you can use it for structure or cut it out ✂ -->
|
||||
<!-- The footer holds our remix button — you can use it for structure or cut it out ✂ -->
|
||||
<footer class="footer">
|
||||
<div class="links"></div>
|
||||
<a
|
||||
|
|
|
|||
26
script.js
26
script.js
|
|
@ -1,5 +1,25 @@
|
|||
/* If you're feeling fancy you can add interactivity
|
||||
to your site with Javascript */
|
||||
/*
|
||||
This is your site JavaScript code - you can add interactivity and carry out processing
|
||||
- Initially the JS writes a message to the console, and rotates a button you can add from the README
|
||||
*/
|
||||
|
||||
// prints a message in the browser's dev tools console
|
||||
// Print a message in the browser's dev tools console each time the page loads
|
||||
// Use your menus or right-click / control-click and choose "Inspect" > "Console"
|
||||
console.log("Hello 🌎");
|
||||
|
||||
/*
|
||||
Make the "Click me!" button rotate when the visitor clicks it:
|
||||
- First add the button to the page by following the "Next steps" in the README
|
||||
*/
|
||||
const btn = document.querySelector("button"); // Get the button from the page
|
||||
// Detect clicks on the button
|
||||
btn.onclick = function() {
|
||||
// The JS works in conjunction with the 'rotated' code in style.css
|
||||
btn.classList.toggle('rotated');
|
||||
};
|
||||
|
||||
// This is a single line JS comment
|
||||
/*
|
||||
This is a comment that can span multiple lines
|
||||
- use comments to make your own notes!
|
||||
*/
|
||||
|
|
|
|||
44
style.css
44
style.css
|
|
@ -6,6 +6,14 @@ colors, and handle the layout for our footer and "Remix on Glitch" button. If
|
|||
you're new to CSS they may seem a little complicated, but you can scroll down
|
||||
to this section's matching END comment to see page-specific styles.
|
||||
******************************************************************************/
|
||||
|
||||
|
||||
/*
|
||||
The style rules specify elements by type and by attributes such as class and ID
|
||||
Each section indicates an element or elements, then lists the style properties to apply
|
||||
See if you can cross-reference the rules in this file with the elements in index.html
|
||||
*/
|
||||
|
||||
/* Our default values set as CSS variables */
|
||||
:root {
|
||||
--color-bg: #69F7BE;
|
||||
|
|
@ -138,3 +146,39 @@ body {
|
|||
max-height: var(--image-max-width);
|
||||
margin-top: var(--image-margin);
|
||||
}
|
||||
|
||||
/* Instructions */
|
||||
.instructions {
|
||||
margin: 1rem auto 0;
|
||||
}
|
||||
|
||||
/* Button - Add it from the README instructions */
|
||||
button,
|
||||
input {
|
||||
font-family: inherit;
|
||||
font-size: 100%;
|
||||
background: #FFFFFF;
|
||||
border: 1px solid #000000;
|
||||
box-sizing: border-box;
|
||||
border-radius: 4px;
|
||||
padding: 0.5rem 1rem;
|
||||
transition: 500ms;
|
||||
}
|
||||
|
||||
/* Subheading */
|
||||
h2 {
|
||||
color: #2800FF;
|
||||
}
|
||||
|
||||
/* Interactive image */
|
||||
.illustration:active {
|
||||
transform: translateY(5px);
|
||||
}
|
||||
|
||||
/* Button rotate
|
||||
- Toggling this class on and off will rotate it forward and back
|
||||
- The button transition property above determines the speed of rotation (500ms)
|
||||
*/
|
||||
.rotated {
|
||||
transform: rotate(360deg);
|
||||
}
|
||||
|
|
|
|||
Loading…
Reference in a new issue