Skip to content

Commit 187b447

Browse files
inthedownpourinthedownpour
authored
Merge pull request andreasbm#23 from 2021OPENSOURCE-SW-TEAM3/Junior
Junior를 Develop에 merge(andreasbm#22)
2 parents b206954 + 0bd3434 commit 187b447

File tree

1 file changed

+121
-74
lines changed

1 file changed

+121
-74
lines changed

Diff for: ‎src/data/web-components.js

+121-74
Original file line numberDiff line numberDiff line change
@@ -1,118 +1,165 @@
11
export const webcomponentsCollection = {
2-
name: "Web Components",
2+
name: "3학년",
33
areas: [
44
{
5+
name: "1학기",
56
skills: [
67
{
7-
name: "Custom Elements",
8+
name: "운영체제",
89
description: {
9-
text: "Learn how to create new HTML tags with Custom Elements.",
10+
text: "운영체제",
1011
links: [
11-
["Google Devs - Custom Elements", "https://developers.google.com/web/fundamentals/web-components/customelements"],
12-
["MDN - Using Custom Elements", "https://developer.mozilla.org/en-US/docs/Web/Web_Components/Using_custom_elements"],
13-
["CSS Tricks - Creating a Custom Element from Scratch", "https://css-tricks.com/creating-a-custom-element-from-scratch/"],
14-
["Javascript.info - Custom Elements", "https://javascript.info/custom-elements"],
15-
["dev.to - An introduction to Custom Elements", "https://dev.to/jamesrweb/an-introduction-to-custom-elements-5327"],
16-
["itnext - Introduction to Web Components", "https://itnext.io/introduction-to-web-components-part-i-custom-elements-4de6713cef9d"],
17-
["web.dev - Web Components", "https://web.dev/web-components-io-2019/"]
12+
["이수 구분 : 전필", ""],
13+
["교과목 번호 : 5111001", ""],
14+
["학점 : 3-3-0", ""],
15+
]
16+
},
17+
18+
},
19+
{
20+
name: "객채지향 설계",
21+
description: {
22+
text: "Exploration of Future Planning",
23+
links: [
24+
["이수구분 : 전선", ""],
25+
["교과목 번호 : 5111081", ""],
26+
["학점 : 1-0-2", ""],
1827
]
1928
}
2029
},
2130
{
22-
name: "HTML Templates",
31+
name: "오픈소스 웹소프트웨어",
2332
description: {
24-
text: "Learn how to use HTML templates to create flexible templates that can then be used to populate the Shadow DOM.",
33+
text: "Learn how to make your content search-friendly.",
2534
links: [
26-
["MDN - Using Templates & Slots", "https://developer.mozilla.org/en-US/docs/Web/Web_Components/Using_templates_and_slots"],
27-
["Javascript.info - Template Element", "https://javascript.info/template-element"],
28-
["MDN - The Content Template element", "https://developer.mozilla.org/en-US/docs/Web/HTML/Element/template"]
35+
["web.dev - Discoverable", "https://web.dev/discoverable"],
36+
["Google Search - Get Started", "https://developers.google.com/search/docs/guides/get-started"],
37+
["Google Search - SEO basics", "https://developers.google.com/search/docs/guides/javascript-seo-basics"],
38+
["web.dev - SEO audits", "https://web.dev/lighthouse-seo"]
2939
]
3040
},
3141
},
3242
{
33-
name: "Shadow DOM",
43+
name: "컴파일러",
3444
description: {
35-
text: "Learn how to encapsulate your CSS using Shadow DOM.",
45+
text: "Learn how to work with SVG files to make graphics look crisp across all screen resolutions.",
3646
links: [
37-
["Google Devs - Shadow DOM", "https://developers.google.com/web/fundamentals/web-components/shadowdom"],
38-
["MDN - Using Shadow DOM", "https://developer.mozilla.org/en-US/docs/Web/Web_Components/Using_shadow_DOM"],
39-
["MDN - Shadow Tree", "https://developer.mozilla.org/en-US/docs/Glossary/Shadow_tree"],
40-
["CSS Tricks - Encapsulating Style and Structure", "https://css-tricks.com/encapsulating-style-and-structure-with-shadow-dom/"],
41-
["itnext - Introduction to Web Components", "https://itnext.io/introduction-to-web-components-part-ii-shadow-dom-8d1d8e126332"],
42-
["Monica - Shadow DOM: fast and encapsulated styles", "https://meowni.ca/posts/shadow-dom/"]
47+
["MDN - Adding vector graphics to the Web", "https://developer.mozilla.org/en-US/docs/Learn/HTML/Multimedia_and_embedding/Adding_vector_graphics_to_the_Web"],
48+
["SVG on the web", "https://svgontheweb.com/"],
49+
]
50+
}
51+
},
52+
{
53+
name: "컴퓨터네트워크",
54+
description: {
55+
text: "Learn the best practices of writing HTML.",
56+
links: [
57+
["MDN - HTML guidelines", "https://developer.mozilla.org/en-US/docs/MDN/Contribute/Guidelines/Code_guidelines/HTML"],
58+
["W3Schools - HTML Coding Conventions", "https://www.w3schools.com/html/html5_syntax.asp"]
59+
]
60+
}
61+
},
62+
{
63+
name: "창업기획",
64+
description: {
65+
text: "Learn the best practices of writing HTML.",
66+
links: [
67+
["MDN - HTML guidelines", "https://developer.mozilla.org/en-US/docs/MDN/Contribute/Guidelines/Code_guidelines/HTML"],
68+
["W3Schools - HTML Coding Conventions", "https://www.w3schools.com/html/html5_syntax.asp"]
69+
]
70+
}
71+
},
72+
{
73+
name: "오픈소스 전문프로젝트",
74+
description: {
75+
text: "Learn the best practices of writing HTML.",
76+
links: [
77+
["MDN - HTML guidelines", "https://developer.mozilla.org/en-US/docs/MDN/Contribute/Guidelines/Code_guidelines/HTML"],
78+
["W3Schools - HTML Coding Conventions", "https://www.w3schools.com/html/html5_syntax.asp"]
79+
]
80+
}
81+
}
82+
]
83+
},
84+
{
85+
name: "2학기",
86+
skills: [
87+
{
88+
name: "소프트웨어공학",
89+
description: {
90+
text: "Introduction to Computer Systems",
91+
links: [
92+
["이수 구분 : 전필", ""],
93+
["교과목 번호 : 5111002", ""],
94+
["학점 : 3-3-0", ""],
95+
]
96+
}
97+
},
98+
{
99+
name: "산학프로젝트",
100+
description: {
101+
text: "Introduction to Open Source SW",
102+
links: [
103+
["이수 구분 : 전필", ""],
104+
["교과목 번호 : 5111080", ""],
105+
["학점 : 2-1-2", ""],
106+
]
107+
},
43108

109+
},
110+
{
111+
name: "펌웨어프로그래밍",
112+
description: {
113+
text: "Learn what the CSS box model means.",
114+
links: [
115+
["MDN - Introduction to the CSS basic box model", "https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Box_Model/Introduction_to_the_CSS_box_model"],
116+
["MDN - The box model", "https://developer.mozilla.org/en-US/docs/Learn/CSS/Building_blocks/The_box_model"],
117+
["CSS Tricks - Inheriting box-sizing", "https://css-tricks.com/inheriting-box-sizing-probably-slightly-better-best-practice/"],
44118
]
45119
},
46-
skills: [
47-
{
48-
name: "Shadow Parts",
49-
description: {
50-
text: "Learn how to style the inside of a shadow tree from outside of that Shadow Tree by using Shadow Parts.",
51-
links: [
52-
["Fergald - CSS Shadow ::part and ::theme", "https://github.com/fergald/docs/blob/master/explainers/css-shadow-parts-1.md"],
53-
["MDN - ::part", "https://developer.mozilla.org/en-US/docs/Web/CSS/::part"],
54-
["W3C - CSS Shadow Parts", "https://www.w3.org/TR/css-shadow-parts-1/"],
55-
["Monica - ::part and ::theme, an explainer", "https://meowni.ca/posts/part-theme-explainer/"],
56-
["Youtube - CSS Shadow Parts", "https://www.youtube.com/watch?v=yVrvOueeb3s"],
57-
["Chrome Status - ::part and ::theme", "https://www.chromestatus.com/features/5763933658939392"]
58-
]
59-
}
60-
},
61-
{
62-
name: "Slots",
63-
description: {
64-
text: "Learn how to compose Custom Elements by using slots.",
65-
links: [
66-
["Alligator.io - Composing Custom Elements", "https://alligator.io/web-components/composing-slots-named-slots/"],
67-
["Javascript.info - Slots Composition", "https://javascript.info/slots-composition"],
68-
["MDN - HTML <slot> element", "https://developer.mozilla.org/en-US/docs/Web/HTML/Element/slot"],
69-
["Component.kitchen - A history of the HTML slot element", "https://component.kitchen/blog/posts/a-history-of-the-html-slot-element"],
70-
]
71-
}
72-
}
73-
]
120+
121+
},
122+
{
123+
name: "창업설계",
124+
description: {
125+
text: "Learn the best practices of writing HTML.",
126+
links: [
127+
["MDN - HTML guidelines", "https://developer.mozilla.org/en-US/docs/MDN/Contribute/Guidelines/Code_guidelines/HTML"],
128+
["W3Schools - HTML Coding Conventions", "https://www.w3schools.com/html/html5_syntax.asp"]
129+
]
130+
}
74131
},
75132
{
76-
name: "Best practices",
133+
name: "정보보호",
77134
description: {
78-
text: "Get familiar with best practices when it comes to building Web Components.",
135+
text: "Learn the best practices of writing HTML.",
79136
links: [
80-
["Google Devs - Custom Element Best Practices", "https://developers.google.com/web/fundamentals/web-components/best-practices"],
81-
["Webcomponents.org - Web Components Best Practices", "https://www.webcomponents.org/community/articles/web-components-best-practices"],
82-
["mateusortiz - Web Components the Right Way", "https://github.com/mateusortiz/webcomponents-the-right-way"],
83-
["dev.to - Making Web Components for Different Contexts", "https://dev.to/equinusocio/making-web-components-for-different-contexts-25ed"]
137+
["MDN - HTML guidelines", "https://developer.mozilla.org/en-US/docs/MDN/Contribute/Guidelines/Code_guidelines/HTML"],
138+
["W3Schools - HTML Coding Conventions", "https://www.w3schools.com/html/html5_syntax.asp"]
84139
]
85140
}
86141
},
87142
{
88-
name: "Constructible Stylesheets",
143+
name: "인공지능",
89144
description: {
90-
text: "Learn how the Constructible Stylesheets proposal enables reusable styles when using shadow dom.",
145+
text: "Learn the best practices of writing HTML.",
91146
links: [
92-
["Google Devs - Constructable Stylesheets", "https://developers.google.com/web/updates/2019/02/constructable-stylesheets"],
93-
["W3C - Constructable Stylesheet Objects", "https://wicg.github.io/construct-stylesheets/"],
94-
["dev.to - Why Would Anyone Use Constructible Stylesheets", "https://dev.to/westbrook/why-would-anyone-use-constructible-stylesheets-anyways-19ng"],
95-
["Benjamin Farrel - Adopt a Design System", "https://medium.com/swlh/adopt-a-design-system-inside-your-web-components-with-constructable-stylesheets-dd24649261e"],
96-
["WICG - Constructable Stylesheet Objects", "https://github.com/WICG/construct-stylesheets/blob/gh-pages/explainer.md"],
97-
["Chrome Status - Constructible Stylesheets", "https://www.chromestatus.com/feature/5394843094220800"]
147+
["MDN - HTML guidelines", "https://developer.mozilla.org/en-US/docs/MDN/Contribute/Guidelines/Code_guidelines/HTML"],
148+
["W3Schools - HTML Coding Conventions", "https://www.w3schools.com/html/html5_syntax.asp"]
98149
]
99150
}
100151
},
101152
{
102-
name: "Form Participation",
153+
name: "데이터베이스시스템",
103154
description: {
104-
text: "Learn how the Form Participation API proposal enables elements, other than built-in form control elements, to participate in form submission and validation.",
155+
text: "Learn the best practices of writing HTML.",
105156
links: [
106-
["Form Participation API Explained", "https://docs.google.com/document/d/1JO8puctCSpW-ZYGU8lF-h4FWRIDQNDVexzHoOQ2iQmY/edit"],
107-
["Chrome Status - Form-associated custom elements", "https://www.chromestatus.com/features/4708990554472448"],
108-
["web-platform-tests - Form Participation", "https://github.com/web-platform-tests/wpt/tree/master/custom-elements/form-associated"],
109-
["Google Devs - Form-associated custom elements", "https://developers.google.com/web/updates/2019/09/nic77#form-associated_custom_elements"],
110-
["web.dev - More capable form controls", "https://web.dev/more-capable-form-controls/"],
111-
["W3C - Creating a form-associated custom element", "https://html.spec.whatwg.org/multipage/custom-elements.html#custom-elements-face-example"],
157+
["MDN - HTML guidelines", "https://developer.mozilla.org/en-US/docs/MDN/Contribute/Guidelines/Code_guidelines/HTML"],
158+
["W3Schools - HTML Coding Conventions", "https://www.w3schools.com/html/html5_syntax.asp"]
112159
]
113160
}
114161
}
115162
]
116163
}
117164
]
118-
}
165+
}

0 commit comments

Comments
 (0)