Translate Applied Visual Design 19/52 #38

ZhichengChen · 2018-07-29T16:26:45Z

Translate Responsive Web Design Certification (300 hours) -> Applied Visual Design (19/52)

Create Visual Balance Using the text-align Property
Adjust the Width of an Element Using the width Property
Adjust the Height of an Element Using the height Property
Use the strong Tag to Make Text Bold
Use the u Tag to Underline Text
Use the em Tag to Italicize Text
Use the s Tag to Strikethrough Text
Create a Horizontal Line Using the hr Element
Adjust the background-color Property of Text
Adjust the Size of a Header Versus a Paragraph Tag
Add a box-shadow to a Card-like Element
Decrease the Opacity of an Element
Use the text-transform Property to Make Text Uppercase
Set the font-size for Multiple Heading Elements
Set the font-weight for Multiple Heading Elements
Set the font-size of Paragraph Text
Set the line-height of Paragraphs
Adjust the Hover State of an Anchor Tag
Change an Element's Relative Position
Move a Relatively Positioned Element with CSS Offsets
Lock an Element to its Parent with Absolute Positioning
Lock an Element to the Browser Window with Fixed Positioning
Push Elements Left or Right with the float Property
Change the Position of Overlapping Elements with the z-index Property
Center an Element Horizontally Using the margin Property
Learn about Complementary Colors
Learn about Tertiary Colors
Adjust the Color of Various Elements to Complementary Colors
Adjust the Hue of a Color
Adjust the Tone of a Color
Create a Gradual CSS Linear Gradient
Use a CSS Linear Gradient to Create a Striped Element
Create Texture by Adding a Subtle Pattern as a Background Image
Use the CSS Transform scale Property to Change the Size of an Element
Use the CSS Transform scale Property to Scale an Element on Hover
Use the CSS Transform Property skewX to Skew an Element Along the X-Axis
Use the CSS Transform Property skewY to Skew an Element Along the Y-Axis
Create a Graphic Using CSS
Create a More Complex Shape Using CSS and HTML
Learn How the CSS @Keyframes and animation Properties Work
Use CSS Animation to Change the Hover State of a Button
Modify Fill Mode of an Animation
Create Movement Using CSS Animation
Create Visual Direction by Fading an Element from Left to Right
Animate Elements Continually Using an Infinite Animation Count
Make a CSS Heartbeat using an Infinite Animation Count
Animate Elements at Variable Rates
Animate Multiple Elements at Variable Rates
Change Animation Timing with Keywords
Learn How Bezier Curves Work
Use a Bezier Curve to Move a Graphic
Make Motion More Natural Using a Bezier Curve

S1ngS1ng

这里的 title 应该不能改， @huluoyang 是吧？
关于 pixel 和 px 的翻译，我的建议是，如果出现在题目的描述信息中，那可以翻译成 “像素”，但如果出现在 tests 之类和代码相关的地方，就直接用比如 <code>12px</code> 格式比较好。建议加上 <code></code>

PS：刚试了下，<code>fullCard</code> class 居然和 <code>fullCard</code>class render 出来的效果一样。。

主要是通顺性的小问题，正则的更新很优秀，整体翻译很好 👍

S1ngS1ng · 2018-08-03T17:30:29Z

01-responsive-web-design/applied-visual-design.json

-        "And <code>text-align: left;</code> (the default) left-aligns the text.",
+        "这部分课程主要关于应用视觉设计。开始的挑战展示了一些核心的原则，代码基于一个指定的卡片布局。",
+        "web 内容大部分都是文本。CSS 里面的<code>text-align</code>属性可以控制文本的对齐方式。",
+        "<code>text-align: justify;</code>文本两端对齐，忽略最后一行，其它行文字左右两端都靠近行边缘。",


<code>text-align: justify;</code>文本两端对齐，忽略最后一行，其它行文字左右两端都靠近行边缘。 建议 =>
<code>text-align: justify;</code>可以让除最后一行之外的文字两端对齐，即每行的左右两端都紧贴行的边缘。

S1ngS1ng · 2018-08-03T17:30:52Z

01-responsive-web-design/applied-visual-design.json

+        "这部分课程主要关于应用视觉设计。开始的挑战展示了一些核心的原则，代码基于一个指定的卡片布局。",
+        "web 内容大部分都是文本。CSS 里面的<code>text-align</code>属性可以控制文本的对齐方式。",
+        "<code>text-align: justify;</code>文本两端对齐，忽略最后一行，其它行文字左右两端都靠近行边缘。",
+        "<code>text-align: center;</code>文本居中对齐。",


<code>text-align: center;</code>文本居中对齐。 =>
<code>text-align: center;</code>可以让文本居中对齐。

S1ngS1ng · 2018-08-03T17:31:22Z

01-responsive-web-design/applied-visual-design.json

+        "web 内容大部分都是文本。CSS 里面的<code>text-align</code>属性可以控制文本的对齐方式。",
+        "<code>text-align: justify;</code>文本两端对齐，忽略最后一行，其它行文字左右两端都靠近行边缘。",
+        "<code>text-align: center;</code>文本居中对齐。",
+        "<code>text-align: right;</code>文本右对齐。",


<code>text-align: right;</code>文本右对齐。 =>
<code>text-align: right;</code>可以让文本右对齐。

S1ngS1ng · 2018-08-03T17:32:01Z

01-responsive-web-design/applied-visual-design.json

+        "<code>text-align: justify;</code>文本两端对齐，忽略最后一行，其它行文字左右两端都靠近行边缘。",
+        "<code>text-align: center;</code>文本居中对齐。",
+        "<code>text-align: right;</code>文本右对齐。",
+        "<code>text-align: left;</code>（默认）文本左对齐。",


<code>text-align: left;</code>是<code>text-align</code>的默认值，它可以让文本左对齐。

S1ngS1ng · 2018-08-03T17:32:50Z

01-responsive-web-design/applied-visual-design.json

        "<hr>",
-        "Align the <code>h4</code> tag's text, which says \"Google\", to the center. Then justify the paragraph tag which contains information about how Google was founded."
+        "居中对齐<code>h4</code>标签文字，文字内容为 “Google”。两端对齐段落标签文字，文字介绍了 Google 的创立。"


文字 => 文本

S1ngS1ng · 2018-08-03T18:17:19Z

01-responsive-web-design/applied-visual-design.json

      ],
      "tests": [
        {
-          "text": "Your code should set the <code>font-size</code> property for the <code>h1</code> tag to 68 pixels.",
-          "testString": "assert($('h1').css('font-size') == '68px', 'Your code should set the <code>font-size</code> property for the <code>h1</code> tag to 68 pixels.');"
+          "text": "你的代码应该设置<code>h1</code>标签的<code>font-size</code>为 68 像素。",


参考 review comments

S1ngS1ng · 2018-08-03T18:19:02Z

01-responsive-web-design/applied-visual-design.json

        "<hr>",
-        "Add a <code>line-height</code> property to the <code>p</code> tag and set it to 25px."
+        "给<code>p</code>标签添加<code>line-height</code>属性并赋值 25px。"


参考 review comments。建议加 <code></code>。下同

S1ngS1ng · 2018-08-03T18:20:08Z

01-responsive-web-design/applied-visual-design.json

-        "This challenge will touch on the usage of pseudo-classes. A pseudo-class is a keyword that can be added to selectors, in order to select a specific state of the element.",
-        "For example, the styling of an anchor tag can be changed for its hover state using the <code>:hover</code> pseudo-class selector. Here's the CSS to change the <code>color</code> of the anchor tag to red during its hover state:",
+        "本挑战将要涉及到伪类。伪类是可以添加到选择器上的关键字，用来选择元素的指定状态。",
+        "比如，超链接可以使用<code>:hover</code>伪类选择器定义它的鼠标滑过状态样式。下面是鼠标滑过超链接时改变超链接颜色的 CSS：",


这里，hover 应该翻译成 悬停，即 在元素上悬停。

参考：https://developer.mozilla.org/zh-CN/docs/Web/CSS/:hover

S1ngS1ng · 2018-08-03T18:22:58Z

01-responsive-web-design/applied-visual-design.json

        },
        {
-          "text": "Your code should use a CSS offset to relatively position the <code>h2</code> 15px away from the <code>top</code> of where it normally sits.",
-          "testString": "assert($('h2').css('top') == '15px', 'Your code should use a CSS offset to relatively position the <code>h2</code> 15px away from the <code>top</code> of where it normally sits.');"
+          "text": "你的代码应该使用 CSS 属性调整<code>h2</code>的位置使其从原来的位置向上偏移 15 像素。",


参考 review comments

S1ngS1ng · 2018-08-03T18:23:28Z

01-responsive-web-design/applied-visual-design.json

-            "  <p>I still think the h2 is where it normally sits.</p>",
+            "  <h1>论如何优雅定位</h1>",
+            "  <h2>我要离 h1 近一点！</h2>",
+            "  <p>我觉得 h2 没变，还是在它原来的位置，相离莫相忘，且行且珍惜。</p>",


👍 这翻译真给力

S1ngS1ng

Thanks 👍

huluoyang · 2018-08-07T08:47:18Z

01-responsive-web-design/applied-visual-design.json

@@ -1153,7 +1152,7 @@
            "  }",
            "</style>",
            "<p>",
-            "  Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.",
+            "  天地玄黄　宇宙洪荒　日月盈昃　辰宿列张　寒来暑往　秋收冬藏　闰余成岁　律召调阳　云腾致雨　露结为霜　金生丽水　玉出昆冈　剑号巨阙　珠称夜光　果珍李柰　菜重芥姜　海咸河淡　鳞潜羽翔　龙师火帝　鸟官人皇　始制文字　乃服衣裳　推位让国　有虞陶唐　吊民伐罪　周发殷汤　坐朝问道　垂拱平章　爱育黎首　臣伏戎羌　遐迩壹体　率宾归王　鸣凤在树　白驹食场　化被草木　赖及万方　盖此身发　四大五常　恭惟鞠养　岂敢毁伤　女慕贞絜　男效才良　知过必改　得能莫忘　罔谈彼短　靡恃己长　信使可覆　器欲难量　墨悲丝染　诗讃羔羊",


huluoyang · 2018-08-07T08:49:03Z

01-responsive-web-design/applied-visual-design.json

@@ -1238,7 +1237,7 @@
            "  ",
            "  ",
            "</style>",
-            "<a href=\"http://freecatphotoapp.com/\" target=\"_blank\">CatPhotoApp</a>"
+            "<a href=\"http://freecatphotoapp.com/\" target=\"_blank\">猫咪相册 App</a>"


huluoyang · 2018-08-07T08:51:59Z

翻译质量很高，真的用心了。👍

S1ngS1ng · 2018-08-07T17:14:34Z

@huluoyang 可以先 merge？后续的开新 PR 吧。如果在这儿更新，review 起来其实不是很方便。
@ZhichengChen 你可以继续用这个 branch，回头 pull --rebase 一下就行。如果你还没开始后面的翻译，那就 merge 之后新建一个吧

ZhichengChen and others added 2 commits July 30, 2018 00:23

translate applied visual design 1-5

ee2b84c

translate applied visual design 6-19

0736034

S1ngS1ng suggested changes Aug 3, 2018

View reviewed changes

S1ngS1ng added the need update Use when a translation (?) PR has been reviewed and needs to address comments label Aug 3, 2018

Chenzc added 2 commits August 6, 2018 11:31

revise

4e2cac0

revise

0782925

ZhichengChen changed the title ~~translate applied visual design 1-5~~ translate applied visual design Aug 6, 2018

S1ngS1ng approved these changes Aug 6, 2018

View reviewed changes

S1ngS1ng added ship it Use when a translation (?) PR is ready for shipping and removed need update Use when a translation (?) PR has been reviewed and needs to address comments labels Aug 6, 2018

revise

f6b7a3f

ZhichengChen changed the title ~~translate applied visual design~~ Translate Applied Visual Design Aug 6, 2018

ZhichengChen changed the title ~~Translate Applied Visual Design~~ Translate Applied Visual Design 19/52 Aug 6, 2018

huluoyang reviewed Aug 7, 2018

View reviewed changes

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Translate Applied Visual Design 19/52 #38

Translate Applied Visual Design 19/52 #38

ZhichengChen commented Jul 29, 2018 •

edited

S1ngS1ng left a comment

S1ngS1ng Aug 3, 2018

S1ngS1ng Aug 3, 2018

S1ngS1ng Aug 3, 2018

S1ngS1ng Aug 3, 2018

S1ngS1ng Aug 3, 2018

S1ngS1ng Aug 3, 2018

S1ngS1ng Aug 3, 2018

S1ngS1ng Aug 3, 2018

S1ngS1ng Aug 3, 2018

S1ngS1ng Aug 3, 2018

huluoyang Aug 7, 2018

S1ngS1ng left a comment

huluoyang Aug 7, 2018

huluoyang Aug 7, 2018

huluoyang commented Aug 7, 2018

S1ngS1ng commented Aug 7, 2018

Translate Applied Visual Design 19/52 #38

Are you sure you want to change the base?

Translate Applied Visual Design 19/52 #38

Conversation

ZhichengChen commented Jul 29, 2018 • edited

Translate Responsive Web Design Certification (300 hours) -> Applied Visual Design (19/52)

S1ngS1ng left a comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

S1ngS1ng left a comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

huluoyang commented Aug 7, 2018

S1ngS1ng commented Aug 7, 2018

ZhichengChen commented Jul 29, 2018 •

edited