P

Emmilie Estabillo

@emestabillo@Em
New Jersey
5,180Points

Hi there 🙋🏻‍♀️ I’m a UI developer specializing on CSS and React 🇵🇭🇺🇸

I’m currently learning...

React • a11y

Latest Solutions

  • Desktop design screenshot for the Planets fact site coding challenge

    Planets site with Next.js and styled components

    #accessibility#styled-components#next
    • HTML
    • CSS
    • JS
    11
    P
    Submitted

    Hi everyone! Happy to be back and submitting another challenge! I started this project to practice React and concepts I’ve been learning from Josh Comeau’s course. I soon realized I was writing the same code for every planet, since every page looks the same, and I thought there MUST be a better way. After some research - enter Nextjs. The dynamic paths seem like the solution I was looking for. That also meant a huge refactor of the entire project. 🤯🤷🏻‍♀️

    My process, struggles, and bugs:

    • The site flickers on mobile so I only enabled the keyframes on desktop.

    • I didn’t try to contain the content into a max-width.I think it still looks ok on a 2k width screen.

    • It was difficult to work around Nextjs’ Image component since the actual <img> tag is nested under two divs with inline-styling. As such, I don’t know for sure if the images are bulletproof. Please let me know if you find any overflow or other quirks with the images.

    • I’m NOT an animator at all lol but I wanted to learn tooling so I tried to work with Framer Motion. It’s a great library but in some instances, it inserts its own transform property which overrides my CSS. I’ve had to modify some of my styles to accommodate, specifically on the images where I was initially using scale to change dimensions. I’d love to know how to also animate the planets when you click on the tabs, aside from animating when the page changes. The library requires a single unique key for the transition, and I’m already passing one for the page change. What’s a different approach to also animate for the tab clicks?

    • How do i make it so that ‘/‘ and ‘/earth’ are both showing the same content? Right now I’m passing the Earth prop to the index page.

    • How do you pass an either-or props to styled components? This code works, but I wonder about bugs.

    Please share your thoughts! Had a great time working on the CSS, the navbar design was a new challenge for me. There’s still some more to do like the readme, cleaning up repeating code, and html warnings but I’ve sat on this “finished” project far too long to not get feedback which resulted to a lot of unnecessary frustration on my end. And that is the big takeaway.

  • Desktop design screenshot for the Dine restaurant website coding challenge

    Dine challenge with React

    • HTML
    • CSS
    • JS
    38
    P
    Submitted

    Hi everyone, had a challenging time with this one from start to finish. It's my first multi-page and react project and I thought the design was a fun way to practice mapping. It quickly became one issue after another (Where to put CSS? Module or 7-1? How to access the images? Will they be in public or src? How to NOT access the DOM?) On hindsight, I should've studied a bit more before this attempt. Still very much a beginner.

    The CSS was equally hard - there are layout shifts in every section of every given screen design. The form jumps with validation and I'm not able to implement the dropdown design for the select choices, but I think I'm ok with these. Needless to say, I learned A LOT. Big thanks to @grace-snow for accessibility tips :-)

    For my questions:

    1. Is there anyway to reuse a Button component in such a way that you can control its parent tag (a or button) or pass it as props? I'm reusing the button classes for the form button which is not very DRY

    2. How do I reset the form on successful submit? e.target.reset() isn't working.

    3. I tried to create a custom hook for responsive bg headers. Can't figure out why the images are not showing. Here's the relevant file if anyone would like to take a look.

    4. The events section on the homepage has this light gray bg-image that would only render as a square block if I used the appropriate image (curve-top-right.svg). Luckily, the other assets look similar so I just rotated it (curve-top-left.svg) to get the same effect. Can't figure this out.

    Any other feedback is welcome. Thanks in advance!

  • Desktop design screenshot for the Loopstudios landing page coding challenge

    Loopstudios landing page

    • HTML
    • CSS
    • JS
    4
    P
    Submitted

    Hi everyone, thought I'd give this fun challenge a go. I've noticed that the screenshot mirrors the project in Firefox compared to Chrome. I've had to make adjustments to keep them acceptable on both, aside from the prefixes. I also can't get my .container class to be as wide as it's supposed to be. It's identical to the design files in width, but it's a few pixels off when superimposed to the design. I can live with the results though :-)

    My questions are mostly related to accessibility. What is the best way to deal with the base font size? I've been using the 62.5% route, since that was the advice given to me before. I've been reading up on it recently, and it was mixed opinions. So for this project, I reverted to setting it on html as px. Should I have placed a percentage value instead? Do I put it on body or html? Or should I stick to 62.5%? Looking for the standard and more accessible option.

    Also, I'm not keen on major animations but I tried some here using a library to spiff up UX. At what point/how does it negatively affect accessibility?

    Thanks and looking forward to your comments!

  • Desktop design screenshot for the Clock app coding challenge

    Clock app

    • HTML
    • CSS
    • JS
    • API
    5
    P
    Submitted

    Hey everyone! Here’s my post-op for this app:

    Design: For this project, I deviated from the design a little bit and focused on getting it DONE instead of 1:1. Got pretty close though compared to the screenshot :-) The Figma file was a huge time-saver.

    • There was a tenacious ios bug where showing the details shelf will also shift the background image up. In the end, I had to give the background a dedicated div and not nest any other div in it. Painful. I did learn how to hook up my phone directly on the computer and edit the CSS in mobile Safari right then and there to troubleshoot.

    • I used classes to change the bg image from day to night and vice-versa. Putting a default image causes a flash of the default image on load before CSS and JS is applied, and I didn’t want that. I feel like there’s a better way than using classes though. Any suggestions?

    JS: Oi. Where do I begin

    • I prefer the 12-hour format, so I naturally needed more JS for am/pm and to convert the hour

    • The quotes API stopped working in the middle of the project, so I had to find an alternative. Main criteria: served over https. I couldn’t find the documentation for the one that I picked, so not sure it was a wise choice. Also as a result, I had to write a random index generator for the quotes array. Plus, the quotes are not specific to programming.

    • Tons of CORS error with the time API. In fact, it’s still happening at time of submission. User may need to hit refresh to have a chance at getting the data. I tried adding the cors-anywhere link when making the call but it didn’t solve the issue. Would appreciate any feedback on this.

    • It was suggested to use an API to set the time, but I opted to use the more reliable Date object for hours and minutes. Telling time is at the heart of the app, and if anything else, it will at least do that and not rely on the API which may or may not work.

    • I initially used Promise.all for making the requests. While it worked fine, it takes a good while for all promises to resolve especially if one (or more) is holding it up. In the end, I refactored to separate calls. I was making a duplicate call for the random quote event listener anyway if I remain on the Promise.all route. Is separating the requests the right way to do it?

    Other questions I asked myself: innerHTML or textContent? How to handle the headings in the design - the h2 will be larger than h1? How to make html more accessible?

    TODOs: Fix readme, refactor based on comments, maybe refactor layout scss since it’s a bit long, and write about all of this!

    Thank you for reading this far! Any suggestions/comments/resources on my code and life decisions lol are welcome below :-)

  • Desktop design screenshot for the Insure landing page coding challenge

    Insure Landing Page

    • HTML
    • CSS
    • JS
    8
    P
    Submitted

    This is my first time using inline svgs. I initially retained the fill property and discovered that hovering on spaces within the icon will not show its hover state. Only workaround I saw was to target the svg tag on the css file and declare initial and hover states for its fill property. Is this the standard?

    Not sure what's going on with the screenshot...the live version doesn't show three lines of text in the CTA section in any screen width. I haven't coded in a while and I'd appreciate any comments for improvements or anything I've missed. Thank you!

    EDIT: Took a new screenshot as updates to the platform were just pushed 🎉 Thanks Matt!

  • Desktop design screenshot for the Manage landing page coding challenge

    Flex and grid solution with Swiper.js

    • HTML
    • CSS
    • JS
    12
    P
    Submitted

    This was a true test in writing responsive code. Would appreciate your thoughts. Many thanks to my mentor @shahsilo for helping me get really close to the design!

Latest Comments

    • HTML
    • CSS

    Responsive, mobile-first, flex & grid

    2
    P
    Emmilie Estabillo5,180 | Posted 5 days agocommented on Katrien S's "Meet landing page" solution

    Hi Katrien, great job! Those images are indeed very tricky. For the header images in smaller widths, I would try adding something like min-height: 15rem to .tablet-hero so that it doesn't cut out around 400px. Another approach is to increase the height and set the background size as contain. And other stuff - it'd be nice to have hover transitions on the buttons. Hope this helps!

    0
    • HTML
    • CSS

    Equalizer landing page

    3
    P
    Emmilie Estabillo5,180 | Posted 5 days agocommented on Volodymyr Balashov's "Equalizer landing page" solution

    The beauty of webdev is there is more than one way to do things, so it's not about being wrong or right :-) Those are merely suggestions you may or may not implement. Keeping code maintainable is very important, and senior devs have told me to try and keep things simple. The more divs you use, the more you have to maintain. It really depends on the design and the scope of the given project.

    0
    • HTML
    • CSS
    • JS

    Responsive multipage space tourism website

    2
    P
    Emmilie Estabillo5,180 | Posted 5 days agocommented on Olesia Kissa's "Space tourism multi-page website" solution

    Hi @olesiakissa , congrats on completing this project! I would try using a pseudoelement to have that line that spans from left to right under the crew images.

    Some other points:

    • The nav logo should be wrapped in an a tag

    • I would increase the breakpoint because image and text side by side at 50em looks a little tight

    • Some of the hover effects could use a smoother transition

    • Assuming this is a portfolio project, I would also check it on other browsers. In Safari for example, the burger button needs a height property. And backdrop-filter doesn't work well.

    Hope this helps! :-)

    1
    • HTML
    • CSS

    Equalizer landing page

    3
    P
    Emmilie Estabillo5,180 | Posted 6 days agocommented on Volodymyr Balashov's "Equalizer landing page" solution

    Hey @DevilDoctor27 , looks real good! I wouldn't worry about being pixel-perfect. Getting as close as you can to the design is more achievable, which is what you did here. Great control on the backgrounds and images.

    A few thoughts:

    1. Header:

      • I don't see the advantage of using position: absolute on .header__inner. This div could be deleted and its padding-top can be added to header__logo
      • Since there's only one item in it (logo), you could get away without using flex and all its properties, it would still be flushed to the left.
      • I would make the logo an anchor tag to the homepage
    2. Same with flex properties on <div class="content">. This div could also be deleted. After doing so, place the .container under main instead of nesting it under .intro.

    3. For .card , again, no need to use grid. Apply margin: 0 auto; to .card__inner to center the contents.

    Hope this helps :-)

    0
    • HTML
    • CSS

    Responsive card, using grid

    2
    P
    Emmilie Estabillo5,180 | Posted 25 days agocommented on Guilherme Fernandes Vidotti's "Four card feature section" solution

    Hi @Vidottizzz, good job in completing the project! The trick is to make a grid with 3 columns and 4 rows. You can then position the left and right cards at grid-row: 2/3.

    Other points:

    • Heading tags: h2 is missing between h1 and h3. It's not recommended to skip the order
    • At the 985px breakpoint, the cards are touching the side gutters and creating an overflow
    • Cleanup: As an example, margin: 0 auto 1rem auto can be simplified to margin-bottom: 1rem , and padding: 0 0 can be deleted (unless both are media query styles and are overriding previous declarations. But in this case, they are not)

    Hope this helps!

    0