Emmilie Estabillo

Pro
@emestabillo@Em
New Jersey
5,020Points

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

    • HTML
    • CSS
    • JS
    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
    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
    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
    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
    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
    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

    Cards Section Using Flexbox and Grid

    2
    P
    Emmilie Estabillo5,020 | Posted 14 days agocommented on Gabriel's "Four card feature section" solution

    Hi @Gabrielbe17, good job on your first submission! Just a few suggestions:

    • For your images, the paths need a . before the first slash

    • To avoid having the cards look squished in mobile view, I would adjust the 10rem padding on the left and right side of the .cards class.

    • For your next project, I highly recommend going mobile-first. Easier to scale up elements rather than make large elements fit smaller spaces.

    Hope this helps!

    0
    • HTML
    • CSS
    • JS

    Vue.js site using SCSS

    2
    P
    Emmilie Estabillo5,020 | Posted 14 days agocommented on James's "Tip calculator app" solution

    Hey James, it's me again 😄 Looks good! I think for the 'Totals' section, I might try flex instead of grid, so I can apply flex-wrap: wrap. That way, large numbers would just go to the next line and still be pretty lol. Hope this helps!

    1
    • HTML
    • CSS

    3 column card w/ Flexbox

    2
    P
    Emmilie Estabillo5,020 | Posted 14 days agocommented on emilyw12's "3-column preview card component" solution

    Hey Emily, looks great! Site is responsive and close to the design. I think adding and hiding the h1 is a good call for accessibility. I only have a few thoughts:

    • Missing CSS reset. The body has an 8px margin all around that's producing vertical scrollbar (apparent especially on desktop)

    • Not sure why main has an id. I don't see it being used in the project. Using the class for styling should be enough.

    • I think there may be a better html tag for the car types instead of section. The 3 cards are related, and they seem like they represent an entire region of a document together. Maybe a generic div? This is subjective, of course.

    • one other minor thing is adding a transition to the button to make the hover smoother

    Hope this helps!

    1
    • HTML
    • CSS

    Mobile-first 3-column-preview-card example

    7
    P
    Emmilie Estabillo5,020 | Posted 21 days agocommented on Grace's "3-column preview card component" solution

    Hi Grace! Just curious why the container div is a div instead of something like a ul. This layout is very common and I'm still learning accessibility so I'd like to know :-) Looks awesome of course 🙌🏼

    1
    • HTML
    • CSS
    • JS

    Blogr landing page for mobile(<576px) and desktop using Bootstrap4.5

    3
    P
    Emmilie Estabillo5,020 | Posted about 1 month agocommented on spyder's "Blogr landing page" solution

    Hey @ratan17, congrats on your submission! Won't comment on Bootstrap but here are just a couple of points:

    • use h1 only once, for the header text. Headings also need to be in ascending order, don't skip from h1 to h3

    • the column headings on the footer don't need to be wrapped in an a tag

    I highly recommend building mobile-first for future projects and continue working on your responsive code so we can have a better tablet version. Hope this helps!

    1