Skip to content

Instantly share code, notes, and snippets.

@Trshant
Last active November 4, 2019 05:35
Show Gist options
  • Save Trshant/7127736a742906c56ff91e99c1b8820c to your computer and use it in GitHub Desktop.
Save Trshant/7127736a742906c56ff91e99c1b8820c to your computer and use it in GitHub Desktop.

Bare Basics

  1. https://developer.mozilla.org/en-US/docs/Learn/HTML : read this to re familiarize yourself with the basics of HTML and CSS. The examples are editable, so use that to your advantage.

Setting up a Dev Environment

  1. You will need to build a small webserver. But before that decide if you want to work on just JS or Python. The need for both is there so the decision is up to you. Once you decide, get a webserver up and working. This is just to get started on ediitng your page on your computer. Also, Going forward, we can get all these things up on Heroku ( free hosting ) for your portfolio.
  2. You now need to install a code editor ( Sublime Text or Visual Studio Code ) and start learning GIT. http://tom.preston-werner.com/2009/05/19/the-git-parable.html Read that to understand what GIT does, Then create a small GIT repo on github and try pushing files there. Then you can use https://github.com/firstcontributions/first-contributions to practise making a branch and pushing to the repository. This link is super useful for working with GIT - keep it saved for later.

Begin building things

Have a folder structure and keep saving work - this will help when you build your portfolio.
4. Please start replicating the look of various websites. Facebook login page, facebook timeline with 2 or 3 posts. add more posts to the facebook page and keep the page looking just like the original when you scroll down. This is just off the top of my head, so do add more to the list if you want.
5. Understand media queries and CSS3 transitions. Media queries are to target your styling for devices, and are absolutely neccasary for front end devs to know.

CSS Frameworks

  1. Once you have absolutely mastered 4 and 5, Start working on bootstrap. By now you will be able to understand bootstrap easily. Do the same thing as 4, but using bootstrap.
  2. Use bulima. Its a lot more flexible than bootstrap. You will be able to differentiate between the 2 and make programming/styling decisions better now once you have played with both the CSS frameworks.

Now we should take a breather and get started on your profile.

  1. You get a free hosting and a free customised website name in github itself. So get yourself a websitename. Then create a small webpage called index.html where you will list all the fabulous work you have worked hard in getting up. You will also put links here. The pages you have worked hard on, put it in different folders and link to them in the index page. I understand this could be complex, so call or message me so we can set it up together. It is super easy the second time around, but quite hard to do yourself the first time.

Learn some JavaScript

  1. Use this link. if the page seems familiar, thats because it is. Its the same link as in 1. Go through the links in the Modules subheading.
  2. learn from this link. It is in Japanese, so use chrome to open and use right-click -> 'translate to english'. This will teach you a little more about javascript and also help you understand DOM - which is super important in sorting javascript errors.

Learn you some react or vue

  1. Why react or vue? why not angular? because react and vue are not confusing. Angular requires you to understand and write in typescript which is a complication you can live without at this point.
  2. TODO: put in a JS framework Tutorial link.
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment