P
@tomwinskellSubmitted 3 months ago
Latest solutions
Newsletter-Signup w/React, Sass
#react#sass/scssPSubmitted 3 months agoWhat I can do better in React. Including hot tips and tricks. I really enjoy React and want to become proficient at it.
Article Preview Component w/CSS, Flex, JavaScript
PSubmitted 4 months agoMore efficient JS code, how to write cleaner CSS.
Meet Landing Page w/Flex, Grid, modular CSS
PSubmitted 4 months agoHow to make flexible images better?
Testimonials Grid w/Grid, Flex, Responsive Layout
PSubmitted 4 months agoI'd like to know any ideas on how to make the overall design look better on larger, more awkward screen sizes.
Also, how to make text fit the container depending on the size of the container.
Four Card Feature w/Grid, Flex
PSubmitted 5 months agoUsing rem units for more flexibility. If figma files are in px, how do I interpret them into rem units. Also, code efficiency tips are always appreciated
Latest comments
- P@whiteriver-devPosted 3 months ago
Everything looks good, I also did this project with React but I am yet far from being an expert. From my view, your code is clean and everything works as intended. I like how in your project you included the styles directly in the component - I will consider that for my projects in the future.
One thing that has helped me with my React project that I recommend is dividing your components into different subfolders based on their size/functionality. For example - I used the Atomic Design Methodology to divide my components from little primitive components like Buttons, to larger components like forms, and templates.
Overall, good job.
0 - @Oluwabillionz96Submitted 6 months agoWhat are you most proud of, and what would you do differently next time?
I'm so happy I managed to complete this tasks, it looked simple then I started doing it and then it looked undoable but at the end of it all, it is a very simple task.
So proud of the responsiveness, it's not really perfect though, but I believe I will get better
P@whiteriver-devPosted 4 months agoBesides some design details missing - overall looks good and mostly performs as it should.
Ensure to test your project on all device sizes. Once you go onto laptop size (1024px) your article breaks as the margin pushes out your content below the container.
Another thing is you can improve by writing more semantic elements in HTML such as using <sections> instead of using <div> for everything. Also if you only have element in a <div> like <h1> you don't really need that <div>
Besides that, couldn't find any other issues.
0 - @xStephxSubmitted 9 months agoP@whiteriver-devPosted 4 months ago
Hi Stef! You are one of the people I look to when I try to explore how other people have approached certain problems, and while I was looking through this project of yours - I was impressed with how you created it.
One thing that I came across though - not sure if you have noticed - is that if you test it on a small phone screen size (320px) your Share button overlaps and covers a portion of the Social Media icons. Just wanted to let you know.
Besides that, keep up the great work - and know that I often look up to your work as a good example.
Marked as helpful1 - P@dearestalexanderSubmitted 4 months agoWhat are you most proud of, and what would you do differently next time?
I did create two solutions:
I thought at first glance this challenge looked straightforward, but once I got into I realised there were a few tricky points relating to the use of grid and flex and the sizing and spacing.
Some of my approaches towards sizing and spacing may not be quite in line with the best solutions, but I did find building this to be good practice and I was able to experiment further with grid.
I also enjoyed creating my own variation on the design.
What challenges did you encounter, and how did you overcome them?I may have gone a bit off script vs. the specification, but I was playing around with trying to get the 'header + hero' to fill desktop vertical, and the second content section to do the same. This was a little but of practice on the concept of 'above the fold'. I am not 100% sure the design was meant to space like this one desktop. It's hard to tell in Figma. This does mean I have @media changing height and spacing to make it work on tablet and mobile.
What specific areas of your project would you like help with?A couple of questions:
- What approach did others take to have the hero image crop of screen
- What approach did others take to vertical spacing, did anyone else try to fit the sections into 'vertical space' or just rely on padding etc. between elements.
P@whiteriver-devPosted 4 months agoI checked out the code for your Meet Landing Page. Besides some missing design details - the rest looks good and the main things function as they should.
You can also try use more reusable styles like for buttons for example instead of styling them each separately.
Marked as helpful0 - @GhadaAhmed72Submitted 7 months agoP@whiteriver-devPosted 4 months ago
Consider making your HTML 100% of the viewport height. As you can see your background cuts out only to the length of the html and body container.
You also forgot to import the font.
I see you used Tailwind, as I'm not proficient in it I cannot give advice on that but it appears the columns are not aligned.
Besides a few touchups, the site seems to function as intended.
Marked as helpful0 - @Top-Trekx-Im-gvp-98Submitted 5 months agoP@whiteriver-devPosted 5 months ago
You made the "grid container" with flex instead of grid. I believe the purpose of this challenge is to use Grid not Flexbox. I would recommend going over the Grid section in the learning path and trying to apply that knowledge to this challenge.
However, you still made it work and it looks quite similar to the design. I would just also recommend using gaps and settings widths of the text section at the top so it matches the design.
0
