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
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.
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
Using github desktop initialize a git repo.
multiple choices, around README, .gitignore, LICENSE. To get started choose the default options.
Read about open source LICENSE. Explore LICENSE of some famous open source repositories
ex03: create a file in the repo
Open this repo in Visual Studio Code
Create a file index.html.
See the changes
green is added
red is removed
+ is file added
ex04: commit your first changes
Add a commit message
Commit to the main branch.
ex05 : understanding commit messages
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()
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
Q. What would you put as a commit message if:
You added some details to the README.md file?
Your CLI app was taking "potato" as an input for leap year test?
You started using CHALK library in your CLI app?
You added level based game play in your CLI app?
You renamed your variables from var a to var questions?
exercise 06: publish to github
publish your repository to Github
go to github.com and see your repository
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
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
how README.md is special
By now you know how to
create a repo
write good commit messages
push commits to server
some markdown for documentation
PART TWO: SETTING UP NETLIFY
ex01: Explain how the Internet works
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.
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
explore the deploy section of Netlify
this section shows all the deployments done with history
ex04: change the domain name
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
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.
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
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
know where file explorer is
checkout search section
settings (Ctrl + ,)
ex02: try some shortcuts
Let's see if you can do these things. Look once and then try yourself.
jump to line number
jump to symbol
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.
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
create a new branch
name it yourname/project-details
verify that you're in new branch
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
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
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
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
PR review, important when you're working in a team
ex05: merge PR
merge the PR which you just made
now, check your changes on
deploy in Netlify
update on website
ex06: going back to main
now your changes are part of main
go back to main and pull the changes
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
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.
How well do your friends know you? Quiz which we made live.
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.