Jump to content

Github Avatar Maker (Hubs)


Recommended Posts

Github is version control for your code, this is how you can program and backup your code, role back to earlier versions etc..

The task for this week would be to get your first Javascript program up and running, the avatar creator.

Step 1: Visit Github and create your account. https://github.com/

Step 2: Visit the Hackweek-avatar-maker repositiory and Fork a version to your account. https://github.com/mozilla/hackweek-avatar-maker Forking is when you make a copy of code that is already publicly available and you can use that as a basis for working on your own. 

Step 3:Now you have forked the Repository you will need need to make sure that you have all the tools on your PC ready for development.

1) Your IDE (Integrated Development Environment) - We recommend using VSCode this is the leading tool that programmers use when making software and it comes with many interesting plugins that can help you when coding such as syntax highlighter and error checker.


2) Github Client, now you are a developer you will need the tools of developers! That means we need to get our hands on the Github client so that we cam get access to the millions of free programs out there on the web.

3) We will be learning NodeJS! The funny thing is this Avatar project also runs on NodeJS so naturally you will need it installed too..

Step 4: Assuming that you have your Github account, Your IDE ready and also the Github client you can now start forking code. 

Process is as follows:

For every public project that you will find out there on the web there are 2 very important metrics to look out for. Stars and Issues. Stars is how many people 'like' the project, generally the more stars a project has then the more popular it is, and issues tab. Issues tab is for when someone has a particular issue with an open source project they can post an issue about it to get help from the wider community.

So yes assuming you got everything its actually very simple to run a program that is based on NodeJS such as the avatar make.

i. Open your Documents
ii. Open up a terminate window and do the command git clone https://github.com/mozilla/hackweek-avatar-maker.git
iii. Give it some time it will download the full project into your document folder
iv. After everything is ready do the command npm install when using NodeJs this is the step that downloads all of the program dependencies as defined in the package.json file (you can always tell if a project is 'Node' project if it has a package.json.
v. Once all dependencies are installed you can run your program with npm start


As you can see this process is different to the first process you did when joining MetaScript, the next part of the course will be focusing on the fundamentals so we will be taking everything from ground up. 

Let me know if you need any help or any clarifications regarding the homework!


Link to comment
Share on other sites

  • Anthony changed the title to Github Avatar Maker (Hubs)

Hello @Walkabout I believe this was in reference to the programming fundamentals:

  1. Algorithms and flow control structures (if-else, loops, etc.)
  2. Variables, data types, and data structures (strings, arrays, lists, etc.)
  3. Functions and procedures
  4. Object-Oriented Programming (OOP) concepts like classes, objects, inheritance, polymorphism, etc.
  5. Input and Output (I/O) operations
  6. File handling and storage management
  7. Exception handling and error management
  8. Debugging techniques
  9. Design patterns
  10. Database programming and SQL
  11. Networking and Web Development concepts
Link to comment
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.


  • Create New...

Important Information

We have placed cookies on your device to help make this website better. You can adjust your cookie settings, otherwise we'll assume you're okay to continue.