P
Francis7575• 650
@Francis7575
Submitted
Mazhar1857
@Mazhar1857
All comments
- Mazhar1857• 340
@Mazhar1857
Posted
Beautiful..
0 What are you most proud of, and what would you do differently next time?
Made with:
- HTML 🦴
- CSS 🎨
- JS 🤖
- used jQuery library 📘
- mobile-first workflow 📲📲
What specific areas of your project would you like help with?
if you notice anything or have suggestions, you know what to do 👇👇
Mazhar1857• 340@Mazhar1857
Posted
Awesome..
1What are you most proud of, and what would you do differently next time?
Made with:
- HTML 🦴
- CSS 🎨
- JS 🤖
- used jQuery, gsap libraries 📚📚
- used preferred-color-scheme
- mobile-first workflow 📲
- smooth scrolling provided by lenis
- clicking the synonyms will refetch the data with the synonym
- also implemented a scroll-to-top method when the synonyms are clicked
- time to build: about 5hrs
What specific areas of your project would you like help with?
If you notice any bugs you know what to do 👇👇
Mazhar1857• 340@Mazhar1857
Posted
After selecting an option from the dropdown menu or clicking outside of it, the dropdown should close. Additionally, the dropdown should open when you click the arrow button. The keyboard's enter button is not working; this means that typing something into the search bar and pressing enter should generate results. You should use the Figma file to obtain more accurate design dimensions. It will look better
Marked as helpful
0What challenges did you encounter, and how did you overcome them?
Hello! 👋
That was another entertaining challenge in which I learned a lot of new things! Right from the start I decided it would be a great idea to use GSAP library to create a parallax effect for sections, rather than creating subpages. Each section has tabs through which user can display new content. New content is dynamically added in JavaScript so I needed find a way to prevent images from loading each time tab has changed. For this purpose I used the Intersection Observer API which helps me detect visibility of a section that appears in the user's viewport. When this happens the
preloadImages()function is called and creates newHTMLImageElementinstance withImage()constructor to which I attach the src of each image from the section. In the "crew" and "technology" sections, the user can change tabs and content by moving the mouse/touch horizontally. Since the page has a lot of animations ScrollTrigger animations using GSAP are disabled for users who have setprefers-reduced-motion. Learned how to share variables between JavaScript and Sass since I needed to use media query breakpoint variable value formatchMediabut I didn't want to do it with copy and paste. I found a way to synchronize my css and js so that my CSS is the source of truth and share values with JavaScript. I used CSS Modules for this purpose. CSS Modules with ICSS specification introduces the:exportdirective to act as a way to export defined values. Coupled with Sass variables, it allows you to export them.🐞Bugs:
- Unfortunately, when creating the effect of moving sections using
position: stickyand GSAP, there are several bugs that I cannot eliminate at the moment. When a user uses the keyboard to navigate a page, the viewport often does not show the active element. The second mistake is responsiveness. On some small screens (in terms of height), sections are cropped and navigation does not lead to the appropriate section. If I find a way to eliminate these bugs and maintain the animations, I will update the project but for now I'm satisfied with how it looks and what I achieve creating this.
💡Here's some new things I used or learned:
- Share variables between JS and Sass - A way to synchronize CSS and JavaScript so that CSS is the source of truth and share values/variables with JavaScript.
- Intersection Observer API - Intersection Observer API provides a way to asynchronously observe changes in the intersection of a target element with an ancestor element or with a top-level document's viewport.
- preload images in JS - Preload lets you tell the browser about critical resources that you want to load.
- prefers-reduced-motion - The
prefers-reduced-motionis used to detect if a user has enabled a setting on their device to minimize the amount of non-essential motion. The setting is used to convey to the browser on the device that the user prefers an interface that removes, reduces, or replaces motion-based animations.
🛠️Build with: (can be found also in my others projects)
- GSAP library - GSAP is a JavaScript library for building high-performance animations that work in every major browser.
- Vite - Vite is a build tool that aims to provide a faster and leaner development experience for modern web projects. It consists of two major parts: a dev server, and build command that bundles your code with Rollup.
- Sass CSS pre-processor. Sass is a stylesheet language that’s compiled to CSS. It allows to use variables, nested rules, mixins, functions, and more, all with a fully CSS-compatible syntax. Sass helps keep large stylesheets well-organized and makes it easy to share design within and across projects.
- BEM - Block, Element, Modifier methodology, which is a popular naming convention for classes in HTML and CSS. BEM is useful when it comes to larger, more complex projects when code organization becomes crucial. The idea behind it is to speed up the development process, and ease the teamwork of developers by arranging CSS classes into independent modules.
❓Questions:
- Any suggestions on how I can improve are welcome!
Mazhar1857• 340@Mazhar1857
Posted
The responsiveness of your application is not good. I have a 15-inch desktop, and your application is not fully visible; some parts get cropped. However, when I open it in inspection mode, it looks great.
1- Unfortunately, when creating the effect of moving sections using
- Gift Amachree• 870
@jen67
Submitted
I've just wrapped up this project, and I must say, your insights and contributions are truly invaluable.
Mazhar1857• 340@Mazhar1857
Posted
In your age calculation, it would be great if you could include day validation for months with 30 or 31 days, as well as validate February month for leap years.
Marked as helpful
0 - Cheosphere• 1,040
@Cheosphere
Submitted
...made with a lot of love 🤘🏻🙂
Mazhar1857• 340@Mazhar1857
Posted
This is truly awesome!
0 What are you most proud of, and what would you do differently next time?
Hi here is my solution for "Intro-component-with-sign-up-form". I used HTML, CSS, Flex, Grid, Mobile-first, JS.
What challenges did you encounter, and how did you overcome them?
To validate different `` independently and display an error message for each of them.
What specific areas of your project would you like help with?
I used a listener on the `` with submit and play with
display: inlineto display the error message. I used!myForm[i].validity.validto validate.Thanks to leave any comment if you see something I can do better.
Mazhar1857• 340@Mazhar1857
Posted
You should decrease the size of the media query for the mobile view. When I open it on my laptop, it shows the mobile layout instead of the desktop layout. However, when I inspect it and manually increase the width, the desktop version appears. For reference, I have a 15-inch display with a 720p resolution.
Marked as helpful
1- Tksmith• 210
@Tksmith-guru
Submitted
Mazhar1857• 340@Mazhar1857
Posted
You should change the value in your media query; it's not working properly when I inspect it
0 @Cristiano-Miguel-DCodeMaster
Submitted
What are you most proud of, and what would you do differently next time?
I'm proud of being able to fetch data JSON with JavaScript with no fear.
What challenges did you encounter, and how did you overcome them?
The real challenge was to bring the data JSON in a dynamic way
Mazhar1857• 340@Mazhar1857
Posted
use aspect-ratio: 1, border-radius: 100vmax, and adjusting the width as needed, you will get perfect circular-shaped border in every layouts.
Marked as helpful
1- keltiek• 210
@keltiek
Submitted
What are you most proud of, and what would you do differently next time?
The result looks quite good. I used only Tailwind CSS without JS to do the accordion and relied on and .
What challenges did you encounter, and how did you overcome them?
I wasn't sure if I could achieve this without Javascript, but it seems possible after all ;)
What specific areas of your project would you like help with?
I used grid to display all the questions/answers. I wanted to rely on md:max-w-[524px] but with that there was a slight change in width when I unfolded the answer. I couldn't find a solution and I used a fixed value in the end (md:w-[524px]). Is there a way to avoid this resizing?
Also I tried to apply some animation when the answer appears but I was unable to get it working. And I don't know why :(
I tried things like: transition duration-300 group-open:opacity-100 opacity-0 on the paragraph of the answer, but no visible animation...
I tested with hover: instead of group-open: and then I can see the animation. group-open: is fullfilled (opacity is set to 100 when paragraph is visible...). Maybe I'm missing something obvious.
Mazhar1857• 340@Mazhar1857
Posted
Looking awesome! The only thing that's missing is the transition part. Once that's added, it will be perfect.
0 - Cheosphere• 1,040
@Cheosphere
Submitted
...made with a lot of love 🤘🏻🙂
Mazhar1857• 340@Mazhar1857
Posted
I'm facing an issue with the social-link-profile webpage, which I've noticed is also occurring on your page. When inspecting the live URL and setting responsive dimensions for mobile, such as choosing iPhone 12 Pro and rotating it into landscape mode, there are problems that occur when scrolling down, i have added some border for more visibility in my project. i will be very thank full if you help me out. i am using google chorme.
Marked as helpful
1 - Qumrran• 370
@qumrran
Submitted
What are you most proud of, and what would you do differently next time?
I've nicely practiced rendering components using map based on the object with descriptions that I created first. The next small issue turned out to be styling the numbers in an ordered list, a quick Google search brought results
Mazhar1857• 340@Mazhar1857
Posted
Your code looks awesome! For your web application, consider giving it the title 'Recipe Page' instead of 'React App'
0
