/intro-to-web-demo

ACM x H4I Intro to Web Dev workshop - demo

Primary LanguageHTMLMIT LicenseMIT

Make Your Own Website

  1. To get started, you'll first need to create a GitHub account, which can be done here.

  2. Next, you'll need to make a copy of this repository on your own account. To do so, click on Use this template (see top right corner of the image below). Use this template

  3. Fill out the information with a repository name of your choice (this example will use webdev-intro-workshop). Make sure to make the repository public. Filling out template

  4. After your repository is generated, go to the Settings tab (bottom right of the first picture below). Settings

  5. Scroll down to the GitHub Pages section, change Source to main (you can leave the / (root) as is) and hit Save. GitHub Pages

  6. This template is now ready to be hosted on GitHub pages, and you should see a link in the GitHub Pages section of settings. It may not work immediately, but after a few minutes you should see the results of the template at the specified URL. GitHub Pages URL

  7. Now that we've got GitHub pages working, you'll need to set up a CodeSandbox account. Navigate to the sign-in page and hit Sign in with GitHub. After signing in with your GitHub, you'll be redirected to your account dashboard.

  8. From the dashboard, click on New Sandbox. Switch to the Import Project tab and enter the GitHub URL (for example, https://github.com/arpanlaha/webdev-intro-workshop) of the repository you just created. Hit Import and Fork to generate your sandbox. New Sandbox Import Project

  9. You'll now have copies of all the files from the template in CodeSandbox. As you make any edits, you'll be able to see the changes reflected on the right-hand panel.

  10. Click on the GitHub logo on the left-hand vertical navigation bar (third from the bottom in the screenshot below) and hit Sign in. GitHub logo

  11. After signing in, hit Link Sandbox in the same menu pane to link the sandbox you're working on to the repository you just created Link Sandbox

  12. You can now make changes in your sandbox and push them to your repository, from which they'll be deployed to GitHub pages. Let's test this out.

  13. Switch back to the filesystem view (second icon below my profile picture in the screenshot below) and go to index.html. filesystem view

  14. On line 11, after Hello world!, add some more text (Test in the example) and save using your operating system's shortcut (Ctrl-s or Cmd-s). You should see this reflected on the right. Add test

  15. Navigate back to the GitHub menu pane (where we linked our sandbox). Add a short description of your changes to the Summary input (not the Optional description), and hit Commit Changes. If you then navigate to your GitHub repository, you'll see your changes have been pushed. After a few minutes, you'll also see your changes reflected in the deployed GitHub Pages URl we made in step 6. Commit changes

  16. You're now ready to start building your own personal website!