timmybytes-learning / roadmap Goto Github PK

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.

1. Introduction
   • Web Development: Front, Back, and Full-Stack
   • Web Development Basics
2. HTML
   • Semantic Structure & Accessibility
3. CSS
4. JavaScript
5. Git
6. CLI
7. Frameworks
8. Stacks
9. Fundamentals

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: ...

• ...

Back to Contents

...

• ...

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 the dir 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, and cookies are all client storage solutions.
• localStorage: ...
• sessionStorage: ...
• cookies: ...

• <script>: ...
• <script aync>: ...
• <script defer>: ...

• ...

• ...

• ...

• ...

Back to Contents

Back to Contents

• 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?

Back to Contents

Back to Contents

Back to Contents

• ...

• ...

• ...

• ...

• ...

• ...

• ...

• ...

• ...

• ...

• ...

• ...

• ...

Back to Contents

• 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

Back to Contents

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.

Back to Contents

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)*