Resources For Web Development

Resources For Web Development

General Resources

Codecademy: A place to learn and practice web development concepts and languages.

CodePen: A development environment for front-end designers and developers, to showcasing user-created HTML, CSS and JavaScript code snippets.

Coderbyte: A website for coding challenges and interview preparation.

Codewars: A place to challenge yourself and hone your coding skills. See if you can find any fellow ZTM students on there and team up!

CSS Reference: An online guide to CSS that features complete descriptions, examples of usage, and illustrated/animated examples of the most popular CSS properties.

DevDocs: DevDocs combines multiple API documentations in a clean and organized web UI with instant search, offline support, mobile version, dark theme, keyboard shortcuts, and more.

Egghead: A place to learn new web development concepts and languages, both for free and paid. A free site for learning web development. Optionally, you can pledge to donate money to charities while you learn, giving incentive to keep working. In particular, this site features a number of JavaScript algorithms for practice and preparation for technical job interviews.

HTML Reference: An online guide to HTML that features complete descriptions, and examples of usage for all HTML elements and attributes.

Learn Enough: A comprehensive guide to providing you a solid foundation as a developer to become comfortable with all of the tools and technologies you interact with. Created by Michael Hartl – founder of Learn Enough and creator of the Ruby on Rails tutorial – these courses are free to read online and available for purchase as an ebook for your device.

MDN Web Docs: A resource for developers, maintained by the community of developers and technical writers and hosting many documents on a wide variety of subjects, such as: HTML, CSS, HTTP, JavaScript, Web APIs, Web components, Graphics, Audio, video and multimedia, MathML.

Pluralsight: Pluralsight is the leader in training for serious software developers, IT admins, and creative professionals. With 3,000 courses and new ones added daily, Pluralsight serves as a career catalyst for customers in more than 150 countries and provides tech-savvy businesses with training on the three key areas they need to thrive.

SoloLearn: Join the largest community of mobile code learners today. Basically, It’s a great app to help you get a basic concepts of learning various programming languages easily and those are well structured to learn. It has a very friendly community to join and it’s increasing and getting stronger day by day. There is a battle option to compete with others to justify your knowledge. Believe me, It’s very enjoyable and helpful.

StackOverflow: A massive resource of questions and answers having to do with coding. If you have a question regarding web development or coding in general, chances are it has already been answered on StackOverflow.

Tania Rascia Tutorials: Awesome tutorials on different topics about Front End & Design, Back End Development, Javascript, Developer Workflow, System Administration and many more!

Udacity: A website for learning different concepts of computer science.

W3Schools: Clean and structured Website to teach HTML, CSS, JavaScript and more.

Developers Roadmap: A set of charts demonstrating the paths that you can take and the technologies that you would want to adopt in order to become a frontend, backend or a devops

Syntax Podcast: A weekly podcast by Wes Bos and Scott Tolinski that helps you keep up to date with modern web developement.

Resources for Web Design

General Web Design

7 Rules for Creating Gorgeous UI (Part 1): Part 1 of a two-part series made for anyone with a burning desire to design good-looking UI in a pinch! Created by Erik D. Kennedy, a developer-turned-UX Designer, he is chock full of experience and his down-to-earth personality brings a sense of liveliness and humor to what he teaches.

7 Rules for Creating Gorgeous UI (Part 2): Part 2 of a two-part series. (See above)

CSS Zen Garden: A demonstration of what can be accomplished through CSS-based design. Style sheets contributed by graphic designers from around the world are used to change the visual presentation of a single HTML file, producing hundreds of different designs.

CSS-Tricks: One of the best sites to learn CSS and responsive design.

Learn UI Design Blog: An interesting blog with Erik Kennedy’s down-to-earth personality and years of experience helps the reader really understand what makes good UI/UX from a practical perspective.

Material Design: A collection of guidelines, resources, and tools for web design, all available for free. Created by Google.

Color Palettes

Adobe Color Wheel: A color wheel to help you generate and save color schemes.

Color Tool: A tool associated with Google’s Material Design (see above) for creating a color palette.

Colormind: A color scheme generator that uses deep learning. It can learn color styles from photographs, movies, and popular art. An excellent resource for working out a simple matching color palette for web pages. The site generates matching color schemes along with their hex and RGB values.

CSS Color Names: A simple chart that lists all of the color names that can be used in CSS.

Flat UI Colors: A simple website that allows you to choose from different color palettes.

Paletton: A color palette generator that allows for much more fine-tuning than most other generators.

Icons, Graphics & Fonts

CSS3 Patterns Gallery: A gallery of background patterns and their CSS code.

Font Awesome: A large set of both free and not-free icons. You can either download the code or use their CDN links.

Google Fonts: Best free resource for selecting the fonts of your texts

Iconfinder: A listing of free and not-free web icons.

Ionic: A collection of simple web icons. There is a free set of 223 icons as well as a larger set you can pay for.

Linea: A collection of simple, free icons.

Octicons: GitHub’s free set of icons.

Particles.js: An app for creating dynamic CSS backgrounds.

Note: As of the most recent version of Bootstrap (v4), they no longer support their own glyphicons. To read more about what has changed in Bootstrap v4, click here.

Images & Video

AllTheFreeStock: A central place to search for free stock photos and videos.

Coverr: Free stock videos to add to your websites.

Gratisography: Another source of free stock photos.

Pexels: A source of free stock photos and videos.

Pixabay: Free stock videos.

PlaceIMG: Gives you a url that generates a new random placeholder image every time.

StickPNG: An excellent source for PNG images if you need something that is re-sizable and can be set to transparent.

Unsplash: Free stock photos, all in JPEG format.

Videvo: Free stock videos.

Resources to Become a Javascript Expert

You Don’t Know JS: No matter how much experience you have with JavaScript, odds are you don’t fully understand the language. These concise yet in-depth guides takes you inside core concepts that can help you become a more efficient and effective JavaScript programmer. A series of books diving deep into the core mechanisms of the language.

Eloquent Javascript: Eloquent JavaScript goes beyond the cut-and-paste scripts of the recipe books and teaches you to write code that’s elegant and effective. This book slowly builds on the basic ideas of Javascript such as objects and functions and moves onto higher-level ideas in the programming language. Highly recommended.

Javascript Cookbook: Why reinvent the wheel every time you run into a problem with JavaScript? This cookbook is chock-full of code recipes that address common programming tasks, as well as techniques for building web apps that work in any browser. Just copy and paste the code samples into your project— you’ll get the job done faster and learn more about JavaScript in the process.

Javascript: The Core: This is a very fast yet solid foundation to work with, for anyone who might have struggled with the contexts and how arrow functions, local variables, and prototypes fit into the bigger picture. An introduction into the deeper ideas in Javascript.

Mixu’s Node Book: An online tutorial that received much praise for explaing Node.js in a well-structured way. It is a book that teaches you to write the code for Node.js and not only rely on third-party libraries. Anyone that wants to have a deep grasp of the Node.js framework will benefit from Mixu’s book.

Array Explorer: Find the array method you need for your Javascript array without digging through the docs. A useful resource that can make using arrays easier.

Articles On Learning Web Development

Learn to code in 2018, get hired, and have fun along the way: Written by Andrei Neagoie that got many of us into one of these classes. If you haven’t read it, it’s worth a read and has a few more items of info that are not necessarily in the lessons.

Front End Web Development Setup: Written by Tania Rascia. An informative article on how to put together a front-end development environment.

front-end-guide: An extended article/GitHub repo that addresses what a modern web developer should study and be aware of. This is written from the perspective of a developer informing new employees as to what are the current practices at his company, Grab ride-sharing service

Modern Development Environment for Windows: Written by Owen Williams. Setting up a windows computer for front-end development.

Tools I wish I had known about when I started coding: Written by Mario Hoyos. A collection of Chrome Extensions and VS Code extensions.

Tools for Web Development

Free Tools for Students

JetBrains Student License: Free individual licenses of the award-winning professional developer tools from JetBrains for students and faculty members.

Student Developer Pack: The best developer tools, free for students via Github Education.

Chrome Extensions

BuiltWith Technology Analyzer: Lets you see what tools and javascript libraries a site is using.

ColorZilla: Find colors on your page with this eye dropper.

JSON Formatter: Just like the name says, get help with your JSON issues.

Pesticide: Make Box Modelling a breeze. Pinpoint issues, fast.

React Developer Tools: Name says it all.

Redux Dev Tools: Yep, dev tools for Redux.

Wappalyzer: What technology is this site using? One click on the button and you’ll know.

WhatFont: Instantly find out what font is being used with a click. No Developer Mode required.

Vimeo Repeat and Speed: Consume info at faster than normal pace.

Editor Features & Plugins

Code Linters: Get immediate feedback on code logic or stylistic errors. (Plugin or Built-in)

Emmet: Use shortcuts and shorthand to get work done more quickly. (Plugin or Built-in)

Git: Source control is necessary. (Plugin or Built-in)

General Development Tools

Blend: This tool creates CSS code for linear gradients, taking the guess work out of the process.

Can I use: Website for checking if an HTML tag or CSS feature is recognised in any browser. A great tool for creating bezier curve animations in CSS without having to guess at the code.

ECMAScript Compatibility Table: A table for checking the compatibility of modern JavaScript elements with browsers and compilers.

JSONPlaceholder: A great resource for testing API calls in JavaScript development.

Postman: Web app that allows testing all API request methods (GET, POST, PUT, DELETE, and so on).

SweetAlert2: Premade customized alerts.

Text Editors

Atom: (Free) Open-Sourced. (WIN, MAC, LINUX)

Brackets: (Free) Developed by Adobe. (WIN, MAC, LINUX)

Sublime Text: (Free & paid) Andrei’s choice, but not mandatory. Buy it, if you like it to help the developer. (WIN, MAC, LINUX)

Visual Studio Code: (Free) Open-Sourced from Microsoft. (WIN, MAC, LINUX)

Git & GitHub

Using Git & GitHub

Try Git: Learn how to use Git with Code School’s interactive course.

Learn Enough Git To Be Dangerous: A comprehensive guide to becoming very comfortable with Git and Github, provided by Michael Hartl – creator of the Ruby on Rails tutorial and founder of the Learn Enough courses

Git Cheat Sheet: A cheat sheet that features the most important and commonly used Git commands for easy reference.

Git Reference Documentation: A complete listing of Git’s features and commands. The documentation is also available as a free ebook titled Pro Git.

Markdown cheat sheet: Most web pages on GitHub are written using the Markdown HTML-preprocessor language. This cheat sheet includes most of the useful syntax for Markdown.

Daring Fireball: Another useful resource for Markdown is the Daring Fireball website.

Open-Source Coding on GitHub

Contributing to open source projects: This is a good place to start learning how to contribute to open source projects on GitHub.

Finding Open Source Projects on GitHub: GitHub’s advice on how to discover and contribute to open source projects.

Zero to Mastery: A listing of GitHub open-source projects associated with Andrei Neagoie’s Udemy course The Complete Web Developer in 2018: From Zero to Mastery.

Resources on Technical Interviewing

A list based on Andrei’s list of interviewing resources.

How to Break Into the Tech Industry: Some good, fairly detailed advice on job hunting, networking, interviewing, and negotiation.

How Not to Bomb Your Offer Negotiation: How to negotiate a better deal for yourself in the hiring process.

How to Win the Coding Interview: A decent article on coding interviews that has been expanded into a free e-book with a whole lot of online resources and sample questions. This is the motherload, really.

I spent 3 months applying to jobs after a coding bootcamp. Here’s what I learned.: Some job search advice given by a recent bootcamp graduate.

Notes for Coding Interviews: Some notes and code associated with a Udemy course titled JavaScript Interview Prep. While the notes themselves may be useful, it is really the process of writing these type of notes that fully prepares one for a technical interview.

You Suck at Technical Interviews: An interesting article that provides advice for potential employers on how to improve their interviewing techniques and strategies. Certainly, this would be a good read for someone on the job market.