Skip to content

Instantly share code, notes, and snippets.

@connorshea

connorshea/web-development.md

Last active December 21, 2022 08:36
Show Gist options
  • Save connorshea/65fb0845c9e93af705a3 to your computer and use it in GitHub Desktop.
Save connorshea/65fb0845c9e93af705a3 to your computer and use it in GitHub Desktop.
Download ZIP
Web Development Notes
Raw
web-development.md

Some notes on making a website using HTML5, CSS, and JavaScript.

Learning HTML, CSS, and JavaScript

Useful HTML/CSS/JS Features

  • Media queries - For responsive design "breakpoints".
  • box-sizing - I prefer border-box over the default content-box, the difference is explained in the page linked.
  • calc() - Really useful for sizing things based on the viewport, e.g. calc(100vw - 20px).
  • Flexboxes - Also useful for responsive design, layout using flexbox can dynamically reorganize itself based on device size. See also this tutorial on using flexbox. It takes a while to wrap your head around this, don't worry if you're confused at first.
  • CSS transitions - For simple animation of an element.
  • CSS keyframes - For more complex animation of an element.

Ruby on Rails

My "web framework of choice", Ruby on Rails provides a base template for websites with a lot of flexibility, a very mature community with lots of open source applications to learn from, as well as gems to use.

  • Ruby on Rails - The Rails GitHub repo
  • Getting Started with Rails - Read the Getting Started page before getting your hands dirty. I'd also strongly recommend giving the official guide a thorough read if/when you get stuck.
  • Ruby Gems - Gems are the "plugins" of Ruby, Ruby Gems is a great place to find information on them.
  • Thoughtbot - Thoughtbot has a lot of useful articles on Rails best-practices, as well as a lot of open source gems and Rails apps.
  • Big Open Source Rails Apps - A list of large open-source Rails applications. I've always found looking through other people's projects to be hugely beneficial to learning any framework.
  • The Ruby on Rails Podcast - If you're into podcasts, this is a great one to learn more about Rails' best practices, upcoming features, and popular gems/projects.

Notes:

  • I would personally recommend against using CoffeeScript, the default JavaScript "dialect" for Rails, as vanilla JavaScript/JQuery is important to have a grasp of first. Plus you'll have trouble understanding most JS tutorials if you only know CoffeeScript.

Sublime Text

My personal recommended text editor. Atom and Brackets may work, but neither are as fast or as mature as Sublime.

Hopefully in the future Lime Text will become a viable open source alternative, but until then I'd recommend Sublime.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment