Skip to content
Waqas Ali edited this page Sep 28, 2018 · 5 revisions

So you know HTML, CSS, Bootstrap, JavaScript and jQuery. That's everything you need to know to get started with web development. Let's learn how to properly put these technologies together into a website, share it with others and publish it.

1. Properly put the technologies together

Read this.

2. Share your code

Skim through What Is Git & Why You Should Use Version Control If You’re a Developer

3. Publish

Once we have a website, we will publish it on Github which offers free hosting of websites. Chi Sun smart laundry system's website is hosted for free on Github.

What to do:

  1. Follow everything before "Branches" at Learn Git in 30 Minutes
  2. Create a Github account
  3. Create a Github repository with the name [YOUR_GITHUB_USERNAME].github.io just like this.
  4. Download and Extract HTML5 Boilerplate
  5. Learn basic command line commands for Windows here and for Linux/MacOS here.
  6. In your Command Prompt/terminal, change into the directory where you extracted the boilerplate in step 4.
  7. git init to initialize a git repository.
  8. git remote add origin https://github.com/[YOUR_GITHUB_USERNAME]/[YOUR_GITHUB_USERNAME].github.io.git to add your Github repository as the remote repository
  9. git add -A to stage all files.
  10. git commit -m "Initial files" to create a commit with the message "Initial Files"
  11. git push origin master to push your files to your Github
  12. Go to your Github repository's settings https://github.com/[YOUR_GITHUB_USERNAME]/[YOUR_GITHUB_USERNAME].github.io/settings
  13. Scroll down to "Github Pages" and set the source as master branch
  14. You will have a live website on https://[YOUR_GITHUB_USERNAME].github.io
  15. Try to understand the HTML5 Boilerplate
  16. Use Atom Editor to open the boilerplate above
  17. Build your personal website on top of the boilerplate
  18. Repeat steps 9 to 11 to push the changes to Github
  19. Your personal website will be live 😃 (Don't forget to share it in the main WhatsApp group!)

If you face any problem, do the following until you solve it:

  1. 🔍 Google for at least 10 minutes. (The Read-Search-Ask Methodology for getting unstuck)
  2. 📱 Send a message in the Turing Club WhatsApp group and someone will help you out.

Congratulations on finishing! 💃You are now ready to understand and contribute to the Chi Sun Smart Laundry website.

If you have any suggestion or feedback about this tutorial, share it in the group so we can improve it for those after you.