From db693284ae50d4942d9afa580cb2f290f269c098 Mon Sep 17 00:00:00 2001 From: Marcos Silva Date: Sat, 8 Aug 2020 15:09:04 -0400 Subject: [PATCH 01/12] type(fix): fixed StyledCharacter's Body, Head, and Face CSS bottom attribute value --- packages/client/src/pages/Lesson/Story/Story.tsx | 3 ++- packages/ui/components/Character/Character.tsx | 15 ++++++++------- 2 files changed, 10 insertions(+), 8 deletions(-) diff --git a/packages/client/src/pages/Lesson/Story/Story.tsx b/packages/client/src/pages/Lesson/Story/Story.tsx index 39616b9e..dabeb95d 100644 --- a/packages/client/src/pages/Lesson/Story/Story.tsx +++ b/packages/client/src/pages/Lesson/Story/Story.tsx @@ -27,7 +27,8 @@ const SkipButton = styled(Button)` export const StyledCharacter = styled(CharacterHTML)` position: absolute; - bottom: ${t.size('giant')}; + bottom: ${t.size('big')}; + /* bottom: 0rem;*/ left: 50%; margin-left: -30rem; transform: translateX(-100%); diff --git a/packages/ui/components/Character/Character.tsx b/packages/ui/components/Character/Character.tsx index d02117f5..8e945c90 100644 --- a/packages/ui/components/Character/Character.tsx +++ b/packages/ui/components/Character/Character.tsx @@ -25,7 +25,8 @@ const StyledCharacter = styled.div` :after { content: ""; display: block; - padding-bottom: 150%; + /*padding-bottom: 150%;*/ + padding-bottom: 130%; } `; @@ -49,13 +50,13 @@ const StyledBody = styled(Svg)` const StyledHead = styled(Svg)` width: 50%; left: 56%; - bottom: 52%; + bottom: 50%; `; const StyledFace = styled(Svg)` width: 34%; left: 61%; - bottom: 59%; + bottom: 48%; `; export interface CharacterProps { @@ -67,7 +68,7 @@ export interface CharacterProps { export const Character: React.FC = ({ body, head, face, ...props }) => - - - {face && } -; + + + {face && } + ; From 71642b028a7b323143aeed771a8f516f92bdbe60 Mon Sep 17 00:00:00 2001 From: Marcos Silva Date: Sat, 8 Aug 2020 15:18:06 -0400 Subject: [PATCH 02/12] type(fix): fixed StyledCharacter's styledCharacter bottom fro huge t.size to big --- packages/client/src/pages/Lesson/Story/Story.tsx | 1 - packages/ui/components/Character/Character.tsx | 1 - 2 files changed, 2 deletions(-) diff --git a/packages/client/src/pages/Lesson/Story/Story.tsx b/packages/client/src/pages/Lesson/Story/Story.tsx index dabeb95d..3005a87c 100644 --- a/packages/client/src/pages/Lesson/Story/Story.tsx +++ b/packages/client/src/pages/Lesson/Story/Story.tsx @@ -28,7 +28,6 @@ const SkipButton = styled(Button)` export const StyledCharacter = styled(CharacterHTML)` position: absolute; bottom: ${t.size('big')}; - /* bottom: 0rem;*/ left: 50%; margin-left: -30rem; transform: translateX(-100%); diff --git a/packages/ui/components/Character/Character.tsx b/packages/ui/components/Character/Character.tsx index 8e945c90..1d3b000b 100644 --- a/packages/ui/components/Character/Character.tsx +++ b/packages/ui/components/Character/Character.tsx @@ -25,7 +25,6 @@ const StyledCharacter = styled.div` :after { content: ""; display: block; - /*padding-bottom: 150%;*/ padding-bottom: 130%; } `; From ef8dcd0c53b74b469da45d87bcf10865dc962eef Mon Sep 17 00:00:00 2001 From: Marcos Silva Date: Sat, 8 Aug 2020 16:45:54 -0400 Subject: [PATCH 03/12] type(fix): Added link to Dashboard into Logo Icon --- .../client/src/pages/Lesson/LessonHeader.tsx | 43 ++++++++++++------- 1 file changed, 27 insertions(+), 16 deletions(-) diff --git a/packages/client/src/pages/Lesson/LessonHeader.tsx b/packages/client/src/pages/Lesson/LessonHeader.tsx index eb8bbd63..e5f67f9f 100644 --- a/packages/client/src/pages/Lesson/LessonHeader.tsx +++ b/packages/client/src/pages/Lesson/LessonHeader.tsx @@ -2,7 +2,7 @@ import { Button, Icon, Text, theme as t } from '@codement/ui'; import { Modal, ModalProps } from '@codement/ui/components/Modal/Modal'; import LogoMark from '@codement/ui/images/logo-mark.svg'; import React, { useState } from 'react'; -import { Redirect } from 'react-router-dom'; +import { Redirect, Link } from 'react-router-dom'; import styled from 'styled-components'; import { Lesson, LessonState } from '../../containers/Lesson.container'; import { LessonProgress } from '../../components/LessonProgress/LessonProgress'; @@ -11,6 +11,7 @@ import { routes } from '../../router/routes'; // const offset: Size = 'lg'; const CloseIcon = styled(Icon)` + cursor: pointer; `; const StyledLogo = styled(LogoMark)` @@ -18,28 +19,36 @@ const StyledLogo = styled(LogoMark)` `; const Header = styled.header<{ withProgress: boolean }>` - position: relative; - display: flex; - align-items: center; - padding: ${t.size()} ${t.size('lg')}; +position: relative; +display: flex; +align - items: center; +padding: ${ t.size()} ${t.size('lg')}; & > div { - flex: 1; - text-align: center; - div { - margin: auto; - margin-top: ${t.size('sm')}; - max-width: 40rem; - } + flex: 1; + text - align: center; + div { + margin: auto; + margin - top: ${ t.size('sm')}; + max - width: 40rem; } +} `; const Title = styled(Text)` - font-weight: ${t.fontWeight.bold}; - color: ${t.color('grey')}; +font - weight: ${ t.fontWeight.bold}; +color: ${ t.color('grey')}; `; - +const DashboardLogo = () => { + return ( +
+ + + +
+ ) +}; const CloseConfirmModal: React.FC<{ onClose: () => void } & ModalProps> = ({ onClose, ...props @@ -75,7 +84,9 @@ export const LessonHeader: React.FC<{ title?: string }> = ({ return
- + + +
{title && {title}} From 32e8b7d9b6fadc75b72eb8c14d1d6d46b927dcd2 Mon Sep 17 00:00:00 2001 From: Marcos Silva Date: Sat, 15 Aug 2020 14:01:37 -0400 Subject: [PATCH 04/12] type(fix): removed Dashboard link from the logo icon, added fixed CSS height property size to Characters parts components --- .../client/src/pages/Lesson/LessonHeader.tsx | 102 +++++++++--------- .../client/src/pages/Lesson/Story/Story.tsx | 77 +++++++------ .../ui/components/Character/Character.tsx | 26 +++-- 3 files changed, 113 insertions(+), 92 deletions(-) diff --git a/packages/client/src/pages/Lesson/LessonHeader.tsx b/packages/client/src/pages/Lesson/LessonHeader.tsx index e5f67f9f..433c8599 100644 --- a/packages/client/src/pages/Lesson/LessonHeader.tsx +++ b/packages/client/src/pages/Lesson/LessonHeader.tsx @@ -2,13 +2,12 @@ import { Button, Icon, Text, theme as t } from '@codement/ui'; import { Modal, ModalProps } from '@codement/ui/components/Modal/Modal'; import LogoMark from '@codement/ui/images/logo-mark.svg'; import React, { useState } from 'react'; -import { Redirect, Link } from 'react-router-dom'; +import { Redirect } from 'react-router-dom'; import styled from 'styled-components'; import { Lesson, LessonState } from '../../containers/Lesson.container'; import { LessonProgress } from '../../components/LessonProgress/LessonProgress'; import { routes } from '../../router/routes'; - // const offset: Size = 'lg'; const CloseIcon = styled(Icon)` cursor: pointer; @@ -22,33 +21,34 @@ const Header = styled.header<{ withProgress: boolean }>` position: relative; display: flex; align - items: center; -padding: ${ t.size()} ${t.size('lg')}; +padding: ${t.size()} ${t.size('lg')}; & > div { flex: 1; text - align: center; div { margin: auto; - margin - top: ${ t.size('sm')}; + margin - top: ${t.size('sm')}; max - width: 40rem; } } `; const Title = styled(Text)` -font - weight: ${ t.fontWeight.bold}; -color: ${ t.color('grey')}; +font - weight: ${t.fontWeight.bold}; +color: ${t.color('grey')}; `; -const DashboardLogo = () => { +/*const DashboardLogo = () => { return (
- ) -}; + ); +};*/ + const CloseConfirmModal: React.FC<{ onClose: () => void } & ModalProps> = ({ onClose, ...props @@ -63,49 +63,53 @@ const CloseConfirmModal: React.FC<{ onClose: () => void } & ModalProps> = ({ setRedirect(true); }; - return Cancel, - - ]} - > - If you quit now, you will lose all your lesson progress! - ; + return ( + + Cancel + , + , + ]} + > + If you quit now, you will lose all your lesson progress! + + ); }; -export const LessonHeader: React.FC<{ title?: string }> = ({ - title -}) => { +export const LessonHeader: React.FC<{ title?: string }> = ({ title }) => { const [modal, setModal] = useState(false); const { progress, lesson, lessonState } = Lesson.useContainer(); - - return
- - - - -
- {title && {title}} - {lessonState === LessonState.lesson && } -
- - setModal(true)} - size="lg" - color="grey.300" - /> - - setModal(false)} - show={modal} - /> -
; + return ( +
+
+ +
+ +
+ {title && {title}} + {lessonState === LessonState.lesson && ( + + )} +
+ + setModal(true)} + size="lg" + color="grey.300" + /> + + setModal(false)} show={modal} /> +
+ ); }; diff --git a/packages/client/src/pages/Lesson/Story/Story.tsx b/packages/client/src/pages/Lesson/Story/Story.tsx index 3005a87c..ae9717af 100644 --- a/packages/client/src/pages/Lesson/Story/Story.tsx +++ b/packages/client/src/pages/Lesson/Story/Story.tsx @@ -1,5 +1,12 @@ import { ModuleLesson } from '@codement/api'; -import { Button, centerAbsolute, NavDots, theme as t, CharacterHTML, CharacterProps } from '@codement/ui'; +import { + Button, + centerAbsolute, + NavDots, + theme as t, + CharacterHTML, + CharacterProps, +} from '@codement/ui'; import { Me } from '@codement/ui/lib/containers/Me.container'; import React, { useState, useMemo } from 'react'; import styled from 'styled-components'; @@ -33,10 +40,7 @@ export const StyledCharacter = styled(CharacterHTML)` transform: translateX(-100%); `; - -export const Story: React.FC = ({ - lesson -}) => { +export const Story: React.FC = ({ lesson }) => { const { me } = Me.useContainer(); const { setLessonState: setState } = Lesson.useContainer(); const steps = lesson.lesson.storySections; @@ -56,38 +60,43 @@ export const Story: React.FC = ({ 'cute', 'explaining', 'calm', - 'contempt' + 'contempt', ]; const face = useMemo(() => faces[page % faces.length], [page]); - return <> - - - + return ( + <> + + + - + - - - - setState(LessonState.storyCompleted)} - color="grey" - > Skip story - - ; + + + + setState(LessonState.storyCompleted)} + color="grey" + > + {' '} + Skip story{' '} + + + + ); }; diff --git a/packages/ui/components/Character/Character.tsx b/packages/ui/components/Character/Character.tsx index 1d3b000b..96f655a7 100644 --- a/packages/ui/components/Character/Character.tsx +++ b/packages/ui/components/Character/Character.tsx @@ -8,7 +8,6 @@ import { theme as t } from '../../css/theme'; export * from './Characters'; - const StyledCharacter = styled.div` position: relative; width: 200px; @@ -18,26 +17,30 @@ const StyledCharacter = styled.div` transform: translateX(-50%); overflow: visible; - .ink { fill: ${t.color('primary.300')}; } - .background { fill: ${t.color('white')}; } + .ink { + fill: ${t.color('primary.300')}; + } + .background { + fill: ${t.color('white')}; + } } :after { - content: ""; + content: ''; display: block; padding-bottom: 130%; } `; interface SvgProps { - value: string, + value: string; obj: any; } const Svg: React.FC = ({ value, obj, ...props }) => { const S = obj[value]; if (!S) throw new Error(`Could not find character part '${value}'`); - return ; + return ; }; const StyledBody = styled(Svg)` @@ -65,9 +68,14 @@ export interface CharacterProps { } export const Character: React.FC = ({ - body, head, face, ...props -}) => + body, + head, + face, + ...props +}) => ( + {face && } - ; + +); From ff9fd10e36af2eaae0d810bf58e59013a88ad46a Mon Sep 17 00:00:00 2001 From: Marcos Silva Date: Sun, 16 Aug 2020 19:52:22 -0400 Subject: [PATCH 05/12] type(fix) refactored LessonHeader, and Sotry components due to lint issues --- packages/client/src/pages/Lesson/LessonHeader.tsx | 12 +----------- packages/client/src/pages/Lesson/Story/Story.tsx | 4 ++-- 2 files changed, 3 insertions(+), 13 deletions(-) diff --git a/packages/client/src/pages/Lesson/LessonHeader.tsx b/packages/client/src/pages/Lesson/LessonHeader.tsx index 433c8599..40d33b25 100644 --- a/packages/client/src/pages/Lesson/LessonHeader.tsx +++ b/packages/client/src/pages/Lesson/LessonHeader.tsx @@ -39,16 +39,6 @@ font - weight: ${t.fontWeight.bold}; color: ${t.color('grey')}; `; -/*const DashboardLogo = () => { - return ( -
- - - -
- ); -};*/ - const CloseConfirmModal: React.FC<{ onClose: () => void } & ModalProps> = ({ onClose, ...props @@ -74,7 +64,7 @@ const CloseConfirmModal: React.FC<{ onClose: () => void } & ModalProps> = ({ , , + ]} > If you quit now, you will lose all your lesson progress! diff --git a/packages/client/src/pages/Lesson/Story/Story.tsx b/packages/client/src/pages/Lesson/Story/Story.tsx index ae9717af..bff1aac9 100644 --- a/packages/client/src/pages/Lesson/Story/Story.tsx +++ b/packages/client/src/pages/Lesson/Story/Story.tsx @@ -5,7 +5,7 @@ import { NavDots, theme as t, CharacterHTML, - CharacterProps, + CharacterProps } from '@codement/ui'; import { Me } from '@codement/ui/lib/containers/Me.container'; import React, { useState, useMemo } from 'react'; @@ -60,7 +60,7 @@ export const Story: React.FC = ({ lesson }) => { 'cute', 'explaining', 'calm', - 'contempt', + 'contempt' ]; const face = useMemo(() => faces[page % faces.length], [page]); From b8df562ae3395eb746d7fec80c6fce17d43ce225 Mon Sep 17 00:00:00 2001 From: Marcos Silva Date: Mon, 17 Aug 2020 07:51:39 -0400 Subject: [PATCH 06/12] chore:created syllabus folder, and html5-syllabus file --- syllabus/html5-syllabus.md | 0 1 file changed, 0 insertions(+), 0 deletions(-) create mode 100644 syllabus/html5-syllabus.md diff --git a/syllabus/html5-syllabus.md b/syllabus/html5-syllabus.md new file mode 100644 index 00000000..e69de29b From 12ca8e58edb2bd23c5813aa0b80234af7b215a5e Mon Sep 17 00:00:00 2001 From: Marcos Silva Date: Mon, 17 Aug 2020 08:26:31 -0400 Subject: [PATCH 07/12] chore: updated html5 syllabus content --- syllabus/html5-syllabus.md | 16 ++++++++++++++++ 1 file changed, 16 insertions(+) diff --git a/syllabus/html5-syllabus.md b/syllabus/html5-syllabus.md index e69de29b..d9e2a57e 100644 --- a/syllabus/html5-syllabus.md +++ b/syllabus/html5-syllabus.md @@ -0,0 +1,16 @@ +## HTML5: +HTML foundations + +--- + +## Molule 1: Introduction to HTML5 + +* __Lesson 1__ - What is HTML and what is it role between the three pillars of web development (html/css/javascript) +* __Lesson 2__ - Basic HTML page structure +* __Lesson 3__ - Simple static text formatting using basic HTML elements +* __Lesson 4__ - More complex text formatting using basic HTML elements + + + +--- + From fb5dc253c8a9c00e12d6d47e6d317c8af647364e Mon Sep 17 00:00:00 2001 From: Marcos Silva Date: Mon, 17 Aug 2020 09:26:28 -0400 Subject: [PATCH 08/12] chore: updated html5 syllabus content --- syllabus/html5-syllabus.md | 3 ++- 1 file changed, 2 insertions(+), 1 deletion(-) diff --git a/syllabus/html5-syllabus.md b/syllabus/html5-syllabus.md index d9e2a57e..133de17d 100644 --- a/syllabus/html5-syllabus.md +++ b/syllabus/html5-syllabus.md @@ -3,7 +3,8 @@ HTML foundations --- -## Molule 1: Introduction to HTML5 +## Module 1: Introduction to HTML5 +__Expected Outcome__ :By the end of this module, the Learner will be able to understand the fundamental role of HTML as one of the pillars of web development, learn the first HTML element, and apply this knowledge by formatting text content on a web page. * __Lesson 1__ - What is HTML and what is it role between the three pillars of web development (html/css/javascript) * __Lesson 2__ - Basic HTML page structure From a6cd8b0933944e7240a1c2ab291453477b570e96 Mon Sep 17 00:00:00 2001 From: Marcos Silva Date: Mon, 17 Aug 2020 09:27:39 -0400 Subject: [PATCH 09/12] chore: updated html5 syllabus content --- syllabus/html5-syllabus.md | 3 +++ 1 file changed, 3 insertions(+) diff --git a/syllabus/html5-syllabus.md b/syllabus/html5-syllabus.md index 133de17d..336c1674 100644 --- a/syllabus/html5-syllabus.md +++ b/syllabus/html5-syllabus.md @@ -7,8 +7,11 @@ HTML foundations __Expected Outcome__ :By the end of this module, the Learner will be able to understand the fundamental role of HTML as one of the pillars of web development, learn the first HTML element, and apply this knowledge by formatting text content on a web page. * __Lesson 1__ - What is HTML and what is it role between the three pillars of web development (html/css/javascript) + * __Lesson 2__ - Basic HTML page structure + * __Lesson 3__ - Simple static text formatting using basic HTML elements + * __Lesson 4__ - More complex text formatting using basic HTML elements From 055b4a755fa2d6560840e0b482b6c3c96eabc7bd Mon Sep 17 00:00:00 2001 From: Tomoya Date: Mon, 17 Aug 2020 20:38:59 -0400 Subject: [PATCH 10/12] chore: add html5 lesson --- syllabus/html5-syllabus.md | 13 +++++++++++-- 1 file changed, 11 insertions(+), 2 deletions(-) diff --git a/syllabus/html5-syllabus.md b/syllabus/html5-syllabus.md index 336c1674..4382b991 100644 --- a/syllabus/html5-syllabus.md +++ b/syllabus/html5-syllabus.md @@ -8,12 +8,21 @@ __Expected Outcome__ :By the end of this module, the Learner will be able to und * __Lesson 1__ - What is HTML and what is it role between the three pillars of web development (html/css/javascript) -* __Lesson 2__ - Basic HTML page structure +* __Lesson 2__ - Basic HTML page structure -* __Lesson 3__ - Simple static text formatting using basic HTML elements +* __Lesson 3__ - Simple static text formatting using basic HTML elements * __Lesson 4__ - More complex text formatting using basic HTML elements +* __Lesson 5__ - Your first form + +* __Lesson 6__ - Play Multimedia on the web + +* __Lesson 7__ - Important meta tags (viewport, OGP, etc.) + +* __Lesson 8__ - Useful Unicode + +* __Lesson 9__ - (Advanced Topic) Introduction of WAI-ARIA --- From 465e982e53550ae5f4f12b64687c0ef9ed7e6125 Mon Sep 17 00:00:00 2001 From: Tristan Matthias Date: Tue, 25 Aug 2020 18:44:48 -0500 Subject: [PATCH 11/12] Update html5-syllabus.md --- syllabus/html5-syllabus.md | 77 +++++++++++++++++++++++++++++++++----- 1 file changed, 68 insertions(+), 9 deletions(-) diff --git a/syllabus/html5-syllabus.md b/syllabus/html5-syllabus.md index 4382b991..e5be741d 100644 --- a/syllabus/html5-syllabus.md +++ b/syllabus/html5-syllabus.md @@ -6,24 +6,83 @@ HTML foundations ## Module 1: Introduction to HTML5 __Expected Outcome__ :By the end of this module, the Learner will be able to understand the fundamental role of HTML as one of the pillars of web development, learn the first HTML element, and apply this knowledge by formatting text content on a web page. -* __Lesson 1__ - What is HTML and what is it role between the three pillars of web development (html/css/javascript) +1. What is HTML and what is it role between the three pillars of web development (html/css/javascript) + - Story introduction (warehouse, or something) -* __Lesson 2__ - Basic HTML page structure +2. How do we write HTML (Box metaphor) + - Dis-organized boxes in a warehouse + - As we go through this path, we learn to identify, sort, move around boxes + - **CONCEPT:** Button tag + - **CONCEPT:** Paragraph tag + - **CONCEPT:** Commenting -* __Lesson 3__ - Simple static text formatting using basic HTML elements +3. Common HTML elements + - Span + - strong + - Headings + - Image + - **CONCEPT:** Attributes + - **CONCEPT:** Nesting + - **CONCEPT:** Self closing tags -* __Lesson 4__ - More complex text formatting using basic HTML elements +## ASSIGNMENT -* __Lesson 5__ - Your first form +4. Links (Jumping around) + - Portals (jummping around the warehouse) + - Hash links + - External links + - `target` attribute + - Nesting example of image and ancchor -* __Lesson 6__ - Play Multimedia on the web +5. Forms: + - Input fields (and all their types, eg: checkbox, password, number, color, etc) + - Text area + - Radio + - **CONCEPT:** `name` attribute + - **CONCEPT:** `placeholder` attribute -* __Lesson 7__ - Important meta tags (viewport, OGP, etc.) +6. Lists -* __Lesson 8__ - Useful Unicode +## ASSIGNMENT -* __Lesson 9__ - (Advanced Topic) Introduction of WAI-ARIA +8. Advanced forms + - Labels and the `for` attribute + - Default values + - Required field + - Button submission + +9. Tables + +10. Multimedia + - Video + - Audio + +11. Page structure + +## MEGA ASSIGNMENT + +## UNLOCK CSS + +12. Unicodes + +13. HTML 5 tags + - main, aside, nav, etc + +14. Introduction of WAI-ARIA + +15. SEO + - meta tags + + +## ASSIGNMENT + +... --- + +## Story ideas +- Warehouse metaphor +- Pet shop (Maybe css) + From a17075b0c4e428a476b6fda4ece247eb62be9255 Mon Sep 17 00:00:00 2001 From: Tomoya Date: Sun, 30 Aug 2020 18:55:21 -0400 Subject: [PATCH 12/12] chore: add assignment idea --- syllabus/html5-syllabus.md | 3 +++ 1 file changed, 3 insertions(+) diff --git a/syllabus/html5-syllabus.md b/syllabus/html5-syllabus.md index e5be741d..0d0fd400 100644 --- a/syllabus/html5-syllabus.md +++ b/syllabus/html5-syllabus.md @@ -85,4 +85,7 @@ __Expected Outcome__ :By the end of this module, the Learner will be able to und ## Story ideas - Warehouse metaphor - Pet shop (Maybe css) +- Building portfolio website with form +## ASSIGNMENT idea +- Customize website template (e.g. rename website, change website logo) \ No newline at end of file