Skip to content

Latest commit

 

History

History
156 lines (138 loc) · 5.51 KB

first-site.md

File metadata and controls

156 lines (138 loc) · 5.51 KB

Our First Site

Follow the next steps to create your first site!!

Create a local site

  1. Download & install Visual Studio Code
  2. Create a folder with the name: my-first-site create site folder
  3. Open Visual Studio Code open Visual Studio Code
  4. Open my-first-site using Visual Studio Code open Visual Studio Code
  5. Create the following files inside the my-first-site folder :
  • index.html
  • style.css
  • script.js open Visual Studio Code
  1. Read and write the following code on each document

index.html

<!DOCTYPE html>
<html lang="en">
<head>
  <title>My First Site</title>
  <link rel="stylesheet" href="style.css">
  <link rel="shortcut icon" href="favicon.ico" type="image/x-icon">
</head>
<body>
  <div>
    <h1>Hello World!!!</h1>
    <p>Now let's conquer the world!!</p>
    <button>Click Me</button>
  </div>
  <script src="script.js" type="text/javascript"></script>
</body>
</html>

style.css

body {
  background-color: lightgray;
  font-family: Arial;
  text-align: center;
  display: flex;
  align-items: center;
  justify-content: center;
  height: 90vh;
  justify-content: center;
}

h1 {
  font-size: 72px;
}

p {
  font-size: 28px;
}

button {
    color: white;
    font-size: 125%;
    border-radius: 4px;
    border: none;
    text-shadow: 0 1px 1px rgba(0, 0, 0, 0.2);
    background: rgb(28, 184, 65);
    padding: 10px;
    outline: none;
    cursor: pointer;
}

button:hover {
  background: rgb(66, 184, 221);
  padding: 12px;
}

script.js

window.onload = function() {
  var button = document.querySelector('button');

  button.addEventListener('click', function() {
    alert("Let's Rock!!");
  });
}
  1. Download the following favicon.ico to my-first-site folder
  2. Go to the my-first-site folder and double click the file index.html
  3. You should see a web page like this one: My First Site

Publish our Site

At this point we created our first web but we can only access it from our computer as it's running locally. To be able to publish it we need a free hosting and a domain.

  1. Open a browser and navigate to https://www.awardspace.com
  2. Click on Free hosting
  3. Click on Give it a try Awardspace
  4. Create your account using Facebook, Google or by input new credentials Awardspace
  5. You'll get a confirmation email with the system login information (it will be something like: https://cp1.awardspace.net/beta)
  6. Confirmate you email account
  7. Login to the system using your credentials AwardSpace Dashboard
  8. Configure a subdomain by clicking Domain Manager under the First Steps Made Easy First Steps Made Easy
  9. Select Create a Free Subdomain First Steps Made Easy
  10. Input a subdomain name and click the create button (this is the URL that we'll access online)
  11. Open a new tab and navigate to the URL that you just created. You should see a landing page
  12. Now that we have a hosting and domain configured we need to upload our site to publish it.
  13. Download & install Filezilla or any other FTP client
  14. Head to the AwardSpace Dashboard and click FTP manager section FTP manager
  15. Create an FTP account using username and password FTP account
  16. Click on your ftp user name options button FTP options button
  17. Download FileZilla configuration file by clicking FTP configurations files button FTP account
  18. Open & configure Filezilla using the configuration file FTP account
  19. Click on the upper left icon to open the site manager FTP - Sites
  20. Change the Login type: to normal
  21. Configure your Password: that you used while creating the ftp user
  22. On the left side of the Site Manager you have your local files and on the right the hosting one Filezilla Files
  23. Find you my-first-site folder on the left side
  24. Select all the files (press shift to select multiple files)
  25. Drag the selected files to the right side
  26. FileZilla will upload the selected files and place them on our hosting
  27. Once it's done uploading refresh the subdomain that we created
  28. Congratulations, you have your first site online!! Congratulations

Extra

  • Change the h1 and p wording (index.html)
  • Set the body background-color to red (style.css)
  • Refresh the local site to see the changes
  • Upload the changed files to deploy the new site version
  • Try to create your own version of the site

Resources

<- Go Back