I am a passionate Frontend Developer based in London with extensive experience creating efficient and scalable applications that enhance user experience and drive business growth. My technical expertise includes HTML, CSS, JavaScript, React.js, Next.js, TypeScript, Ethers.js, Solidity, C#, Chai.
I’m currently learning...Blockchain Development and Backend Web Development using Node.js, C#
Latest solutions
Audiophile Store with React, Next.js, Typescript, & Styled Components
#next#react#styled-components#typescript#accessibilitySubmitted over 3 years agoLanding Page using React & Styled Components
#accessibility#styled-components#reactSubmitted over 3 years ago
Latest comments
- @log-bait@folathecoder
Hi Pal! 😎
Congrats on attempting another cool challenge. Kudos!!
There are some important features you forgot to implement:
1.) Drag and Drop functionality => A user should be able to re-arrange the list. 2.) localStorage => You did not store the current state of the app locally, this is why the inputs and theme settings clears when the app is refreshed. 3.) Theme Switch Implementation => You can easily make use of CSS to perform the theme switch by defining all the color variables under a class name and simply toggling the class on and off, instead of writing your code in JavaScript. 4.) The "TODO" logo can be implemented using letter-spacing in css. You don't need to literally space the text like you did on line 22 of your index.html => "T O D O"
Overall, good job! 👌 Keep it up!
Marked as helpful - @folathecoder@folathecoder
Note: The library I used to implement the drag and drop functionality really messed with the accessibility and markup performance. (React Beautiful DND Library)!!!
- @zineb-Bou@folathecoder
Hey Great job!
Learn more about localStorage. With localStorage a user will be able to set a default theme instead of the theme switching back on reload.
- @ApplePieGiraffe@folathecoder
Hi APG!
I want to be like you when I grow up! 😀 This is awesome and very sleek. Keep it up! - @raybags-web-dev@folathecoder
Hi Pal! I don't think the multiplication works. I tried it few times. Kindly check it out! Great work! 👍
- @kyle4real@folathecoder
Hi @kyle4real!
I think you really nailed most part of the implementation. Although, there are some small, but noticeable features you can adjust:
- The image assets you used for the mobile view are the desktop versions. In the images folder two different image designs were provided for each screen size. You can switch them using media queries.
- You forgot to make the footer menu "clickable links". Try wrapping them with an a tag.
- The SVG background in the "State of the Art Infrastructure" is not aligned properly on mobile. You might want to adjust this using media queries. Although, your implementations don't have to be pixel perfect, but features like that seem aesthetically important.
- If you try viewing the page on very large screen sizes like 5000px, you will notice that the page is not responsive. You can solve this by wrapping and centering the main content of the page.
- Also, whenever you submit your work, try clearing all the HTML and Accessibility errors on the page by clicking on "View Report".
Overall, you did a really cool job. I love the mobile menu drop-down and sleek finish.
Keep coding! 😎