Skip to content

Latest commit

 

History

History
151 lines (132 loc) · 6.16 KB

first-site.md

File metadata and controls

151 lines (132 loc) · 6.16 KB
Raw

Our First Site

<- Go Back

Follow the next steps to create your first site!! These steps are fast pace but follow them and know that we will review every component of this tutorial throughout the course.

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
  • styles.css
  • script.js open Visual Studio Code
  1. Copy and Paste the following code on each document

index.html

<!DOCTYPE html>
<html lang="en">
<head>
  <title>My First Site</title>
  <link rel="stylesheet" href="styles.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. For this we will use GitHub Pages. Now the next section moves quickly but we will cover Git in the next section.

  1. Open a browser and navigate to https://github.com/join.
  2. Set up your account. Pick a username that is professional since employeers will look at this account. Click "Create an account".
  3. Choose your subscription. Choose Free and click "Continue".
  4. (Optional) Tailor your experience. Fill out the details and click "Submit".
  5. Verify email and log into your GitHub Account.
  6. Create a new repository called my-first-site and click "Create Repository".
  7. In Visual Studio Code, open the Integrated Terminal and make sure that you the default shell is bash. Integrated Terminal
    • For Windows Users, make sure the Default Shell is set to bash or Git Bash.
      • Click the dropdown in the top right of the Terminal and click Select Default Shell.
      • Select Git Bash as the default shell. Terminal Shell Selector
      • Close and re-open the Terminal.
  8. In the Integrated Terminal, enter the following lines in the terminal replaced with your GitHub details: 
    git config --global user.name <github userID>
git config --global user.email <github email>
  9. In the Integrated Terminal, copy and paste the following line: 
    git init
git add .
git commit -m "my first commit"
  10. In GitHub, Click the copy to keyboard the commands in "…or push an existing repository on the command line" section. GitHub new repository
  11. In the Integrated Terminal, paste the copied line from the "…or push an existing repository on the command line" section. You may be required to Login using your GitHub username and password.
  12. Go to the repository page and refresh. You should see the files that you created. GitHub my-first-website repository
  13. Under your repository name, click "Settings". Repository settings button
  14. Use the "Select" source drop-down menu to select "master branch" folder as your GitHub Pages publishing source. Select master as source
  15. Click the link in the GitHub pages section. Link where site is ready to published
  16. 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

Let's Git started