From a978418bc80e8e11cd38a688cdcd7e0a73c4c196 Mon Sep 17 00:00:00 2001 From: Wiktoria Mielcarek <62669899+Braweria@users.noreply.github.com> Date: Fri, 11 Nov 2022 19:05:38 +0100 Subject: [PATCH 1/6] add monospace font type --- tailwind.config.js | 41 +++++++++++++++++++++-------------------- 1 file changed, 21 insertions(+), 20 deletions(-) diff --git a/tailwind.config.js b/tailwind.config.js index 460faa7..8402ba4 100644 --- a/tailwind.config.js +++ b/tailwind.config.js @@ -4,27 +4,27 @@ const customColors = { 'br-light-red': '#F18B74', 'br-light-grey': '#DDDDDD', - "red-brown-50": "#FFE9E3", - "red-brown-100": "#FADBD3", - "red-brown-200": "#F7B9AC", - "red-brown-300": "#F18B74", - "red-brown-400": "#E7674A", - "red-brown-500": "#DB4724", - "red-brown-600": "#CC3816", - "red-brown-700": "#B02000", - "red-brown-800": "#841800", - "red-brown-900": "#581000", + 'red-brown-50': '#FFE9E3', + 'red-brown-100': '#FADBD3', + 'red-brown-200': '#F7B9AC', + 'red-brown-300': '#F18B74', + 'red-brown-400': '#E7674A', + 'red-brown-500': '#DB4724', + 'red-brown-600': '#CC3816', + 'red-brown-700': '#B02000', + 'red-brown-800': '#841800', + 'red-brown-900': '#581000', - "black-50": "#F1F1F1", - "black-100": "#DDDDDD", - "black-200": "#C0C0BF", - "black-300": "#A5A3A3", - "black-400": "#898787", - "black-500": "#6F6D6C", - "black-600": "#565352", - "black-700": "#3E3B3A", - "black-800": "#282423", - "black-900": "#171514", + 'black-50': '#F1F1F1', + 'black-100': '#DDDDDD', + 'black-200': '#C0C0BF', + 'black-300': '#A5A3A3', + 'black-400': '#898787', + 'black-500': '#6F6D6C', + 'black-600': '#565352', + 'black-700': '#3E3B3A', + 'black-800': '#282423', + 'black-900': '#171514', }; module.exports = { @@ -41,6 +41,7 @@ module.exports = { }, fontFamily: { sans: ['"Open Sans"', 'sans-serif'], + mono: ['"JetBrains Mono"', 'monospace'], }, }, plugins: [], From d9a6afe4a0777e820451c314d705fa4d2ffc1aed Mon Sep 17 00:00:00 2001 From: Wiktoria Mielcarek <62669899+Braweria@users.noreply.github.com> Date: Fri, 11 Nov 2022 19:05:51 +0100 Subject: [PATCH 2/6] wip: refactor card style --- components/Card/Card.tsx | 47 ++++++++++++++++++++++++++-------------- components/Card/types.ts | 9 +++++--- pages/index.tsx | 15 ++++++++++--- 3 files changed, 49 insertions(+), 22 deletions(-) diff --git a/components/Card/Card.tsx b/components/Card/Card.tsx index 7c7b64b..e7125f8 100644 --- a/components/Card/Card.tsx +++ b/components/Card/Card.tsx @@ -1,24 +1,39 @@ import Link from 'next/link'; -import styles from './Card.module.css'; import type { CardProps } from './types'; -export function Card({ title, description, url }: CardProps): JSX.Element { +// https://www.1001fonts.com/pt-serif-font.html + +export function Card({ + title, + resources, + path, + difficulty, +}: CardProps): JSX.Element { + console.log(resources); return ( -
- - - {title} - -

- {description} -

- +
+
+
+ Path 0 + Beginner +
+

{title}

+
+
); } diff --git a/components/Card/types.ts b/components/Card/types.ts index 2e37658..7fabacd 100644 --- a/components/Card/types.ts +++ b/components/Card/types.ts @@ -1,5 +1,8 @@ +import type { Entry } from '~/sources'; + export type CardProps = { title: string; - description: string; - url: string; -} \ No newline at end of file + resources: Entry[]; + path?: number; + difficulty: number; +}; diff --git a/pages/index.tsx b/pages/index.tsx index 727e117..c15b2d2 100644 --- a/pages/index.tsx +++ b/pages/index.tsx @@ -1,3 +1,4 @@ +import { Card } from '@/Card'; import { Footer } from '@/Footer'; import { Hero } from '@/Hero'; import { List } from '@/List'; @@ -20,9 +21,17 @@ const Home: NextPage = () => { techniques, curated by one of the largest web development communities on Discord." />
- {sources.map((source) => { - return ; - })} +
+ {sources.map((source) => { + return ( + + ); + })} +
From 93a60bca2d8521f95a873689466607db5c52911f Mon Sep 17 00:00:00 2001 From: Wiktoria Mielcarek <62669899+Braweria@users.noreply.github.com> Date: Sat, 7 Jan 2023 18:37:06 +0100 Subject: [PATCH 3/6] add difficulty icon --- components/Card/Card.tsx | 32 ++++++++++++++++++++++------ components/Card/types.ts | 2 +- components/Icon/AdvancedIcon.tsx | 13 +++++++++++ components/Icon/BeginnerIcon.tsx | 13 +++++++++++ components/Icon/IntermediateIcon.tsx | 16 ++++++++++++++ pages/index.tsx | 11 +++++----- utils/sources.ts | 24 +++++++++++++++++++-- 7 files changed, 97 insertions(+), 14 deletions(-) create mode 100644 components/Icon/AdvancedIcon.tsx create mode 100644 components/Icon/BeginnerIcon.tsx create mode 100644 components/Icon/IntermediateIcon.tsx diff --git a/components/Card/Card.tsx b/components/Card/Card.tsx index e7125f8..02fd589 100644 --- a/components/Card/Card.tsx +++ b/components/Card/Card.tsx @@ -1,29 +1,49 @@ import Link from 'next/link'; import type { CardProps } from './types'; +import { AdvancedIcon } from '@/Icon/AdvancedIcon'; +import { BeginnerIcon } from '@/Icon/BeginnerIcon'; +import { IntermediateIcon } from '@/Icon/IntermediateIcon'; // https://www.1001fonts.com/pt-serif-font.html +const DIFFICULTY: Record = { + 0: 'Beginner', + 1: 'Intermediate', + 2: 'Advanced', +}; + +function DifficultyIcon({ difficulty }: { difficulty: number }) { + if (difficulty === 2) { + return ; + } + if (difficulty === 1) { + return ; + } + return ; +} + export function Card({ title, resources, path, difficulty, }: CardProps): JSX.Element { - console.log(resources); return ( -
+
- Path 0 - Beginner + Path {path} + + {DIFFICULTY[difficulty]} +

{title}

-
    +
      {resources.map((item) => { return ( -
    • +
    • + + + ); +} diff --git a/components/Icon/BeginnerIcon.tsx b/components/Icon/BeginnerIcon.tsx new file mode 100644 index 0000000..f5a30cf --- /dev/null +++ b/components/Icon/BeginnerIcon.tsx @@ -0,0 +1,13 @@ +export function BeginnerIcon(): JSX.Element { + return ( + + + + ); +} diff --git a/components/Icon/IntermediateIcon.tsx b/components/Icon/IntermediateIcon.tsx new file mode 100644 index 0000000..c7225a9 --- /dev/null +++ b/components/Icon/IntermediateIcon.tsx @@ -0,0 +1,16 @@ +export function IntermediateIcon(): JSX.Element { + return ( + + + + ); +} diff --git a/pages/index.tsx b/pages/index.tsx index c15b2d2..a06f25d 100644 --- a/pages/index.tsx +++ b/pages/index.tsx @@ -1,10 +1,9 @@ +import type { NextPage } from 'next'; +import Head from 'next/head'; + import { Card } from '@/Card'; import { Footer } from '@/Footer'; import { Hero } from '@/Hero'; -import { List } from '@/List'; -import { TableOfContents } from '@/TableOfContents'; -import type { NextPage } from 'next'; -import Head from 'next/head'; import { sources } from '~/sources'; // eslint-disable-next-line react/function-component-definition @@ -21,13 +20,15 @@ const Home: NextPage = () => { techniques, curated by one of the largest web development communities on Discord." />
      -
      +
      {sources.map((source) => { return ( ); })} diff --git a/utils/sources.ts b/utils/sources.ts index b998a7e..78faf2b 100644 --- a/utils/sources.ts +++ b/utils/sources.ts @@ -9,17 +9,21 @@ export type Source = { type: string; description?: string; entries: Entry[]; + path: number; + difficulty: number; }; const beginner: Source = { type: 'Beginner: Start Here', + path: 0, + difficulty: 0, entries: [ { name: 'Getting Started with the Web', url: 'https://developer.mozilla.org/en-US/docs/Learn/Getting_started_with_the_web', by: 'MDN', description: - "Getting started with the web is a concise series introducing you to the practicalities of web development.", + 'Getting started with the web is a concise series introducing you to the practicalities of web development.', }, { name: 'Front End Developer Learning Path', @@ -72,6 +76,8 @@ const beginner: Source = { const intermediateDeepen: Source = { type: 'Intermediate: Deepen Your Knowledge', + path: 0, + difficulty: 1, entries: [ { name: 'Learn everything about JavaScript', @@ -123,6 +129,8 @@ const intermediateDeepen: Source = { const intermediateStatic: Source = { type: 'Intermediate: Deployment to Static Hosting', + path: 0, + difficulty: 1, entries: [ { name: 'What is Static Hosting', @@ -159,6 +167,8 @@ const intermediateStatic: Source = { const intermediateManaged: Source = { type: 'Intermediate: Deployment to Managed Hosting', + path: 0, + difficulty: 1, entries: [ { name: 'What is Managed Hosting', @@ -200,6 +210,8 @@ const intermediateManaged: Source = { const advancedFrameworks: Source = { type: 'Advanced: Frameworks', + path: 0, + difficulty: 1, description: 'Frameworks are ordered in job availability, but this is largely dependent on where you live.', entries: [ @@ -254,6 +266,8 @@ const advancedFrameworks: Source = { // list for redux and ci/cd const advancedStates: Source = { type: 'Advanced: State Management', + path: 0, + difficulty: 1, entries: [ { name: 'Redux Toolkit', @@ -269,12 +283,14 @@ const advancedStates: Source = { name: 'Pinia', url: 'https://pinia.vuejs.org/', by: 'Vue', - } + }, ], }; const advancedCiCd: Source = { type: 'Advanced: CI/CD', + path: 0, + difficulty: 2, entries: [ { name: 'What is CI/CD', @@ -306,6 +322,8 @@ const advancedCiCd: Source = { const usefullTools: Source = { type: 'Useful Tools', + path: 0, + difficulty: 2, entries: [ { name: 'React Developer Tools for Chromium', @@ -347,6 +365,8 @@ const usefullTools: Source = { const additional: Source = { type: 'Additional', + path: 0, + difficulty: 2, entries: [ { name: 'How to ask good questions', From 571a4f089587e4c196dbd410c2dfac6c8505473a Mon Sep 17 00:00:00 2001 From: Wiktoria Mielcarek <62669899+Braweria@users.noreply.github.com> Date: Sun, 12 Feb 2023 12:46:08 +0100 Subject: [PATCH 4/6] feat: accomodate cards for new props --- components/Card/Card.tsx | 27 +++++++++++++++------------ components/Card/types.ts | 4 ++-- components/List/List.tsx | 37 +++++++++++++++---------------------- pages/index.tsx | 24 +++++++++--------------- styles/globals.css | 2 +- 5 files changed, 42 insertions(+), 52 deletions(-) diff --git a/components/Card/Card.tsx b/components/Card/Card.tsx index 02fd589..8909cf4 100644 --- a/components/Card/Card.tsx +++ b/components/Card/Card.tsx @@ -5,8 +5,6 @@ import { AdvancedIcon } from '@/Icon/AdvancedIcon'; import { BeginnerIcon } from '@/Icon/BeginnerIcon'; import { IntermediateIcon } from '@/Icon/IntermediateIcon'; -// https://www.1001fonts.com/pt-serif-font.html - const DIFFICULTY: Record = { 0: 'Beginner', 1: 'Intermediate', @@ -14,20 +12,25 @@ const DIFFICULTY: Record = { }; function DifficultyIcon({ difficulty }: { difficulty: number }) { - if (difficulty === 2) { - return ; - } - if (difficulty === 1) { - return ; + switch (difficulty) { + case 2: { + return ; + } + case 1: { + return ; + } + + default: { + return ; + } } - return ; } export function Card({ title, - resources, path, difficulty, + pages, }: CardProps): JSX.Element { return (
      @@ -41,14 +44,14 @@ export function Card({

      {title}

        - {resources.map((item) => { + {pages.map((item) => { return ( -
      • +
      • - {item.name} + {item.title}
        • ); diff --git a/components/Card/types.ts b/components/Card/types.ts index 6ddb2b9..d5dc052 100644 --- a/components/Card/types.ts +++ b/components/Card/types.ts @@ -1,8 +1,8 @@ -import type { Entry } from '~/sources'; +import type { Page } from '~/sources'; export type CardProps = { title: string; - resources: Entry[]; + pages: Page[]; path: number; difficulty: number; }; diff --git a/components/List/List.tsx b/components/List/List.tsx index 4868c0a..f56b6c5 100644 --- a/components/List/List.tsx +++ b/components/List/List.tsx @@ -1,33 +1,26 @@ +import styles from './List.module.css'; import { Card } from '@/Card'; import { formatSlug } from '~/format'; -import type { Entry } from '~/sources'; - -import styles from './List.module.css'; +import type { Path } from '~/sources'; -export function List({ - entries, - type, - description, -}: { - entries: Entry[]; - type: string; - description?: string; -}): JSX.Element { +export function List({ path }: { path: Path }): JSX.Element { return ( -
        +

        - {type} + {path.title}

        - {description &&

        {description}

        } -
          - {entries?.map((entry) => ( -
        • + {path.description &&

          {path.description}

          } +
            + {path.chapters?.map((chapter) => ( +
            • ))} diff --git a/pages/index.tsx b/pages/index.tsx index a06f25d..d869aca 100644 --- a/pages/index.tsx +++ b/pages/index.tsx @@ -1,10 +1,13 @@ import type { NextPage } from 'next'; import Head from 'next/head'; +import { PATH_GettingStarted } from 'paths/0-getting-started'; +import { PATH_Internet } from 'paths/1-internet'; +import { PATH_HTML } from 'paths/2-html'; +import { PATH_CSS } from 'paths/3-css'; -import { Card } from '@/Card'; import { Footer } from '@/Footer'; import { Hero } from '@/Hero'; -import { sources } from '~/sources'; +import { List } from '@/List'; // eslint-disable-next-line react/function-component-definition const Home: NextPage = () => { @@ -20,19 +23,10 @@ const Home: NextPage = () => { techniques, curated by one of the largest web development communities on Discord." />
            -
            - {sources.map((source) => { - return ( - - ); - })} -
            + + + +
      diff --git a/styles/globals.css b/styles/globals.css index 186c09a..989a86a 100644 --- a/styles/globals.css +++ b/styles/globals.css @@ -34,7 +34,7 @@ } .container { - @apply max-w-5xl mx-auto px-6 w-full; + @apply max-w-7xl mx-auto px-6 w-full; } /* Remove the ▶ icon from details summary */ From 13aa75c2abf855ddfb6b5b301619b624367bde73 Mon Sep 17 00:00:00 2001 From: Wiktoria Mielcarek <62669899+Braweria@users.noreply.github.com> Date: Sun, 12 Feb 2023 12:46:46 +0100 Subject: [PATCH 5/6] feat: add resources on internet, html, css --- paths/0-getting-started.ts | 67 +++++++++++++++++++++ paths/1-internet.ts | 73 +++++++++++++++++++++++ paths/2-html.ts | 90 ++++++++++++++++++++++++++++ paths/3-css.ts | 117 +++++++++++++++++++++++++++++++++++++ utils/sources.ts | 20 +++++++ 5 files changed, 367 insertions(+) create mode 100644 paths/0-getting-started.ts create mode 100644 paths/1-internet.ts create mode 100644 paths/2-html.ts create mode 100644 paths/3-css.ts diff --git a/paths/0-getting-started.ts b/paths/0-getting-started.ts new file mode 100644 index 0000000..48d3c09 --- /dev/null +++ b/paths/0-getting-started.ts @@ -0,0 +1,67 @@ +import type { Chapter, Path } from '~/sources'; + +const CHAPTER_Editor: Chapter = { + title: 'Code Editor', + difficulty: 0, + pages: [ + { + title: 'Visual Studio Code', + url: 'https://code.visualstudio.com', + }, + { + title: 'WebStorm', + url: 'https://www.jetbrains.com/webstorm/', + }, + ], +}; + +const CHAPTER_Docs: Chapter = { + title: 'Documentation and Resources', + difficulty: 0, + pages: [ + { + title: 'MDN Web Docs', + url: 'https://developer.mozilla.org/en-US/', + }, + { + title: 'JavaScript.info', + url: 'https://javascript.info/', + }, + { + title: 'HTML Reference', + url: 'https://htmlreference.io/', + }, + { + title: 'CSS Reference', + url: 'https://cssreference.io/', + }, + ], +}; + +const CHAPTER_Questions: Chapter = { + title: 'Knowing how and where to ask Questions', + difficulty: 1, + pages: [ + { + title: 'How to Ask Technical Questions', + url: 'https://www.theodinproject.com/how_to_ask', + }, + { + title: 'How to ask a good question', + url: 'https://stackoverflow.com/help/how-to-ask', + }, + { + title: "Stack Overflow", + url: "https://stackoverflow.com/", + } + ], +}; + +export const PATH_GettingStarted: Path = { + title: 'Getting Started', + number: 0, + + description: + 'To get started with web development, you will need to have a good text editor or IDE to work with. You will also regularly stumble upon issues to solve, so knowing where to find the answers or how to ask question is crucial for your learning journey.', + chapters: [CHAPTER_Editor, CHAPTER_Docs, CHAPTER_Questions], +}; diff --git a/paths/1-internet.ts b/paths/1-internet.ts new file mode 100644 index 0000000..9715543 --- /dev/null +++ b/paths/1-internet.ts @@ -0,0 +1,73 @@ +import type { Chapter, Path } from '~/sources'; + +const CHAPTER_WorldWideWeb: Chapter = { + title: 'World Wide Web', + difficulty: 0, + pages: [ + { + title: 'What is the World Wide Web?', + url: 'https://www.britannica.com/topic/World-Wide-Web', + }, + { + title: 'Web Standards: the what, the why, and the how?', + url: 'https://www.smashingmagazine.com/2019/01/web-standards-guide/', + }, + ], +}; + +const CHAPTER_Browser: Chapter = { + title: 'Browser', + difficulty: 1, + pages: [ + { + title: 'Internal Operations of Browser Engines', + url: 'https://web.dev/howbrowserswork/', + }, + { + title: 'How Browsers Work', + url: 'https://developer.mozilla.org/en-US/docs/Web/Performance/How_browsers_work', + }, + ], +}; + +const CHAPTER_Protocols: Chapter = { + title: 'Different type of Protocols', + difficulty: 0, + pages: [ + { + title: 'Introduction to the Intenet Protocol (IP)', + url: 'https://www.cloudflare.com/en-gb/learning/network-layer/internet-protocol/', + }, + { + title: 'Definitions of different type of Protocols', + url: 'https://www.geeksforgeeks.org/types-of-internet-protocols/', + }, + ], +}; + +const CHAPTER_DNS: Chapter = { + title: 'Domain Name System and More', + difficulty: 1, + pages: [ + { + title: 'Introduction to Domain Name System (DNS)', + url: 'https://www.cloudflare.com/en-gb/learning/dns/what-is-dns/', + }, + { + title: 'Indepth explanation of the DNS', + url: 'https://www.techtarget.com/searchnetworking/definition/domain-name-system', + }, + ], +}; + +export const PATH_Internet: Path = { + title: 'Internet', + number: 0, + description: 'Learn the basics of the internet and how it works.', + chapters: [ + CHAPTER_WorldWideWeb, + CHAPTER_Protocols, + CHAPTER_Browser, + CHAPTER_DNS, + ], +}; diff --git a/paths/2-html.ts b/paths/2-html.ts new file mode 100644 index 0000000..00c6479 --- /dev/null +++ b/paths/2-html.ts @@ -0,0 +1,90 @@ +import type { Chapter, Path } from '~/sources'; + +const CHAPTER_Basics: Chapter = { + title: 'Basics', + difficulty: 0, + pages: [ + { + title: 'FreeCodeCamp Web Dev Tutorial', + url: 'https://www.freecodecamp.org', + }, + { + title: 'HTML Full Course', + url: 'https://www.youtube.com/watch?v=pQN-pnXPaVg', + }, + { + title: 'HTML History and Syntax', + url: 'https://developer.mozilla.org/en-US/docs/Glossary/HTML', + }, + { + title: 'Introduction to HTML', + url: 'https://developer.mozilla.org/en-US/docs/Learn/HTML/Introduction_to_HTML', + }, + { + title: 'Learn HTML', + url: 'https://web.dev/learn/html/', + }, + { + title: 'Best Practices', + url: 'https://github.com/hail2u/html-best-practices', + }, + ], +}; + +const CHAPTER_Semantics: Chapter = { + title: 'Semantics and Accessibility', + difficulty: 1, + pages: [ + { + title: 'What are Semantics', + url: 'https://developer.mozilla.org/en-US/docs/Glossary/Semantics', + }, + { + title: 'How Semantic HTML improves your site', + url: 'https://blog.hubspot.com/website/semantic-html', + }, + { + title: 'Learn Accessibility (MDN)', + url: 'https://developer.mozilla.org/en-US/docs/Learn/Accessibility', + }, + { + title: 'Learn Accessibility (Web.dev)', + url: 'https://web.dev/learn/accessibility/', + }, + { + title: 'Making a Strong Case for Accessibility', + url: 'https://www.smashingmagazine.com/2021/07/strong-case-for-accessibility/', + }, + { + title: 'Complete Guide to Accessibility Tooling', + url: 'https://www.smashingmagazine.com/2021/06/complete-guide-accessibility-tooling/', + }, + ], +}; + +const CHAPTER_FormsTables: Chapter = { + title: 'Forms and Tables', + difficulty: 2, + pages: [ + { + title: 'Forms', + url: 'https://developer.mozilla.org/en-US/docs/Learn/Forms', + }, + { + title: 'Tables', + url: 'https://developer.mozilla.org/en-US/docs/Learn/HTML/Tables/Basics', + }, + { + title: 'Learn Forms', + url: 'https://web.dev/learn/forms/', + }, + ], +}; + +export const PATH_HTML: Path = { + title: 'HTML', + number: 1, + description: + 'HTML stands for Hyper Text Markup Language. It is the standard markup language for creating web pages and web applications. With Cascading Style Sheets and JavaScript, it forms a triad of cornerstone technologies for the World Wide Web.', + chapters: [CHAPTER_Basics, CHAPTER_Semantics, CHAPTER_FormsTables], +}; diff --git a/paths/3-css.ts b/paths/3-css.ts new file mode 100644 index 0000000..1c9c3e5 --- /dev/null +++ b/paths/3-css.ts @@ -0,0 +1,117 @@ +import type { Chapter, Path } from '~/sources'; + +const CHAPTER_Basics: Chapter = { + title: 'Basics', + difficulty: 0, + pages: [ + { + title: 'What is CSS', + url: 'https://developer.mozilla.org/en-US/docs/Learn/CSS/First_steps/What_is_CSS', + }, + { + title: 'Applying CSS to HTML', + url: 'https://developer.mozilla.org/en-US/docs/Learn/CSS/First_steps/How_CSS_is_structured', + }, + { + title: 'Learn CSS', + url: 'https://web.dev/learn/css/', + }, + ], +}; + +const CHAPTER_Display: Chapter = { + title: 'Display Type and Blocks of Styling', + difficulty: 1, + pages: [ + { + title: 'The Box Model', + url: 'https://developer.mozilla.org/en-US/docs/Learn/CSS/Building_blocks/The_box_model', + }, + { + title: 'Selectors', + url: 'https://developer.mozilla.org/en-US/docs/Learn/CSS/Building_blocks/Selectors', + }, + { + title: 'CSS Specificity', + url: 'https://developer.mozilla.org/en-US/docs/Web/CSS/Specificity', + }, + { + title: 'Overflowing Content', + url: 'https://developer.mozilla.org/en-US/docs/Learn/CSS/Building_blocks/Overflowing_content', + }, + { + title: 'More on the Topic', + url: 'https://developer.mozilla.org/en-US/docs/Learn/CSS/Building_blocks', + }, + ], +}; + +const CHAPTER_Layouting: Chapter = { + title: 'Layouting', + difficulty: 1, + pages: [ + { + title: 'Normal Flow', + url: 'https://developer.mozilla.org/en-US/docs/Learn/CSS/CSS_layout/Normal_Flow', + }, + { + title: 'Learn Flexbox with Flexbox Froggy', + url: 'https://flexboxfroggy.com', + }, + { + title: 'Complete Guide to Flexbox', + url: 'https://css-tricks.com/snippets/css/a-guide-to-flexbox/', + }, + { + title: 'Learn CSS Grid', + url: 'https://learncssgrid.com', + }, + { + title: 'Complete Guide to Grid', + url: 'https://css-tricks.com/snippets/css/complete-guide-grid/', + }, + ], +}; + +const CHAPTER_Responsive: Chapter = { + title: 'Responsive Websites', + difficulty: 2, + pages: [ + { + title: 'Responsive Web Design', + url: 'https://developer.mozilla.org/en-US/docs/Learn/CSS/CSS_layout/Responsive_Design', + }, + { + title: 'Using Media Queries', + url: 'https://developer.mozilla.org/en-US/docs/Web/CSS/Media_Queries/Using_media_queries', + }, + { + title: 'Learn Responsive Design', + url: 'https://web.dev/learn/design/', + }, + { + title: 'Responsive Images', + url: 'https://developer.mozilla.org/en-US/docs/Learn/HTML/Multimedia_and_embedding/Responsive_images', + }, + { + title: 'Responsive Web Design Basics', + url: 'https://developers.google.com/web/fundamentals/design-and-ux/responsive/', + }, + { + title: 'Responsive Web Design', + url: 'https://webflow.com/blog/responsive-web-design', + }, + ], +}; + +export const PATH_CSS: Path = { + title: 'CSS', + number: 3, + description: 'Learn the basics of CSS.', + chapters: [ + CHAPTER_Basics, + CHAPTER_Display, + CHAPTER_Layouting, + CHAPTER_Responsive, + ], +}; diff --git a/utils/sources.ts b/utils/sources.ts index 78faf2b..42e15f2 100644 --- a/utils/sources.ts +++ b/utils/sources.ts @@ -13,6 +13,26 @@ export type Source = { difficulty: number; }; +export type Page = { + title: string; + url: string; +}; + +export type Chapter = { + title: string; + difficulty: number; + pages: Page[]; +}; + +export type Path = { + title: string; + number: number; + description: string; + chapters: Chapter[]; +}; + + + const beginner: Source = { type: 'Beginner: Start Here', path: 0, From be21428e6c291b79362260c9520742861659d255 Mon Sep 17 00:00:00 2001 From: Wiktoria Mielcarek <62669899+Braweria@users.noreply.github.com> Date: Sun, 12 Feb 2023 12:48:02 +0100 Subject: [PATCH 6/6] fix: numbering of paths --- paths/1-internet.ts | 2 +- paths/2-html.ts | 2 +- 2 files changed, 2 insertions(+), 2 deletions(-) diff --git a/paths/1-internet.ts b/paths/1-internet.ts index 9715543..792479d 100644 --- a/paths/1-internet.ts +++ b/paths/1-internet.ts @@ -62,7 +62,7 @@ const CHAPTER_DNS: Chapter = { export const PATH_Internet: Path = { title: 'Internet', - number: 0, + number: 1, description: 'Learn the basics of the internet and how it works.', chapters: [ CHAPTER_WorldWideWeb, diff --git a/paths/2-html.ts b/paths/2-html.ts index 00c6479..ff9fc4a 100644 --- a/paths/2-html.ts +++ b/paths/2-html.ts @@ -83,7 +83,7 @@ const CHAPTER_FormsTables: Chapter = { export const PATH_HTML: Path = { title: 'HTML', - number: 1, + number: 2, description: 'HTML stands for Hyper Text Markup Language. It is the standard markup language for creating web pages and web applications. With Cascading Style Sheets and JavaScript, it forms a triad of cornerstone technologies for the World Wide Web.', chapters: [CHAPTER_Basics, CHAPTER_Semantics, CHAPTER_FormsTables],