Summer Camp 2019

HTML

In the exercise we will be remixing our own website, you will be given a already complete website along with its code. With this code you can observe how a image, a video and fonts are placed and used within a website.

The code shown above is the complete code for creating a basic webpage. The main components of the code that you will modify are the text, the background image, the poster image used for the video and the video to be played. To ensure that the webpage you create functions properly, it is necessary to have both codes are complete since they each are responsible for different parts of the webpage. HTML is for the content of the webpage and the CSS is for modifying the appearance of the webpage. In order to add in your own video, image and text, use the following steps on the code provided in this link:

LINK TO THE MEME TO REMIX

Changing Fonts

  1. To start off, locate within the index.html file the section labelled FONTS
<!-- FONTS -->
    <link href="https://fonts.googleapis.com/css?family=Anton&display=swap" rel="stylesheet">
  1. Highlighted above after link href specifies a link to a font
body {
   /* other css parameters go here */
   font-family: 'Anton', sans-serif; /* change the font name here */
   font-size:2em;
   letter-spacing: 0.2em;
   text-align: center;
 }
  1. To change the font, go to Google Fonts (https://fonts.google.com/) and select a font you would like to use

GOOGLE FONTS

  1. Click on the red plus button as highlighted in the image above and a new tab should pop up, click on it
  2. In this tab, under the Embed Font section, make sure the STANDARD option is selected and copy the link shown in the grey area below
  3. Return to the html.index file and replace the link currently there with your new font. Now you should see the font in the webpage change to the one you selected

Changing the message and color

  1. Go to the body section and you should see a section labelled TEXT
<!-- TEXT -->
<h1> 
    <span id="blue">  KWAI</span> <!-- the span id will specify the colour of the text in that span, using the HEX colour that is assigned to 'blue' found in the .css file.-->
    <span>            NOT</span>
    <span id="red">   MVP?</span>
</h1>

#blue {
    color: #1d4289;
    /*the numbers and letters above after the '#' are called a HEX colour code and they together they represent a colour. In this case #1d4289 is blue.*/
  }

#red {
    color:  #c80f2e;
  }
  1. You can change the word in each line along with the color
  2. The color can be changed by typing in the name of the color or with the hex number id for the color. (https://coolors.co/) can be used to find the hex id for the color.

Changing the background

  1. To change the background you have to place the image first into the Assets folder. To do so find any image within the provided Google Drive and save it to you computer, after drag and drop it into the Assets folder in Glitch

  2. Now copy the address link for the image you have chosen in Glitch, either right click and click on Copy image address or left click on the image and click on the copy option within the pop up

  3. Go to the style.css file and go to the body section, you should find a section labelled background-image, erase the url there and paste the one you copied before, ensure that the quotations are still there

body {
    /* other css parameters go here */
    background-image: url("https://cdn.glitch.com/62f6e87f-3294-4a62-a907-47810c7db621%2Fbackground.jpg");
}

Changing the video and poster

  1. To change the video, it is very similar to changing the image before. Bring a mp4 video file from the Google Drive and place it into the Assets folder and like before paste the address after the part labelled src= that is above the poster= part, ensure that the quotations are still there surrounding the link
<!-- VIDEO -->
    <video id="kawai" 
        src="https://cdn.glitch.com/62f6e87f-3294-4a62-a907-47810c7db621%2Fkaway-video.mp4" 
        poster="https://cdn.glitch.com/62f6e87f-3294-4a62-a907-47810c7db621%2Fgiphy-main.png"
        onclick="this.play();">
    </video>

  1. The next step is to add a thumbnail, to do so you will need to change the image used for poster

  2. For the thumbnail, find an image within the Google Drive and go to the html.index file. Within the body section, go to video and replace the address after poster=, ensuring that you have double quotations surrounding your link

LINK TO GOOGLE DRIVE VIDEOS AND IMAGES

Voila! You have now customized your own website!