├── static └── .nojekyll ├── vercel.json ├── .stylelintrc.json ├── src ├── utils │ ├── addPluralFormEnding.ts │ ├── filePath.mjs │ ├── millisecondsToSeconds.ts │ ├── unknownToError.ts │ ├── millisecondsToTimeUnits.ts │ ├── modifiedTime.mjs │ ├── timeSince.ts │ ├── getDateTimeComponents.ts │ └── timeSince.test.ts ├── pages │ ├── docs │ │ └── assets │ │ │ ├── misc │ │ │ ├── projekt.png │ │ │ └── pl_hr_response.png │ │ │ ├── css │ │ │ ├── components.webp │ │ │ ├── unsprinkle.webp │ │ │ ├── flex_shorthand.webp │ │ │ ├── css_exercises_1_3.webp │ │ │ ├── css_exercises_2_3.webp │ │ │ ├── css_exercises_3_3.webp │ │ │ └── flex_basis_grow_shrink.webp │ │ │ └── react │ │ │ ├── react-fetching-1_3.png │ │ │ ├── react-fetching-2_3.png │ │ │ └── react-fetching-3_3.png │ ├── resources │ │ ├── _questions │ │ │ ├── css.md │ │ │ ├── advanced_questions.md │ │ │ ├── typescript.md │ │ │ ├── react.md │ │ │ └── javascript.md │ │ ├── _exercises │ │ │ ├── practice_css_problems.md │ │ │ ├── frontend_platforms.md │ │ │ └── css4js.md │ │ ├── other_resources.md │ │ ├── content_creators.md │ │ ├── complete_project.md │ │ ├── build_your_project.md │ │ └── test_your_skills.mdx │ ├── common │ │ ├── job_boards.md │ │ ├── english.md │ │ ├── productivity.md │ │ ├── learning_to_learn.md │ │ ├── programmer_pov.md │ │ └── hr_recruitment_resources.md │ ├── introduction.md │ ├── software │ │ ├── development_setup.md │ │ ├── repository_tools.md │ │ ├── other_tools.md │ │ └── vim.md │ ├── index.astro │ ├── technologies │ │ ├── redux.md │ │ ├── nextjs.md │ │ ├── html.md │ │ ├── nodejs.md │ │ └── git.md │ ├── 404.astro │ ├── principles │ │ ├── how_web_works.md │ │ ├── clean_code.md │ │ ├── design_ui_ux.md │ │ ├── frontend.md │ │ └── design_patterns.md │ └── README.md ├── components │ ├── RightSidebar │ │ ├── TableOfContents.module.scss │ │ ├── RightSidebar.astro │ │ ├── MoreMenu.astro │ │ └── TableOfContents.tsx │ ├── GitHubStarLink │ │ └── GitHubStarLink.astro │ ├── Header │ │ ├── Logo.astro │ │ ├── SkipToContent.astro │ │ ├── GithubStars.tsx │ │ ├── SidebarToggle.tsx │ │ ├── Search.tsx │ │ ├── Header.astro │ │ └── Search.css │ ├── Redesign │ │ ├── LandingSection.astro │ │ ├── LandingSections │ │ │ ├── Footer │ │ │ │ ├── SocialLink.astro │ │ │ │ ├── ImageAttribution.astro │ │ │ │ ├── Footer.astro │ │ │ │ ├── LinkGroup.astro │ │ │ │ ├── TopFooterSection.astro │ │ │ │ ├── Socials.astro │ │ │ │ └── BottomFooterSection.astro │ │ │ ├── AboutUs.astro │ │ │ ├── Hero.astro │ │ │ ├── FAQ.astro │ │ │ ├── Accordion.tsx │ │ │ └── Advantages.astro │ │ ├── LandingPage.astro │ │ ├── LandingElements │ │ │ └── DocsButton.astro │ │ └── ComparisonCard.astro │ ├── LandingPage │ │ ├── VideoEmbed │ │ │ ├── helpers.ts │ │ │ └── VideoEmbed.astro │ │ └── LandingSEO.astro │ ├── common │ │ └── GlowText.astro │ ├── LeftSidebar │ │ ├── SidebarItem.astro │ │ └── LeftSidebar.astro │ ├── utility │ │ ├── CopyCodeToClipboard │ │ │ ├── helpers.ts │ │ │ └── CopyCodeToClipboard.astro │ │ └── HeadingLinksCopyToClipboard │ │ │ ├── HeadingLinksCopyToClipboard.astro │ │ │ ├── helpers.ts │ │ │ └── copyIconSVG.ts │ ├── PageContent │ │ └── PageContent.astro │ ├── DonationModal │ │ └── DonationButton.tsx │ ├── RecommendedSections │ │ └── RecommendedSections.astro │ ├── HeadSEO.astro │ └── HeadCommon.astro ├── env.d.ts ├── hooks │ ├── usePersistedState.ts │ └── usePrefersReducedMotion.ts ├── styles │ └── themes │ │ └── tailwind.css ├── data │ └── vscode.data.ts └── config.ts ├── postcss.config.cjs ├── public ├── favicon.ico ├── metaimage.png ├── metaimages │ ├── css.png │ ├── git.png │ ├── html.png │ ├── react.png │ ├── redux.png │ ├── nextjs.png │ ├── nodejs.png │ ├── testing.png │ ├── javascript.png │ └── typescript.png ├── fonts │ ├── Poppins-Black.ttf │ ├── Poppins-Bold.ttf │ ├── Poppins-Light.ttf │ ├── Poppins-Thin.ttf │ ├── Inter-Regular.woff2 │ ├── Poppins-Italic.ttf │ ├── Poppins-Medium.ttf │ ├── Poppins-Regular.ttf │ ├── Poppins-BoldItalic.ttf │ ├── Poppins-ExtraBold.ttf │ ├── Poppins-ExtraLight.ttf │ ├── Poppins-SemiBold.ttf │ ├── Poppins-ThinItalic.ttf │ ├── Poppins-BlackItalic.ttf │ ├── Poppins-LightItalic.ttf │ ├── Poppins-MediumItalic.ttf │ ├── Poppins-ExtraBoldItalic.ttf │ ├── Poppins-SemiBoldItalic.ttf │ ├── Poppins-ExtraLightItalic.ttf │ ├── Nunito-VariableFont_wght.woff2 │ └── Nunito-Italic-VariableFont_wght.woff2 ├── images │ ├── misc │ │ ├── puzzle.webp │ │ ├── projekt.webp │ │ └── pl_hr_response.webp │ ├── nukp-logo.webp │ ├── css │ │ ├── components.webp │ │ ├── unsprinkle.webp │ │ ├── flex_shorthand.webp │ │ ├── tailwind_ally1.png │ │ ├── tailwind_ally2.png │ │ ├── css_exercises_1_3.webp │ │ ├── css_exercises_2_3.webp │ │ ├── css_exercises_3_3.webp │ │ ├── tailwind_typesafe.png │ │ ├── tailwind_variants.png │ │ └── flex_basis_grow_shrink.webp │ ├── react │ │ ├── react-fetching-1_3.webp │ │ ├── react-fetching-2_3.webp │ │ └── react-fetching-3_3.webp │ ├── starButton │ │ └── star-icon.svg │ └── logo.svg ├── make-scrollable-code-focusable.js └── icons │ ├── hourglass.svg │ ├── school_hat.svg │ └── savings.svg ├── tsconfig.json ├── vitest.config.ts ├── .vscode ├── launch.json ├── extensions.json └── settings.json ├── .gitignore ├── prettier.config.ts ├── .github ├── ISSUE_TEMPLATE │ ├── new_docs_section.md │ ├── feature_request.md │ └── bug_report.md └── workflows │ ├── vitest.yml │ └── playwright.yml ├── E2E ├── DocsButton.test.ts ├── Articles.test.ts └── StarButton.test.ts ├── astro.config.mjs ├── LICENSE ├── package.json ├── tailwind.config.ts ├── .all-contributorsrc ├── playwright.config.ts └── README.md /static/.nojekyll: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /vercel.json: -------------------------------------------------------------------------------- 1 | { 2 | "github": { 3 | "silent": true 4 | } 5 | } 6 | -------------------------------------------------------------------------------- /.stylelintrc.json: -------------------------------------------------------------------------------- 1 | { 2 | "extends": ["stylelint-config-standard"] 3 | } 4 | -------------------------------------------------------------------------------- /src/utils/addPluralFormEnding.ts: -------------------------------------------------------------------------------- 1 | export const addPluralFormEnding = (number: number) => (number > 1 ? 's' : '') 2 | -------------------------------------------------------------------------------- /postcss.config.cjs: -------------------------------------------------------------------------------- 1 | //@ts-check 2 | 3 | module.exports = { 4 | plugins: { 5 | autoprefixer: {}, 6 | }, 7 | } 8 | -------------------------------------------------------------------------------- /public/favicon.ico: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/NowYouKnowProgramming/webdev-learning-materials/HEAD/public/favicon.ico -------------------------------------------------------------------------------- /public/metaimage.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/NowYouKnowProgramming/webdev-learning-materials/HEAD/public/metaimage.png -------------------------------------------------------------------------------- /public/metaimages/css.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/NowYouKnowProgramming/webdev-learning-materials/HEAD/public/metaimages/css.png -------------------------------------------------------------------------------- /public/metaimages/git.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/NowYouKnowProgramming/webdev-learning-materials/HEAD/public/metaimages/git.png -------------------------------------------------------------------------------- /public/metaimages/html.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/NowYouKnowProgramming/webdev-learning-materials/HEAD/public/metaimages/html.png -------------------------------------------------------------------------------- /public/metaimages/react.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/NowYouKnowProgramming/webdev-learning-materials/HEAD/public/metaimages/react.png -------------------------------------------------------------------------------- /public/metaimages/redux.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/NowYouKnowProgramming/webdev-learning-materials/HEAD/public/metaimages/redux.png -------------------------------------------------------------------------------- /public/fonts/Poppins-Black.ttf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/NowYouKnowProgramming/webdev-learning-materials/HEAD/public/fonts/Poppins-Black.ttf -------------------------------------------------------------------------------- /public/fonts/Poppins-Bold.ttf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/NowYouKnowProgramming/webdev-learning-materials/HEAD/public/fonts/Poppins-Bold.ttf -------------------------------------------------------------------------------- /public/fonts/Poppins-Light.ttf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/NowYouKnowProgramming/webdev-learning-materials/HEAD/public/fonts/Poppins-Light.ttf -------------------------------------------------------------------------------- /public/fonts/Poppins-Thin.ttf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/NowYouKnowProgramming/webdev-learning-materials/HEAD/public/fonts/Poppins-Thin.ttf -------------------------------------------------------------------------------- /public/images/misc/puzzle.webp: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/NowYouKnowProgramming/webdev-learning-materials/HEAD/public/images/misc/puzzle.webp -------------------------------------------------------------------------------- /public/images/nukp-logo.webp: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/NowYouKnowProgramming/webdev-learning-materials/HEAD/public/images/nukp-logo.webp -------------------------------------------------------------------------------- /public/metaimages/nextjs.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/NowYouKnowProgramming/webdev-learning-materials/HEAD/public/metaimages/nextjs.png -------------------------------------------------------------------------------- /public/metaimages/nodejs.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/NowYouKnowProgramming/webdev-learning-materials/HEAD/public/metaimages/nodejs.png -------------------------------------------------------------------------------- /public/metaimages/testing.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/NowYouKnowProgramming/webdev-learning-materials/HEAD/public/metaimages/testing.png -------------------------------------------------------------------------------- /public/fonts/Inter-Regular.woff2: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/NowYouKnowProgramming/webdev-learning-materials/HEAD/public/fonts/Inter-Regular.woff2 -------------------------------------------------------------------------------- /public/fonts/Poppins-Italic.ttf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/NowYouKnowProgramming/webdev-learning-materials/HEAD/public/fonts/Poppins-Italic.ttf -------------------------------------------------------------------------------- /public/fonts/Poppins-Medium.ttf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/NowYouKnowProgramming/webdev-learning-materials/HEAD/public/fonts/Poppins-Medium.ttf -------------------------------------------------------------------------------- /public/fonts/Poppins-Regular.ttf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/NowYouKnowProgramming/webdev-learning-materials/HEAD/public/fonts/Poppins-Regular.ttf -------------------------------------------------------------------------------- /public/images/misc/projekt.webp: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/NowYouKnowProgramming/webdev-learning-materials/HEAD/public/images/misc/projekt.webp -------------------------------------------------------------------------------- /public/metaimages/javascript.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/NowYouKnowProgramming/webdev-learning-materials/HEAD/public/metaimages/javascript.png -------------------------------------------------------------------------------- /public/metaimages/typescript.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/NowYouKnowProgramming/webdev-learning-materials/HEAD/public/metaimages/typescript.png -------------------------------------------------------------------------------- /public/fonts/Poppins-BoldItalic.ttf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/NowYouKnowProgramming/webdev-learning-materials/HEAD/public/fonts/Poppins-BoldItalic.ttf -------------------------------------------------------------------------------- /public/fonts/Poppins-ExtraBold.ttf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/NowYouKnowProgramming/webdev-learning-materials/HEAD/public/fonts/Poppins-ExtraBold.ttf -------------------------------------------------------------------------------- /public/fonts/Poppins-ExtraLight.ttf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/NowYouKnowProgramming/webdev-learning-materials/HEAD/public/fonts/Poppins-ExtraLight.ttf -------------------------------------------------------------------------------- /public/fonts/Poppins-SemiBold.ttf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/NowYouKnowProgramming/webdev-learning-materials/HEAD/public/fonts/Poppins-SemiBold.ttf -------------------------------------------------------------------------------- /public/fonts/Poppins-ThinItalic.ttf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/NowYouKnowProgramming/webdev-learning-materials/HEAD/public/fonts/Poppins-ThinItalic.ttf -------------------------------------------------------------------------------- /public/images/css/components.webp: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/NowYouKnowProgramming/webdev-learning-materials/HEAD/public/images/css/components.webp -------------------------------------------------------------------------------- /public/images/css/unsprinkle.webp: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/NowYouKnowProgramming/webdev-learning-materials/HEAD/public/images/css/unsprinkle.webp -------------------------------------------------------------------------------- /public/fonts/Poppins-BlackItalic.ttf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/NowYouKnowProgramming/webdev-learning-materials/HEAD/public/fonts/Poppins-BlackItalic.ttf -------------------------------------------------------------------------------- /public/fonts/Poppins-LightItalic.ttf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/NowYouKnowProgramming/webdev-learning-materials/HEAD/public/fonts/Poppins-LightItalic.ttf -------------------------------------------------------------------------------- /public/fonts/Poppins-MediumItalic.ttf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/NowYouKnowProgramming/webdev-learning-materials/HEAD/public/fonts/Poppins-MediumItalic.ttf -------------------------------------------------------------------------------- /public/images/css/flex_shorthand.webp: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/NowYouKnowProgramming/webdev-learning-materials/HEAD/public/images/css/flex_shorthand.webp -------------------------------------------------------------------------------- /public/images/css/tailwind_ally1.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/NowYouKnowProgramming/webdev-learning-materials/HEAD/public/images/css/tailwind_ally1.png -------------------------------------------------------------------------------- /public/images/css/tailwind_ally2.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/NowYouKnowProgramming/webdev-learning-materials/HEAD/public/images/css/tailwind_ally2.png -------------------------------------------------------------------------------- /public/fonts/Poppins-ExtraBoldItalic.ttf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/NowYouKnowProgramming/webdev-learning-materials/HEAD/public/fonts/Poppins-ExtraBoldItalic.ttf -------------------------------------------------------------------------------- /public/fonts/Poppins-SemiBoldItalic.ttf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/NowYouKnowProgramming/webdev-learning-materials/HEAD/public/fonts/Poppins-SemiBoldItalic.ttf -------------------------------------------------------------------------------- /public/images/css/css_exercises_1_3.webp: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/NowYouKnowProgramming/webdev-learning-materials/HEAD/public/images/css/css_exercises_1_3.webp -------------------------------------------------------------------------------- /public/images/css/css_exercises_2_3.webp: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/NowYouKnowProgramming/webdev-learning-materials/HEAD/public/images/css/css_exercises_2_3.webp -------------------------------------------------------------------------------- /public/images/css/css_exercises_3_3.webp: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/NowYouKnowProgramming/webdev-learning-materials/HEAD/public/images/css/css_exercises_3_3.webp -------------------------------------------------------------------------------- /public/images/css/tailwind_typesafe.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/NowYouKnowProgramming/webdev-learning-materials/HEAD/public/images/css/tailwind_typesafe.png -------------------------------------------------------------------------------- /public/images/css/tailwind_variants.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/NowYouKnowProgramming/webdev-learning-materials/HEAD/public/images/css/tailwind_variants.png -------------------------------------------------------------------------------- /public/images/misc/pl_hr_response.webp: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/NowYouKnowProgramming/webdev-learning-materials/HEAD/public/images/misc/pl_hr_response.webp -------------------------------------------------------------------------------- /src/pages/docs/assets/misc/projekt.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/NowYouKnowProgramming/webdev-learning-materials/HEAD/src/pages/docs/assets/misc/projekt.png -------------------------------------------------------------------------------- /public/fonts/Poppins-ExtraLightItalic.ttf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/NowYouKnowProgramming/webdev-learning-materials/HEAD/public/fonts/Poppins-ExtraLightItalic.ttf -------------------------------------------------------------------------------- /public/make-scrollable-code-focusable.js: -------------------------------------------------------------------------------- 1 | Array.from(document.getElementsByTagName('pre')).forEach((element) => { 2 | element.setAttribute('tabindex', '0') 3 | }) 4 | -------------------------------------------------------------------------------- /src/pages/docs/assets/css/components.webp: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/NowYouKnowProgramming/webdev-learning-materials/HEAD/src/pages/docs/assets/css/components.webp -------------------------------------------------------------------------------- /src/pages/docs/assets/css/unsprinkle.webp: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/NowYouKnowProgramming/webdev-learning-materials/HEAD/src/pages/docs/assets/css/unsprinkle.webp -------------------------------------------------------------------------------- /public/fonts/Nunito-VariableFont_wght.woff2: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/NowYouKnowProgramming/webdev-learning-materials/HEAD/public/fonts/Nunito-VariableFont_wght.woff2 -------------------------------------------------------------------------------- /public/images/css/flex_basis_grow_shrink.webp: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/NowYouKnowProgramming/webdev-learning-materials/HEAD/public/images/css/flex_basis_grow_shrink.webp -------------------------------------------------------------------------------- /public/images/react/react-fetching-1_3.webp: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/NowYouKnowProgramming/webdev-learning-materials/HEAD/public/images/react/react-fetching-1_3.webp -------------------------------------------------------------------------------- /public/images/react/react-fetching-2_3.webp: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/NowYouKnowProgramming/webdev-learning-materials/HEAD/public/images/react/react-fetching-2_3.webp -------------------------------------------------------------------------------- /public/images/react/react-fetching-3_3.webp: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/NowYouKnowProgramming/webdev-learning-materials/HEAD/public/images/react/react-fetching-3_3.webp -------------------------------------------------------------------------------- /src/pages/docs/assets/css/flex_shorthand.webp: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/NowYouKnowProgramming/webdev-learning-materials/HEAD/src/pages/docs/assets/css/flex_shorthand.webp -------------------------------------------------------------------------------- /src/pages/docs/assets/misc/pl_hr_response.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/NowYouKnowProgramming/webdev-learning-materials/HEAD/src/pages/docs/assets/misc/pl_hr_response.png -------------------------------------------------------------------------------- /public/fonts/Nunito-Italic-VariableFont_wght.woff2: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/NowYouKnowProgramming/webdev-learning-materials/HEAD/public/fonts/Nunito-Italic-VariableFont_wght.woff2 -------------------------------------------------------------------------------- /src/components/RightSidebar/TableOfContents.module.scss: -------------------------------------------------------------------------------- 1 | .toggle { 2 | background-color: var(--docs-btn-bg); 3 | color: var(--docs-btn-text); 4 | padding: 0.7rem 2rem; 5 | } 6 | -------------------------------------------------------------------------------- /src/pages/docs/assets/css/css_exercises_1_3.webp: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/NowYouKnowProgramming/webdev-learning-materials/HEAD/src/pages/docs/assets/css/css_exercises_1_3.webp -------------------------------------------------------------------------------- /src/pages/docs/assets/css/css_exercises_2_3.webp: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/NowYouKnowProgramming/webdev-learning-materials/HEAD/src/pages/docs/assets/css/css_exercises_2_3.webp -------------------------------------------------------------------------------- /src/pages/docs/assets/css/css_exercises_3_3.webp: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/NowYouKnowProgramming/webdev-learning-materials/HEAD/src/pages/docs/assets/css/css_exercises_3_3.webp -------------------------------------------------------------------------------- /src/pages/docs/assets/react/react-fetching-1_3.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/NowYouKnowProgramming/webdev-learning-materials/HEAD/src/pages/docs/assets/react/react-fetching-1_3.png -------------------------------------------------------------------------------- /src/pages/docs/assets/react/react-fetching-2_3.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/NowYouKnowProgramming/webdev-learning-materials/HEAD/src/pages/docs/assets/react/react-fetching-2_3.png -------------------------------------------------------------------------------- /src/pages/docs/assets/react/react-fetching-3_3.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/NowYouKnowProgramming/webdev-learning-materials/HEAD/src/pages/docs/assets/react/react-fetching-3_3.png -------------------------------------------------------------------------------- /tsconfig.json: -------------------------------------------------------------------------------- 1 | { 2 | "extends": "astro/tsconfigs/strictest", 3 | "compilerOptions": { 4 | "jsx": "preserve", 5 | "skipLibCheck": true 6 | }, 7 | "target": "es2020" 8 | } 9 | -------------------------------------------------------------------------------- /src/pages/docs/assets/css/flex_basis_grow_shrink.webp: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/NowYouKnowProgramming/webdev-learning-materials/HEAD/src/pages/docs/assets/css/flex_basis_grow_shrink.webp -------------------------------------------------------------------------------- /src/utils/filePath.mjs: -------------------------------------------------------------------------------- 1 | export function filePath() { 2 | return function (tree, file) { 3 | const filepath = file.history[0] 4 | file.data.astro.frontmatter.filePath = filepath 5 | } 6 | } 7 | -------------------------------------------------------------------------------- /vitest.config.ts: -------------------------------------------------------------------------------- 1 | import { defineConfig } from 'vitest/config' 2 | 3 | export default defineConfig({ 4 | test: { 5 | exclude: ['**/node_modules/**', '**/dist/**', '**/build/**', '**/E2E/*'], 6 | }, 7 | }) 8 | -------------------------------------------------------------------------------- /src/utils/millisecondsToSeconds.ts: -------------------------------------------------------------------------------- 1 | export const MILLISECONDS_TO_SECONDS: number = 0.001 2 | 3 | export const millisecondsToSeconds = (milliseconds: number): number => { 4 | return Math.floor(milliseconds * MILLISECONDS_TO_SECONDS) 5 | } 6 | -------------------------------------------------------------------------------- /src/pages/resources/_questions/css.md: -------------------------------------------------------------------------------- 1 |
2 | Real-world CSS technical questions 3 | 4 | - What are the ways to center the container with two boxes? 5 | - What is the difference between `em` and `rem`? 6 | 7 |
8 | -------------------------------------------------------------------------------- /.vscode/launch.json: -------------------------------------------------------------------------------- 1 | { 2 | "version": "0.2.0", 3 | "configurations": [ 4 | { 5 | "command": "./node_modules/.bin/astro dev", 6 | "name": "Development server", 7 | "request": "launch", 8 | "type": "node-terminal" 9 | } 10 | ] 11 | } 12 | -------------------------------------------------------------------------------- /.vscode/extensions.json: -------------------------------------------------------------------------------- 1 | { 2 | "recommendations": [ 3 | "astro-build.astro-vscode", 4 | "rioukkevin.vscode-git-commit", 5 | "esbenp.prettier-vscode", 6 | "bradlc.vscode-tailwindcss", 7 | "streetsidesoftware.code-spell-checker" 8 | ], 9 | "unwantedRecommendations": [] 10 | } 11 | -------------------------------------------------------------------------------- /src/components/GitHubStarLink/GitHubStarLink.astro: -------------------------------------------------------------------------------- 1 | Star on GitHub 6 | -------------------------------------------------------------------------------- /src/utils/unknownToError.ts: -------------------------------------------------------------------------------- 1 | export const unknownToError = (maybeError: unknown) => { 2 | if (maybeError instanceof Error) { 3 | return maybeError 4 | } 5 | 6 | if (typeof maybeError === 'string') { 7 | return new Error(maybeError) 8 | } 9 | 10 | return new Error(String(maybeError)) 11 | } 12 | -------------------------------------------------------------------------------- /src/components/Header/Logo.astro: -------------------------------------------------------------------------------- 1 | --- 2 | const { size = 50 } = Astro.props as { size?: number } 3 | --- 4 | 5 | bewebdev logo - computer backlit with pink color 12 | -------------------------------------------------------------------------------- /src/components/Redesign/LandingSection.astro: -------------------------------------------------------------------------------- 1 | --- 2 | type Props = { 3 | className?: string 4 | maxWidth?: string 5 | } 6 | const { className = '', maxWidth = 'max-w-7xl' } = Astro.props as Props 7 | --- 8 | 9 |
10 | 11 |
12 | -------------------------------------------------------------------------------- /src/env.d.ts: -------------------------------------------------------------------------------- 1 | /// 2 | declare module '*.css' 3 | declare module '*.scss' 4 | 5 | interface ImportMetaEnv { 6 | readonly PUBLIC_APP_ID: string 7 | readonly PUBLIC_API_KEY: string 8 | readonly PUBLIC_INDEX_NAME: string 9 | } 10 | 11 | interface ImportMeta { 12 | readonly env: ImportMetaEnv; 13 | } 14 | -------------------------------------------------------------------------------- /src/utils/millisecondsToTimeUnits.ts: -------------------------------------------------------------------------------- 1 | import { getDateTimeComponents } from './getDateTimeComponents' 2 | import { millisecondsToSeconds } from './millisecondsToSeconds' 3 | 4 | export const millisecondsToTimeUnits = (milliseconds: number) => { 5 | const seconds = millisecondsToSeconds(milliseconds) 6 | return getDateTimeComponents(seconds) 7 | } 8 | -------------------------------------------------------------------------------- /src/utils/modifiedTime.mjs: -------------------------------------------------------------------------------- 1 | import { execSync } from 'child_process' 2 | 3 | export function modifiedTime() { 4 | return function (tree, file) { 5 | const filepath = file.history[0] 6 | const result = execSync(`git log -1 --pretty="format:%cI" ${filepath}`) 7 | file.data.astro.frontmatter.lastModified = result.toString() 8 | } 9 | } 10 | -------------------------------------------------------------------------------- /src/components/LandingPage/VideoEmbed/helpers.ts: -------------------------------------------------------------------------------- 1 | export const getUserIsFromPoland = (): boolean => { 2 | const isPolishTimezone = 3 | Intl.DateTimeFormat().resolvedOptions().timeZone === 'Europe/Warsaw' 4 | 5 | const isPolishLocale = navigator.languages.some((language) => 6 | language.includes('pl') 7 | ) 8 | 9 | return isPolishTimezone || isPolishLocale 10 | } 11 | -------------------------------------------------------------------------------- /.gitignore: -------------------------------------------------------------------------------- 1 | # build output 2 | dist/ 3 | 4 | # dependencies 5 | node_modules/ 6 | 7 | # logs 8 | npm-debug.log* 9 | yarn-debug.log* 10 | yarn-error.log* 11 | pnpm-debug.log* 12 | 13 | 14 | # environment variables 15 | .env 16 | .env.production 17 | 18 | # macOS-specific files 19 | .DS_Store 20 | /test-results/ 21 | /playwright-report/ 22 | /playwright/.cache/ 23 | .temp* 24 | -------------------------------------------------------------------------------- /src/components/Redesign/LandingSections/Footer/SocialLink.astro: -------------------------------------------------------------------------------- 1 | --- 2 | type Props = { 3 | href: string 4 | } 5 | 6 | const { href } = Astro.props as Props 7 | --- 8 | 9 |
  • 10 | 14 | 15 | 16 |
    • 17 | -------------------------------------------------------------------------------- /src/pages/resources/_questions/advanced_questions.md: -------------------------------------------------------------------------------- 1 | - Do you know what is microfrontends? 2 | - Do you know any patterns from functional programming? 3 | 4 | - What do you think about testing, how are you doing it and what exactly you are testing? 5 | - Can you mention a few design patterns and how you can apply them? 6 | - Can you explain what is TDD, BDD and DDD? What are differences between them? 7 | - What are types of methods in REST API? 8 | -------------------------------------------------------------------------------- /prettier.config.ts: -------------------------------------------------------------------------------- 1 | /** @type {import("prettier").Config} */ 2 | 3 | import { type Config } from 'prettier' 4 | 5 | module.exports = { 6 | tabWidth: 2, 7 | semi: false, 8 | singleQuote: true, 9 | jsxSingleQuote: true, 10 | overrides: [ 11 | { 12 | files: '*.astro', 13 | options: { 14 | parser: 'astro', 15 | }, 16 | }, 17 | ], 18 | plugins: ['prettier-plugin-astro', 'prettier-plugin-tailwindcss'], 19 | } satisfies Config 20 | -------------------------------------------------------------------------------- /src/components/common/GlowText.astro: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 15 | -------------------------------------------------------------------------------- /src/pages/common/job_boards.md: -------------------------------------------------------------------------------- 1 | --- 2 | title: Job Boards (find your dream job) 3 | description: Online job boards for developers and other IT positions 4 | layout: ../../layouts/MainLayout.astro 5 | --- 6 | 7 | ## Find IT job online 8 | 9 | - [LinkedIn](https://www.linkedin.com) 10 | - [JustJoinIT](https://justjoin.it/all/javascript) 11 | - [NoFluffJobs](https://nofluffjobs.com/pl/frontend) 12 | - [FB - Praca w IT dla Stażystów i Juniorów (IT Jobs for Intern/Junior)](https://www.facebook.com/groups/1561984417428846/) 13 | -------------------------------------------------------------------------------- /src/pages/resources/_exercises/practice_css_problems.md: -------------------------------------------------------------------------------- 1 |
    2 | 3 | 4 | Practice 50+ CSS Problems from Swakpanda on twitter 5 | 6 | 7 | css exercise 1/3 8 | css exercise 2/3 9 | css exercise 3/3 10 | 11 |
    12 | -------------------------------------------------------------------------------- /.github/ISSUE_TEMPLATE/new_docs_section.md: -------------------------------------------------------------------------------- 1 | --- 2 | name: New docs 3 | about: Suggest new materials to be added to the docs. Check first if there is an issue for your topic already. 4 | title: '' 5 | labels: ['new docs'] 6 | assignees: '' 7 | --- 8 | 9 | # What you want to add to the docs 10 | 11 | > [e.g. MDN docs *here is a link*] 12 | 13 | ## Why it should be added 14 | 15 | > I used it and it's up to date and helped me grow in the web dev field 16 | > 17 | > List of arguments why: ... ... ... 18 | 19 | ## Additional information 20 | -------------------------------------------------------------------------------- /public/images/starButton/star-icon.svg: -------------------------------------------------------------------------------- 1 | star-symbol -------------------------------------------------------------------------------- /src/pages/resources/_exercises/frontend_platforms.md: -------------------------------------------------------------------------------- 1 | - [Frontend Mentor](http://frontendmentor.io/) 2 | - [devChallenges](https://devchallenges.io/) 3 | - [Frontend practice](http://frontendpractice.com/) 4 | - [iCodeThis](http://icodethis.com/) 5 | - [CSSBattle](http://cssbattle.dev/) 6 | - [Codier](http://codier.io/) 7 | - [Piccalil](http://piccalil.li/) 8 | - [Daily UI Challenges](http://dailyui.co/) 9 | - [Frontloops](http://frontloops.io/) 10 | - [100 Days CSS Challenge](http://100dayscss.com/) 11 | - [CodeMentor](http://codementor.io/projects/web) 12 | -------------------------------------------------------------------------------- /src/components/LeftSidebar/SidebarItem.astro: -------------------------------------------------------------------------------- 1 | --- 2 | const {url, isCurrentPage } = Astro.props as {url: string, isCurrentPage: boolean} 3 | --- 4 | 5 |
  • 6 | 11 | 12 | 13 |
    • -------------------------------------------------------------------------------- /E2E/DocsButton.test.ts: -------------------------------------------------------------------------------- 1 | import { expect, test } from '@playwright/test' 2 | 3 | test('homepage has title and links to intro page', async ({ page }) => { 4 | await page.goto('http://localhost:3000/') 5 | 6 | // Expect a title "to contain" a substring. 7 | await expect(page).toHaveTitle(/The best way to learn web/) 8 | 9 | // create a locator 10 | const getStarted = page.getByText(/Start learning/).first() 11 | 12 | // Click the get started link. 13 | await getStarted.click() 14 | 15 | // Expects the URL to contain intro. 16 | await expect(page).toHaveURL(/.*introduction/) 17 | }) 18 | -------------------------------------------------------------------------------- /src/components/RightSidebar/RightSidebar.astro: -------------------------------------------------------------------------------- 1 | --- 2 | import TableOfContents from './TableOfContents' 3 | import MoreMenu from './MoreMenu.astro' 4 | import type { MarkdownHeading } from 'astro' 5 | 6 | type Props = { 7 | headings: MarkdownHeading[] 8 | githubEditUrl: string 9 | } 10 | 11 | const { headings, githubEditUrl } = Astro.props as Props 12 | --- 13 | 14 | 20 | -------------------------------------------------------------------------------- /src/components/Redesign/LandingSections/Footer/ImageAttribution.astro: -------------------------------------------------------------------------------- 1 |

    Image attribution links

    2 | 20 | -------------------------------------------------------------------------------- /.github/workflows/vitest.yml: -------------------------------------------------------------------------------- 1 | name: Unit and Integration Tests 2 | 3 | on: 4 | push: 5 | branches: [main] 6 | pull_request: 7 | branches: [main] 8 | 9 | jobs: 10 | build: 11 | runs-on: ubuntu-20.04 12 | strategy: 13 | matrix: 14 | node-version: [20] 15 | steps: 16 | - uses: actions/checkout@v3 17 | - name: Use Node.js ${{ matrix.node-version }} 18 | uses: actions/setup-node@v3 19 | with: 20 | node-version: ${{ matrix.node-version }} 21 | - name: Install dependencies 22 | run: npm install 23 | - name: Run Vitest 24 | run: npm run test 25 | -------------------------------------------------------------------------------- /src/components/Redesign/LandingSections/Footer/Footer.astro: -------------------------------------------------------------------------------- 1 | --- 2 | import LandingSection from '../../LandingSection.astro' 3 | import TopFooterSection from './TopFooterSection.astro' 4 | import BottomFooterSection from './BottomFooterSection.astro' 5 | 6 | const { isDocs } = Astro.props as { isDocs?: boolean } 7 | --- 8 | 9 |
    10 | 14 |
    15 | 16 | 17 | 18 |
    19 |     20 |
    21 | -------------------------------------------------------------------------------- /src/components/Redesign/LandingSections/Footer/LinkGroup.astro: -------------------------------------------------------------------------------- 1 | --- 2 | type Link = { 3 | url: string 4 | title: string 5 | } 6 | 7 | export type LinkGroupProps = { 8 | groupName: string 9 | links: Link[] 10 | } 11 | 12 | const { groupName, links } = Astro.props as LinkGroupProps 13 | --- 14 | 15 |
    16 |

    {groupName}

    17 | 28 |
    29 | -------------------------------------------------------------------------------- /src/hooks/usePersistedState.ts: -------------------------------------------------------------------------------- 1 | import { type Dispatch, type SetStateAction, useEffect, useState } from 'react' 2 | 3 | type PersistedState = [T, Dispatch>] 4 | 5 | export const usePersistedState = ( 6 | defaultValue: StateValue, 7 | key: string, 8 | ): PersistedState => { 9 | const [value, setValue] = useState(() => { 10 | const value = window.localStorage.getItem(key) 11 | 12 | return value ? (JSON.parse(value) as StateValue) : defaultValue 13 | }) 14 | 15 | useEffect(() => { 16 | window.localStorage.setItem(key, JSON.stringify(value)) 17 | }, [key, value]) 18 | 19 | return [value, setValue] 20 | } 21 | -------------------------------------------------------------------------------- /src/components/Header/SkipToContent.astro: -------------------------------------------------------------------------------- 1 | --- 2 | type Props = {} 3 | --- 4 | 5 | 8 | 9 | 29 | -------------------------------------------------------------------------------- /.github/ISSUE_TEMPLATE/feature_request.md: -------------------------------------------------------------------------------- 1 | --- 2 | name: Feature request 3 | about: Suggest an idea for this project 4 | title: '' 5 | labels: '' 6 | assignees: '' 7 | --- 8 | 9 | **Is your feature request related to a problem? Please describe.** 10 | A clear and concise description of what the problem is. Ex. I'm always frustrated when [...] 11 | 12 | **Describe the solution you'd like** 13 | A clear and concise description of what you want to happen. 14 | 15 | **Describe alternatives you've considered** 16 | A clear and concise description of any alternative solutions or features you've considered. 17 | 18 | **Additional context** 19 | Add any other context or screenshots about the feature request here. 20 | -------------------------------------------------------------------------------- /src/components/Redesign/LandingSections/Footer/TopFooterSection.astro: -------------------------------------------------------------------------------- 1 |
    2 | 6 |
    7 |
    8 | 9 | 17 | -------------------------------------------------------------------------------- /src/hooks/usePrefersReducedMotion.ts: -------------------------------------------------------------------------------- 1 | import { useEffect, useState } from 'react' 2 | 3 | const QUERY = '(prefers-reduced-motion: reduce)' 4 | 5 | export const usePrefersReducedMotion = () => { 6 | const [prefersReducedMotion, setPrefersReducedMotion] = useState(true) 7 | useEffect(() => { 8 | const mediaQueryList = window.matchMedia(QUERY) 9 | 10 | setPrefersReducedMotion(window.matchMedia(QUERY).matches) 11 | 12 | const listener = (event: MediaQueryListEvent) => { 13 | setPrefersReducedMotion(event.matches) 14 | } 15 | mediaQueryList.addEventListener('change', listener) 16 | 17 | return () => { 18 | mediaQueryList.removeEventListener('change', listener) 19 | } 20 | }, []) 21 | 22 | return prefersReducedMotion 23 | } 24 | -------------------------------------------------------------------------------- /E2E/Articles.test.ts: -------------------------------------------------------------------------------- 1 | import { test, expect } from '@playwright/test' 2 | 3 | test.beforeEach(async ({ page }) => { 4 | await page.goto('http://localhost:3000/') 5 | 6 | const docsButton = page.getByText(/Start learning/).first() 7 | 8 | await docsButton.click() 9 | 10 | await expect(page).toHaveURL(/.*introduction/) 11 | }) 12 | 13 | test('JavaScript article is possible to reach', async ({ page }) => { 14 | const javascriptArticleLink = page.getByText(/JavaScript/).first() 15 | 16 | await javascriptArticleLink.click() 17 | 18 | await expect(page).toHaveURL(/.*javascript/) 19 | }) 20 | 21 | test('React article is possible to reach', async ({ page }) => { 22 | const reactArticleLink = page.getByText(/React/).first() 23 | 24 | await reactArticleLink.click() 25 | 26 | await expect(page).toHaveURL(/.*react/) 27 | }) 28 | -------------------------------------------------------------------------------- /src/components/Redesign/LandingPage.astro: -------------------------------------------------------------------------------- 1 | --- 2 | import LandingSection from './LandingSection.astro' 3 | 4 | import VideoEmbed from '../LandingPage/VideoEmbed/VideoEmbed.astro' 5 | import AboutUs from './LandingSections/AboutUs.astro' 6 | import Advantages from './LandingSections/Advantages.astro' 7 | import FAQ from './LandingSections/FAQ.astro' 8 | import Footer from './LandingSections/Footer/Footer.astro' 9 | import Hero from './LandingSections/Hero.astro' 10 | import ImageAttribution from './LandingSections/Footer/ImageAttribution.astro' 11 | --- 12 | 13 | 14 | 15 | 16 | 17 | 18 | 19 | 20 | 21 |
    22 | 23 |
    24 | 25 | -------------------------------------------------------------------------------- /src/pages/resources/_questions/typescript.md: -------------------------------------------------------------------------------- 1 |
    2 | Real-world TypeScript technical questions 3 | 4 | - What are differences between `type` and `interface`? 5 | - How you can validate a data structure without using the third party validation library? 6 | - Which access modifiers allow property to be accessible only within the class? 7 | - What are differences between const numbers = [1,2,3] and const numbers = [1,2,3] as const? 8 | - How to pick key from the object type? 9 | - How to exclude key from the object type? 10 | - What are differences between those syntaxes? 11 | 12 | ```typescript 13 | type Test = { 14 | a: string | undefined 15 | b?: string 16 | } 17 | ``` 18 | 19 |
    20 | 21 | - Name utility types that you know and explain what they do. 22 | 23 |
    24 | -------------------------------------------------------------------------------- /src/utils/timeSince.ts: -------------------------------------------------------------------------------- 1 | import { addPluralFormEnding } from './addPluralFormEnding' 2 | import { millisecondsToTimeUnits } from './millisecondsToTimeUnits' 3 | 4 | export const SECONDS_IN_YEAR = 31536000 5 | export const SECONDS_IN_MONTH = 2592000 6 | export const SECONDS_IN_DAY = 86400 7 | export const SECONDS_IN_HOUR = 3600 8 | 9 | export const SECONDS_IN_MINUTE: number = 60 10 | 11 | export const timeSince = (date: Date): string => { 12 | const dateDiff = +new Date() - +date 13 | 14 | const timeObj = millisecondsToTimeUnits(dateDiff) 15 | 16 | const timeToDisplay = [] 17 | for (const [key, value] of Object.entries(timeObj)) { 18 | if (timeToDisplay.length > 1) break 19 | if (value > 0) { 20 | timeToDisplay.push(`${value} ${key}${addPluralFormEnding(value)}`) 21 | } 22 | } 23 | return timeToDisplay.join(', ') 24 | } 25 | -------------------------------------------------------------------------------- /src/pages/resources/other_resources.md: -------------------------------------------------------------------------------- 1 | --- 2 | title: Other resources 3 | description: Valuable materials that you should check out 4 | layout: ../../layouts/MainLayout.astro 5 | --- 6 | 7 | ## Valuable content 8 | 9 | - [Atlassian - What is Agile?](https://www.atlassian.com/agile) 10 | - [Regex 101](https://regexlearn.com/learn/regex101) 11 | 12 | ## Valuable videos 13 | 14 | - [Fireship - Session vs Token Authentication in 100 seconds](https://www.youtube.com/watch?v=UBUNrFtufWo) 15 | - [Fireship - 100+ Computer Science Concepts Explained](https://www.youtube.com/watch?v=-uleG_Vecis) 16 | - [Web Dev Cody - What does larger scale software development look like?](https://www.youtube.com/watch?v=Dl-BdxNRUqs) 17 | - [Travis Media - 10 Udemy Courses Every Developer SHOULD Own (NOT just coding)](https://www.youtube.com/watch?v=hexfXc7-SsU) 18 | -------------------------------------------------------------------------------- /src/components/Redesign/LandingElements/DocsButton.astro: -------------------------------------------------------------------------------- 1 | --- 2 | const { href } = Astro.props as { href: string } 3 | --- 4 | 5 |
    6 |
    9 |
    10 | 18 |
    19 | -------------------------------------------------------------------------------- /src/components/Redesign/LandingSections/Footer/Socials.astro: -------------------------------------------------------------------------------- 1 | --- 2 | import { 3 | DiscordLogoIcon, 4 | GitHubLogoIcon, 5 | LinkedInLogoIcon, 6 | PlayIcon, 7 | } from '@radix-ui/react-icons' 8 | import SocialLink from './SocialLink.astro' 9 | --- 10 | 11 |
    12 |

    Social Handles

    13 |
      14 | 15 | 16 | 17 | 18 | 19 | 20 | 23 | 24 | 25 | 26 | 27 | 28 |
    29 |
    30 | -------------------------------------------------------------------------------- /src/pages/introduction.md: -------------------------------------------------------------------------------- 1 | --- 2 | title: Web development learning materials 3 | description: Welcome to bewebdev the best place to find useful knowledge about web development 4 | layout: ../layouts/MainLayout.astro 5 | --- 6 | 7 | ## Introduction 8 | 9 | **Greetings future devs and current alike!** 10 | 11 | Have you ever experienced frustration when browsing learning materials about web development? 12 | 13 | These docs are what you've been searching for! 14 | 15 | We've carefully picked materials from the internet and gathered useful knowledge, so nobody would lose time to browse between 10 years old outdated JQuery solutions on Stackoverflow. 16 | 17 | ## Contributing 18 | 19 | If you found something interesting, but it's not in the list, please open an issue or, even better, a pull request. 20 | 21 | 😊 We will be happy to check it out and add it. 22 | -------------------------------------------------------------------------------- /astro.config.mjs: -------------------------------------------------------------------------------- 1 | //@ts-check 2 | 3 | import mdx from '@astrojs/mdx' 4 | import preact from '@astrojs/preact' 5 | import react from '@astrojs/react' 6 | import compress from 'astro-compress' 7 | import { defineConfig } from 'astro/config' 8 | import sitemap from '@astrojs/sitemap' 9 | import tailwind from '@astrojs/tailwind' 10 | import { modifiedTime } from './src/utils/modifiedTime.mjs' 11 | import { filePath } from './src/utils/filePath.mjs' 12 | 13 | // https://astro.build/config 14 | export default defineConfig({ 15 | integrations: [ 16 | preact({ 17 | include: ['**/preact/*'], 18 | }), 19 | react({ 20 | include: ['**/react/*'], 21 | }), 22 | mdx(), 23 | compress(), 24 | sitemap(), 25 | tailwind(), 26 | ], 27 | markdown: { 28 | remarkPlugins: [modifiedTime, filePath], 29 | }, 30 | site: `https://bewebdev.tech/`, 31 | }) 32 | -------------------------------------------------------------------------------- /src/pages/software/development_setup.md: -------------------------------------------------------------------------------- 1 | --- 2 | title: Development setup 3 | description: Learn how to setup your development environment. How to install the necessary software, and how to configure it to work with your projects 4 | layout: ../../layouts/MainLayout.astro 5 | --- 6 | 7 | ## How to setup your development environment on a new Mac machine 8 | 9 | How to keep your Windows productivity when switching to Mac 10 | 11 | - [Overment - Apps](https://brain.overment.com/Tools/Apps.html) 12 | - [Mac keyboard shortcuts](https://support.apple.com/en-us/HT201236) 13 | - [What’s it called on my Mac](https://support.apple.com/guide/mac-help/whats-it-called-on-my-mac-cpmh0038/mac) 14 | - [Mac Setup for Web Development - ROBIN WIERUCH](https://www.robinwieruch.de/mac-setup-web-development/) 15 | - [Macmostvideo - Great youtube channel for Mac tips and tricks](https://www.youtube.com/@macmost) 16 | -------------------------------------------------------------------------------- /public/icons/hourglass.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | -------------------------------------------------------------------------------- /public/icons/school_hat.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | -------------------------------------------------------------------------------- /src/pages/index.astro: -------------------------------------------------------------------------------- 1 | --- 2 | import HeadCommon from '../components/HeadCommon.astro' 3 | 4 | import LandingPage from '../components/Redesign/LandingPage.astro' 5 | import LandingSEO from '../components/LandingPage/LandingSEO.astro' 6 | import type { Frontmatter } from '../config' 7 | import * as CONFIG from '../config' 8 | import Header from '../components/Header/Header.astro' 9 | 10 | export interface Props { 11 | frontmatter: Frontmatter 12 | canonicalUrl: URL 13 | } 14 | 15 | const frontmatter: Frontmatter = { 16 | description: '', 17 | title: 'bewebdev.tech - the best web development learning materials', 18 | layout: '', 19 | } 20 | --- 21 | 22 | 23 | 24 | 25 | 26 | 27 | {frontmatter.title ? `${frontmatter.title}` : CONFIG.SITE.title} 28 | 29 | 30 |
    31 | 32 | 33 | 34 | 35 | -------------------------------------------------------------------------------- /src/pages/technologies/redux.md: -------------------------------------------------------------------------------- 1 | --- 2 | title: Redux 3 | description: Redux learning materials. Redux toolkit, Redux with TypeScript and more! 4 | layout: ../../layouts/MainLayout.astro 5 | image: { src: /metaimages/redux.png, alt: 'redux' } 6 | --- 7 | 8 | ## Free 9 | 10 | - [Redux Toolkit Documentation](https://redux-toolkit.js.org/introduction/getting-started) 11 | - [Jack Herrington - Redux Toolkit with TypeScript](https://www.youtube.com/watch?v=eFh2Kr9hfyo) 12 | - [Learn With Jason - Let’s Learn Modern Redux! (with Mark Erikson [one of the Redux's main contributor])](https://www.youtube.com/watch?v=9zySeP5vH9c) 13 | - [Dave Gray - Redux Toolkit Tutorials Playlist](https://www.youtube.com/playlist?list=PL0Zuz27SZ-6M1J5I1w2-uZx36Qp6qhjKo) 14 | 15 | ## Additional content 16 | 17 | - [Jack Herrington - Fixing Redux/Zustand Re-renders](https://www.youtube.com/watch?v=aOt4Hz3ze3Q) 18 | - [Matt Pocock - Should you still be using Redux in 2023?](https://www.youtube.com/watch?v=czptRA4IeCc) 19 | -------------------------------------------------------------------------------- /.github/ISSUE_TEMPLATE/bug_report.md: -------------------------------------------------------------------------------- 1 | --- 2 | name: Bug report 3 | about: Create a report to help us improve 4 | title: '' 5 | labels: '' 6 | assignees: '' 7 | --- 8 | 9 | **Describe the bug** 10 | A clear and concise description of what the bug is. 11 | 12 | **To Reproduce** 13 | Steps to reproduce the behavior: 14 | 15 | 1. Go to '...' 16 | 2. Click on '....' 17 | 3. Scroll down to '....' 18 | 4. See error 19 | 20 | **Expected behavior** 21 | A clear and concise description of what you expected to happen. 22 | 23 | **Screenshots** 24 | If applicable, add screenshots to help explain your problem. 25 | 26 | **Desktop (please complete the following information):** 27 | 28 | - OS: [e.g. iOS] 29 | - Browser [e.g. chrome, safari] 30 | - Version [e.g. 22] 31 | 32 | **Smartphone (please complete the following information):** 33 | 34 | - Device: [e.g. iPhone6] 35 | - OS: [e.g. iOS8.1] 36 | - Browser [e.g. stock browser, safari] 37 | - Version [e.g. 22] 38 | 39 | **Additional context** 40 | Add any other context about the problem here. 41 | -------------------------------------------------------------------------------- /src/components/LandingPage/LandingSEO.astro: -------------------------------------------------------------------------------- 1 | --- 2 | const META_IMG_URL = 'https://bewebdev.tech/metaimage.png' 3 | const URL = 'https://bewebdev.tech/' 4 | const DESCRIPTION = 5 | 'We’ve done the work for you. We’ve collected the best resources and put them in one place.' 6 | const TITLE = 'bewebdev.tech - The best way to learn web development' 7 | --- 8 | 9 | {TITLE} 10 | 11 | 12 | 13 | 14 | 15 | 16 | 17 | 18 | 19 | 20 | 21 | 22 | 23 | 24 | -------------------------------------------------------------------------------- /E2E/StarButton.test.ts: -------------------------------------------------------------------------------- 1 | import { test, expect } from '@playwright/test' 2 | 3 | const githubRepoLink = 4 | 'https://github.com/NowYouKnowProgramming/webdev-learning-materials' 5 | 6 | test.beforeEach(async ({ page }) => { 7 | await page.goto('http://localhost:3000/') 8 | }) 9 | 10 | test('Button that is a CTA to star project is in the docs page', async ({ 11 | page, 12 | }) => { 13 | const docsButton = page.getByText(/Start learning/).first() 14 | 15 | await docsButton.click() 16 | 17 | await expect(page).toHaveURL(/.*introduction/) 18 | 19 | const starButton = page.getByRole('link', { name: /Star/ }).first() 20 | 21 | await expect(starButton).toBeVisible() 22 | await expect(starButton).toHaveAttribute('href', githubRepoLink) 23 | }) 24 | 25 | test('CTA button to star project is visible on the landing page', async ({ 26 | page, 27 | }) => { 28 | const starButtonLink = page.getByRole('link', { name: /Star \w*/ }) 29 | 30 | await expect(starButtonLink).toBeVisible() 31 | await expect(starButtonLink).toHaveAttribute('href', githubRepoLink) 32 | }) 33 | -------------------------------------------------------------------------------- /src/components/Redesign/ComparisonCard.astro: -------------------------------------------------------------------------------- 1 | --- 2 | export type ComparisonCardProps = { 3 | title: string 4 | text: string 5 | icon: string 6 | } 7 | const { title, text, icon } = Astro.props as ComparisonCardProps 8 | --- 9 | 10 |
  • 14 |
    18 |
    19 |
    22 |
    23 | 24 |
    25 |

    {title}

    26 |

    {text}

    27 |
    28 |
    • 29 | -------------------------------------------------------------------------------- /src/utils/getDateTimeComponents.ts: -------------------------------------------------------------------------------- 1 | import { 2 | SECONDS_IN_YEAR, 3 | SECONDS_IN_MONTH, 4 | SECONDS_IN_DAY, 5 | SECONDS_IN_HOUR, 6 | SECONDS_IN_MINUTE, 7 | } from './timeSince' 8 | 9 | export const getDateTimeComponents = (timestamp: number) => { 10 | const components = { 11 | year: 0, 12 | month: 0, 13 | day: 0, 14 | hour: 0, 15 | minute: 0, 16 | second: 0, 17 | } 18 | let remaining: number = timestamp 19 | 20 | components.year = Math.floor(remaining / SECONDS_IN_YEAR) 21 | remaining -= components.year * SECONDS_IN_YEAR 22 | 23 | components.month = Math.floor(remaining / SECONDS_IN_MONTH) 24 | remaining -= components.month * SECONDS_IN_MONTH 25 | 26 | components.day = Math.floor(remaining / SECONDS_IN_DAY) 27 | remaining -= components.day * SECONDS_IN_DAY 28 | 29 | components.hour = Math.floor(remaining / SECONDS_IN_HOUR) 30 | remaining -= components.hour * SECONDS_IN_HOUR 31 | 32 | components.minute = Math.floor(remaining / SECONDS_IN_MINUTE) 33 | remaining -= components.minute * SECONDS_IN_MINUTE 34 | 35 | components.second = remaining 36 | 37 | return components 38 | } 39 | -------------------------------------------------------------------------------- /.github/workflows/playwright.yml: -------------------------------------------------------------------------------- 1 | name: E2E Tests 2 | on: 3 | push: 4 | branches: [ main, master ] 5 | workflow_dispatch: 6 | 7 | jobs: 8 | test: 9 | timeout-minutes: 10 10 | runs-on: ubuntu-20.04 11 | strategy: 12 | matrix: 13 | node-version: [16] 14 | steps: 15 | - uses: actions/checkout@v3 16 | - uses: pnpm/action-setup@v2.2.4 17 | with: 18 | version: 7 19 | - name: Use Node.js ${{ matrix.node-version }} 20 | uses: actions/setup-node@v3 21 | with: 22 | node-version: ${{ matrix.node-version }} 23 | cache: 'pnpm' 24 | - name: Install dependencies 25 | run: pnpm install 26 | - name: Install Playwright Browsers 27 | run: npx playwright install --with-deps 28 | - name : Build app 29 | run: pnpm build 30 | - name: Launch app 31 | run: pnpm preview & sleep 10 && curl http://localhost:3000 && npx playwright test 32 | - uses: actions/upload-artifact@v3 33 | if: always() 34 | with: 35 | name: playwright-report 36 | path: playwright-report/ 37 | retention-days: 30 38 | -------------------------------------------------------------------------------- /src/pages/common/english.md: -------------------------------------------------------------------------------- 1 | --- 2 | title: Learn English 3 | description: English learning materials and tools 4 | layout: ../../layouts/MainLayout.astro 5 | --- 6 | 7 | ## Practice speaking in English 8 | 9 | - [Learning English community which you can speak with other members (from A1 to C2 language level)](https://discord.gg/english) 10 | - [Serenade.ai - really interesting tool to control VS Code / Chrome / etc. with English words](https://serenade.ai/) 11 | - [Italki - practice with different semi-native/native speakers](https://www.italki.com/) 12 | - [Preply - same as Italki](https://preply.com/) 13 | - [Elsa Speak - speak English and get instant feedback from AI-powered coach](https://elsaspeak.com/en/) 14 | 15 | ## Learn grammar 16 | 17 | - [Grammarly - a browser plugin to correct English grammar mistakes](https://www.grammarly.com/) 18 | 19 | ## Translators and dictionaries 20 | 21 | - [Rememberry - a Chrome plugin which translates when text is selected](https://chrome.google.com/webstore/detail/rememberry-translate-and/dipiagiiohfljcicegpgffpbnjmgjcnf) 22 | - [Diki - słownik angielsko-polski](http://diki.pl/) 23 | - [DeepL](https://www.deepl.com/pl/translator) 24 | -------------------------------------------------------------------------------- /src/components/utility/CopyCodeToClipboard/helpers.ts: -------------------------------------------------------------------------------- 1 | export const createCopyButton = () => { 2 | const button = document.createElement('button') 3 | const classes = 4 | 'px-4 py-2 text-theme-inverted bg-basetext rounded-md hover:bg-theme-base hover:text-basetext' 5 | classes.split(' ').forEach((className) => button.classList.add(className)) 6 | button.innerHTML = 'Copy' 7 | return button 8 | } 9 | 10 | export const createCopyButtonWrapper = () => { 11 | const wrapper = document.createElement('div') 12 | wrapper.classList.add('code-wrapper') 13 | return wrapper 14 | } 15 | 16 | export const handleCopyButtonClick = async ( 17 | button: HTMLButtonElement, 18 | text: string, 19 | ) => { 20 | const textsAfterClick = ['Copied', 'Error'] 21 | const currentText = button.innerText 22 | if (textsAfterClick.includes(currentText)) return 23 | 24 | try { 25 | await navigator.clipboard.writeText(text) 26 | button.innerText = 'Copied' 27 | button.classList.add('success') 28 | } catch (error) { 29 | button.innerText = 'Error' 30 | } finally { 31 | setTimeout(() => { 32 | button.classList.remove('success') 33 | button.innerText = 'Copy' 34 | }, 1000) 35 | } 36 | } 37 | -------------------------------------------------------------------------------- /src/pages/software/repository_tools.md: -------------------------------------------------------------------------------- 1 | --- 2 | title: Repository tools 3 | description: Tools for git repos. Readme generators, icons for your readme, and more 4 | layout: ../../layouts/MainLayout.astro 5 | --- 6 | 7 | Ir's important to have a good readme for your project it helps you stand out from the crowd, not only on GitHub, but also when you are applying for a job. You can use these tools to generate readme for your project, or to add some cool icons to your readme. 8 | 9 | ## Readme tools 10 | 11 | You can use these tools to generate readme for your project, or to add some cool icons to your readme. It's a good idea to have a readme for your project, because it can help other people to understand what your project is about, and how to use it. 12 | 13 | ### Readme generators 14 | 15 | - [Readme.so - generate readme for your project](https://readme.so/) 16 | 17 | ### Banners 18 | 19 | - [Stackoverflow banner](https://github.com/johannchopin/stackoverflow-readme-profile#stackoverflow-readme-profile) 20 | 21 | ### Icons 22 | 23 | - [Skill icons](https://github.com/tandpfun/skill-icons#readme) 24 | - [Minimalistic badges and banners](https://github.com/alexandresanlim/Badges4-README.md-Profile#welcome-badges-4-readmemd-profile) 25 | -------------------------------------------------------------------------------- /src/components/PageContent/PageContent.astro: -------------------------------------------------------------------------------- 1 | --- 2 | import type { Frontmatter } from '../../config' 3 | import MoreMenu from '../RightSidebar/MoreMenu.astro' 4 | import TableOfContents from '../RightSidebar/TableOfContents' 5 | import type { MarkdownHeading } from 'astro' 6 | 7 | type Props = { 8 | frontmatter: Frontmatter 9 | headings: MarkdownHeading[] 10 | githubEditUrl: string 11 | } 12 | 13 | const { frontmatter, headings, githubEditUrl } = Astro.props as Props 14 | const title = frontmatter.title 15 | --- 16 | 17 |
    18 |
    19 |

    {title}

    20 | 23 | 24 |
    25 | 28 |
    29 | 30 | 50 | -------------------------------------------------------------------------------- /src/components/Redesign/LandingSections/AboutUs.astro: -------------------------------------------------------------------------------- 1 | --- 2 | import LandingSection from '../LandingSection.astro' 3 | --- 4 | 5 |
    6 | 9 | 20 |
    21 |

    22 | What is 23 | bewebdev.tech all about? 24 |

    25 |

    26 | Introducing Bewebdev, your ultimate destination for learning web 27 | development. Why settle for scattered information when we've done the 28 | hard work for you? Discover the best resources, carefully chosen and 29 | verified, all in one convenient place. 30 |

    31 |
    32 |     33 |
    34 | -------------------------------------------------------------------------------- /public/icons/savings.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | -------------------------------------------------------------------------------- /src/pages/common/productivity.md: -------------------------------------------------------------------------------- 1 | --- 2 | title: Productivity and time management 3 | description: Videos about productivity and time management, tools for taking notes and productivity ideas 4 | layout: ../../layouts/MainLayout.astro 5 | --- 6 | 7 | ## Videos about productivity and time management 8 | 9 | ### Polish videos 10 | 11 | - [Produktywność wg CodeTwo - poznaj metody zarządzania pracą w firmie](https://youtu.be/79mlKwej_Nk) 12 | 13 | ## Brain dumps - take notes to relieve your mind 14 | 15 | Save your brain from remembering everything. Write down your thoughts and ideas. It will help you to focus on the most important things. You can use a notebook, but it is much easier to use a digital tool. 16 | 17 | I use [brain dumps](https://psychcentral.com/health/using-brain-dumping-to-manage-anxiety-and-over-thinking#definition) to save my ideas, thoughts, tasks, and other things that I want to tell myself in the next day of work. 18 | 19 | ## Productivity tools 20 | 21 | ### Project management tools 22 | 23 | - [Asana](https://asana.com/) 24 | 25 | ### Tools for taking notes 26 | 27 | - [Obsidian.md - powerful and extensible knowledge base that works on top of your local folder of plain text files](https://obsidian.md/) 28 | - [Notion - really amazing tool to make notes and organize your thoughts](https://notion.so/) 29 | -------------------------------------------------------------------------------- /src/components/utility/HeadingLinksCopyToClipboard/HeadingLinksCopyToClipboard.astro: -------------------------------------------------------------------------------- 1 | 39 | 40 | 57 | -------------------------------------------------------------------------------- /src/pages/software/other_tools.md: -------------------------------------------------------------------------------- 1 | --- 2 | title: Other tools 3 | description: Tools that can help programmers. Take notes, organize your bookmarks and more 4 | layout: ../../layouts/MainLayout.astro 5 | --- 6 | 7 | ## CSS 8 | 9 | - [animista.net - Cool genarator for CSS animations](https://animista.net/) 10 | - [easings.net - Easing functions for CSS animations](https://easings.net/) 11 | - [ui.glass - Glass ui generator](https://ui.glass/generator/) 12 | 13 | ## JavaScript 14 | 15 | - [toptal.com - Generate key codes with a key press](https://www.toptal.com/developers/keycode) 16 | 17 | ## Productivity 18 | 19 | - [Raindrop.io - manage your bookmarks way easier than you think](https://raindrop.io/) 20 | 21 | ## Diagrams 22 | 23 | - [Drawio - free app for diagrams](https://drawio-app.com/) 24 | - [Excalidraw - draw diagrams by hand fast](https://excalidraw.com/) 25 | - [Lucidchart - intelligent diagramming application](https://www.lucidchart.com/pages) 26 | 27 | ## Screenshots 28 | 29 | - [Greenshot - cool tool to make screenshot and measure pixels like on MacOS](https://getgreenshot.org/) 30 | 31 | ## Search engines 32 | 33 | - [You.com - interesting alternative to Google, which suggests code snippets, Stack Overflow answers or even YouTube videos](https://you.com/) 34 | 35 | ## Image services 36 | 37 | - [Unsplash - free for use images](https://unsplash.com/) 38 | -------------------------------------------------------------------------------- /src/components/Redesign/LandingSections/Hero.astro: -------------------------------------------------------------------------------- 1 | --- 2 | import DocsButton from '../LandingElements/DocsButton.astro' 3 | import LandingSection from '../LandingSection.astro' 4 | --- 5 | 6 | 9 |
    12 |
    13 |
    16 |
    17 |
    18 |

    19 | The best way to learn web development 20 |

    21 |

    22 | Learning resources, carefully selected, verified, up to date 23 |

    24 | Start Learning 25 |
    26 | 35 |     36 | -------------------------------------------------------------------------------- /src/components/DonationModal/DonationButton.tsx: -------------------------------------------------------------------------------- 1 | import { HeartFilledIcon } from '@radix-ui/react-icons' 2 | 3 | const GradientGlow = () => ( 4 |
    5 | ) 6 | 7 | type Props = { 8 | onClick: () => void 9 | } 10 | 11 | export const DonationButton = ({ onClick }: Props) => { 12 | return ( 13 | 28 | ) 29 | } 30 | -------------------------------------------------------------------------------- /src/components/RecommendedSections/RecommendedSections.astro: -------------------------------------------------------------------------------- 1 | --- 2 | import { SIDEBAR } from '../../config' 3 | 4 | const urls = Object.values(SIDEBAR) 5 | 6 | const currentPage = Astro.url.pathname 7 | 8 | const getThreeRandomLinks = () => { 9 | const randomLinks: { 10 | link: string 11 | text: string 12 | }[] = [] 13 | 14 | while (randomLinks.length < 3) { 15 | const randomSection = urls[Math.floor(Math.random() * urls.length)] 16 | if (!randomSection) continue 17 | const randomLink = 18 | randomSection[Math.floor(Math.random() * randomSection.length)] 19 | if ( 20 | !randomLink || 21 | '/' + randomLink.link === currentPage || 22 | randomLink.text === 'Introduction' || 23 | randomLinks.find((link) => link.text === randomLink.text) 24 | ) { 25 | continue 26 | } 27 | randomLinks.push(randomLink) 28 | } 29 | return randomLinks 30 | } 31 | 32 | const sidebarLinks = getThreeRandomLinks() 33 | --- 34 | 35 | 40 | 41 |
    42 |

    Links you might like

    43 |
      44 | { 45 | sidebarLinks.map(({ link, text }) => ( 46 |
    • 47 | 51 | {text} 52 | 53 |
      • 54 | )) 55 | } 56 |
    57 |
    58 | -------------------------------------------------------------------------------- /src/pages/resources/_exercises/css4js.md: -------------------------------------------------------------------------------- 1 | Exercises from [CSS for JavaScript Developers](https://css-for-js.dev/) - all modules: 2 | 3 | - [Huckleberry - the basics of CSS (flow layout, box model)](https://github.com/css-for-js/huckleberry) 4 | - [Character Creator - position and overflow](https://github.com/css-for-js/character-creator) 5 | - [Mini Component Library - create your own components (progress bar, select element and search input)](https://github.com/css-for-js/mini-component-library) 6 | 7 |
    8 |
    9 | How these components could look like: 10 | progress bar, select element and search input 11 |
    12 |
    13 | 14 | - [Sole and Ankle - Flexbox](https://github.com/css-for-js/sole-and-ankle) 15 | - [Sole and Ankle Revisited - responsive design](https://github.com/css-for-js/sole-and-ankle-revisited) 16 | - [Unsprinkle - typography and images](https://github.com/css-for-js/unsprinkle) 17 | 18 |
    19 |
    20 | How this page looks like: 21 | unsprinkle page 22 |
    23 |
    24 | 25 | - [New Grid Times - CSS Grid Layout](https://github.com/css-for-js/new-grid-times) - [Design for this exercise](https://www.figma.com/file/BDdNhCeVLye5mFHHxQhkgE/New-Grid-Times?node-id=0%3A1) 26 | - [Sole and Ankle Animated - animations](https://github.com/css-for-js/sole-and-ankle-animated) 27 | -------------------------------------------------------------------------------- /src/components/Redesign/LandingSections/Footer/BottomFooterSection.astro: -------------------------------------------------------------------------------- 1 | --- 2 | import type { LinkGroupProps } from './LinkGroup.astro' 3 | import LinkGroup from './LinkGroup.astro' 4 | import Socials from './Socials.astro' 5 | const links: LinkGroupProps[] = [ 6 | { 7 | groupName: 'Quick Links', 8 | links: [ 9 | { 10 | title: 'Home', 11 | url: '/', 12 | }, 13 | { 14 | title: 'About us', 15 | url: '/#about-us', 16 | }, 17 | { 18 | title: 'YouTube', 19 | url: 'https://www.youtube.com/@bewebdev?sub_confirmation=1', 20 | }, 21 | { 22 | title: 'FAQ', 23 | url: '/#faq', 24 | }, 25 | ], 26 | }, 27 | { 28 | groupName: 'Learn', 29 | links: [ 30 | { 31 | title: 'Get started', 32 | url: '/introduction', 33 | }, 34 | { 35 | title: 'React', 36 | url: '/technologies/react', 37 | }, 38 | { 39 | title: 'JavaScript', 40 | url: '/technologies/javascript', 41 | }, 42 | { 43 | title: 'HTML', 44 | url: '/technologies/html', 45 | }, 46 | ], 47 | }, 48 | { 49 | groupName: 'Support', 50 | links: [ 51 | { 52 | title: 'Report a bug', 53 | url: 'https://github.com/NowYouKnowProgramming/webdev-learning-materials/issues/new/', 54 | }, 55 | ], 56 | }, 57 | ] 58 | --- 59 | 60 |
    63 |
    64 | {links.map((link) => )} 65 |
    66 | 67 |
    68 | -------------------------------------------------------------------------------- /src/pages/technologies/nextjs.md: -------------------------------------------------------------------------------- 1 | --- 2 | title: Next.js 3 | description: Useful materials about Next.js, how to migrate from CRA? Free and paid Next.js courses 4 | layout: ../../layouts/MainLayout.astro 5 | image: { src: /metaimages/nextjs.png, alt: 'nextjs' } 6 | --- 7 | 8 | ## Free 9 | 10 | - [Next.js docs](https://nextjs.org/docs) 11 | - [Web Dev Simplified - Learn Next 13 in 30 Minutes](https://www.youtube.com/watch?v=NgayZAuTgwM) 12 | - [Josh tries coding - Master NextJS 13: Build and Deploy a Modern Full-Stack App in Just 5 Hours!](https://www.youtube.com/watch?v=4lUkSgvmTYM) 13 | 14 | ## Paid 15 | 16 | - [Academind - Next.js & React - The Complete Guide (incl. Two Paths!)](https://www.udemy.com/share/104cpi3@Oh4oUEJs8F2B6c3t54xvmnsosIt7uQiy_K1OtotWexANxEsNy_pYzliqECIW0dgGgg==/) 17 | 18 | ## Additional content 19 | 20 | - [Web Dev Cody - Keep your next.js routes cleaner by grouping them](https://www.youtube.com/shorts/YCovzYOoVJA) 21 | - [Migrating from create react app](https://nextjs.org/docs/migrating/from-create-react-app) 22 | - [FAQ](https://nextjs.org/docs/faq) 23 | - [uidotdev - The Story of Next.js](https://www.youtube.com/watch?v=BILxV_vrZO0) 24 | - [Josh tries coding - This Open-Source NextJS Project is a Game-Changer (perfect to learning)](https://www.youtube.com/watch?v=elvwguckWjQ) 25 | 26 | ### Rendering in NextJs 27 | 28 | - [What is Rendering? - Docs](https://nextjs.org/learn/foundations/how-nextjs-works/rendering) 29 | - [SSR vs. SSG vs. ISR vs. CSR - YouTube](https://www.youtube.com/watch?v=mWytwmxLKmo) 30 | -------------------------------------------------------------------------------- /src/pages/404.astro: -------------------------------------------------------------------------------- 1 | --- 2 | import HeadCommon from '../components/HeadCommon.astro' 3 | import Header from '../components/Header/Header.astro' 4 | import DocsButton from '../components/Redesign/LandingElements/DocsButton.astro' 5 | import Footer from '../components/Redesign/LandingSections/Footer/Footer.astro' 6 | import type { Frontmatter } from '../config' 7 | 8 | const frontmatter: Frontmatter = { 9 | description: '', 10 | title: '404 - Page not found | bewebdev.tech', 11 | layout: '', 12 | } 13 | 14 | const currentPage = Astro.url.pathname 15 | --- 16 | 17 | 18 | 19 | 20 | 21 | 22 | {frontmatter.title} 23 | 24 | 25 |
    26 |
    27 |
    28 |

    This page doesn't exist

    29 |
    30 |
    31 | 32 |
    33 | 34 | Go back to main page 35 | 36 |
    37 |