Clément• 516
@Baradel-Clement
Submitted
Diarrah
@Diarrah
All comments
- Diarrah• 3,418
@Diarrah
Posted
Looks familiar
0 - Ahmed Goda• 270
@AhmedXGoda
Submitted
Diarrah• 3,418@Diarrah
Posted
My man, this project is awesome! I've had it bookmarked for a while and always come back to look at the functionalities.
I have a question: how is it that all the data still shows up when the PWA is downloaded to my laptop but there is no wi-fi? When I use the PWA with no connection everything is the same. Sometimes I have used PWAs and when they are grabbing info from and API & there is no connection the PWA will just give out a message that says: Sorry, please connect to internet.
Can you answer this for me if you can? Thanks!
1 - Christopher Till• 1,070
@chri55
Submitted
Please let me know what you think. All I have left to do now is clean up my code.
Diarrah• 3,418@Diarrah
Posted
Good job! I thought I was fast doing this project but you were super fast lol.
The 2 things I noticed is that it's a bit verbose with the stories page - I did a simple JSON & it was pretty simple with the pictures like that. Also, when mobile nav is out + you redirect to a page the nav remains out. You can make it go in with a really simple useState.
Hope this helps :)
-Diarrah
2 - PAldhair Escobar• 165
@aldhairescobar
Submitted
Hi there!! How do you change the color of the .svg icon?, I always have struggles with that :/ .
Thank you!! (:
Diarrah• 3,418@Diarrah
Posted
Whenever I change to color of my SVG icons I usually just make a whole nother icon. What I do it just copy & paste the code, make another .svg file & copy that code over & then put the correct hex code in place where it says "fill" or "stroke".
If you want to change it in the CSS itself you have to copy over the whole SVG code over into the HTML itself.
I can explain more if needed but I hope this helps!
Marked as helpful
1 - Psudhanshu_saurav• 240
@sudhanshusaurav
Submitted
how to add transition on click in FAQ section. i used display property that's why transition is not working. Is there any other option.?
and what more i could do better.??
Diarrah• 3,418@Diarrah
Posted
You can add a transition by making the answer portion of the FAQ a max-height of 0 and then when you push the button you make it the full height. If you look at my solution to this you will see what I'm talking about. Hope that helps.
1 - Aju• 120
@ajujayapal
Submitted
Once submitting the solution, and comparing side-by-side using the slider, I realized I needed to change font-size. Is there a way to tell beforehand? Couldn't tell using the images in the design folder.
Diarrah• 3,418@Diarrah
Posted
There isn't really a way to tell if your solution is pixel perfect beforehand unless you're a PRO and you have the Sketch file that gives you really specific values.
0 - Jan• 500
@eljasiu
Submitted
Hello, this is my solution of this challange. I find this project quite challanging, but I think I did well. If you noticed any issues, feel free to comment. Any feedback would be highly appreciated. I hope you a have good day, warm wishes, Jan
Diarrah• 3,418@Diarrah
Posted
I love the confidence in the title to this solution & I agree with you that you did a pretty good job! Only suggestion would be to make sure that the patterns fit correctly when you resize the window & maybe put a set width on the buttons.
2 - Sapinder• 565
@sapinder-pal
Submitted
I know there're lots of optimizations yet to be made to my project. Please have a look and help make it better like a pro!
Diarrah• 3,418@Diarrah
Posted
Your code is so good! Love the trick how you mapped the cards in the stats section. Also love your hover effect on the buttons + the mobile nav deploy.
I have on thing I don't understand though which is the cta-box mixin. Could you explain that if you have time? Thank you!
2 - Kadu Magalhães• 270
@kdumagalhaes
Submitted
Hey! If you have some feedbacks about my solution feel free to comment below! =)
Diarrah• 3,418@Diarrah
Posted
Code looks great!
I've experimented with styled-components a few times & thought it was a bit confusing but your code makes it really clear!
1 - Enzo Ramirez• 95
@NamitasCl
Submitted
Feel free to comment any improvements that I could do to this project!
Diarrah• 3,418@Diarrah
Posted
Good job on your solution! 🎉
I would make a few recommendations: ・Make the body a min-height: 100vh and display: flex so that the wrapper will centered in the middle of the page. ・I wouldn't out a 25vh margin above & below on the wrapper I would just make it auto. ・When resizing I would make the wrapper flex-direction: column. ・It's not good practice to put the word "picture" or "image" in an alt tag because screen-readers automatically add that word anyways when they're reading an img tag
Hope that helps! Diarrah
1 - Mudasiru Rasheed• 90
@Taiwrash
Submitted
When will I get feedback??
Diarrah• 3,418@Diarrah
Posted
Logic is all there + perfectly legible but I would add some more styling to make transitions smoother and make the font more uniform.
0 - Militus Innocent• 555
@MilitusInnocent
Submitted
Please do view and drop a feedback. I would really appreciate it. thank you.
this is my second project by the way. I am excited about the progress.
Diarrah• 3,418@Diarrah
Posted
Pretty nice work.
A couple constructive criticisms would be:
· Every image needs an alt tag - even if it's set to an empty string (ex. alt="") - that will get rid of almost all your HTML + accessibility errors.
· You can set the font-family on the html tag itself so that you don't have to keep defining it on every element (ex: html { font-family: 'Inter', sans-serif }
· Cursor: pointer on the dark-mode label clicker so the call-to-action for the user is more clear
· Using a root selector to change the colors from dark to light. You can look at my solution to this project to see what I mean by that
· I would make it responsive a bit earlier, maybe by 100px
Great job on your second project 🎉
1 - Lin Zhang• 135
@linzhangcs
Submitted
What was your solution for creating the instagram gradient top border? I had a hard time adding rounded corner to it. What's your opinion on using grid for this layout?
Diarrah• 3,418@Diarrah
Posted
Hey, Lin,
Very, very nice work! You did such a good job with the React + styled-components. I've been trying to learn how to use variables within the styled-components & your code just helped me so much to understand, so I thank you!
As for your questions: you should definitely use a grid outline for this design. The way I think I did the IG color was to use an ::after selector & then a linear-gradient with a bg color + then the card overflow: hidden.
1 - segfaullt• 80
@vv01tz
Submitted
HI all, thanks for taking the time to help. I would like to get your opinion on my html code for things like the number of classes used (too much ?), naming of said classes ,are they clear enough ? And Accessibility. I am pretty sure that my CSS is not that good, what I want to know is how to improve the overall structure of my code. Your opinion on how I implemented the responsiveness of the component. Any feedback on how to improve is greatly appreciated.
Diarrah• 3,418@Diarrah
Posted
Your code is fantastic! I was expecting something so much worse from the way you worded your 'question for the community' - don't be that hard on yourself. Your BEM naming convention is perfect & the number of classes you put on things is great!
Diarrah
1 - Jan• 500
@eljasiu
Submitted
Hello guys! I returned to website building after a 3-year-long break. I hope I use the HTML tags properly, although I have some doubts. For example I am not sure if it is okay to use the <br> tag. I am also not sure if the names I make up for my classes and id's are proper and "according to art". Thank you in advance for all your feedback. Have a nice day! Jan
Diarrah• 3,418@Diarrah
Posted
Welcome back to web development - you did great! I would recommend using overflow-x: hidden on the body so that that horizontal scrollbar goes away. Also, I would only use class names in the CSS + not id names.
2 - Dulce• 115
@iamdulce
Submitted
I had this doubt, the only way to apply border-radius to the entire grid is to appliy it on every single item separetly?
Any feedback about the project will be welcome :)
Diarrah• 3,418@Diarrah
Posted
There's definitely a way to get each corner of a grid rounded. Just have a container (set to display grid) & then put a border-radius on that whole container.
0 - Favourite Jome• 1,110
@jomefavourite
Submitted
I couldn't make the desktop background work. Please suggestions will be appreciated.
Diarrah• 3,418@Diarrah
Posted
The way that I solved this problem is by making a div in the HTML called "background" then put the background image inside the div. Make the picture max-width: 100% then make the container 50vh tall & position it absolutely at the bottom of the screen.
Hope to help!
1 - Connor Z• 5,115
@zuolizhu
Submitted
Feedbacks are super welcome!
I really love the nice and clean design of this challenging!
However, as an OCD developer, the design on the wide screen makes me crazy (when the screen width is over 1440px). I’m trying to keep things staying in the middle, so the icons, texts won’t falls apart. But those lines and arrows will be too far from their content. Any suggestions on that would be appreciated!
Thanks!
Diarrah• 3,418@Diarrah
Posted
In all my projects I make the max-width 1900px & then just center the total body with margin: 0 auto. I don't like the 2560px view-width either lol
2 - Paulo Wells• 360
@wellspr
Submitted
This is my first submitted solution here, I'd be very happy to get any comment about it! :)
Diarrah• 3,418@Diarrah
Posted
Great job, responsiveness works perfectly.
1 - Patrik Csoma• 70
@csompatt
Submitted
I'm very new in Frontend. What do you think about my solution?
Diarrah• 3,418@Diarrah
Posted
Pretty good!
I would make the first part text bigger (maybe a bit bolder) because the contrast between the text + bg color isn't a lot.
Also, you should make it responsive a lot sooner. I think you have the cards stack at around 365px but it should be more like 550px.
2 - Juan Daniel Martínez• 470
@juandadev
Submitted
Feel free to leave your feedback. I'd like to see how you solved the rounded blue background shape, it was so difficult to manage the responsive design for that shape and still get some errors.
Diarrah• 3,418@Diarrah
Posted
For the shapes, just give it a height + width and then just round the corner(s) with a border-radius.
1
