web_Tutorials for Web developement beginner学习指南/大纲导航(html/css/javascript)(by MDN )

文章目录

• web 入门学习指南/资源导航(by MDN)
• • 首页导航
  • tutor(教程部分)
  • • 早期的风格
  • Web technology for developers
  • 所有教程概述
  • Documentation for Web developers
  • 核心教程EN
  • • 学习路线和时间安排参考
    • • Modules (html)
      • Modules(css)
      • • Additional resources css
      • Modules (javascript)
      • Modules (web forms)
      • Modules (modern tooling)
    • Getting started with the Web
    • HTML — Structuring the Web
    • • troduction to HTML
      • Multimedia and embedding
      • HTML tables
    • CSS — Styling the Web
    • • CSS first steps
      • CSS building blocks
      • Styling text
      • CSS layout
    • css reference tutorial
    • JavaScript — Dynamic client-side scripting
    • • JavaScript first steps
      • JavaScript building blocks
      • Introducing JavaScript objects
      • Asynchronous JavaScript
      • Client-side web APIs
      • Core forms learning pathway
    • Advanced forms articles
    • SVG Tutorial
    • • [Introducing SVG from Scratch]
  • 中文版教程ZH
  • • tutorial content navigator(CSS)
    • CSS 第一步
    • CSS 构建基础
    • 样式化文字
    • CSS 排版.

web 入门学习指南/资源导航(by MDN)

首页导航

2022年3.2 ,MDN启用了新的网页样式,终于具有了现代化的网页排版!

• 目录也可以独立滚动
• 支持文章内部的自动锚点
  

tutor(教程部分)

• 主要内容是在Learn web Development提供教程,第一部分中会的guide会引导你到web tutorial
  • 有些内容则是归属于web development technology,比如SVG教程

早期的风格

现在已经没有意义了,权当作纪念

顶部导航

references&guides

Web technology for developers

The open Web presents incredible opportunities for developers.
To take full advantage of these technologies, you need to know how to use them.
Below you’ll find links to our Web technology documentation.

所有教程概述

• For complete beginners to the Web
  • HTML Tutorials
  • CSS Tutorials

    • 包括动画和过渡

    • Using CSS animations - CSS: Cascading Style Sheets | MDN (mozilla.org)

    • Using CSS transforms

      Step-by-step tutorial about how to transform elements styled with CSS.

    • Using CSS transitions - CSS: Cascading Style Sheets | MDN (mozilla.org)

  • JavaScript Tutorials

Documentation for Web developers

Documentation for Web developers

• Web Developer Guide(basic content)

  • The Web Developer Guide provides useful how-to content to help you actually use Web technologies to do what you want or need to do.

• Tutorials for Web developers(complete tutorial:essential!)

  • A list of tutorials to take you step-by-step through learning APIs, technologies, or broad topic areas.

• Progressive web apps (PWAs)

  • (progressive application of web )

  • Progressive Web Apps are web apps that use emerging web browser APIs and features along with traditional progressive enhancement strategy to bring a native app-like user experience to cross-platform web applications.

核心教程EN

• 为了方便学习,我将最核心的部分的目录截取出来(包括html,css,javascript)
• 由于MDN的网站设计不是很好
  • 目录导航和主要内容同时滚动,不便于独立使用目录导航(这一点很不现代化,大多数教程网站都具备目录导航独立滚动而不影响主内容)
  • 面包屑导航不够清晰(中间路径缺失)(侧边的目录导航被折叠,不便于定位当前按文章所处进度)
  • 教程入口多,同一个页面有过多重复的入口,导致不够简练,且由于上述原因,读者不容易知道自己跳转到哪里了(对初学者不友好)
  • 和MDN有过一段时间的接触了,大多页面都放置跳转到教程区(Learn web development)中的某个页面
  • 为了节约时间,特截取如下基础web技术的可跳转大纲

学习路线和时间安排参考

Front-end web developer - Learn web development | MDN (mozilla.org)

• Subjects covered
• Prerequisites
• Getting help

The learning pathway

• 学习用时受以下因素影响
  • 阅读理解能力(语言能力)
  • 当前已掌握的相关基础知识
  • 动手能力

Modules (html)

• Introduction to HTML (15–20 hour read/exercises)
• Multimedia and embedding (15–20 hour read/exercises)
• HTML tables (5–10 hour read/exercises)

Modules(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)

Additional resources css

• CSS layout cookbook

Modules (javascript)

• JavaScript first steps (30–40 hour read/exercises)
• JavaScript building blocks (25–35 hour read/exercises)
• Introducing JavaScript objects (25–35 hour read/exercises)
• Client-side web APIs (30–40 hour read/exercises)
• Asynchronous JavaScript (25–35 hour read/exercises)

Modules (web forms)

• Cross-browser testing (25–30 hour read/exercises)
• Accessibility (20–25 hour read/exercises)

Modules (modern tooling)

• Git and GitHub (5 hour read)
• Understanding client-side web development tools (20–25 hour read)
• Understanding client-side JavaScript frameworks (30-60 hour read/exercises)

Getting started with the Web

• Getting started with the Web overview
• Installing basic software
• What will your website look like?
• Dealing with files
• HTML basics
• CSS basics
• JavaScript basics
• Publishing your website
• How the Web works

HTML — Structuring the Web

troduction to HTML

• Introduction to HTML overview
• Getting started with HTML
• What’s in the head? Metadata in HTML
• HTML text fundamentals
• Creating hyperlinks
• Advanced text formatting
• Document and website structure
• Debugging HTML
• Assessment: Marking up a letter
• Assessment: Structuring a page of content

Multimedia and embedding

• Multimedia and embedding overview
• Images in HTML
• Video and audio content
• From object to iframe — other embedding technologies
• Adding vector graphics to the Web
• Responsive images
• Assessment: Mozilla splash page

HTML tables

• HTML tables overview
• HTML table basics
• HTML Table advanced features and accessibility
• Assessment: Structuring planet data

CSS — Styling the Web

CSS first steps

• CSS first steps overview
• What is CSS?
• Getting started with CSS
• How CSS is structured
• How CSS works
• Using your new knowledge

CSS building blocks

• CSS building blocks overview
• Cascade and inheritance
• CSS selectors
• The box model
• Backgrounds and borders
• Handling different text directions
• Overflowing content
• Values and units
• Sizing items in CSS
• Images, media, and form elements
• Styling tables
• Debugging CSS
• Organizing your CSS

Styling text

• Styling text overview
• Fundamental text and font styling
• Styling lists
• Styling links
• Web fonts
• Assessment: Typesetting a community school homepage

CSS layout

• CSS layout overview
• Introduction to CSS layout
• Normal Flow
• Flexbox
• Grids
• Floats
• Positioning
• Multiple-column Layout
• Responsive design
• Beginner’s guide to media queries
• Legacy Layout Methods
• Supporting Older Browsers
• Fundamental Layout Comprehension

css reference tutorial

• CSS Tutorials - CSS: Cascading Style Sheets | MDN (mozilla.org)

JavaScript — Dynamic client-side scripting

• JavaScript — Dynamic client-side scripting

JavaScript first steps

• JavaScript first steps overview
• What is JavaScript?
• A first splash into JavaScript
• What went wrong? Troubleshooting JavaScript
• Storing the information you need — Variables
• Basic math in JavaScript — Numbers and operators
• Handling text — Strings in JavaScript
• Useful string methods
• Arrays
• Assessment: Silly story generator

JavaScript building blocks

• JavaScript building blocks overview
• Making decisions in your code — Conditionals
• Looping code
• Functions — Reusable blocks of code
• Build your own function
• Function return values
• Introduction to events
• Assessment: Image gallery

Introducing JavaScript objects

• Introducing JavaScript objects overview
• Object basics
• Object-oriented JavaScript for beginners
• Object prototypes
• Inheritance in JavaScript
• Working with JSON data
• Object building practice
• Assessment: Adding features to our bouncing balls demo

Asynchronous JavaScript

• Asynchronous JavaScript overview
• General asynchronous programming concepts
• Introducing asynchronous JavaScript
• Cooperative asynchronous JavaScript: Timeouts and intervals
• Graceful asynchronous programming with Promises
• Making asynchronous programming easier with async and await
• Choosing the right approach

Client-side web APIs

• Client-side web APIs
• Introduction to web APIs
• Manipulating documents
• Fetching data from the server
• Third party APIs
• Drawing graphics
• Video and audio APIs
• Client-side storage

Web forms — Working with user data

Core forms learning pathway

• Web forms overview
• Your first form
• How to structure a web form
• Basic native form controls
• The HTML5 input types
• Other form controls
• Styling web forms
• Advanced form styling
• UI pseudo-classes
• Client-side form validation
• Sending form data

Advanced forms articles

• How to build custom form controls
• Sending forms through JavaScript
• CSS property compatibility table for form controls

SVG Tutorial

Scalable Vector Graphics, SVG, is a W3C XML dialect to mark up graphics. It is partially implemented in Firefox, Opera, WebKit browsers, Internet Explorer and other browsers.

• This tutorial aims to explain the internals of SVG and is packed with technical details.
• If you just want to draw beautiful images, you might find more useful resources at Inkscape's documentation page.
• Another good introduction to SVG is provided by the W3C’s SVG Primer.

[Introducing SVG from Scratch]

• Introduction
• Getting Started
• Positions
• Basic Shapes
• Paths
• Fills and Strokes
• Gradients
• Patterns
• Texts
• Basic Transformations
• Clipping and masking
• Other content in SVG
• Filter effects
• SVG fonts
• SVG Image tag
• Tools for SVG
• SVG and CSS

Other svg topics are more advanced and hence should get their own tutorials.

中文版教程ZH

• 只截取css部分

tutorial content navigator(CSS)

1. CSS — 设计 Web

CSS 第一步

1. CSS第一步概览

2. 什么是CSS

3. 让我们开始CSS之旅

4. 如何让构建CSS

5. CSS如何运行

6. 运用你的新知识

CSS 构建基础

1. CSS构建基础概览

2. 层叠与继承

3. CSS选择器

   1. selector:See also

4. 盒模型

5. 背景与边框

6. 处理不同方向的文本

7. 溢出的内容

8. 值与单位

9. 在CSS中调整大小

10. 图像、媒体和表单元素

11. 样式化表格

12. 调试CSS

13. 组织你的CSS

样式化文字

1. 样式化文字概述

2. 基础文字与字体样式化

3. 样式化列表

4. 样式化链接

5. Web 字体

6. 作业：排版社区大学首页

CSS 排版.

1. CSS 排版概述
2. Introduction to CSS layout
3. 正常布局流
4. 弹性区块
5. 网格
6. 浮动
7. 定位
8. 多列布局
9. 响应式布局
10. 媒体查询
11. 传统的布局方法
12. 支持旧的浏览器
13. 基础布局练习