Looking for tips to transition from codepen to github

1

I have the advanced projects of the front-end section coming up and figured it’s time to move away from Codepen.

Do you have any tips or recommendations on learning how to write code locally and getting my code on GitHub?

This is my plan:

  1. Do a Bracket’s tutorial (just finished this)
  2. Go through Shay Howe’s guide on HTML and CSS. I already have some experience w/ this through FCC, but I never learned how to properly link stylesheets and the other stuff Codepen hid from me. Is this a waste of time?
  3. This FCC tutorial on putting code on GitHub seems pretty handy. I feel like I should be doing more on learning about GitHub, but I’m not sure what to do.

Do you guys recommend anything else? Do I need to learn version control just to get my code on GitHub?

1 Like
2

Here’s an easy way to get started with Github . That’s what I used and I haven’t had much trouble yet but I can’t say I’m very thorough or doing pull requests etc yet.

To link your sheets:

in your html:

<head>
<link rel="stylesheet" href="css/boostrap.min.css"> // boostrap before your styles
<link rel="stylesheet" href="css/mystyles.css"> // name of your css. 
</head>

then at the end you’ll have your script tags:

 <script src="https://code.jquery.com/jquery-3.1.1.min.js"
  integrity="sha256-hVVnYaiADRTO2PzUGmuLJr8BLUSjGIZsDYGmIJLv2b8="
  crossorigin="anonymous"></script>
  <script src="app.js"></script> // this is your js, js/app.js if you have specific folder for your js
 </body>
3

Shay Howe’s guide is definitely not a waste of time. I was halfway through advanced algorithms when I started it and I have learnt a ton of useful stuff. And it covers pretty much everything that codepen did for you so far.

Technically you don’t need to learn version control to put code on github, but you would be kind of missing the point.
If you are completely new to git and github, then this course should be good for you. Fairly long, but the most approachable I’ve seen.

1 Like
4

when you advance your knowledge on github a little bit, this is great for learning how to work with branches and also in collaboration with others : learn git branching

5

@timotheap - You forgot to add the bootstrap.min.js link between the jQuery and app.js links in the scripts section. I’m just mentioning this to keep it consistent since you added bootstrap.min.css in the head.

6

you’re right

Bootstrap.min.js will be needed for toggle menus etc but I guess they’ll find out, it’s only a start.

7

Thanks for the affirmation. I’m about finished with the second lesson and I’ve already learned quite a bit.

8

I’d advise you to learn how to run a local web server first, for testing your project during development (unless Bracket provides one out of the box). Depending on your browser, you will run into issues sooner or later if you open your html files directly from disk. All you need is a very simple server that only serves your files via http. I used python’s SimpleHTTPServer module for a while, but now switched to webpack’s dev server. There are certainly many more options for any OS.

Also, when you think you have a solid understanding of the fundamentals and still have some time and energy left, you should take a look at npm and the command line interface of your choice (bash, cmd.exe, powershell etc.), this will increase your productivity greatly.
Learn to use modules and a bundler like browserify, webpack etc. Getting a linter (a program that analyzes your code and tells you whats wrong/suboptimal with it) like eslint is also a great help (until then you can also use jshint’s online linting).
EDIT: Although, I’ve heard Bracket comes with a linter. If that’s the case, disregard :slight_smile:

2 Likes
9

Thank you for your suggestions!

For anyone reading this, you might be interested to know that Bracket lets you preview your sites via the Live Preview feature and has a built in JS linter (as lincore mentioned). There are also linters for CSS and HTML via plugins!

1 Like