WebDev/Digital Tutorial
A Front End Development Course used in 2015, updated up to 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: R
esilient web design book ( mandatory) & H
ow 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 & H
ow does the Internet work: Naked Science Scrapbook
» The Odin Project - Web Development 101 (NEW)
» A packet’s tale: World Science Festival
» HTTP basics - part of http://cs50.tv/2017/fall/ + H
ow HTTPS works (NEW)
» Don’t fear the Internet: browser
» How the Web works for developers: Part 1 – Overview & Front End (mandatory)
» How the Web works for developers: Part 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)
» Book: I nformation 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: H
TML5 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 1-2 – HTML only):
» Learn HTML/CSS: Shay Howe
» CodeSchool Web Path
» Khan Academy Web Programming
» Washington.edu course on HTML
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 e
xtremely 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 HTML/CSS: Shay Howe / CodeSchool Web Path / Khan Academy Web Programming
» The Odin Project: HTML and CSS (NEW)
CSS+Layout tutorials
» Washington.edu course on CSS
» Learn Layout (mandatory)
» HTMLDog: Beginner CSS tutorial, I ntermediate CSS tutorial, A
dvanced CSS tutorial
CSS articles, tools and information
» Calculating CSS Specificity / Specificity calculator ( mandatory)
» The CSS “homepage” / CSS: Designing for the Web
» Dev.to - explain CSS selectors in plain English
» CSS Zen Garden (mandatory)
» Solve most of IE’s bugs / Grid for layout, Flexbox for components (NEW)
» An introduction to browser rendering (mandatory) You’ll need C hrome Canary to play with this.
» Mozilla Developer Network CSS Info
A full CSS (and HTML / Accessibility / etc.) reference
» Mozilla Developer Network: CSS reference (mandatory)
» A complete guide to CSS functions (NEW) / M
odern CSS solutions for old CSS problems ( NEW)
» Relearn CSS layout (NEW)
An example (S)CSS standard
» A living document describing how we aim to write all of our styles: SASS Standards (mandatory)
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
» Magic animations / Hover effects / Hovers / E
ffekts / Box / Advanced animations (NEW)
» CanIUse – Use this to check in what browsers are some features supported, e.g. CSS Grid
» CSS3 gradient generator – Use this to generate gradients of any kind for CSS backgrounds
Icon fonts
» Why IconFonts are great / Iconfont generator: I coMoon / Iconfont kit: FontAwesome
Course #3: Your first project – a quiz
(weeks 3-4)
Tools of the trade: WebStorm, 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 »V
isual Studio Code (free and surprisingly good)
»W ebStorm (paid) / Sublime or B
rackets (free)
Using Version Control
»O nline editors (for testing only)
» GIT for beginners
» GIT (GitHub + SourceTree) tutorial FTP clients
» GIT with WebStorm »F
ileZilla
» Using the terminal (NEW) »T otal Commander / C
oreFTP
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: D
esigning with web standards, all of it.
» W3C HTML Validator / W 3C CSS Validator
» Washington.edu courses on: W eb Standards and Accessible Design + Quality Control
» Why Semantic Search is important, from Ahrefs (NEW)
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
Mobile-first Responsive Design (everything is mandatory)
» Book: R esponsive web design, all. Plus Ethan Marcotte’s articles on A List Apart. Mostly this one!
» Book: M obile first, all of it. Plus Luke Wroblewski’s interesting presentations. Most of them...
» Scaling User Interfaces / Creating a mobile-first responsive web design / R esponsive Design is…
» RWD Tutorials / B uilding a better responsive website
» A f ull list of devices and their resolutions / Device agnostic breakpoints / State of the Web
N
atural responsive web design breakpoints / Re-thinking breakpoints in responsive design
» I have no idea what the hell I am doing
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
» 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: D on’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
» Making the web more inclusive and usable from Usability.com.ua
» Principles of website usability
» 25 point usability checklist / Y
et another checklist
» Laws of UX (NEW) / U X 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)
g
ov.co.uk and their Design Principles are great reads! Also, Nielsen Norman Group’s heuristics.
I have a design. Now what? (Photoshop 101)
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 H
TML video series p art 0, p
art 1, p
art 2, part 3, p
art 4, p
art 5, p
art 6, p
art 7 (mandatory)
» PSD to HTML Tuts+ Video
» PSD to HTML Tuts+ Text
» PSD to HTML: C ode a clean business website design
» PSD to HTML: B uild 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.
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
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. None (except Angular) are mandatory, but
you should read through at least a couple of them to understand the basic principles.
» Handlebars (JS)
» Mustache (JS)
» Angular Templating + T utorial + Another tutorial (JS) (mandatory)
» 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)
Example workflow standards
For future reference, here they are linked directly:
» 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! :)
● Scrimba can be a very useful and diverse approach to learning, but it costs $21 / month. (NEW)
● A new platform offering project ideas - h ttps://www.frontendmentor.io/ (NEW)
● 50 (mini) projects in 50 days - https://50projects50days.com/ from Florin Ion and B rad
Traversy (€10 discounted, €100 full price) (NEW) + IdeasGrab (NEW)
● COMPLETE front end tutorial: 1 2HR+ 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, L earnCode Academy, Roadmap.sh, T
raversy
Media, etc. (NEW)
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 a
sk me how to get the licensed archive (or buy the books!). Pass is: e
v3rym@trix
Must-follow, general resources
»T
he 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. It’s still a budding resource, since we’ve only just begun holding the workshops, but it’s a
great place to start learning the basics and advanced information needed to be a pro.
»h
ttp://alistapart.com/ - start w
ith this article then t his
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!
»h
ttp://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.
»h
ttps://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://tympanus.net/codrops/ – Examples of CSS techniques
» 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 Blog (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 f ull history of the Web, if you’re curious.
Feelin’ advanced, are we?
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: A lgorithmics and B
est Practices (NEW).
You can find out more about algorithms (in Romanian) on this excellent site: InfoArena (NEW), and
also on LeetCode (NEW) and H ackerRank (NEW) which have gamified ways to test your algorithms.
Crash course in b
rain surgery JavaScript
● FreeCodeCamp.org step by step beginners’ guide to JavaScript
● JavaScript 30: build 30 things in 30 days with 30 JS tutorials (NEW)
● Practical JavaScript on WatchAndCode & T he modern JavaScript Tutorial at JavaScript.info
● The Odin Project: JavaScript (NEW) & T he Odin Project: Node.JS (NEW)
● How to code in Javascript at DigitalOcean (stolen from this Medium article)
JavaScript in depth
First, remember the M DN 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 t his fantastic GitHub list and other findings:
● You Don't Know JS ● The Principles of Object-Oriented
● Frontend Masters courses by Kyle JavaScript by Nicholas C. Zakas
Simpson ● AST Explorer
● @mpjme's stream ● CodeWars
● Learning JavaScript Design Patterns by ● JavaScript: Understanding the Weird
Addy Osmani Parts
● JavaScript The Good Parts by Douglas ● Advanced JavaScript
Crockford ● Egghead.IO tutorials on J S and derived
● Eloquent JavaScript by Marijn Haverbeke
languages, or on actual frameworks,
● Effective JavaScript by David Herman
libraries, etc
● Learning Advanced JavaScript by John
● Dan Abramov’s G itHub for React where
Resig
you can find all sorts of tutorials and
● JavaScript Allonge, the "Six" Edition
startup guides
● Exploring JS: JavaScript books for
● Vue.JS’s s tartup guide
programmers by Dr. Axel Rauschmayer
● JavaScript Objects and Prototypes by Jim ● React with Redux
Cooper ● Vanilla JS DOM Manipulation (NEW)
● Professor Frisby Introduces Composable ● https://javascript.info/ (NEW)
Functional JavaScript ● Învăț eu, înveți și tu (Romanian) (NEW)
● Functional programming in JavaScript
● Secrets of the JavaScript Ninja by John
Resig, Bear Bibeault, and Josip Maras
Front end performance & optimization
1. https://github.com/thedaviddias/Front-End-Performance-Checklist
2. https://www.smashingmagazine.com/2019/07/web-on-50mb-budget/
3. Front end games and challenges - h
ttps://css-tricks.com/front-end-challenges/
Quality Assurance / Manual Testing (NEW)
A primer on Software Testing / QA, S
oftwareTestingHelp and some p
aid a
lternatives & tests.
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 t his video)
2. Resilient web design by Jeremy Keith
...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
2. Guide v2 (Beta)
3. API
4. Examples
5. FAQ - Common development, configuration and deployment questions
Free 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
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.
Getting Hired (NEW)
» 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
Being a better programmer (NEW)
» LeetCode
» CodeWars (including Katas)
» HackerRank (including certifications and practices)
» TopCoder (competitive programming)
» CodinGame (learn while playing)
» AlgoExpert (paid)
» InfoArena (Romanian)
» LeetCode
» Pramp (practice interviewing)
» The Odin Project
Chapter to be continued, but scroll down some more for
extra content!
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 h
ere, with the actual source of the graph being at https://roadmap.sh/
Digital Marketing materials (new)
How about some SEO?
There are a zillion superb articles and resources for SEO, here are a few good places to start:
» moz.com/beginners-guide-to-seo »m oz.com/blog/google-e-a-t
» moz.com/learn/seo »y oast.com/wordpress-seo/
» ahrefs.com/blog/learn-seo/ »u itest.com/analysis/
» SearchEngineJournal Best SEO Resources »2 0years.withgoogle.com/
» SearchEngineJournal Become an SEO Expert »C ontent strategy for startups
» backlinko.com/content-study »N eil Patel’s SEO Cheat Sheet
» SEOByTheSea Google Ranking Signals »h ttps://moz.com/beginners-guide-to-seo –
» moz.com/google-algorithm-change An SEO primer + The Ahrefs Blog (great SEO
» VieoDesign What are LSI keywords insight)
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
Networking, security and Linux
» NetworkChuck - tons of f ree tutorials and a few paid high quality ones
» TryHackMe - cyber security training
» HackTheBox - start hacking
» CTF Time
» Pico CTF - hack by playing
» Over the Wire - wargames
» YouTube: I ppSec, J ohn Hammond, L iveOverflow, D
EFCON, BlackHat
» Udemy: Practical ethical hacking
Entrepreneurship materials (new)
» https://www.startupschool.org/
»
Final life advice
1. https://www.selfauthoring.com/
2. Un site care oferă un overview destul de interesant al tuturor skill-urilor (similar cu
infograficul enorm de mai sus, dar în variantă web: h ttps://andreasbm.github.io/web-skills/
3. @TODO - aștept sugestii în comments :)
Shameless self promotion
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ă!
