avatarThon Ly

Summary

The website content introduces a comprehensive frontend developer textbook for beginners, available exclusively on Medium, which is part of a foundational trilogy aimed at transforming complete beginners into well-rounded, future-proof Fullstack Engineers through a unique approach to learning HTML, CSS, and JavaScript.

Abstract

The textbook, published by Silicon Wat, is designed to be a foundational resource for beginners aspiring to become Frontend Engineers. It stands out by teaching HTML, CSS, and JavaScript in parallel, emphasizing their interrelationships and modern practices as per MDN documentation. The course also integrates Data Structures and Algorithms, and employs Test-Driven Development with musical coding challenges to enhance learning. Students will create Web Components and Micro-Frontends, culminating in the development of a Progressive Web App (PWA) that can function as a native app. The curriculum is updated every three years and includes real-time updates via Twitter, practical projects like a virtual piano, and preparation for Mid-Level Frontend Engineer roles. The course is supported by additional resources and a community platform, with opportunities for collaboration and funding for projects that address economic inequality.

Opinions

  • The course is uniquely structured to teach the three core web technologies simultaneously, which is believed to deepen understanding and mimic real-world development scenarios.
  • Emphasis is placed on the importance of learning from the most current and vanilla documentation to ensure exposure to modern syntaxes and browser APIs.
  • The course's approach to integrating Computer Science fundamentals, such as Data Structures and Algorithms, is considered essential for developing a strong intuition in the field.
  • Test-Driven Development is presented as a fun and effective way to learn, especially when combined with musical challenges that cater to different learning styles.
  • The creation of Web Components and Micro-Frontends is highlighted as a practical and modern approach to building scalable and maintainable web applications.
  • The course aims to equip students with the skills to develop applications that not only function as native apps but also incorporate advanced features like offline capabilities and blockchain cryptography.
  • The textbook and accompanying resources are designed to prepare students for real-world job requirements and to encourage entrepreneurship in the tech industry.
  • The author suggests that by joining the course's cohort program or using the provided resources, students can stay motivated and track their progress effectively.
  • The course's philanthropic aspect is emphasized, with proceeds from Medium membership referrals contributing to the construction of the Silicon Wat Campus for children in Ukraine and Cambodia.

A Complete Frontend Developer Textbook for Beginners (2023 Edition)

Exclusively on Medium

Music is the universal language of mankind. — Henry Wadsworth Longfellow

This textbook is published exclusively on Medium by Silicon Wat, an online Temple for coding Monks to achieve code Enlightenment! 😇

This first textbook corresponds to the first Udemy video course in a foundational trilogy that helps a complete beginner to become a well-rounded and future-proof Fullstack Engineer.

To keep up and stay current with the latest technologies, this entire trilogy is remastered every three years.

→ Follow me on Twitter for real-time updates!

Preface

If you are a complete beginner aspiring to become a Frontend Engineer, this course is for you! Your only prerequisite is to signup for a free account on Codepen.

This course is different from other beginner’s courses in 8 unique ways:

1: HTML + CSS + JavaScript => Interrelationships

Firstly, the three web languages (HTML, CSS, and JavaScript) are taught side-by-side in parallel. This approach may be three times harder, but it will deepen your understanding of their interrelationships, which the traditional way of learning them individually misses. Ample quizzes will be given to help you review everything you learn!

2: MDN Documentation => Modern + Vanilla

Secondly, the three web languages are taught in pure vanilla by referencing the most up-to-date documentation on the Mozilla Developer Network (MDN). This approach practiced by seasoned developers will expose you to the most modern syntaxes and browser APIs in great detail, such as HTML Semantics, CSS Flexbox/Grid, JavaScript ES6+, Geolocation, IndexedDB, Media Capture, Web Audio, Web Speech, Web Crypto, etc!

3: HTML/CSS/JavaScript => Data Structures + Algorithms

Third, the three web languages are taught in relation to Data Structures and Algorithms. This mental model will help you develop a strong intuition of Computer Science fundamentals. Essentially, HTML is just a tree structure upon which CSS styles and JavaScript interactivity are applied through executing algorithms. With a solid and comprehensive foundation in these fundamentals, branching out to learn JavaScript-centric frameworks like React or Angular will be easy, if you so choose.

4: TDD Coding Exercises => Basic Music Theory Challenges

Fourth, ample coding exercises will be provided to help you put into practice everything you learn. You will solve them in a way that closely mimics the actual process real developers follow. This process is called Test-Driven Development (TDD) and it gives developers a lot of flexibility to code in whatever way they like, so long as their code can get all the test cases to pass. To make these coding challenges fun for visual learners as well as auditory learners, the test cases will be musical in context! Of course, solutions and detailed explanations will be given for each problem.

5: HTML/CSS/JavaScript => Web Components

Fifth, your new-found knowledge and skills culminate in building your own custom Web Components from scratch. They comprise of HTML Templates (for the HTML), Shadow DOM (for the CSS), and Custom Elements (for the JavaScript) — all of which are self-contained yet extensible and reusable. In other words, you will also learn how to share them across all your web pages and apps, and even avail them to other developers if you wish! Therefore, to create Web Components entails bringing together everything you learn about HTML, CSS, and JavaScript. As an example demo, we will use them to build a virtual piano that mimics all the functionalities of a real piano! In fact, your virtual keyboard can even interact with a real keyboard through a MIDI cable!

To learn how MIDI devices work and IoT (Internet of Things) in general, come study at our Silicon Wat Campus!

6: Web Components => Micro-Frontends

Sixth, you will compose our Web Components into encapsulated web pages known as Micro-Frontends. This Frontend architecture divides up a large web app into smaller independent codebases, which in turn can be managed by many small independent teams. The result is greater agility for the individual developer and greater adaptability for the aggregate application. As such, the Micro-Frontend Architecture is a very popular choice for modern applications which are becoming increasingly larger and more complex. Furthermore, your Micro-Frontends will utilize Service Workers capable of connecting with the browser’s storage and external third-party APIs, making them behave almost like having backends unto themselves! In essence, your Micro-Frontends act just like native apps! By connecting your Micro-Frontends to a Machine Learning API, your virtual piano will be able to intelligently detect musical notes received by your microphone in real time! And to prove to you how totally awesome coding can be, your virtual piano will also be able to intelligently decipher musical sign language captured by your camera in real time too!

To learn more about Machine Learning and Artificial Intelligence in general, check out my third Udemy course!

7: Micro-Frontends => Mobile/Desktop Native PWA

Seventh, you will learn how to combine and orchestrate your Micro-Frontends as a Progressive Web App (PWA) that meets all the performance requirements to be listed as a native app on the Google Play Store. In this course, you will build two Micro-Frontends: The first will be a music editor while the second will be music games. Your PWA will act as the parent container which seamlessly orchestrates the navigation and state management of its children Micro-Frontends. Furthermore, you will learn how to publish your PWA on the internet as a mobile and desktop app using your own custom domain and host it for free on GitHub Pages. And as an added bonus, you will also learn how to authenticate your users using the same cryptography that powers the Bitcoin and Ethereum blockchains!

To learn more about Bitcoin and Ethereum and blockchains in general, check out my second Udemy course!

8: Mid-Level Frontend Engineer => Jobs or Gigs

Unfortunately for self-taught developers, Junior positions are usually reserved for graduating college interns. Therefore lastly, by the end of the course, you will have mastered HTML, CSS, and JavaScript at the level of at least a Mid-Level Frontend Engineer to substantially improve your chance of getting hired for a full-time position. You will be more than ready to start practicing for your technical interviews, or you can work right away as an independent contractor to gain professional experience. Better yet, build an app for your very own startup! 😎

HeartBank® may be able to provide some funding if your app helps to reduce economic inequality in some way!

To summarize, what you will learn in this course:

Application: Progressive Web App
Architecture: Micro-Frontends
Design Pattern: Web Components
Code: Data Structures and Algorithms
Language: Vanilla HTML, CSS, and JavaScript

Learning Context: Basic Music Theory
Development Process: Test-Driven Development
Skill Level Goal: Mid-Level Frontend Engineer

Prerequisites for taking my course

  1. Computer with high-speed internet connection (for streaming HD videos)
  2. Internet browser (preferably Google Chrome)
  3. Codepen account (free version is acceptable)

Note: If you’re not a complete beginner, you may find that my course moves quite slowly.

What you will achieve after completing my course

  1. Understand the interrelationships between HTML, CSS, and JavaScript by learning all three languages together in parallel.
  2. Utilize modern vanilla HTML, CSS, and JavaScript by referencing the most up-to-date documentation on the Mozilla Developer Network (MDN).
  3. Develop a strong intuition of HTML, CSS, and JavaScript by creating a mental model with Data Structures and Algorithms.
  4. Practice Test-Driven Development by solving musical coding exercises that increase retention and fun, and creating music games that beginner music students would enjoy!
  5. Combine your understanding of all three web languages to create and share your own custom Web Components that mimic all the functionalities of a real piano using Browser APIs.
  6. Compose your web components into Micro-Frontends using service workers that connect with the browser’s storage and external third-party APIs to make your virtual piano intelligent even while offline like a native app.
  7. Publish and share your combined Micro-Frontends as a Progressive Web App (PWA) for desktop and on the internet and the Google Play Store, using your own custom domain and blockchain cryptography for user authentication, and host it all for free on GitHub Pages.
  8. Master HTML, CSS, and JavaScript at the level of at least a Mid-Level Frontend Engineer to help you apply for jobs or become a remote freelancer or startup entrepreneur!

My course website is located at frontend.siliconwat.com created to help you keep track of your progress and stay motivated while studying alone.

If you prefer to study with other students, consider joining my remote cohort program at frontend.siliconwat.org!

Let’s Begin!

https://codepen.io

To begin my beginner’s course, all you need is to create a free account on Codepen. Then, simply create a new pen.

https://codepen.io/pen/?editors=1111

Throughout this course, this place will be our home. So settle in!

As you can see on each panel, my ultimate objective is to help you master HTML, CSS, and JavaScript to become an Enlightened Frontend Engineer. 😎

Without further ado, let’s start!

→ Chapter 1: Hello World

← Table of Contents

When you use my referral link above 👆 to become a Medium member, all proceeds will be donated towards the construction of the Silicon Wat Campus for children in Ukraine and Cambodia ❤️

HTML
CSS
JavaScript
Front End Development
Programming
Recommended from ReadMedium
avatarAlexander Nguyen
The resume that got a software engineer a $300,000 job at Google.

1-page. Well-formatted.

4 min read
avatarShuai Li
Can You Answer This Senior Level JavaScript Promise Interview Question?

Most interviewees failed on it.

3 min read
avatarTari Ibaba
Nobody wants to use these HTML tags 😭

Trust me, you can do MUCH better than <div> <a> and <p>.

4 min read
avatarOliver Foster
Why do many people not recommend using JWT?

My article is open to everyone; non-member readers can click this link to read the full text.

5 min read
avatarAshish Pratap Singh
How I Mastered Data Structures and Algorithms

Getting good at Data Structures and Algorithms (DSA) helped me clear interviews at Amazon, Google and Microsoft.

6 min read
avatarYunus Emre Adas
How to Implement ChatGPT API in PHP ?

How to use chatgpt in php?

5 min read