This is my personal roadmap for learning web development — specifically the front-end. This guide started out as notes I was taking on the Web Developer Roadmap and Front-end Interview Questions while self-learning web development. I'm trying to combine (and expand) them into as comprehensive and inclusive a guide as possible for newbies and anyone interested in learning more about development in-depth. This is definitely a work-in-progress, and more will be added to these concepts as time allows.
If you're interested in adding anything, feel free to submit a Pull Request.
09/20/20: I'm in the process of building a live webpage for this, to make things more easy to navigate. It's being built with the Sierra SCSS Library from @JoanClaret.
There are a lot of terms that get thrown around in relation to people who write code that involves the Internet — Developer, Engineer, Architect, Specialist, etc. — and like a lot of the tech industry, the roles of these positions varies across organizations. Typically though, you can think of there being three main (not exhaustive) areas:
-
Front-end: This typically involves UI/UX (User Interfaces/User Experiences) that heavily involves the visual and interactive parts of the web. This might be building (and sometimes designing) websites, creating web apps, and any number of tasks related to the "front" facing parts of the web. This guide focuses on the Front-end.
-
Back-end: ...
-
Full-stack: ...
- ...
...
- ...
All HTML documents must start with a declaration. The declaration is not an HTML tag. It is an "information" to the browser about what document type to expect.
Language can be set/prioritized through http request headers, with more prioritized languages given greater “weight”. This can also be set with the “lang” attributes: 1 Define a primary language with the lang attribute, and then call out the secondary language(s) with lang attributes on elements in the document 2 Define lang in the specific sections of the document as needed
- Always use the
lang
and thedir
attributes in all your HTML - Avoid talking about "right side" and "left side"
- Don't ever concatenate translated strings. Ex:
"The date today is " + date
- Rather add parameter support to your messages and do something like:
messages.date = "The date today is %date"... and then:msg( 'messages.date' );
Data that should be associated with a particular element but need not have any defined meaning. Ex:
<!-- HTML - Extra Info about “#electric-cars” -->
<article id="electric-cars" data-columns="3" data-index-number="12314" data-parent="cars"></article>
// JavaScript Access
const article = document.querySelector("#electric-cars");
// Can get and/or set
article.dataset.columns; // "3"
article.dataset.indexNumber; // "12314"
article.dataset.parent; // "cars"
/* CSS Access */
article::before {
content: attr(data-parent);
}
article[data-columns="3"] {
width: 400px;
}
article[data-columns="4"] {
width: 600px;
}
- Semantics: allowing you to describe more precisely what your content is.
- Connectivity: allowing you to communicate with the server in new and innovative ways.
- Offline Storage: allowing webpages to store data on the client-side locally and operate offline more efficiently.
- Multimedia: making video and audio first-class citizens in the Open Web.
- 2D/3D Graphics and Effects: allowing a much more diverse range of presentation options.
- Performance and Integration: providing greater speed optimization and better usage of computer hardware.
- Device Access: allowing for the usage of various input and output devices.
- Styling: letting authors write more sophisticated themes.
localStorage
,sessionStorage
, andcookies
are all client storage solutions.localStorage
: ...sessionStorage
: ...cookies
: ...
<script>
: ...<script aync>
: ...<script defer>
: ...
Why is it generally a good idea to position CSS <link>
s between <head></head>
and JS <script>
s just before </body>
? Do you know any exceptions?
- ...
- ...
Why you would use a srcset
attribute in an image tag? Explain the process the browser uses when evaluating the content of this attribute?
- ...
- ...
Can you describe the main difference between the Array.forEach()
loop and Array.map()
methods and why you would pick one versus the other?
Explain the difference between: function Person(){}
, var person = Person()
, and var person = new Person()
?
Can you explain what Function.call
and Function.apply
do? What's the notable difference between the two?
What are some of the advantages/disadvantages of writing JavaScript code in a language that compiles to JavaScript?
- What is an example of an immutable object in JavaScript?
- What are the pros and cons of immutability?
- How can you achieve immutability in your own code?
Can you offer a use case for the new arrow =>
function syntax? How does this new syntax differ from other functions?
- ...
- ...
- ...
- ...
- ...
- ...
- ...
- ...
- ...
- ...
- ...
- ...
- ...
- LAMP: Linux/Apache/MySQL/PHP
- MEAN: MongoDB/Express.js/AngularJS/Node.js
- MERN: MongoDB/Express.js/React/Node.js
- Ruby Stack: Ruby/Ruby on Rails/RVM (Ruby Virtual Machine)/MySQL/Apache/PHP
- Django Stack: Python/Django/Apache/MySQL
- Bitnami DevPack: PHP/Django/Ruby on Rails/Java/MySQL, PostgreSQL/Apache Tomcat
The following structure comes from Teach Yourself Computer Science, and supplements the hands-on learning much of this guide focuses on with more rigorous study on core Computer Science topics. You don't need to know formal CS to work in the tech industry, but learning these concepts will give you a deeper understanding on the technologies and processes used in development.
To Do:
- Test Build process for gh-pages deployment
- Create main page with checked/unchecked boxes to track progress
- Create documentation layout
- Add sources for external reading, video, etc., for each pertinent section
- Split README into separate docs/wiki
- Add:
- Test Driven Development (TDD)
- Continuous Integration (CI)
- APIs
- MDN Front End
- Getting Started
- [Installing basic software](https://developer.mozilla.org/en-US/docs/Learn/ Getting_started_with_the_webInstalling_basic_software) — basic tool setup (15 min read)
- [Background on the web and web standards](https://developer.mozilla.org/en-US/docs/Learn/ Getting_started_with_the_webThe_web_and_web_standards) (45 min read)
- Learning and getting help (45 min read)
- Semantics and Structure with HTML
- Introduction to HTML (15–20 hour readexercises)
- Multimedia and embedding (15–20 hour readexercises)
- HTML tables (5–10 hour read/exercises)
- Styling and Layout with CSS
- CSS first steps (10–15 hour read/exercises)
- CSS building blocks (35–45 hour read/exercises)
- Styling text (15–20 hour read/exercises)
- CSS layout (30–40 hour read/exercises)
- Interactivity with JavaScript
- JavaScript first steps (30–40 hour read/exercises)
- JavaScript building blocks (25–35 hour readexercises)
- Introducing JavaScript objects (25–35 hour readexercises)
- Client-side web APIs (30–40 hour readexercises)
- Asynchronous JavaScript (25–35 hour readexercises)
- Web forms — Working with user data
- Web forms (40–50 hours)
- Making the Web Work For Everyone
- Cross-browser testing (25–30hour read/exercises)
- Accessibility (20–25 hour read/exercises)
- Modern Tooling
- Git and GitHub (5 hour read)
- [Understanding client-side web development tools](https://developer.mozilla.org/en-US/docs/Learn/ Tools_and_testingUnderstanding_client-side_tools) (20–25 hour read)
- [Understanding client-side JavaScript frameworks](https://developer.mozilla.org/en-US/docs/Learn/ Tools_and_testingClient-side_JavaScript_frameworks) (30-60 hour read/exercises)*
- Getting Started