WebDev/Digital Tutorial

A Front End Development Course used in 2015, updating in 2021, 100% free to use

Course #1: Intro & HTML

(week 1)

Introduction to Front End Development

How the Web works: HTTP, packets, browsers, developer tools, etc.
What is a web page? How does the browser work? How can I see web page info?
» Start here: Resilient web design book (mandatory) & How does the Web work?
That resource is relatively large for what we need to get into, so focus on these links:
» Don’t fear the Internet: the basics & How does the Internet work? - Naked Science Scrapbook
» The Odin Project - Web Development 101 (NEW)
» A Packet's Tale. How Does the Internet Work?
» Don’t fear the Internet: browser / How DNS Works + How DNS Works (NEW)
» CS50 2017 - Lecture 6 - HTTP - part of http://cs50.tv/2017/fall/ + How HTTPS works (NEW)
» How the Internet Works for Developers - Pt 1 - Overview & Frontend (mandatory)
» How the Internet Works for Developers - Pt 2 - Servers & Scaling (mandatory)

Information architecture basics

You will need to grasp the basics of a field which has been around much longer than the Web itself,
but which serves as a base to how we write HTML and how we navigate and search online. It’s a
complex field, rooted in the craft of librarians of old, that needed to devise smart ways to describe and
organize information / books, and you will just need to skim through it so you get a good
understanding of what it means to describe, arrange and provide access to information in general.
» Understanding Information Architecture (mandatory). Read this article + this primer (NEW)
» Book: Information Architecture for the WWW, chapters 1–9.
» Book: A practical guide to Information Architecture: all of it. (skim through at least 1 book)

Introduction to HTML
A brief history of HTML
Knowing the basic evolution of HTML will allow you to appreciate where we are now and how long
we’ve come since the early days of the Web.
» Book: HTML5 for Web Designers, chapter 1, or A brief history of markup on A List Apart

HTML step by step

There are some great online tutorials for the basics of HTML (mandatory, at least 2 – HTML only):
» Mark Pilgrim’s Dive into HTML5 free e-book (NEW) + Mozilla Front End tutorial (NEW)
» Learn HTML/CSS: Shay Howe + CodeSchool Web Path + Jen Simmons teaching HTML (NEW)
» Washington.edu course on HTML + Khan Academy Web Programming
Notice that most of these (free) tutorials also have a CSS component. You can try going through the
CSS now to make it easier for you next week, but for now I strongly recommend you focus on the
HTML part. That will allow you to get all these tutorials done in time, so you get a firm understanding
of HTML this week. You’ll need it! You’ll also need:

A full HTML reference

» Mozilla Developer Network: HTML reference (mandatory) (this site is extremely valuable!)
Course #2: CSS & SFX
(week 2)

Introduction to CSS
HTML+CSS tutorials
The exact same tutorials mentioned in Course #2 (mandatory, at least 2 – HTML + CSS):
» Learn CSS from Web.DEV (NEW)
» Learn HTML/CSS: Shay Howe / CodeSchool Web Path / Khan Academy Web Programming
» The Odin Project: HTML and CSS (NEW) + Web Almanac on CSS (NEW)
» Kevin Powell’s HTML/CSS tutorial on Scrimba (NEW) + FreeCodeCamp Responsive Web Design
» 30 days to HTML/CSS (NEW) / CSS Protips (NEW) / https://web.dev/learn/css/

CSS+Layout tutorials
» Washington.edu course on CSS
» Learn Layout (mandatory)
» Grid for layout, Flexbox for components (NEW) / Guide to Grid (NEW) (mandatory)
» Relearn CSS layout (NEW) / Smol CSS layouts (NEW) / CSS Grids by Wes Bos (NEW)
» HTMLDog: Beginner CSS tutorial, Intermediate CSS tutorial, Advanced CSS tutorial

CSS articles, tools and information

» Calculating CSS Specificity / Specificity calculator (mandatory)
» The CSS “homepage” / CSS: Designing for the Web / Explain CSS selectors in plain English
» CSS Zen Garden (mandatory) + CSSTricks Almanac (NEW reference) + CSS Vocabulary (NEW)
» Mozilla Developer Network CSS Info / Solve most of IE’s bugs
» An Introduction to Browser Rendering (mandatory) (you might need Chrome Canary to see
this)

A full CSS (and HTML / Accessibility / etc.) reference

» Mozilla Developer Network: CSS reference (mandatory)
» A complete guide to CSS functions (NEW) / Modern CSS solutions for old CSS problems (NEW)
» CSS Tricks Guides (NEW)

Special effects using CSS3 / Fonts (soon to be deprecated)

As a general rule, from now on you should try to explore every cool site you see, inspecting its CSS and
element distribution with your favorite browser inspection tool (Firebug for Firefox, the built-in
inspector from Chrome). Some of them are done right, some of them aren’t, but the point is you need
a “hacker attitude” in order to steal the interesting parts and become versed in the ways of
deconstructing someone else’s design in order to find out how it works.

Effects and tutorials

» Codrops (I recommend subscribing to this resource, it’s one of the best)
» CSS-Tricks CSS Snippets / A complete guide to CSS transitions (NEW)
» Magic animations / Hover effects / Hovers / Effekts / Box / Advanced animations (NEW)
» CanIUse – Use this to check in what browsers are some features supported, e.g. CSS Grid
» CanIEmail – Similar to CanIUse but for email clients exlusively / Debugging CSS (NEW)
» CSS3 gradient generator – Use this to generate gradients of any kind for CSS backgrounds

Icon fonts (deprecated - use inline SVG icons instead)

» Why IconFonts are great / Iconfont generator: IcoMoon / Iconfont kit: FontAwesome
» How to animate SVGs, the simple way (might not be 100% free) + SVG Animations (NEW)
Course #3: Your first project – a quiz
(weeks 3-4)

Tools of the trade: IDE, GIT, FTP

Until now, you’ve been exploring front end development mostly in browser-based applications. Now
it’s time for the real deal. We’ll set up your GIT account so you have full source control (while also
teaching you how it works). We’ll then set up your IDE (ideally, WebStorm) so you have full access to
its numerous helpful features, and get you acquainted with some of them. For people taking this
course from home / their spare time, obvious alternatives will be explained.

Version Control clients & services IDEs

» GitHub / SourceTree / Tortoise SVN » Visual Studio Code (free and surprisingly good)
» WebStorm (paid) / Sublime or Brackets (free)
Using Version Control
» Online editors (for testing only)
» GIT 101 / PDF guide / PR guide / Conflicts
» GitHub + SourceTree tutorial / Commits FTP clients
» GIT with WebStorm / Project rules (NEW) » FileZilla
» Using the terminal / Workflows (NEW) » Total Commander / CoreFTP

Semantics, Standards & Validation for HTML/CSS

Standards & Validation
Standards! Highly important, even though a page “works without them”. The truth is, it doesn’t, not
in the way we want it to: extensible, easy to debug, with a much lowered bug threshold than a
non-standards-compliant version. Please read through all these materials carefully, because this is
one of the most important things you need to grasp at this stage.
» Washington Edu lesson in Standards
» What are web standards and why should I use them? (mandatory)
» Book: Designing with web standards, all of it.
» W3C HTML Validator / W3C CSS Validator
» Washington.edu courses on: Web Standards and Accessible Design + Quality Control

Semantics
» Let’s talk about semantics / Pursuing semantic value (mandatory)
» Introduction to the semantic web / Semantic code: What? Why? How?
» HTML5 semantics from Smashing Magazine
» Diving into HTML5
» Microformats primer - Sitepoint (mandatory)
» Google Structured Data Intro (mandatory) + Google Structured Data Examples (mandatory)
» Get started with Microformats & Microformats v2
» Why Semantic Search is important, from Ahrefs (NEW)

Mobile-first Responsive Design (everything is mandatory)

» Book: Responsive web design, all. Plus Ethan Marcotte’s articles on A List Apart. Mostly this one!
» Book: Mobile first, all of it. Plus Luke Wroblewski’s interesting presentations. Most of them...
» Scaling User Interfaces / Creating a mobile-first responsive web design / Responsive Design is…
» RWD Tutorials / Building a better responsive website / RWD fundamentals / Learn RWD @ Web.Dev
» A full list of devices and their resolutions / Device agnostic breakpoints / State of the Web
Natural responsive web design breakpoints / Re-thinking breakpoints in responsive design
» I have no idea what the hell I am doing // Responsive Images tutorial on MDN // FlexboxFroggy
Course #4: Real world problems
(midterm exam + weeks 5-7)

Accessibility
» Accessibility link list from WASP
» W3C Accessibility Standards
» Accessible forms (all levels) + Sign-in form best practices (NEW)
» Easy checks: a fast review of web accessibility (mandatory)
» Introduction to ARIA (NEW)
» Website accessibility report generator
» Just Ask: Integrating Accessibility Throughout Design (mandatory)
» Other accessibility tools / Complete guide to accessible web components (NEW)
» How a CSS framework can enforce accessibility
» Derek Featherstone Web Accessibility primer
» 13 days of Accessibility by Sparkbox
» Official Web Content Accessibility Guidelines documentation
» The new 2020 US Government Digital Design System that includes accessibility principles
» A very nifty tabindex enhancing primer for navigation (NEW)

Usability / UX (aka Advanced Common Sense)

» Book: Don’t make me think, all of it. (mandatory)
» Jacob Nielsen’s Usability 101 (mandatory)
» Jacob Nielsen’s 10 Rules of Thumb for Usability (mandatory)
» If you have time, explore more of NNGroup’s excellent articles, since they’re the best out there.
» Usability basics from Usability.org / The Ultimate Guide to UX Research
» Making the web more inclusive and usable from Usability.com.ua
» Principles of website usability / 25 point usability checklist / Yet another checklist
» UX Design course at Google (NEW) / UX Fundamentals (NEW)
» Laws of UX (NEW) / UX Knowledge Base (NEW) / How to make sense of any mess (NEW) / List (new)
» One of the best and easiest to understand indexes of studies on usability: (NEW)
gov.co.uk and their Design Principles are great reads! Also, Nielsen Norman Group’s heuristics.

I have a design. Now what? (Photoshop 101) (to be disc.)

We will now learn how to transform a Photoshop document into an HTML layout. That means you will
need to grasp a basic understanding of Photoshop tools for selecting, measuring and properties,
which will then help you structure your HTML and define your CSS styles.
Please note that in all these tutorials you’ll find mistakes. And you’ll notice them only if you’ve paid
close attention to the standards, semantics, usability and accessibility notions presented so far. When
you do, please correct them as you see fit, or ask me whether something is correct or not.
» PSD to HTML tutorial (mandatory)
» PSD to HTML video series part 0, part 1, part 2, part 3, part 4, part 5, part 6, part 7 (mandatory)
» PSD to HTML Tuts+ Video / PSD to HTML Tuts+ Text
» PSD to HTML: Code a clean business website design / Build a sleek portfolio site from scratch
Please note that we’ll be doing a quick demo of how to turn a Photoshop layout into a fully-fledged
HTML + CSS site during this course, in our first workshop. By the way, here’s a Photoshop Shortcuts
Cheat sheet.

WARNING
Photoshop will be discontinued, I’ll be switching to Figma, which you can learn right here and here.
Course #5: Your final project
(weeks 8-10 + final exam)

SASS magic
CSS is powerful, but not dynamic. To make it dynamic, you need SASS.
» Official SASS guide (mandatory)
» Learn SASS in 20 min (mandatory)
» Getting started with SASS
» A List Apart: Getting started with SASS (mandatory)
» The beginner’s guide to SASS & SASS CodeSchool tutorial

An example (S)CSS standard

» A living document describing how we aim to write all of our styles: SASS Standards (mandatory)

Templating basics
Until now, we’ve looked at static HTML and CSS projects and how to develop a working site. Now we’ll
take that to the next level, by exploring how to transform a static structure into a real, dynamic
website, with real information stored in a database and dynamic structures for iterating, searching
and navigating the site. These are all example templating engines or languages.You should read
through at least a couple of them to understand the basic principles.
» Handlebars (JS) / Mustache (JS) / Angular Templating + Tutorial + Another tutorial (JS) / Smarty
(PHP) / Getting started in Wordpress templating (PHP)
» http://www.hongkiat.com/blog/angularjs-tutorials-screencast/ (AngularJS) - There are links to
various tutorials here. Going through them all (which, most importantly, means reading them all
then taking in the examples) will insure you have some basic working knowledge of what AngularJS is
and how it works.
» A comprehensive list of most web templating engines (for comparison)
» https://web.dev/learn/forms/ + https://web.dev/learn/pwa/

Example workflow standards

» GIT Guidelines / HTML Guidelines / CSS / SCSS Standards / JavaScript / ES6 Style Guides / React /
JSX Style Guides

Entire websites & tutorials built from scratch using HTML,

CSS and JS
● Use these ideas with extreme prejudice! :) + Project Based Learning (NEW) + Scrimba FTW
● Scrimba can be a very useful and diverse approach to learning, but it costs $21 / month. (NEW)
● A new platform offering project ideas - https://www.frontendmentor.io/ (NEW)
● https://50projects50days.com/ from Florin Ion and Brad Traversy (€10 discounted, €100 full
price) (NEW) + IdeasGrab (NEW) + RealWorldExampleApps + 5 HTML/CSS/JS free projects
● COMPLETE front end tutorial: 12HR+ YouTube Coding Bootcamp 2021! by Ania Kubów (NEW)
● Several roadmaps for becoming a “complete” front end (+ back end + devops etc.) developer:
WebDevSimplified Front End + WDS Backend, LearnCode Academy, Roadmap.sh, Traversy
Media, this one from Front End Masters, etc. (NEW) / Web Dev for Beginners (NEW)
● Frontend Mentor - And some project ideas here (NEW) / Power.Coders bootcamp (NEW)
● Some more project ideas (that could turn into business ideas) on Y Combinator (NEW)
● Build a space travel website from a Frontend Mentor design using HTML, CSS and JavaScript.
● https://www.sololearn.com/home + Project ideas
Test your website / web app (NEW)
OK, you’ve created your very own web application or website, it’s live, it’s launched, and you’d like to
figure out if you need to improve it in any way.

Luckily, there are a bunch of tools that will really help you determine if your website covers all the

❤️
best practices mentioned in this document and in the broad web standards community. I rated each
tool’s usefulness with my own subjective measure of usefulness, but I recommend testing your site
with all of them. Most of them are 100% free, just like the rest of this document’s resources.

CODE QUALITY SEO & SEMANTICS

❤️❤️❤️ HTML Validator + CSS Validator ❤️❤️❤️ Google Search Console
❤️❤️❤️ Dareboost ❤️❤️❤️ Pagelocity
❤️❤️❤️ Yellow Lab Tools ❤️❤️❤️ Google Structured Data Search Gallery
🤍❤️❤️ i18n Validator + RSS Validator ❤️❤️❤️ Google Structured Data Tester (+old)
🤍❤️❤️ DOM Monster (Chrome ext) ❤️❤️❤️ Ahrefs Free SEO Tools
🤍❤️❤️ CSS Stats ❤️❤️❤️ Checkbot.io (Chrome ext)
🤍🤍❤️ .htaccess check 🤍❤️❤️ Google Ads Keywords Planner
🤍🤍❤️ Sitemap Validator 🤍❤️❤️ UberSuggest
🤍🤍❤️ Unused CSS check 🤍❤️❤️ SpyFu
🤍❤️❤️ MajesticSEO
PERFORMANCE & SPEED 🤍❤️❤️ Spotibo SEO Analyzer
❤️❤️❤️ WebPageTest 🤍❤️❤️ Technical SEO Tools
❤️❤️❤️ Lighthouse (Chrome ext) 🤍🤍❤️ Ryte free / Ryte Free Tools
❤️❤️❤️ Google PageSpeed Insights 🤍🤍❤️ List of useful Meta Tags
🤍❤️❤️ Cloudinary Website Speed Test 🤍🤍❤️ OpenAdminTools
🤍❤️❤️ Kraken.io Image Optimizer
🤍❤️❤️ TinyPNG Image Optimizer ACCESSIBILITY
🤍❤️❤️ GTMetrix ❤️❤️❤️ WebAIM Wave
🤍❤️❤️ Accessify ❤️❤️❤️ Webhint Scanner
🤍❤️❤️ HubSpot Website Grader 🤍❤️❤️ Tota11y (Chrome ext + bookmarklet)
🤍🤍❤️ Pingdom 🤍❤️❤️ A11y Project Accessibility Checklist
🤍🤍❤️ KeyCDN Website Speed Test 🤍🤍❤️ PowerMapper Accessibility Scanner
🤍🤍❤️ IMNinjas Page Speed 🤍🤍❤️ IBM Accessibility Requirements List
🤍🤍❤️ DotComTools Website Speed 🤍🤍❤️ Textise your site
🤍🤍❤️ Sucuri LoadTime Tester
DESIGN & MOBILE
SECURITY & SERVERS 🤍❤️❤️ UX Checklist
❤️❤️❤️ Mozilla Observatory 🤍🤍❤️ Google Mobile Friendly Test
❤️❤️❤️ Dataskydd Webbkoll Scanner
🤍❤️❤️ Pentest-Tools.com Free Website Scanner CONTENT OPTIMIZATION
🤍❤️❤️ Google CSP Evaluator ❤️❤️❤️ Unbounce Landing Page Analyzer
🤍❤️❤️ CSP Validator 🤍❤️❤️ WebFX Readability Test
🤍❤️❤️ Probely Security Headers
🤍❤️❤️ Sucuri SiteCheck SOCIAL PRESENCE
🤍❤️❤️ MXToolbox Email Server Checker ❤️❤️❤️ BuzzSumo
🤍❤️❤️ KeyCDN HTTP/2 Test 🤍❤️❤️ Facebook Sharing Debugger
🤍🤍❤️ BuiltWith 🤍❤️❤️ Twitter Card Validator
🤍🤍❤️ SPF Record Checker 🤍❤️❤️ LinkedIn Post Inspector
🤍🤍❤️ SSL Checker 🤍🤍❤️Favicon Checker
🤍🤍❤️ Google Safe Browsing Check
Additional resources
For those of you that have reached this point and still want to know more, I congratulate you! That
means you really like the Web, development and what it all means, and therefore you deserve to know
where to get the best information about how you can become a good front end developer. Here goes:

Book links
If you’ve gotten this far and have wondered how you can get a hold of the digital books mentioned in
this course, please ask me how to get the licensed archive (or buy the books!). Pass is: ev3rym@trix

Must-follow, general resources

» The EveryMatrix Site Building Workshops & canalul meu RO
A list of recordings we made in the hopes to disseminate some of the technical and non-technical
knowledge required to build websites, from design to programming, from architecture to marketing
and beyond.

» http://alistapart.com/ - start with this article then this

A List Apart transformed many of us into great front end developers. It’s one of the oldest (est. 1997)
and most highly appreciated sites offering information for web professionals. It contains in-depth
articles in a vast array of areas, ranging from cognitive psychology to design, from HTML techniques
to JavaScript programming, from novelties in CSS styling to usability and accessibility issues, and so
on. Here’s a list of topics, just pick your favorite and be amazed!

» http://www.nngroup.com/
The Nielsen Norman Group is one of the best usability and user research companies in the world,
offering regular reports on what makes the Web (not) usable.

» https://developer.mozilla.org/
The Mozilla Developer Network is one of the best sources of information and reference sites when it
comes to HTML, CSS and JS. It’s your go-to dictionary and basic information repository, use at will.

Other resources
» https://www.smashingmagazine.com/ – Web development magazine
» https://github.com/tuvtran/project-based-learning – A full list of resources for you to learn
» https://css-weekly.com/ – A weekly newsletter on CSS techniques and news
» https://webdesignledger.com/ – A resources and articles list
» https://offlinefirst.org/ – A very good list of articles related to making websites resilient
» https://www.uie.com/ – A user experience and design resource list
» https://responsivewebdesign.com/podcast/ – A (finished) podcast about RWD
» https://moz.com/beginners-guide-to-seo – An SEO primer + The Ahrefs Guide (great SEO insight)
» https://research.hackerrank.com/developer-skills/2020/ – What skills are most useful?
» https://practicaltypography.com/typography-in-ten-minutes.html – Typography primer
» https://frontendfoc.us/ – THE best newsletter with front end news and articles
» https://frontendmasters.com/courses/web-development-v2/ - Full development tutorial
» https://www.youtube.com/watch?v=0pThnRneDjw – overview of everything you need to learn
» A full history of the Web, if you’re curious. Plus, a whole list of resources that are free for devs.
» https://thegymnasium.com/courses – A wide array of free courses
» https://hawkticehurst.com/mega-full-stack-resource-guide/ - Another guide similar to this.
Additional tools for your day to day work (NEW)
Checklists
» Front End checklist

@TODO (very soon)

- Photoshop to HTML/CSS: Avocode/Zeplin ( + tutoriale/exemple )
- Extensii de Chrome ( WhatFont, Measure, Rulers, ColorPickers, etc )
- Plugin-uri pentru editoare ( Sublime/Atom, VS Code, WebStorm/PHPStorm )

Chapters to be continued, but scroll down some more for

extra content!

@TODO Rearrange like this:

Front End -
https://excessive-preface-69c.notion.site/HTML-CSS-28bc6ac713eb41af94e4324bb24db450

JavaScript -
https://excessive-preface-69c.notion.site/JavaScript-e3921343cb3944a4b4fa8235f3ca1375

@TODO Integrate
https://hawkticehurst.com/mega-full-stack-res
ource-guide/
https://andreasbm.github.io/web-skills/
AMAZING playlist with learning paths
https://www.youtube.com/playlist?list=PLz8Iz-F
nk_eTpvd49Sa77NiF8Uqq5Iykx
https://pauljerimy.com/it-career-roadmap/
Feelin’ advanced, are we? Try some JavaScript!
If you’ve reached this far into the tutorial, you must REALLY want something more on the table, to
keep things interesting and to keep those neurons firing up with new information. I commend you for
the curiosity and the drive to learn more, so here’s a well deserved reward. You should really start
learning about programming in general, and its two pillars: Algorithmics and Best Practices (NEW).
You can find out more about algorithms (in Romanian) on this excellent site: InfoArena (NEW), and
also on LeetCode (NEW) and HackerRank (NEW) which have gamified ways to test your algorithms.

Crash course in brain surgery JavaScript

● LearnProgramming (NEW) / FreeCodeCamp Learn JavaScript - Full Course for Beginners
● JavaScript 30: build 30 things in 30 days with 30 JS tutorials (NEW)
● The modern JavaScript Tutorial at JavaScript.info + the MDN tutorials
● The Odin Project: JavaScript (NEW) & JS the right way
● How to code in Javascript at DigitalOcean (stolen from this Medium article)

JavaScript in depth
First, remember the MDN docs. There are plenty of really good resources that provide fantastic
learning experiences and examples in this field, since it’s one of the very popular languages to learn
nowadays. Our own acadEMy on JavaScript has the full curriculum here. We’ll continue with a list of
resources based on this fantastic GitHub list and other findings:
● You Don't Know JS / WTF JS?! (NEW) ● FreeCodeCamp - JS algorithms + data str
● Frontend Masters courses by Kyle ● FreeCodeCamp - React, Redux, etc
Simpson / @mpjme's stream ● https://www.jsv9000.app/
● Learning JavaScript Design Patterns ● https://www.javascripttutorial.net/
● JavaScript The Good Parts
● https://www.learn-js.org/en/
● Eloquent JavaScript by Marijn Haverbeke
● JavaScript Foundations @ Gymnasium
● Effective JavaScript by David Herman
● Learning Advanced JavaScript ● EdX JavaScript Introduction
● JavaScript Allonge, the "Six" Edition ● JS is sexy - how to learn JS properly
● Exploring JS / JS Algorithms (NEW) ● Eloquent Javascript (free book)
● JavaScript Objects and Prototypes ● MDN introduction to JS
● Composable Functional JavaScript ● Superhero JS resource index
● Functional programming in JavaScript ● YouTube vids: 0, 1, 2, 3 + channel
● Secrets of the JavaScript Ninja by John ● The right way to learn JavaScript
Resig, Bear Bibeault, and Josip Maras ● AirBNB JavaScript Style guide
● The Principles of OOP JavaScript
● Explore DOM events
● AST Explorer / CodeWars
● The Odin Project: Node.JS
● JavaScript: Understanding the Weird
● https://www.programiz.com/
Parts + Clean Code JS (NEW)
● Advanced JavaScript ● https://marplo.net/javascript (Română)
● Egghead.IO tutorials on JS and derived ● JS games crash course
languages, or on actual frameworks, ● https://lab.reaal.me/jsrobot/
libraries, etc ● https://play.elevatorsaga.com/
● Dan Abramov’s GitHub for React ● https://screeps.com/
● Vue.JS’s startup guide ● JS Cheat Sheets / Deep JavaScript
● React with Redux ● JS Promise Guide
● Vanilla JS DOM Manipulation (NEW) ● Learn TypeScript for Free (Scrimba)
● Învăț eu, înveți și tu (Romanian) (NEW) ● Algorithms in JS: 1, 2, 3, 4
Everybody loves frameworks: VUE.js (NEW)
I get it, you’re fed up with generic stuff and want to get on the trend everybody’s in and start learning
a popular JavaScript framework that will get you ahead in the job race and also be fun along the way.
My personal recommendation is not React, nor Angular, but Vue. Why? Because it just makes more
sense, workflow-wise, it has server side rendering as a first class citizen allowing you to serve static
files to the browser then hydrate them on demand with the JavaScript front end scripts, and keep the
JS and CSS at a minimum with Nuxt and Tailwind. Tailwind is opinionated and I’m not sure I agree
with it completely just yet, but it does have super obvious benefits compared to Bootstrap & co. Plus,
Ștefan (who gathered the materials below and whom I trust) likes it very much.

But before we get into it…

First and foremost

These two e-books will root you in the necessary ideas for a healthy development career:
1. The lean web by Chris Ferdinandi (bonus: watch this video)
2. Resilient web design by Jeremy Keith
3. This video by Briefs
...just so you don’t treat every web project you see from now on as one you would solve with Vue.js.

So here goes:

Vue.js Docs
1. Guide 2. Style Guide 3. Cookbook

Nuxt.js Docs
1. Guide 4. Examples
2. Guide v2 (Beta) 5. FAQ - Common development,
3. API configuration and deployment questions

Courses
1. VueMastery Intro to Vue 3 & others@V3 5. Vue.js Components Fundamentals -
2. Vue3 Time Blocking App VueSchool.io
3. Laracasts: Learn Vue 2: Step By Step 6. Nuxt.js Fundamentals - VueSchool.io
4. Vue.js Fundamentals - VueSchool.io 7. ALL courses from VueMastery.com

Node.js
1. Node.js Best Practices

TailwindCSS
1. Docs 4. Collection - Design with Tailwind CSS
2. Component Examples Masterclass on @eggheadio
3. Screencasts: Designing with Tailwind 5. Tailwind CSS Custom Forms
CSS

Enjoy your damn framework now! 😝 I still think you don’t need it that much unless for very large
projects with dozens of coordinated people working to build the same platform.

Finally, a comparison of frameworks:

https://insights.stackoverflow.com/trends?tags=reactjs%2Cangular%2Cvue.js%2Csvelte
Getting Hired
» The Odin Project: Getting Hired
» 36 types of jobs in IT (in Romanian) from my YouTube channel
» Everything you need to know about making your CV (in Romanian) from my YouTube
» Prepare for your technical interview by practicing on Pramp
» FreeCodeCamp - Coding interview preparation + How to Prepare for Technical Interviews
» https://github.com/jwasham/coding-interview-university +
https://github.com/yangshun/tech-interview-handbook
https://github.com/lydiahallie/javascript-questions
https://frontendmasters.com/guides/front-end-handbook/2018/practice/interview-q.html
https://techinterviewhandbook.org/
https://www.thebalancecareers.com/job-interview-questions-and-answers-2061204
https://frontendmasters.com/guides/front-end-handbook/2018/practice/interview-q.html
https://github.com/h5bp/Front-end-Developer-Interview-Questions
https://technicalinterviews.dev/
https://www.freecodecamp.org/news/ten-rules-for-negotiating-a-job-offer-ee17cccbdab6/
https://www.freecodecamp.org/news/how-not-to-bomb-your-offer-negotiation-c46bb9bc7dea/

Being a better programmer

Start with this and don’t despair: https://norvig.com/21-days.html :)
https://free-for.dev/
» The ultimate computer science university knowledge repository: CS50 by Harvard + YouTube
» LeetCode / CodeWars (including Katas) / HackerRank (including certifications and practices)
» CheckIO coding games (TypeScript, Python)
» Elevator Saga (JavaScript) + Untrusted (JavaScript) + Screeps (a Steam game, MMO sandbox)
» TopCoder (competitive programming) / CodinGame (learn while playing)
» https://cssbattle.dev/
» OOP in: JAVA, more JAVA, Python, C#, JavaScript. Generic OOP knowledge and a bunch more courses
» Object Oriented Programming (OOP) in C++ Course + Solid principles of OOP
» Cursuri IT by eJobs (free!)
» AlgoExpert (paid)
» InfoArena (Romanian)
» https://www.programiz.com/
» https://app.codility.com/programmers/lessons/1-iterations/
» https://www.geeksforgeeks.org/
» http://codeforces.com/
» https://open.kattis.com/
» https://projecteuler.net/
» Pramp (practice interviewing)
» The Odin Project
» Math Pages (mathematics theory and exercises)
» Regular Expressions matching can be simple and fast
» Theory of computation: regular languages, context-free languages, Turing, decidability, etc.
» Data structures for text sequences
» https://db-engines.com/en/ranking
» Build better websites with Google Dev Tools
» Machine Learning course from Stanford
» Programming Paradigms by Stanford
» A single place to store all the technical documentation - DevDocs
» Learn with Google - from machine learning to widgets, from design to apps, chatbots, etc.
» Cheat sheets for everything https://www.codecademy.com/resources/cheatsheets/all
» The Cloud Resume Challenge + related article + presentation article

Others (bulk):
https://www.infoq.com/presentations/little-usl-scalability-performance/ /
https://speakerdeck.com/kavya719/applied-performance-theory?slide=11
T-minus 3, 2, 1: Future-proofing production systems - Kavya Joshi (Samsara)
https://ossu.firebaseapp.com/#/curriculum
https://www.sololearn.com/home
HTML and CSS Tutorials - YouTube
Programare pentru Incepatori: Tutoriale in Romana | Programare pentru Incepatori | Limbaje de
Programare - YouTube (Romanian)
Full Stack Web Development in the Cloud Course - Svelte, Postgres, Vercel, Gitpod
https://www.coursera.org/courses?query=full%20stack%20web%20development
https://fsharpforfunandprofit.com/fppatterns/
https://github.com/ziishaned/learn-regex
https://qmo.io/blog/ultimate-guide-to-api-design
https://hpbn.co/
https://github.com/EbookFoundation/free-programming-books
https://github.com/practical-tutorials/project-based-learning
https://programming-idioms.org/about#about-block-all-idioms
https://github.com/sdmg15/Best-websites-a-programmer-should-visit
https://github.com/minimaxir/big-list-of-naughty-strings
https://github.com/JanVanRyswyck/awesome-talks
https://github.com/trimstray/the-book-of-secret-knowledge
https://github.com/sindresorhus/awesome
https://github.com/lauragift21/awesome-learning-resources
https://github.com/ripienaar/free-for-dev
https://github.com/30-seconds/30-seconds-of-code
https://github.com/public-apis/public-apis
https://open.appacademy.io/
Spectrum programming circa 1980
A Compiler Writing Journey
Introduction to monads with Java code examples
Category Theory Illustrated
https://eev.ee/blog/2015/09/12/dark-corners-of-unicode/
https://manishearth.github.io/blog/2017/01/14/stop-ascribing-meaning-to-unicode-code-points/
A Hitchhiker’s Guide to Reinventing a Prolog Machine
A History of APL in 50 Functions
Linear types can change the world!
The pitfalls of protocol design - Attempting to write a formally verified PDF parser
Haskell for Imperative Programmers
Crafting Interpreters
LLVM compiler infrastructure
Regular Expression Matching Can Be Simple And Fast (but is slow in Java, Perl, PHP, Python, Ruby, ...)
Working Draft, Standard for Programming Language C++
C++ Annotations
Learn C++
105 STL Algorithms in Less Than an Hour
Stop Teaching C
Cᐩᐩ Weekly With Jason Turner
Generating random numbers using C++ standard library: the problems
C++ atomics, from basic to advanced. What do they really do?
Parameter Passing in C and C++
C++ Reference
How C++ Resolves a Function Call
C++20 Coroutine: Under The Hood
Programming II (C/C++) · Stepik
Nano-coroutines to the Rescue! (Using Coroutines TS, of Course)
Web Browser Engineering by Pavel Panchekha & Chris Harrelson
The MDN Front End Development Learning Index
Learn Rust With Entirely Too Many Linked Lists
Crust of Rust: Channels
The Rust Programming Language
Rust Memory Container Cheat-sheet
The Rustonomicon
A Firehose of Rust, for busy people who know some C++
Probability Cheat Sheet
MIT Course: Theory of computation
MIT Course: Electrical Engineering and Computer Science
List of data structures
Exposing Float Point + What Every Programmer Should Know About Floating-Point Arithmetic
What Every Computer Scientist Should Know About Floating-Point Arithmetic
List of algorithms / Quick Search Algorithm
Cryptography is not magic
https://github.com/public-apis/public-apis
Web Development Full Course (Front End) | HTML,CSS,JavaScript
https://fullstackopen.com/en/

CS61A - Structure and Interpretation of Computer Programs (introductory cs course at berkeley, hard
af but you will learn a lot if you keep at it)

CS61B - Data Structures (data structure course at bekeley. Programs interact with data, you will learn
how with this course. The MOST MOST MOST important course on this guide)

CS61C - Great Ideas in Computer Architecture (Broken archives, no idea when it will be fixed, will
update post when it is. Teaches the inner working of a computer so that you can write optimized
programs)

Then specialize for whatever you like, I suggest these

Full Stack Open (web development)
15-388 A - Practical Data Science (data science)
https://www.kaggle.com/ (data science)
CS193p - Developing Applications for iOS using SwiftUI (mobile dev)

Textbooks
Basic Mathematics - Serge Lang (teaches basic mathematics as the title says, but is proof based)
Discrete Mathematics with Applications - Susanna Epp (basically the math of computer science)

Useful free APIs

An ecommerce API library that would really help developing an eCommerce application / store
Serverless email sending https://formsubmit.co/
A whole list of public APIs: https://github.com/public-apis/public-apis
Workflow & Project management
» Agile Uprising - Agile manifesto review
» Extreme programming, a gentle introduction

Quality Assurance / Manual Testing

» A primer on Software Testing / QA, SoftwareTestingHelp and some paid alternatives & tests.
(https://www.utest.com/academy seems to be free now)
» ISTQB is the basis of testing, and it has both free courses and some tests.
» Functional Testing, Test Management, Automated, Performance and Security Testing (Romanian)
» A roadmap for Quality Engineers in multiple formats including PDF
» A (future) QA roadmap from Roadmap.sh
» 10 portfolio projects for aspiring automation engineers
https://www.tremend.com/qa-course-beginners

Digital Marketing materials

How about some SEO?
There are a zillion superb articles and resources for SEO, here are a few good places to start:
» https://ahrefs.com/seo (mandatory) » yoast.com/wordpress-seo/
» https://learningseo.io/ » uitest.com/analysis/
» moz.com/beginners-guide-to-seo » 20years.withgoogle.com/
» moz.com/learn/seo » Content strategy for startups
» ahrefs.com/blog/learn-seo/ » Neil Patel’s SEO Cheat Sheet
» SearchEngineJournal Best SEO Resources » https://moz.com/beginners-guide-to-seo –
» SearchEngineJournal Become an SEO Expert An SEO primer + The Ahrefs Blog (great SEO
» backlinko.com/content-study insight)
» SEOByTheSea Google Ranking Signals » Simplilearn YouTube SEO course
» moz.com/google-algorithm-change » https://ahrefs.com/blog/seo-for-startups/
» VieoDesign What are LSI keywords
» moz.com/blog/google-e-a-t

PPC
In order for you to start doing Google Ads for Performance Marketing / PPC, I recommend going
through Google’s own tutorial and then go through this guy’s tutorial.

Marketing & business strategy

» Blogging for business (a free - for now - $800 value course from Ahrefs) (mandatory)
» SAAS marketing vlog
» Content Marketing, a comprehensive guide from Ahrefs
» Marketing examples - a great list of strategies and tactics, plus a newsletter to go along with it
» ToolSalad - a collection of 200+ online marketing tools
Google Tag Manager for Beginners 2021

Miscellaneous
https://cxl.com/playbooks/
https://learndigital.withgoogle.com/digitalgarage/course/digital-marketing
https://learndigital.withgoogle.com/digitalunlocked
https://www.wordstream.com/learn PPC University
https://academy.hubspot.com/courses/inbound-marketing?library=true
https://www.quicksprout.com/the-beginners-guide-to-online-marketing/
https://copyblogger.com/imfsp/
https://www.coursera.org/learn/marketing-plan
https://www.edx.org/course/digital-marketing-strategy
https://www.edx.org/course/digital-strategy-and-action
https://www.linkedin.com/learning/paths/become-an-online-marketing-manager
https://ocw.mit.edu/courses/entrepreneurship/
https://www.futurelearn.com/subjects/business-and-management-courses/marketing/digital-mar
keting
https://blog.hubspot.com/marketing/free-online-marketing-classes

Front end performance & optimization

1. https://github.com/thedaviddias/Front-End-Performance-Checklist
2. https://www.smashingmagazine.com/2019/07/web-on-50mb-budget/

@TODO - to be continued

Challenge sites
https://type.method.ac/ - typography challenges
https://cssbattle.dev/ - CSS challenges
https://www.codingame.com/start -
Front end games and challenges - https://css-tricks.com/front-end-challenges/
​Css dinner, flexbox froggy, flexbox defense
clash of code

Blockchain development
https://www.youtube.com/playlist?list=PLKAyGpypHE7dHpGjm_sW9htRkCogBW97i (Romanian)
https://bitcoin.org/en/bitcoin-paper
https://www.youtube.com/watch?v=bBC-nXj3Ng4
https://books.google.ro/books/about/Mastering_Bitcoin.html?id=tponDwAAQBAJ&printsec=frontco
ver&source=kp_read_button&hl=en&redir_esc=y#v=onepage&q&f=false
Blockchain 101 - A Visual Demo

Linux / DevOps
https://dev.to/javinpaul/5-free-courses-to-learn-linux-for-beginners-367f
Linux Essentials - Beginner Crash Course (Ubuntu)
https://www.edx.org/course/introduction-to-linux
https://lwn.net/Kernel/LDD3/
https://linux-kernel-labs.github.io/refs/heads/master/index.html
https://opensource.com/article/19/4/devops-pipeline
https://codewithmosh.com/p/the-ultimate-docker-course

Python
https://github.com/dabeaz-course/practical-python/blob/master/Notes/Contents.md
https://docs.python.org/3/library/functions.html
Python Programming Beginner Tutorials - YouTube
An introduction to SciPy
What the fuck, Python!
Python Tutorial - Python for Beginners [Full Course]
The Python Tutorial
Automate the boring stuff with Python
Curs de programare în Python 3 pentru începători - Online interactiv gratuit (Romanian)
Tutoriale în Python de Marius Ciurea (Romanian)
The Best Python Books – Real Python
Programming using Python · Stepik

Java
Learn Java - Free Interactive Java Tutorial
Job Ready Java
Spring Quickstart Guide / CodingBat Java
(paid) Java EE, Spring, Spring 5, FullStack with Boot and Angular, FullStack with Boot and React

PHP & MySQL

PHP & MySQL Tutorial | Learn PHP From Scratch | Full Tutorial
https://www.w3schools.com/php/default.asp +
https://www.w3schools.com/php/php_mysql_intro.asp
https://www.udemy.com/course/php-mysql-tutorial/
https://www.coursera.org/learn/web-applications-php
https://www.udemy.com/course/creating-a-simple-newsletter-signup-using-php-and-mysql/
https://www.udemy.com/course/real-time-chat-system-using-php-mysql-pdo-and-ajax/
https://www.udemy.com/course/build-crud-application-php-mysql/
https://www.educative.io/courses/learn-php-from-scratch
https://www.codecademy.com/learn/learn-php
https://www.tutorialspoint.com/php/php_and_mysql.htm
https://www.wikihow.com/Learn-PHP-and-MySQL
https://www.learn-php.org/
PHP Programming Language Tutorial - Full Course
PHP For Absolute Beginners | 6.5 Hour Course
https://www.tutorialspoint.com/php/index.htm

https://www.php.net/manual/en/book.pdo.php
https://phpdelusions.net/pdo
https://www.phptutorial.net/php-pdo/
https://www.javatpoint.com/php-pdo
PDO Crash Course (PHP)

https://bulletproofphp.dev/yes-php-is-worth-using

Laravel PHP Framework Tutorial - Full Course for Beginners (2019)

Laravel PHP Framework Tutorial - Full Course for Beginners | Build a Blog with Laravel
https://laravel.com/docs/5.1/quickstart
https://www.tutorialspoint.com/laravel/index.htm

Generic SQL & Databases

» How does a relational database work?
» Why are NoSQL databases more scalable than SQL?
https://sqlbolt.com/
https://www.masterywithsql.com/
https://www.codecademy.com/learn/learn-sql
https://www.datacamp.com/learn/sql / https://www.datacamp.com/
https://academy.zerotomastery.io/p/complete-sql-database-bootcamp-zero-to-mastery
https://web.cecs.pdx.edu/~maier/TheoryBook/TRD.html
http://webdam.inria.fr/Alice/
https://towardsdatascience.com/designing-a-relational-database-and-creating-an-entity-relation
ship-diagram-89c1c19320b2

NoSQL
https://www.mongodb.com/nosql-explained
https://www.mongodb.com/developer/quickstart/node-crud-tutorial/
MongoDB Crash Course
https://www.youtube.com/playlist?list=PLLAZ4kZ9dFpOFJ9JcVW9u4PlSWO-VFoao (older version)
MongoDB Full Course | MongoDB Tutorial | MongoDB Tutorial For Beginners | MongoDB | Simp…
https://www.edx.org/course/nosql-basics
https://www.coursera.org/learn/introduction-to-nosql-databases

Game Development
» Super cool introductory course with a presentation video:
How to Teach 5 Semesters of Game Design in 1 Class
» The book: Reality is Broken by Jane McGonigal

Game Development in Unity

Learn Unity - Beginner's Game Development Tutorial
https://www.coursera.org/specializations/game-design-and-development
https://www.udemy.com/user/bentristem/ (paid)
https://www.udemy.com/course/introduction-to-game-development-with-unity/ (free)
https://www.udemy.com/course/unity-game-developer/
https://www.pluralsight.com/courses/introduction-game-development-unity
https://www.freecodecamp.org/news/game-development-for-beginners-unity-course/
https://learn.unity.com/

Game Development in HTML5 / JavaScript

Franks laboratory
Learn JavaScript by Building 7 Games - Full Course
Visual Web Development (2021) (playlist)
Front End Web Development Projects for Beginners (playlist)
JavaScript Game Development Crash Course
https://www.udemy.com/course/free-prep-for-html5-game-development/
https://www.udemy.com/course/code-your-first-game/
Intro to Game Development with JavaScript - Full Tutorial
JavaScript Game Development Crash Course
https://developer.ibm.com/tutorials/wa-build2dphysicsengine/

Graphics
https://www.udemy.com/course/how-to-program-games/ (paid)
https://www.udemy.com/course/create-quick-professional-2d-game-backgrounds-in-photoshop/
(paid)
https://www.udemy.com/course/the-ultimate-2d-game-character-design-animation-course/
(paid)
https://www.udemy.com/course/learn-professional-pixel-art-animation-for-games/ (paid)

3D Modelling & Animation

Tutorials — blender.org
Blender Guru
CG Fast Track
Blender Fundamentals 2.8 + https://www.youtube.com/watch?v=kes2qmijy7w +
https://www.youtube.com/watch?v=hvoniP3uso8
https://www.blenderguru.com/articles/how-i-learned-blender-and-5-tips-for-you
https://cgcookie.com/course/character-animation-toolkit/
Lighting and Baking Workflow: Blender Tutorial
CG Geek
https://vimeo.com/30073532
https://www.creativebloq.com/features/blender-shortcuts

Other technical aspects (NEW)

Networking, Linux, Cyber Security, Penetration Testing
Security Certification Roadmap !!!!!!!!!!!!!

Become an Ethical Hacker for $0

Linux Journey: Home
CompTIA 220-1001 and 220-1002 A+ Training Course - Professor Messer IT Certification Training
Courses
How to Build a PC! Step-by-step
Professor Messer's CompTIA N10-007 Network+ Course
Cisco Packet Tracer - Networking Simulation Tool
TOTAL: CompTIA Network+ Certification (N10-007)
Bandit
The Complete Linux for Ethical Hackers Course for 2019
Retelistica pentru Incepatori | Cisco CCNA Modulul 1, 2, 3, 4 | Retele de Calculatoare - YouTube
(Romanian)
Linux: Tutoriale pentru Incepatori | Invata Linux & Ubuntu - YouTube (Romanian)
Securitate Cibernetica si Ethical Hacking: Tutoriale pentru incepatori | CEH | CCNA Security | Invata
Securitate - YouTube (Romanian)

» TryHackMe - cyber security training - start here: https://tryhackme.com/path/outline/beginner

» HackTheBox - start hacking / CTF Time / Pico CTF - hack by playing / Over the Wire - wargames
» Pentester Academy / PortSwigger Web Security Academy
» Offensive Security Certifications (paid) / SANS Security Certifications (paid)
» NetworkChuck - tons of free tutorials and a few paid high quality ones
» YouTube: IppSec, John Hammond, LiveOverflow, DEFCON, BlackHat
» David Bombal’s videos / XSS cheat sheet / Udemy: Practical ethical hacking / Matt G’s Road to CCIE
» Heath Adams’ practical ethical hacking / all courses from TCM-SEC
» How to make your forms really spambot-proof / how to secure anything / zero day guide / reports
» VulnHub / OWASP Top 10 / Offensive Security Certifications / SANS Cyber Security Courses
» Linux Certification / CISCO CCNA / CompTIA Security+ / Certified Ethical Hacker
» Podcast: Darknet Diaries / BurpSuite proxy / Kali Linux / Pentest-Tools.com
» European Cyber Security Challenge / Synack / CVE.org / Hak5
https://mitre-attack.github.io/attack-navigator/
CISSP Certification Course – PASS the Certified Information Security Professional Exam!
(use with care, these appear to have some viruses of sorts: https://z0mbie.dreamhosters.com/ +
https://vxug.fakedoma.in/archive/VxHeaven/vx.php@id=z001.html)
https://d3fend.mitre.org/ A knowledge graph of cybersecurity countermeasures

Computer graphics & rendering

» 100 second introduction into WebGL
» Learn computer graphics from scratch: full course
» Drawing lines is hard
» Physically based rendering
» 3D modeling for Virtual Reality
» Learn Blender - video 1 + video 2 (free course)
» https://64.github.io/tonemapping/

Hosting
» For Wordpress, the best is SiteGround
» For Vue, React, Angular, etc, the best is Netlify
» For static sites, the best is GitHub Pages

Design & UX (NEW / WIP)

» What is interaction design?
» Design systems for: everyone, developers, designers, product managers
» Information Design & Visualization fundamentals
» Modern web design
» Advanced prototyping with Axure
» Prototyping digital products & websites
» Questions to ask before starting a design project

Learn Design with Figma

https://www.uxlibrary.org/
https://uxarchive.com/
https://mobbin.design/browse/ios/apps
https://www.reallygoodux.io/
https://www.checklist.design/
https://www.darkpatterns.org/
Welcome - Universal Principles of Design Video Tutorial
The School Of Design: Design
How You Can Learn Design Without School
https://www.theleagueofmoveabletype.com/
https://type-scale.com/
https://utopia.fyi/blog/css-modular-scales/
https://www.smashingmagazine.com/2010/11/best-practices-of-combining-typefaces/
https://www.typewolf.com/
https://www.typewolf.com/resources
https://www.fontpair.co/
https://open-foundry.com/
https://usemodify.com/
https://uxdesign.cc/uniwidth-typefaces-for-interface-design-b6e8078dc0f7
https://seek-oss.github.io/capsize/
https://www.modularscale.com/
https://www.layoutgridcalculator.com/typographic-scale/
https://meowni.ca/font-style-matcher/
https://stylestage.dev/
https://www.frontendmentor.io/
https://cssbattle.dev/
https://www.codewars.com/
https://www.frontendpractice.com/
https://www.firsttimersonly.com/
http://www.designhistory.org/index.html
http://www.designishistory.com/
https://www.ucreative.com/design/
https://www.smashingmagazine.com/category/design/
https://learnui.design/
Gareth David Studio
https://creativemarket.com/blog/10-design-ted-talks-you-should-watch

Copywriting & Content Writing (new)

Ahrefs Academy: Blogging for business
How to write inclusive, accessible digital products | by Nick DiLallo
Speak Human
Good Copy • Email copy from great companies
UX Writing Resource Library - Home
Really Good Emails
https://learndigital.withgoogle.com/atelieruldigital
Book: Ogilvy on Advertising in the Digital Age
Book: Cialdini - Influence, the psychology of persuasion (new and expanded)
https://copyblogger.com/
https://copyblogger.com/imfsp/
https://contentmarketinginstitute.com/

Entrepreneurship & business materials (new)

» https://www.startupschool.org/
» YCombinator - News + YouTube + Website
» https://learn.saylor.org/
» Running a better business the Basecamp way
» A fantastic way of storing files and creating backups: Dropbox
» A great newsletter service: ConvertKit
» A great streaming service that multi-streams to YouTube, Twitch, Facebook, etc: StreamLabs
» A great YouTube plugin to help your channel grow: TubeBuddy
» Actually pragmatic and easy to implement Product Lessons you need to learn now

Learn English (from Romanian)

1. https://www.britishcouncil.ro/engleza/invata-online/gratis
2. https://www.duolingo.com/ mai exact
https://ro.duolingo.com/course/en/ro/%C3%8Enva%C8%9B%C4%83-englez%C4%83
3. https://www.lingohut.com/ro/l1/%C3%AEnva%C8%9B%C4%83-limba-englez%C4%83
4. mmmEnglish
Resources for students
https://education.github.com/
@TODO add more

Final life advice

1. How to speak: an MIT lecture
2. How to learn more efficiently: study less, study smart + learning how to learn + Huberman
3. How to sleep: Toolkit for Sleep - Huberman Lab
4. Two minute papers - a YouTube channel with a mission to make research papers digestible
5. Draw a map of your past, evaluate your present and plan your future to win at life
6. How to ask questions the smart way + Don’t ask to ask, just ask!
7. Time management: Defeating busy
8. Justice - Moral Philosophy course from Harvard
9. Physics course from MIT
10. Quantum Mechanical view of Reality by Richard Feynman
11. Crash Course in World History by John Green
12. Introduction to Economics by Marginal Revolution University
13. Nonlinear Dynamics and Chaos by Cornell University
14. A bunch of courses in Romanian, from Universitatea Politehnică București

🇷🇴
15. https://www.imdb.com/title/tt3322570/ a series on brain hacking
16. https://atelierul.digital/ useful resources (in Romanian)

aștept sugestii pe YouTube:

Shameless self promotion - My YouTube

Dacă te tentează o carieră în domeniul IT, mi-am făcut recent canal de YouTube în care vorbesc
despre ce-ar trebui să faci ca să-ți sporești șansele să înveți ce trebuie, să te descurci singur/ă, să fii
autodidact/ă și să ai posibilitatea să te angajezi în domeniu. Dacă sună bine, înscrie-te la canal, dând
click pe link-ul ăsta: https://www.youtube.com/c/ViorelMocanu?sub_confirmation=1

Succes în carieră!
An overview of the paths in Front End Development
The source, and a lot of tutorial links, can be found here (2018 edition) and an updated one for 2020
can be found here, with the actual source of the graph being at https://roadmap.sh/ + alternative here.
RPG variant. Non-visual but super comprehensive.