Objective: Host your first website. In order to do that, we will learn
Getting Ready: We did our first lecture 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.
If you have done lecture 01, you know that this will be a series of mini exercises.
Think of this as you watching 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.
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 mylein comes only when you try to retrive. 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.
From past one year, I have read extensive research on cognitive science, even wrote my own paper, and if you want to be the best of the best, give yourself some hard time.
No pain, no gain.
If you have any doubts while doing these exercises ask in the live chat. Please, keep the chat relevant.
If you are watching it later and get doubts, ask on our Discord Server
Okay, enough, let's get started with it.
PART ONE: SETTING UP GIT and GITHUB
Without using any technical term 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.
index.html.+ is file addedcommitmainfeat - 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 test for a function which 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 in commit messages. Look into commit messages of open source work on Github to get some inspiration.
But don't get overwhelmed with this.
Q. What would you put as a commit message if:
README.md file?CHALK library in your CLI app?var a to var questions?we use Github to host and save the code in a centralised 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.
README.mdpushREADME.md is specialBy now you know how to
PART TWO: SETTING UP NETLIFY
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.
new site from repositorythere 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
do a change in your VSCode, 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.
PART THREE: SETTING UP VSCODE
Let's see if you can do these things. Look once and then try yourself.
Note: You don't need to know everything. But I suggest try to use shortcuts as much as possible, it saves ton of time.
PART FOUR: GETTING INTO THE DEV WORKFLOW WITH ALL THE SETUP
you see what happens when you push the changes to server when Netlify is connected: it goes live
so, how would you save your unfinished work? keep it on 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 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 visualising yourself working in a team of developers. Everyone working on different features, different branches, but all goes into the same website. :)
yourname/project-detailsindex.html file. Add details about the projects you have made.PR reviewmain branchmainmain and pull the changesNote 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.
mainindex.html file. Add details of your favorite book/movie etc.We have made two projects in lecture One.
Assignment for today is that you create two repos for both the projects and push the changes. Make sure you use
Note: This is the only thing required out of this lecture to go to levelOne. Read about the point system if you haven't read about it.
Join Discord to discuss the projects.
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.
During the hacktoberfest we showed how to open PRs on other repo. A repo which 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.
Go to Github Trending and pick any repository. You don't need to understand the code. Observe
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.
While we did the entire thing in GUI to make it easy for beginners. In day to day life most devs use git in 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.
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
git commands.git commands.git branching.Write these blogs. And keep them ready for tomorrow's session.