Introduction to Website and Web App Development

Assignment

Your assignment this week comes in two parts:

Forum Post

In WolfWare, you’ll find and introductions forum. Please take a moment to introduce yourself there using the instructions in the post.

Environment Setup

Before we dig in to coding next week, you’ll need to set up your coding environment. This exercise will allow you to get GitHub Desktop and Visual Studio Code running on your machine. You can also test your setup and make sure that you can navigate the different parts of the interface.

  1. Download and install VSCode or another text editor of your choice.
  2. Log in to GitHub and create an account if you do not already have one. Your username and email do not have to be tied to your NC State account if you do not want to. Nobody can see the email address you use, and you can continue to use GitHub long after you’re done with this course.
  3. Download and install GitHub Desktop on your computer.
  4. Open GitHub Desktop. Sign in with your new GitHub credentials.
  5. Create a new repository called “Test”. GitHub repositories are where we store code - think about it like Google Docs, but for code. Another feature of GitHub Desktop is that it allows you to publish HTML code and host them as websites.
  6. Find the GitHub Desktop preferences. On the Integrations tab, set your External Editor to Visual Studio Code.
  7. In the main GitHub screen, click the button that says “Open in Visual Studio Code”. You should see VS Code open and your repository name displayed in the left pane.
  8. Create a new file in VS Code by right clicking in the left pane and clicking New File. Call it index.html. Paste in the following code. 
         <html>
         <body>
             This is a very basic HTML test.
         </body>
     </html>
  9. Save the file.
  10. Preview the file in your browser. Right click on the file and select Reveal in Finder (Mac) or Reveal in Explorer (PC). Double click on the file when it is displayed. It should open in your web browser. If it does not, drag it over top of your browser icon in your dock.
  11. Return to VS Code (do not close your browser). Make any change to the text of file and save it.
  12. Return to your browser and click refresh. You should see your changes. As you develop your sites in the future, you can use this method to see how your webpage will look in real time.
  13. Switch to GitHub Desktop. Once we have our code done, we need to “Commit” the code. Committing the code freezes it in time (like a revision in Google Docs). All commits must have a message that defines what we have done so that you can quickly look at prior versions and know what changes were made. For this, we can use “Initial Commit” as our commit message, and then we can click Commit to Main.
  14. Click Publish Repository. This pushes our changes to the Internet. Give the repository a name (we can use “Test” for this if you choose - repository names must be unique within your own account, but may have the name name as repositories in other accounts). Make sure to uncheck the “Make Code Private” box so that I can see your code.
  15. Return to VS Code. Make another change to the file and save it. Return to GitHub Desktop, add a commit message, and commit the code.
  16. Click Push Origin. This will send the latest code to GitHub.com. You will do this save, commit, push procedure every time you want to send code to the Internet.
  17. Click view on GitHub.com. The GitHub website will open up. Copy this URL and submit it in WolfWare in the Week 1 Assignment box.
  18. On there, you will be able to see your code. Clicking on the n commits link in the middle-upper right lets you see the commit history. Clicking an individual file will also let you view the history of the changes to that file.

Remember: Save, Commit, Push

These are the three ingredients of getting your code into GitHub.