From 158f41f2203d02a7c24c09a508b5ae7db16828c7 Mon Sep 17 00:00:00 2001 From: Kamran Ahmed Date: Tue, 20 Aug 2024 15:55:39 +0100 Subject: [PATCH] Update UI for frontend courses page --- src/components/courses/CourseStep.astro | 37 ++++++----- src/components/courses/Milestone.astro | 29 +++++++++ src/data/projects/number-guessing-game.md | 76 +++++++++++++++++++++++ src/pages/[roadmapId]/courses.astro | 31 +++++++-- 4 files changed, 154 insertions(+), 19 deletions(-) create mode 100644 src/components/courses/Milestone.astro create mode 100644 src/data/projects/number-guessing-game.md diff --git a/src/components/courses/CourseStep.astro b/src/components/courses/CourseStep.astro index 24aaf95ed..cbe947e4f 100644 --- a/src/components/courses/CourseStep.astro +++ b/src/components/courses/CourseStep.astro @@ -1,17 +1,21 @@ +--- +import { Swords } from 'lucide-react'; +--- +
-

- - Learn the absolute basics i.e. HTML and CSS - -

+

+ Step 1 — Learn the absolute basics i.e. HTML and CSS +

+

- Purchase and watch one of the following premium coursespremium courses

@@ -20,7 +24,7 @@
  • Course @@ -33,7 +37,7 @@
  • Course @@ -54,23 +58,26 @@
    + Build a login page for a website. + Create a landing page for an e-commerce website. + Create a responsive website for a restaurant.
    diff --git a/src/components/courses/Milestone.astro b/src/components/courses/Milestone.astro new file mode 100644 index 000000000..14a2eae25 --- /dev/null +++ b/src/components/courses/Milestone.astro @@ -0,0 +1,29 @@ +--- +import { Flag } from 'lucide-react'; +--- + +
    +

    + + + + + + You are ready to apply for jobs + +

    + +

    + At this point, you should have a solid understanding of basic front-end development concepts and be able to build simple websites. Start applying for jobs, while continuing to learn and improve your skills. +

    + +

    + You might have a difficult time finding a job at this stage, but don't get discouraged. Keep applying and improving your skills. You can also consider contributing to open-source projects to gain experience and build your portfolio. +

    +
    diff --git a/src/data/projects/number-guessing-game.md b/src/data/projects/number-guessing-game.md new file mode 100644 index 000000000..752d6b2f9 --- /dev/null +++ b/src/data/projects/number-guessing-game.md @@ -0,0 +1,76 @@ +--- +title: 'Number Guessing Game' +description: 'Build a simple number guessing game to test your luck.' +isNew: false +sort: 4 +difficulty: 'beginner' +nature: 'CLI' +skills: + - 'Programming Language' + - 'CLI' + - 'Logic Building' +seo: + title: 'Number Guessing Game Project Idea' + description: 'Build a simple number guessing game to test your luck.' + keywords: + - 'number guessing game' + - 'backend project idea' +roadmapIds: + - 'backend' + - 'nodejs' + - 'python' + - 'java' + - 'golang' + - 'spring-boot' +--- + +You are required to build a simple number guessing game where the computer randomly selects a number and the user has to guess it. The user will be given a limited number of chances to guess the number. If the user guesses the number correctly, the game will end, and the user will win. Otherwise, the game will continue until the user runs out of chances. + +## Requirements + +It is a CLI-based game, so you need to use the command line to interact with the game. The game should work as follows: + +- When the game starts, it should display a welcome message along with the rules of the game. +- The computer should randomly select a number between 1 and 100. +- User should select the difficulty level (easy, medium, hard) which will determine the number of chances they get to guess the number. +- The user should be able to enter their guess. +- If the user's guess is correct, the game should display a congratulatory message along with the number of attempts it took to guess the number. +- If the user's guess is incorrect, the game should display a message indicating whether the number is greater or less than the user's guess. +- The game should end when the user guesses the correct number or runs out of chances. + +Here is a sample output of the game: + +```plaintext +Welcome to the Number Guessing Game! +I'm thinking of a number between 1 and 100. +You have 5 chances to guess the correct number. + +Please select the difficulty level: +1. Easy (10 chances) +2. Medium (5 chances) +3. Hard (3 chances) + +Enter your choice: 2 + +Great! You have selected the Medium difficulty level. +Let's start the game! + +Enter your guess: 50 +Incorrect! The number is less than 50. + +Enter your guess: 25 +Incorrect! The number is greater than 25. + +Enter your guess: 35 +Incorrect! The number is less than 35. + +Enter your guess: 30 +Congratulations! You guessed the correct number in 4 attempts. +``` + +To make the game more interesting, you can add the following features: + +- Allow the user to play multiple rounds of the game (i.e., keep playing until the user decides to quit). You can do this by asking the user if they want to play again after each round. +- Add a timer to see how long it takes the user to guess the number. +- Implement a hint system that provides clues to the user if they are stuck. +- Keep track of the user's high score (i.e., the fewest number of attempts it took to guess the number under a specific difficulty level). diff --git a/src/pages/[roadmapId]/courses.astro b/src/pages/[roadmapId]/courses.astro index a3c2b9b14..a1726b405 100644 --- a/src/pages/[roadmapId]/courses.astro +++ b/src/pages/[roadmapId]/courses.astro @@ -21,7 +21,8 @@ import RoadmapNote from '../../components/RoadmapNote.astro'; import { RoadmapTitleQuestion } from '../../components/RoadmapTitleQuestion'; import ResourceProgressStats from '../../components/ResourceProgressStats.astro'; import AstroIcon from '../../components/AstroIcon.astro'; -import CourseStep from "../../components/courses/CourseStep.astro"; +import CourseStep from '../../components/courses/CourseStep.astro'; +import Milestone from '../../components/courses/Milestone.astro'; export async function getStaticPaths() { const roadmapIds = await getRoadmapIds(); @@ -93,14 +94,36 @@ const seoDescription = `Seeking ${nounTitle.toLowerCase()} courses to enhance yo
    - +
    +

    + Frontend development is a vast field with a lot of tools and + technologies. We have the frontend roadmap + which is filled with a lot of free and good resources to help you learn. But sometimes it helps to have a minimalistic list of courses + and project recommendations to help you get started. +

    + +

    + Below are some of the best courses (paid) and projects to help you learn frontend development. These are handpicked and are a great way to get started. +

    + +

    + Please note that these are paid courses curated from external platforms. We earn a small commission if you purchase the course using the links below. This helps us maintain the website and keep it free for everyone. +

    + +

    + If you are looking for free resources, you can check out the frontend roadmap. Also, we have a list of projects that you can work on to enhance your skills. +

    +
    + -
    +
    -
    +
    + +