@ericsalvi
maia
@maiaflowAll comments
- @maiaflow
impressive, Eric! i have very little understanding of what Codux, React, IDE, TypeScript are, but that makes this all the more impressive! that H accessibility one has gotten me in the past, definitely interesting that they want you to go in order. well done as always!
Marked as helpful - @ericsalvi@maiaflow
love that you were inspired by my little idea, and that you actually timed it down to the millisecond! no notes on the implementation, looks perfect to me!
Marked as helpful - @ericsalvi@maiaflow
this looks so awesome, Eric! i was feeling a bit out of my depth giving feedback, not really having an understanding of how axios works. (i'm still trying to figure out exactly where the advice is coming from!) but then I read your readme, and I'm honored you learned something from me! :o) box shadow looks awesome! and i totally know what you mean about the colors- i often feel that way with the front end design challenges, that the colors are either slightly off or not used. well done as always!
Marked as helpful - @yterai@maiaflow
well done as always Yui! i like how you used grid areas/grid template areas.. i still don't quite get how those work yet! also cool how you did grid within a grid. excited to see your next submission!
- @ericsalvi@maiaflow
letter-spacing: -0.21px;this made me smile because LOL i relate. don't think i've ever gone 2 decimal places though, that's commitment!love the SCSS stuff. definitely found myself noticing how much i was repeating myself in a way i wouldn't have to with SCSS, and the mixins thing is so cool! got to try that next time. well done as always!
Marked as helpful - @yterai@maiaflow
great work Yui! i love your simple js here. taking notes!
excited to see your next submission!
- @ericsalvi@maiaflow
The modal is such a nice touch, looks really good.
Testing your solution did make me realize a difference in our approaches, where you did validation with javascript on submit and I did it with the logic in the :invalid pseudoclass based on the input type email. I imagine these approaches could be combined so that the user could know the email was invalid before even hitting submit.
Marked as helpful - @ericsalvi@maiaflow
good idea to include a screenshot of mobile as well!
super interesting to read your index.html code with the tailwind css. i think you managed to keep it really organized looking despite the mess that tailwind makes.
you mentioned you did the social icons with
aspect-ratio, tried to find it because those caused me lots of trouble, but i couldn't find it in the tailwind! need to get better at reading this code. looks really good though.only issue i see is that it appears your Open Sans font isn't implementing? i think what is showing on my screen is my system sans-serif.
nice work!
Marked as helpful - @ericsalvi@maiaflow
Excellent Eric! i'm not sure whether this was really in the design or just my own idea, but one feedback is that from what i could tell, the background was a radial gradient instead of a linear one! Looks awesome though :) I also like how you imported the Google font with the URL, i'd been doing it by downloading the variable ttf. gonna try it that way next time!
Marked as helpful - @toyrobs@maiaflow
Great work on this Toyin! It looks perfect! In your code, I like your semantic class names, I'm going to work on using those next time. Something else I want to try next time that we both didn't do is organizing your css into sections with commented out headers. Another one of those is deleting any commented out lines as a final clean up before submitting. Excited to see your next one!
- @yterai@maiaflow
I like how you styled your attribution credit on the bottom left. Mine was confusing my vertical alignment so I just commented it out LOL. also, I like how you organized your CSS with commented out headings. I'm gonna try that next time! Looking forward to seeing your next submission!
- @ernestina404@maiaflow
i like how you organized your css with commented out headers, i'm gonna try that next time! nice work Tina!
- @ericsalvi@maiaflow
hey Eric!
i wanted to ask a question about how you determined the size to make your box. maybe this is getting too granular- ultimately mine looks right for the most part. but something i struggled with in this challenge was matching between the screenshot and my work. looking now, i think the screenshot still looks smaller than my submission, but i know my submission is smaller in height and width than the example- in the frontendmentor screenshot comparison, where yours looks perfect, mine looks off. if i remember correctly, making mine
450pxmade it too short, so i felt like my width worked well to maintain the proportions. but your proportions look good!i didn't notice this before, but when i went to write this, i was looking on my laptop screen vs my larger monitor, and on this screen i noticed that mine cuts off around
590pxheight and yours cuts off around700pxheight, which is a little more than the max height of my browser on this screen with the bookmark bar on. is there a best practice for a height below which you can assume most browsers won't be? i don't know if this factored into your thinking about calculating the size of the box. i guess the best way to do it is to just define amax-heightand let the height be what it is?aside from my long-winded question about box size, i wanted to call out how you did your hero image. i didn't think of just adding a
border-top-[left/right]-radiusto the image, i thought to get the rounded corners i would have to make it abackground-imagewith padding, which caused me issues with my spacing below that i can see you don't have- if i change yourmax-widthin inspect it stays spaced well, not the same for me lol! much cleaner how you did it. love it!also wanted to shout out your semantic naming for your sections (
mainfordiv.box-wrap,articlefordiv.box) looks really nice. i'm going to try that for my next submission.thanks for teaching by doing! :D
Marked as helpful
