> For the complete documentation index, see [llms.txt](https://lochiwei.gitbook.io/web/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://lochiwei.gitbook.io/web/master.md).

# web.dev

{% tabs %}
{% tab title="🔴 主題" %}

* [JS](/web/js.md)
  * [environment](/web/js/concept/env.md) - hosts JS engine.
* [HTML](/web/html.md)
* [CSS](/web/css.md)
  {% endtab %}

{% tab title="🛠 工具" %}

* 隨機文字：
  * [Lorem Ipsum](https://www.lipsum.com/)
  * 📗 參考： [20 個英文假字 (Lorem Ipsum) 產生器](https://simular.co/blog/post/the-20-lorem-ipsum-tools)
* 隨機圖片 (假圖)：
  * [Lorem Picsum](https://picsum.photos/) ╱ [Placehold](https://placehold.co/) 
  * 📗 參考：[Placeholder Image Generators](https://loremipsum.io/21-of-the-best-placeholder-image-generators) 
* Online HTML/CSS/JS Editors
  * <https://playcode.io>
    {% endtab %}

{% tab title="👨🏻‍🎓 課程" %}

* [ ] [Udemy](https://www.udemy.com/home/my-courses/learning/) ⟩ [The Complete 2021 Web Development Bootcamp](https://www.udemy.com/share/1013gG2@FG5jVGJfSF0Ld09KOEtn/) (Angela Yu)
* [ ] [freeCodeCamp](https://www.freecodecamp.org/)
* [ ] [Full Stack open 2021](https://fullstackopen.com/en/)
* [ ] [CodersLang](https://js.coderslang.com)
* [ ] [Frontend Mentor](https://www.frontendmentor.io/)
* [ ] [Frontend Practice](https://www.frontendpractice.com/)
* [ ] [First Timers Only](https://www.firsttimersonly.com/) - involved in Open Source!
* [ ] [LeetCode](https://leetcode.com/)
  {% endtab %}

{% tab title="📘 手冊" %}

* :green\_book: [DevDocs.io](https://devdocs.io/)
* :blue\_book: [MDN](https://developer.mozilla.org/en-US/) ⟩
  * [Guides](https://developer.mozilla.org/en-US/docs/Learn) ⟩ [Getting started with the web](https://developer.mozilla.org/en-US/docs/Learn/Getting_started_with_the_web) ⟩ [How the web works](https://developer.mozilla.org/en-US/docs/Learn/Getting_started_with_the_web/How_the_Web_works)
* [emmet cheatsheet](https://docs.emmet.io/cheat-sheet/)
  {% endtab %}

{% tab title="📗 參考" %}

* [ ] [dev.to](https://dev.to/), [codewars](https://www.codewars.com/)
* [ ] [CSS Tricks](https://css-tricks.com/), [Style Stage](https://stylestage.dev/), [CSS Battle](https://cssbattle.dev/)
* [ ] [javascript.info](https://javascript.info/intro?map)
* [ ] LeetCode ⟩ [Important and Useful Links](https://leetcode.com/discuss/general-discussion/665604/Important-and-Useful-links-from-all-over-the-LeetCode)
  {% endtab %}

{% tab title="👨🏻" %}

* social link：

{% embed url="<https://business.facebook.com/loveSwiftUI>" %}
facebook *粉絲專頁：愛吃蘋果*
{% endembed %}

:pencil2: [edit this site](https://app.gitbook.com/@lochiwei/s/web/)
{% endtab %}
{% endtabs %}

{% tabs %}
{% tab title="📙 書" %}

* CSS in Depth
* Responsive Web Design
* Mastering SVG
* Building Native Web Components (2021)
* [Front-end Developer Handbook 2019](https://frontendmasters.com/books/front-end-handbook/2019/)
* [Frontend Masters Books](https://frontendmasters.com/books/)
  {% endtab %}

{% tab title="🖥️ 影片" %}

* [x] YouTube ⟩ [Step up front-end skills with these 5 resources](https://youtu.be/QqDH5sYzDS8)
  {% endtab %}

{% tab title="🧨 雷區" %}
{% hint style="danger" %}

* When you try to load <mark style="color:yellow;">**assets**</mark>, <mark style="color:yellow;">**CS**</mark>**S**, or <mark style="color:yellow;">**JS files**</mark> <mark style="color:red;">**without a server**</mark>, these files will be <mark style="color:red;">**blocked**</mark>.
  {% endhint %}
  {% endtab %}

{% tab title="🗺️ 圖表" %}
:map: front-end road map

![](/files/-Mj3n6GUTL5jG_vp-1bP)
{% endtab %}
{% endtabs %}