neoG Camp 2023 waitlist is open

Need Help?

lessonTwo: host your first website

Objective: Host your first website. In order to do that, we will learn

  • how Git works,
  • how Github works,
  • how to use VSCode like a pro,
  • how to host your website for free online,
  • how to work like a professional with all these tools

Getting Ready: We did our first lesson as an intro to programming. Now, we are getting into serious development. And serious devs have their workspace setup. They know their tools. I am not the best at this, but I will cover whatever I know and use daily. Feel free to explore more.

how this works

If you have done lesson 01, you know that this will be a series of mini exercises.

Think of this as you watch me playing a game. Take notes on how I cross each level. Then go ahead and close this video, and using the companion guide, play it yourself.

why this way?

You might have heard the term, "MUSCLE MEMORY". Well, there's no such thing as that. But there's something called myelin. Research has found out that to be good at something you need a lot of myelin at that skill forming neurons.

And myelin comes only when you try to retrieve it. Try to fetch something from your memory. By just seeing the screen and typing you are not fetching anything from your memory. However, if you do it the right way you'll learn and develop the skill!

This is the reason why you are viewing 100s of tutorials online but go blank when you have to develop something of your own, or when you go to an interview.

For the past year, I have read extensive research on cognitive science and even written my own paper, and if you want to be the best of the best, give yourself some hard time.

No pain, no gain.


PART ONE: SETTING UP GIT and GITHUB

ex01: explain to a 10-year-old what is git

challenge

Without using any technical terms can you explain what is git? Why do we need it? In the simplest terms?

If you don't have someone to explain, maybe tweet or put a LinkedIn status about it.

understanding

  • what, who and when was done something to code
  • If you can explain it to a 10-year-old, you know it.

ex02: intialise a git repo

challenge

  • Using github desktop initialize a git repo.

understanding

  • multiple choices, around README, .gitignore, LICENSE. To get started choose the default options.

homework:

  • Read about open source LICENSE. Explore LICENSE of some famous open source repositories

ex03: create a file in the repo

challenge

  • Open this repo in Visual Studio Code
  • Create a file index.html.
  • See the changes

understanding

  • green is added
  • red is removed
  • + is file added

ex04: commit your first changes

challenge

  • Add a commit message
  • Commit to the main branch.

understanding

  • commit
  • main

ex05 : understanding commit messages

understanding

  • Writing good commit message is a skill. Let's understand this.
feat - a new feature
fix - a bug fix
docs - changes in documentation
style - everything related to styling
refactor - code changes that neither fixes a bug or adds a feature
test - everything related to testing
chore - updating build tasks, package manager configs, etc

Use this to start the message. Like if we added a test for a function that checks leap year, we start with test. Then in short describe the work we did

test: add unit test for leapYearCheck()

note

We don't do it right all the time. But it's good to put some thought into commit messages. Look into commit messages of open source work on Github to get some inspiration.

But don't get overwhelmed with this.

live exercise: write a good commit message

challenge

Q. What would you put as a commit message if:

  1. You added some details to the README.md file?
  2. Your CLI app was taking "potato" as an input for leap year test?
  3. You started using CHALK library in your CLI app?
  4. You added level based game play in your CLI app?
  5. You renamed your variables from var a to var questions?

exercise 06: publish to github

challenge

  • publish your repository to Github
  • go to github.com and see your repository

understanding

  • we use Github to host and save the code in a centralized location
  • there are other tools like Github: Azure DevOps, BitBucket, Gitlab etc.
  • major use is for collaboration. Apart from personal projects, people generally work in a team.

live exercise: add readme and commit

challenge

  • create a file README.md
  • add details of your project on the file. Say, that this is your personal portfolio in making. Some details about you.
  • commit the changes (let's see what commit message you're going to use)
  • push the changes to Github
  • go to Github and see your changes now

understanding

  • push
  • markdown
  • how README.md is special

revision

By now you know how to

  • why git
  • create a repo
  • publish repo
  • make commits
  • write good commit messages
  • push commits to server
  • some markdown for documentation

PART TWO: SETTING UP NETLIFY

ex01: Explain how the Internet works

challenge

Can you tell what happens when you type neog.camp in the address bar and press enter?

Record a small video for yourself explaining this.

understanding

  • domain name
  • server (files served)
  • hosting
  • client

ex02: setup netlify to show your website

challenge

  • Sign up to netlify using your Github login.
  • Select new site from the repository
  • Select your Github repository

understanding

  • there are other providers like Netlify: Azure, AWS, Heroku etc. and you can explore them.
  • everytime you change something on the website it will be published automatically

ex03: check deploy

challenge

  • explore the deploy section of Netlify

understanding

  • this section shows all the deployments done with history

ex04: change the domain name

challenge

  • the domain name provided is random, change it to your name
  • use this to access your web app and share it with your friends

live test: local to the website

challenge

  • do a change in your VSCode, and add some text to your index.html file. Anything which makes some sense, like, I work at Microsoft or I study at MIT, Manipal.
  • commit
  • push
  • go to Github and check if you can see the change in index.html on github.com
  • go to Netlify and check if your changes are deployed. Look for the timestamp.
  • finally, go to your website and check if new changes are there.

live test: update the URL on Github

challenge

  • github has a place where you can put the URL of your website. add it there.

PART THREE: SETTING UP VSCODE

ex01: take a tour of vscode

challenge

  • know where file explorer is
  • checkout search section
  • extensions
  • source control
  • settings (Ctrl + ,)
  • shortcut

ex02: try some shortcuts

challenge

Let's see if you can do these things. Look once and then try yourself.

  • show/hide terminal
  • show/hide sidebar
  • open file
  • command pallete
  • jump to line number
  • jump to symbol
  • toggle wrap

Note: You don't need to know everything. But I suggest trying to use shortcuts as much as possible, it saves a ton of time.


PART FOUR: GETTING INTO THE DEV WORKFLOW WITH ALL THE SETUP

ex01: knowing how a dev in a team works?

  • you see what happens when you push the changes to the server when Netlify is connected: it goes live
  • so, how would you save your unfinished work? keep it on the laptop? no!!
  • a developer in any team creates her branch for new work
  • she does all the work in that branch and pushes that branch
  • when work is done, she raises a PR (Pull Request) which is approved by other team members, and then it goes to the master.
  • it's a good practice to follow even when you're working as a single person. this keeps your main free for hotfixes.

challenge

Try visualizing yourself working in a team of developers. Everyone working on different features, and different branches, but all go into the same website. :)

ex02: create a branch

challenge

  • create a new branch
  • name it yourname/project-details
  • verify that you're in new branch

understanding

  • branch is a separate route, think of it as taking a diversion from main road, getting petrol while you're on a long road trip.
  • then you go back to the main road with petrol in your car
  • getting petrol is a feature which you implemented :)

ex03: do changes in this branch

challenge

  • edit the index.html file. Add details about the projects you have made.
  • commit your changes. notice that changes are committed in new branch.
  • push. it will be pushed to this new branch
  • go to github and check if your file has changed
  • go to netlify and check if there's a new deploy
  • go to website and check if the new text is up
  • now explore the branch section on github and see your changes in that branch

understanding

  • pushing changes to a branch does not publish it to Netlify
  • this way, you can keep your work in progress safe on github

ex04: open a PR

challenge

  • create a pull request for your new branch
  • fill in description and headline
  • check out the file changes
  • get the PR link. you can send this for review to your friend to make sure that you're doing the right changes. That would essentially be PR review

understanding

  • PR review, important when you're working in a team

ex05: merge PR

challenge

  • merge the PR which you just made
  • now, check your changes on
  1. main branch
  2. deploy in Netlify
  3. update on website

ex06: going back to main

challenge

  • now your changes are part of main
  • go back to main and pull the changes

understanding

  • this might look weird when doing alone
  • think you're working in five member team, to make sure that TeamMate03 receives changes of TeamMate02 and TeamMate01, she should pull master often.
  • an important practice when you're working in industry

Note about jobChallenge: Feedback I got from hiring partners was that students didn't know how things work in indsutry wrt git. Trying to cover some parts of it in this video.

live exercise: do the entire thing

challenge

  • make sure you're in main
  • create a branch, make changes to index.html file. Add details of your favorite book/movie etc.
  • push the new branch to Github.
  • create a PR, fill details.
  • merge PR and see your changes reflect.

assignment for markThree

We have made two projects in lecture One.

  1. How well do your friends know you? Quiz which we made live.
  2. Fandom Quiz. The assignment is to create a quiz about any topic you're interested in.

Assignment for today is that you create two repos for both the projects and push the changes. Make sure you use

  • good commit messages
  • update README with details of the project
  • update URL of the REPL in Github

Note: This is the only thing required out of this lesson to go to levelOne. Read about the mark-15 checklist if you haven't read about it.


bonus (optional) homework: learn markdown

Markdown is a good skill to have. Essentially there are 4-5 things you need to know: headings, bullets, code, quote and that would be enough.

Search online and you'll get tons of tutorial on this. Learn this skill. It will be useful.

bonus (optional) homework: hacktoberfest video

During the hacktoberfest we showed how to open PRs on other repo. A repo that you don't own. This introduces concepts of cloning and forking which are extremely important when you want to contribute to someone else's repository.

This is not mandatory but I strongly suggest that you check it out. Hacktoberfest 2019 video.

bonus (optional) homework: explore repos

Go to Github Trending and pick any repository. You don't need to understand the code. Observe

  1. Branch names
  2. Commit messages
  3. README file
  4. Open PRs
  5. Open issues
  6. Contributors
  7. Stars on the repositories

This will help prime your brain with how to keep a nice repository. If you like a repository star it. If you like a contributor, follow them.

bonus (optional): explore the git terminal

While we did the entire thing in GUI to make it easy for beginners. In day-to-day life, most devs use git in the terminal. Don't get panicked, there's plenty of time to learn that.

You can explore the commands for what we just learned using this video I made last year.

bonus (optional): idea for blogs

If you want to write blogs on what you're learning please feel free to document your journey. You can also go a step further and do some investigative blogs

  1. Trending repos I explored
  2. What are the alternatives to Github?
  3. What is hacktoberfest and why you should care?
  4. What are some open source licenses and when to use them?
  5. Most used git commands.
  6. Some lesser known git commands.
  7. Let's understand git branching.
  8. Writing good commit messages.

Write these blogs. And keep them ready for tomorrow's session.


stuck? need help?

If you have doubts anywhere during levelZero, we have a 21k+ strong developer community on Discord.

Go to Discord Server and ask doubts in the general-coding channel.