Skip to content
OverviewSolutions
8
Comments
4
Josep Ocaña
@Josep-Ocana

All comments

  • Saivon Schenck•60
    @9rot353Submitted 7 months ago
    What are you most proud of, and what would you do differently next time?

    I'm proud of my ability to replicate everything smoothly with ease..

    What challenges did you encounter, and how did you overcome them?

    I got tripped up when I had to add the font onto the page. Honestly still now completely sure that I did it right. The other thing was the media query for the mobile and desktop screen size. media Quieriy is so confusing to me, but I am proud that I figured out how to make the image adjustable and remembered why it can be helpful to use percentages instead of px definitions for widths and heights.

    What specific areas of your project would you like help with?

    The Media Queries. I'm not sure I did it right. If someone can let me know if I did the font correctly that would also be great.

    Blog Preview Card

    1
    Josep Ocaña•110
    @Josep-OcanaPosted 7 months ago

    Hi Saivon! I like your project really much!! 😃

    In your media query you've wrote:

    -(max-width: 375px) : your page changes when the screen is 375px.

    -You should set (max-width <= 375px) or with the new syntax: (max <=375px): your page will change with your screen width will be 375px or less.

    so your media querie will work perfectly!

    0
  • Cryptoguy5•30
    @Cryptoguy5Submitted 7 months ago
    What are you most proud of, and what would you do differently next time?

    I am most proud that I was able to install all of the functionality that I wanted to add to this project including adding functionality to both the enter button and spacebar.

    The thing that I would do differently is that I would make sure to add a keyindex attribute at the beginning of the coding process to make sure that the app is accessible to everyone.

    What challenges did you encounter, and how did you overcome them?

    I encountered quite a bit of difficulty getting responsiveness from the buttons. The way that I solved it was trying to get a response of any kind from the app, and then worked to get it closer and closer to my desired action.

    I also struggled to add keyboard functionality to the app as I had never done that in a project before. That challenge was overcome by doing a lot of research and trial and error.

    What specific areas of your project would you like help with?

    I was not able to get the min-height and max-height properties of the page to work properly. I wanted the page to expand if the user opened all of paragraphs at once, but I was not able to do this, so I just created a single set size that would work decently no matter what the FAQ height is.

    Is there a way that I could get the page size to expand with the div of the FAQ? How would I do this?

    FAQ-accordion-solution

    2
    Josep Ocaña•110
    @Josep-OcanaPosted 7 months ago

    Hi Cryptoguy5!! I like your project !!😊

    If you want to expand your div.faq you can add this property:

    margin: (distance that you want in rem,px...etc.) auto;

    So when you'll expand your accordion, it'll expand to down. And with auto your div.faq will be in center of your page horizontally.

    Marked as helpful
    0
  • tediko•6,680
    @tedikoSubmitted 7 months ago
    What 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 new HTMLImageElement instance with Image() 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 set prefers-reduced-motion. Learned how to share variables between JavaScript and Sass since I needed to use media query breakpoint variable value for matchMedia but 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 :export directive 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: sticky and 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-motion is 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!

    Space tourism website with parallax effect using GSAP, Vite, Sass, BEM

    8
    Josep Ocaña•110
    @Josep-OcanaPosted 7 months ago

    Awesome!! It's an excellent project!! 👌

    2
  • Josep Ocaña•110
    @Josep-OcanaPosted 7 months ago

    Impressive! I love your design... It's perfect!

    Next time I'll try to do the same with photoshop because I have the same problem that Muhammad with the sizes.

    1