All solutions

I developed this project using SvelteKit with TypeScript. The site hosts two main pages which are SSR using the server pages. Here's a key dossier for the project

UI

• Tailwind CSS for styling
• Iconify for icons

UX

• Svelte with SSR
• Svelte transitions

Testing

• vitest
• testing-library/svelte

Dev

• prettier for formatting
• eslint for linting code
• git for version control
• github as code repository
• netlify as hosting provider

Have a look at the project and comment your feedback (if any).

Happy Coding 😃

This is my solution to the challenge. Since, it was a relatively easy challenge - I chose not write/run unit/integration tests for the project. Here's the information about the project

Tech stack

• Svelte - UI framework
• TypeScript - programming language
• Tailwind - styling library
• Vite - build tool
• Joi - validation library
• Dayjs - date-time library

Tools used

• VS Code editor
• Chrome dev tools
• Google Fonts CDN
• Git as VSC
• Github as code repo
• Netlify to deploy the project

If you find any bugs/glitches please leave a feedback. Any suggestions regarding the code structure, logic etc are appreciated 😊

This is my solution to the Ping Landing page challenge. The project was relatively simple, so I preferred to work with vanilla JS instead of a front-end framework.

Along with implementing the design and functionalities defined in the style-guide and README, if the user provides a valid email and clicks the notify me button, a success modal pops up which can be closed.

Instead of using CSS classes for most of the styling, I chose to work with semantic HTML5 elements and nested children using the parent selectors.

Tech stack

• HTML5 - mark up
• SCSS - css preprocessor
• JavaScript - ESNext

Tools used

• VS Code - code editor
• Live SASS compiler - conver scss to css
• Live server - development mock server
• Git - version control
• Github - repo + deployment
• Firefox - browser

Please checkout my code, any review/suggestion/feedback is welcome. Happy coding :)

This is my solution to the interactive card details form. Even though this was a junior problem, running unit tests made the project duration lengthier.

Tech stack

1. React - UI library
2. Tailwind - Styling library
3. TypeScript - type checking and safety
4. Zod - validation library
5. Vitest - testing library
6. FontSource - font library

Tools used

• Git - SVN
• Vite - build tool
• GitHub - code repository
• Netlify - deloyment
• Chrome + Firefox - manual testing
• VS Code - code editor

Any feedback/suggestion is welcome. Happy coding :)

This is my solution to the social proof section challenge. In the development phase, I used the VS Code SCSS compiler extension to compile scss to css. However, doing so led me to a weird bug - the absolute path to the images in the compiled css files were not referring to the assets when deployed to GitHub pages. I tried using absolute as well as relative paths to the assets but the problem wasn't resolved. I had to manually update the compiled css file to access the assets. If you have any suggestions on this issue - please let me know. Here's the info on the project

Tech Stack

1. Semantic HTML5 for markup
2. SCSS as CSS preprocessor

Tools used

1. VS Code - code editor
2. VS Code SASS compiler - extension
3. Git - SVN
4. GitHub - code repo
5. GitHub Pages - deployment

Please feel free to leave behind your valuable feedback and suggestions. Happy coding :)

This is my solution to the newbie challenge Order Summary Component. Since it was a fairly easy layout, I decided to use vanilla CSS instead of a preprocessor or a library.

Tech Stack

• Semantic HTML 5
• CSS3

Tools used

• VS Code - editor
• Firefox - browser + dev tools
• Git - SVN
• GitHub - Code repo
• GitHub Pages - deployment

Any suggestions/feedback/tips is welcome :)

This is my solution to stats preview card component. I used only HTML and SCSS to code the UI. Please checkout my code and the preview - any feedback/suggestion is welcome. Happy coding :)

This is my attempt to solve the Testimonials grid section challenge. Along with the design provided, I implemented a different layout for tablets screens.

Tech Stack

1. HTML5
2. SCSS

Tools used

1. VS Code - editor
2. Git - SVN
3. GitHub - code repo
4. GitHub pages - deployment

Please check out my solution - all feedback/suggestions/tips are appreciated. Happy coding :)

This is my solution to the Time tracking dashboard challenge. Even though the app was fairly simple and mostly needed CSS for layout - I chose to code the entire app using Svelte. Instead of using HTML to render the cards manually, I decided to use the data.json to render the entire UI.

Tech Stack

1. Svelte.js as UI framework
2. Tailwind CSS as styling library
3. TypeScript for type-safety
4. Vitest, STL for testing the library
5. FontSource library for external fonts

Tools used

1. VS Code as code editor
2. Svelte extension for VS Code
3. Firefox and Chrome browser/dev tools
4. Git as SVN
5. GitHub as code repository
6. Netlify for deployment

Check out my solution. Any feedback/suggestion is appreciated :)

Hi. This is my solution to the Interactive Rating Component challenge. The key features/tech specs are listed below -

• Svelte with TypeScript for coding the UI
• Vanilla CSS for designing
• Mobile First approach in developing the responsive layout
• Vite as build tool
• Vitest, Svelte-Testing-Library for integration testing the app

Tools

1. VS Code as code-editor
2. VS Code Svelte syntax highlighter
3. Firefox developer console
4. Git as SVN
5. GitHub as code repo
6. Netlify for deploying the project

Please feel free to leave behind your valuable feedback. Happy coding :)

Hi, this is my solution to the four card feature section challenge. Even though I thought the challenge would be easy to complete, I eventually had to use CSS positions to display the items in the desired grid.

Tech stack

1. Semantic HTML5 for markup
2. SCSS for styling
3. BEM naming convention
4. Mobile first development
5. Responsive web design

Tools used

1. VS Code as code editor
2. VS Code SASS compiler extension
3. VS Code Live server extension
4. Firefox browser dev tools

Please check out my solution and leave your suggestions/feedback. Happy coding :)

This is my attempt of coding the UI for the chat app. Without the Figma files, the padding, margin and font sizes are calculated by trial and error.

Features

1. Responsive web layout
2. BEM CSS class naming convention
3. SCSS for styling
4. JavaScript for initial animations
5. Semantic HTML5 for markup

Tools used to code

1. VS Code
2. Chrome and Firefox browsers
3. Chrome Lighthouse for reporting
4. SCSS Live compiler
5. Git and GitHub

Any suggestion, recommendation or feedback is highly appreciated. Happy coding :)

The challenge was solved using HTML5 and SCSS. I used the sass package from npm to style the UI instead of using vanilla CSS.

The SCSS was written using BEM naming convention and the UI was developed with mobile first approach. Since the app was small in size, the usage of partials were avoided and only one mixin was used.

Feel free to leave your valuable feedback. :)

Check out my solution using HTML and vanilla CSS. Feel free to leave a feedback :)

This is my solution to Advice-generator app. The tech stack used in this project are as follows:

• React for UI-UX and logic
• Tailwind CSS for styling
• TypeScript for type checking
• Vite as build-tool
• Vitest and React Testing Library for unit testing the app

The app was built with mobile first approach in mind.

In addition to the challenge, I've also implemented the following -

1. Welcome screen - for users visiting the app for the first time
2. Load Screen - a placeholder message displayed when the user clicks the button and the advice is being generated
3. Error screen - if the server is down or some other error props up in production

Please check out my solution as well as code. Feel free to leave your valuable feedback. Happy coding 👨🏾‍💻

Mobile first responsive landing page for EasyBank made with HTML, CSS and JavaScript. Please feel free to leave your feedback :)

Hope you like it :)

Here's my version of Rock-Paper-Scissors and Rock-Paper-Scissors-Lizard-Spock using HTML, CSS and TypeScript. Hope you enjoy it!

Any feedback is welcome :)

Even though the primary specs suggested the usage of JavaScript for nav-menu toggling, I followed the secondary spec of using CSS to do the same.

Please provide feedback so that I can improve the quality of my work.

Hope you like the result. Pls let me know if you have any suggestions.. Thanks :)

Hope you like it :)

Please check out my solution to the challenge and provide feedback for the same :)