Looking to hire developers?
@jgreen721
@marlonszm
Submitted
Guys i think that my solution looks pretty close to what is demmanded, but i've had some problems to insert colors in the ordered list (the numbers) and insert horizontal lines in the grid. Hope you guys enjoyed my solution and give it a feedback!
@jgreen721
Posted
Nice work on this. I did notice you had a fixed width on your recipe card which doesn't always play well with screen responsiveness. Its generally not a bad idea to put a max-width: attribute on their though to prevent it from getting too big though, so max-width:650px would probably work. So far as one of your issues with a borderline on the nutrition portion, I would probably parent each <p> and <h3> up with its own li or div and give that element a little padding and and a borderBottom. You could probably border bottom the 2 elements long as there is no margin. Other ways certainly but just as a starting off suggestion. Hope some of it it helpful and again nice work!
@nade12209
Submitted
if you see something I can fix, write to me
@jgreen721
Posted
Hey nice work on this! One possible suggestion is I noticed pretty specific margin values on your .okvir element. I'm guessing this was to center it but the problem with specific values is they generally don't leave much room for responsiveness(size of users screen). Applying the display:flex, alignItems:center, justifyContent:center on the body (or parent container) should fix that and then eliminate any need for the margin values. Also maybe adding a :hover effect for your buttons. Again though, nice work. The design/card itself is 👍! 🙂
@shawkysobhy
Submitted
Instead of static page and only filter I make list can.be updated by
Filter feature not added yet
@jgreen721
Posted
haha, yea I hesitated on even saying since again, your code very much implied this wasn't your first day with it, and I've certainly done it a few times myself thinking "not exactly a site high on the webs radar" but figured with it on FEMentor, may as well mention it! But yea, good stuff on swapping it out and again nice work overall! 😎
@shawkysobhy
Submitted
Instead of static page and only filter I make list can.be updated by
Filter feature not added yet
@jgreen721
Posted
hey man, really nice work on this. The UI and code both, good stuff! I did notice the creds were in plaintext and well, I kind of had curious fun with that and added a job via that route. 🙂 It was just a playful experiment but you might want to tuck those into an .env file! Again though, 👍 on the code overall. Pleasure in checking out.
@TerryHCollins
Submitted
I made this mobile first, so the preview does not show the correct result as it shows desktop first!
@jgreen721
Posted
Nice work on finishing the challenge! Yea, looks great on mobile! You might want to put a max-width on either your card (I believe you have as <main>) or on your image. Ultimately, just may want to prevent the image from going a little too big on devices that aren't mobile. I think text-align:center in the main element styling might also help but just a suggestion. Again, nice work though! 🙂
Marked as helpful
@MonicaPoloni
Submitted
Hello, this was my first project. I'm starting with HTML and CSS and would be grateful for any suggestions for improvement. Thanks!
@jgreen721
Posted
Nice work, especially if just starting out. Everything is centered and positioned nicely! Only real obvious suggestion would be to add some hover styling for your buttons with something like cursor:pointer added to your button css and then button:hover{ whatever you like -- I believe turning the background to green is their suggestion}. Unless it was intentional to leave them more as just list items, in which you might just want to convert that part into an <ul><li>...</ul> section for the user readability, conventions yada yada. lol. Main design though is 👍 so again nice work!
Marked as helpful
@578shivam
Submitted
i have mobile notch hard no idea css
@jgreen721
Posted
Nice job on this kinda tricky challenge. Looks good. I did notice a fair amount of specific width/heights on some of your elements in and general that can be a tricky path. It's generally better to try to style elements with padding/margin and allow the content to naturally fill an element. Putting on limits (ie: max-width min-width) can be alright ,or there is a pretty helpful function called clamp() that takes 3 size arguments and handles responsiveness pretty well. That one is probably best for larger size containers/cards and less for your message/text divs but its still worth mentioning just cause its usefulness. Anyways, just couple suggestions but I appreciate CSS is a many ways to skin a cat type medium so take it for what its worth and again nice work!
@Patrickodida
Submitted
While building this component, I used an <h3> heading for the first part of the sentence and a <p> element for the second part. Is it best practice to do that, or should I have used a <p> element throughout and a <span> element for the second part of the sentence? Thanks.
@jgreen721
Posted
Your approach of <h3> and <p> tags was a good one. I'm not going to pretend to be an expert but the span element is a special inline element and isn't so much related to text-size. Inline meaning it won't 'block' down to the next level. A simple manner I'd use in is with-in a text element where you'd like to style a portion of the text differently.
<h3 class='red-text'>Here is some text to be red, <span class='fadein-animation'>this part can fade-in </span> but this and the beginning portion wont.</h3>
lol, dumb example but hopefully it helps a little. Certainly no shortage of long winded explanations on all of the elements to learn more but yea, your approach here was good.
Marked as helpful
@Neel-07
Submitted
I recently completed a project creating a stats preview card component using basic HTML and CSS, and I would greatly appreciate your feedback. I'd like to know if there are any mistakes or areas for improvement that you noticed. Please feel free to point out any specific aspects that could be enhanced or corrected. Your input would be incredibly valuable in helping me refine and enhance my project. Thank you in advance for taking the time to provide your feedback
@jgreen721
Posted
Nice work completing the challenge. Looks good! You might want to add something to your container css that keeps it in the center of the screen. While your max-width is pretty wide, on a large enough monitor your container will eventually just be on the left side. I believe margin:0 auto would be a quick fix but there are other ways. Also, might want to add a @media query in your CSS and implement some responsiveness for mobile/smaller devices where you can set your card to flex-direction:column so it'll be more tailored for a vertical viewing experience (again, mobile like devices). Again, good work overall! 🙂
@Subhi-c
Submitted
I built this project using React and hosted it on GitHub Pages using gh-pages. However, I encountered an issue where the images I used did not load properly. I could use some help and insights from the community for my project
@jgreen721
Posted
I believe you want your assets in the public folder as thats the one the browser 'can check'. You might need to append a ./ to your data img filepaths to also indicate its a file but I'm not sure and think?? that might be more for CSS and if you use background-image:url(). For sure, try the first step and if necessary, implement the 2nd but I think the first should get you images. Nice work on the rest though, the styling looks 👍
@nikolapetkovicdev
Submitted
I needed a bit more time for this task, probably because I didn't create a proper plan and work sequence. The table at the end and the bottom lines took the most time. Nevertheless, I managed to complete everything. My intention was to make the page identical to the given one. I hope I succeeded in that. Please write to me if there's anything I could have done better or if I made any mistakes. Your feedback would mean a lot to me for further improvement and work.
@jgreen721
Posted
Hey, nice work on this! Nailed the recipe-card stylings! I think?? with you giving a hard-value width setting to your body as 1440px then it prevents responsiveness so far as your recipe card staying centered when the screen width is smaller. A quick fix is 'max-width:1440px' and therefore the body will adjust to the view/screen width and should maintain the centering values you've applied to the recipe card. It may then allow you to nix the 80% adjustment as I think percents can be dicey to work in CSS in general but even without that debate, the earlier suggestion should have it so your screen just adjusts with the view-width and just cuts off once its larger than 1440px which I believe is the desired effect. Nice work though! 🙂
Marked as helpful
@jgreen721
Submitted
Fun design. I ended up creating a JSON object for the recipe and added one other item to demonstrate a re-usable template added via Javascript. Put an observer onto the sections for some enhanced UX but got a little convoluted on repetitive tasking with class management to prevent re-application of the observer. Nothing crazy but could probably be cleaned up a bit. Feedback/suggestions welcomed!
@jgreen721
Posted
I appreciate your eye/attention on this! Umm, I think I got confused on prep-item actually being prep-header (this is more a byproduct of the seat of my pants design as I go). Seeing as I didn't assign any animations/observer events to the other sections headers I'm not entirely sure why prep area is my exception, I suppose it was initial loading experience since it'll generally be in view but I'm rambling. I think its fixed and now the prep-section(header and items) is animating accordingly (once when in view and then done). Again, appreciate the look and feedback, and if it's still buggy on your experience... From my eye, it seemed your suggestion more targeted the img/img-container but maybe I read it wrong. It kind of became a templated mess down there so again I appreciate you parsing through it! 🙂
@sanju321GH
Submitted
QR code
@jgreen721
Posted
I don't think your image is being displayed but I believe its as easy as adding a . before the filepath to insinuate to the browser it's a local file rather than a library/etc. So ./image-qr-code.png should fix it.
@HafsaTATA
Submitted
Completed my first Frontend Mentor challenge.I'm having trouble adapting my website to different screen sizes like mobile devices. It currently looks great only on my laptop. Any advice or recommendations for free courses to help me learn how to make it responsive?
@jgreen721
Posted
Nice work, and congrats on finishing your first challenge! I see you used % as your width units which, you may want to be careful with since that will respond to the relativity of your devices screen width and so can shrink/grow to undesired sizes. There are a bunch of ways to change it but one way could be to just set a min-width:#px in there. rem and em units also available (and are generally preferred over pixels as again, they handle screen-resizing a bit better). All these things have plenty of information on them so not a big deal to digest all that, main suggestion would in just be setting the min-width. Again, nice work and congrats! 😎
Marked as helpful
@jgreen721
Submitted
Mostly an experimental/learning effort with Blender and ThreeJS. Could definitely use some clean up/polish so any 3d maestros out there I'd very much welcome suggestions.
@jgreen721
Posted
Appreciate the comments! Yea this is basically THREE n Blender flexing their might cause I'm still not familiar enough with either to get too 'tweaky' on settings or optimization techniques. Definitely a new world of considerations/gotcha's but, impressive work (as usually the case,lol) by the engineers of it all!
@Tobiloba1234
Submitted
While trying to recreate the design, it was fun and I found it hard to make my profile picture come together and arranging my html element accurately. I have a long way to go but would really like feedback and review of my code. View my Profile paragraph could not change the background color, would love to know why.
@jgreen721
Posted
Yea it looks like you have the span background set to blue and so that is whats rendering. Since a tags(links) naturally default to blue text, that makes things a little hard to see but that can overwritten in css as well. a{color: foo} -- although this approach will apply the color to all a tags which may not be what you want, in which case just give the a tag a class and target it that way.
Nice work though, I like the personalized/contact header idea and you nailed it on the card design! 🙂
@emirhan-kartal
Submitted
I used vh or vw instead of px but I am not sure which one I should use in which situation. I want to learn css without any frameworks to get used to it.Then I'll be switching to using scss or tailwind.(What do you think? Should I just start frameworks?) And please tell me if you were building this how would you do different compared to my code. Thanks!
@jgreen721
Posted
Nice work on this! At a glance, I'd suggest in being careful using %'s as your content container (.main) heights/widths because things can get wonky on screen size adjustments. Ive found letting padding/margin of containers/children a decent way in 'letting the size come to you' if that makes sense. So, no matter how the screen is re-adjusted your dimensions should mostly stay true. REM units seem/I believe, are your friend/popular choice but I'm not an absolute CSS authority so maybe someone else could step in and confirm/give better suggestion.
I see there is some form validation on empty inputs but it might be good experience it take it the next step and measure for valid numbers (1-12 for months, 1-31 days, etc). Ultimately dates can become a bit tricky so I wouldn't stress on absolute precision (for this) but, ya, just a suggestion. Again, nice work and happy coding! 🙂
@jgreen721
Submitted
React Comments
Featuring
JS confetti library to celebrate a LIKE 👍 🙌
Ability to update a comment 💬
Parsing function to detect some tech language terms and generate a link. Use a hash to make sure there's no duplicates.
-Input Character counter to (try!) to limit your banter!
Feedback and suggestions welcomed! 🙂
@jgreen721
Posted
Appreciate the feedback and bug finds! Yea I need to always be a bit better on the accessibility portion and think I will clean it up.
I initially did some 'reaction' restraint logic but took it off figuring why not allow a few more clicks but yea, I just put a global counter in there that will kick in after 8 clicks. As far as persistence I did think about attaching a firebase or something and may end up doing that. I realize there are other manners but ya, I just didn't go the persistence route at this point. It's definitely a good template exercise for it though!
I did tidy up the bug with a @media and @keyframes adjustment. The animation can sometimes look a little funny but not bad. I then added a boolean so when you can't click anymore all hover-events will/should?? be stripped. lol
Again appreciate the replies! 🙂
@loyalty1234
Submitted
I thought I could do it but I couldn't. My major difficult was positioning the image at the right place.
@jgreen721
Posted
If I remember correctly, the images were annoyingly tricky, esp in adjusting it from desktop to mobile but, I'm never the best with clever image handling...I would maybe encourage trying to finish the rest of it since there is good practice with dropdown menus/ managing the arrow-states of up/down. Plenty of other ways to get some Javascript mileage though so just a suggestion, but ya, the images definitely had me muttering a time or 2 throughout, just a fwiw! :)
@damagermax
Submitted
Though I was able to achieve the desired result, I'm not sure if I am following the best practices. Any help, criticism, or feedback is welcome, I am here to learn!
@jgreen721
Posted
Nice job on the challenge. I'd maybe apply a quick margin:0 auto to the body/parent container so when its at max-width it stays centered in the screen, but thats a pretty small fringe case/fix. Rest of it looks good and responds well!
@PisteaIonut
Submitted
I have trouble making media querries
@jgreen721
Posted
Media query should be easy enough with this syntax in your css, unless there is another bug at hand.
@media screen and (max-width:#px){ .your_targeted_classes{ height:#px width:#px .... }}
Nice work though. Looks good at desktop size!
@jjvega86
Submitted
I used Grid and "place items center" to center the entire component in the middle of the viewport. However, it's still a bit "off" center, even if I try to fudge positioning with margin utility classes. Any tips for getting this centered correctly?
@jgreen721
Posted
Hmmm.... my guess is maybe try setting initial vw/vw in your index.css to establish context for the browser (body{height:100vh;width:100vw}) but that might be default browser settings anyways in which case, my guess is there is some tailwind-ing overwriting other areas. I didn't know about the place-items:center but on my crude trial, it placed the one div card I had in the center. Nice job on rest of it. Looks like you had good practice in breaking it all down into components. Good stuff!
Marked as helpful
@DatBoiDarius31
Submitted
Honestly, very enjoyable project. I learned about hover, and overlay was a little complicated at first. I would like to make the view logo brighter, but not sure how. Transparency is still affecting it.
@jgreen721
Posted
Nice job on the challenge. Looks good!
I think you could make your overlay a parent to both the view img and the actual overlay itself. Make sure the (now) parent overlay div has a position and then you can set the new overlay child as absolute so it won't affect the position of your view image, then your opacity settings can be separated. Also, putting a high z-index on your view to make sure its on top of the 2 other divs.
Something like...
<div class="overlay-parent"> <div class="overlay"></div> <img class="view" src=""/> </div>.overlay-parent{ position:relative; opacity:0, ... }
.overlay-parent:hover{ opacity:1 }
.overlay{ position:absolute; top:0; left:0; height:100%: width:100%: opacity:50%; background: /* blue/tea color */ }
.view{ position:relative //think z-index requires a position?? might not be necessary though z-index:5; }
I think that would work...and hopefully makes (some) sense! 🙂
@markskwid
Submitted
Drop some tips in the comment section. I appreciate it and it will help me a lot. Thank you! :)
@jgreen721
Posted
Hey, congrats on finishing the challenge! Nice work on the overlay hover image.
My only suggestion is it looks like you're using % a fair amount for your height/widths but I believe?? without a specific size units on any parent containers, children elements will be a little lost on the context of what % actually translates too...IOW, your NFT content card's width can skew a bit upon screen resizing. There's a lot of ways to skin that cat but an easy solution is just setting a hard-set min/max size values (ie min-width:400px). Again, plenty of other approaches but, just a suggestion to fix the card from becoming too thin. Happy Coding!
Marked as helpful
