Lesson 0

What we will learn today?

CodeYourFuture

  • Who we are?
  • What we learn?
    • Read this Technology Survey from StackOverflow. Pay particular attention to the technologies we'll be teaching you (JavaScript, React, NodeJS)
  • House Rules
    • How we work?
    • How we treat each other?
  • Standup

Welcome!

Welcome to CodeYourFuture and to the world of Web Development! Now that you have built a website in CodePen and learned the basics of HTML and CSS, it's time to learn about the tools that web developers use in their everyday job. These tools will be used during the course, so it is important that you become familiarised with them.

In order to get started, we would like you to try to complete a task at home: move your CodePen website to a web address under https://your-username.github.io/your-site-name.

In the process, you will learn how to store your code outside CodePen's website, in a location where other developers can make changes to it and view a history of all the updates that you have made.

If you wish to learn more about the concepts behind the steps we are suggesting below, please read the rest of this document.

And remember: it's ok if you are stuck and don't know how to continue. At any point, please ask for a mentor's help. We will cover these steps again in the lesson, and will explain them in more detail.

How to move your website to Github.io

  1. Export your website as a zip from CodePen. Help >
  2. Extract the contents of the zip file to a folder in your computer. Keep note of the location of this folder.
  3. Read about the terminal.
  4. Read about git.
  5. Install Git.
  6. Put the contents of the zip folder in a Gitub repository. How does Github work? (30min) >
  7. You should now have a page with your code under http://github.com/your-username/your-repository-name. This is a view of your code, and you should see a list of your files, including an index.html.
  8. Now all that remains is to publish your website! Still under http://github.com/your-username/your-repository-name, find the settings icon in the top right corner.
Repo settings
  1. Find the section named "Github Pages" and select "master branch" in source, then hit "Save".
Repo settings - Github pages
  1. Wait a few minutes, then refresh the page and come back to the Github Pages section. You should see a green bar saying "Your site is published at http://github.com/your-username/your-repository-name". Click the link, verify that your website is there, then share it with your CYF class!

Homework

  • If you have not yet moved your website from CodePen to Github, do it now. Please use the information in this section to complete it.
  • When your website is live at https://your-username.github.io/your-site-name, please send a link to the slack channel of your class.
  • Learn how to navigate your computer using a Terminal (view files, copy files).
  • Install VS Code.
  • Open your website with VS Code and add something to it: text, images, update CSS. Commit your changes to Github and verify that https://your-username.github.io/your-site-name has been updated!

It's alright if you are getting stuck or if something doesn't look right! When it happens, please ask your mentors or classmates for help in Slack.

results matching ""

    No results matching ""