Where do I start? Part1: IDES, HTML, CSS, & CSS Frameworks/Libraries

#beginners #webdev #html #css

Who is this for?

I would like to say everyone, but it's mostly for beginners who want to develop for a living. If you know something on this list or want to contribute, there's always the comments. I also love finding new resources.

Where to start?

Just pick a thing. But if you want to do web development you're gonna have to tangle with HTML, CSS, and JavaScript eventually. If hearing things like front-end, back-end, or full-stack gives you anxiety, I would recommend starting with front-end development. Front-End is a great place to start and you can begin with just making static websites. So no tricky JavaScript or anything, at first. Just worry about building the structure, customizing the layout, and how it looks.

IDEs, REPLs & Text Editors

To code you'll need either some sort of Interactive Development Environment or IDE, or a text editor like Notepad. But I would suggest you use a code editor.

REPL stands for Read, Eval, Print, Loop and there are neat online ones customized to be used for whatever environment you're using. If you need to test out a function or code snippet, use them.

Resources
- Desktop IDEs
  - VSCode
  - Sublime
  - Atom
- Online IDEs/Editors
- Online REPLs
  - Repl.it (only one you need, trust me)
Videos
- Traversy Media
  - VS Code Guide and Setup
  - Atom Editor packages and set up

HTML & CSS

So we start off with HTML and CSS. If you see things like HTML5, don't panic that's just the most recent iteration of HTML or hyper text markup language. CSS stands for cascading style sheets. You'll hear things about CSS frameworks and stuff but learn enough plain css to make basic cosmetic and layout changes to pages first. I would strongly recommend you learn the following before using CSS frameworks or libraries for anything besides cosmetic changes (unforseen side-effects may occur):

I'll be addressing CSS frameworks after this section. But below is a listing of links I find or found helpful on my journey.

Sites/Reference:
- Mozilla Developers Network (dry but super thorough)
  - HTML Docs
  - CSS Docs
- W3 Schools (beginner friendly)
  - Learn HTML
  - Learn CSS
- Rithm School (Free Online Curriculum w/ some videos)
  - HTML & CSS Basics
- Learn to Code HTML & CSS (online book)
  - Basics
  - Advanced
- CSS Tricks (advanced CSS tips and tricks, also good breakdowns)
- CSS Interactive Cheat Sheet
- HTML Interactive Cheat Sheet
Videos (YouTube, Scrimba, etc):
- Traversy Media (king of crash courses)
- Free Code Camp Videos info
- Scrimba Intro to HTML
Interactive Tutorials & Drills: Use these to sharpen your Flexbox and CSS-grid skills

CSS Libraries/Frameworks and more, or Bootstrap and friends:

So you've safely emerged from the tall grasslands of HTML and CSS on your web developer journey. What lies before you next is the expansive plains of CSS frameworks and libraries.

There's a lot of confusion about what constitutes a CSS framework vs. a library and I'm not gonna get into that here. Instead I'll just show you some possibilites. This list will focus on what's popular and/or good. These are not necessarily the same thing. Popular libraries/frameworks almost always have a large, supportive community with robust documentaion, while the ones considered good may have the same support but solve a particular problem well or better than others.

Sites/Reference:
Videos:
- Traversy Media
  - Skeleton Landing Page
  - MaterializeCSS Crash Course pt. 1
    - pt. 2
- Design Course
  - Bootstrap 4 Crash Course

Online Curriculum:

These links are complete repos, lists, and curriculum you can follow if you feel lost. But remember devs are paid for thinking so if you find something that doesn't work for you, pivot or come back to it later. Be kind to yourself!