What specific areas of your project would you like help with?
Might not be the cleanest/dryest code, but it's a work in progress
Mateus Lima
@mts-ml
All comments
- Mateus Lima• 230
@mts-ml
Posted
Hey @olopcodes!
Really liked you design, the option to select between two themes is pretty nice, great job!
Does the solution include semantic HTML? No, only
<div>used and no<label>or<h1>.Does the layout look good on a range of screen sizes? Yes, it does.
0 - salomasik• 50
@salomasik
Submitted
What are you most proud of, and what would you do differently next time?
I enjoyed making the responsive for this app the most, next time I want to use REACT for this app.
What challenges did you encounter, and how did you overcome them?
Displayed design for tablets.
What specific areas of your project would you like help with?
I want to hear suggestions on working with js frameworks.
Mateus Lima• 230@mts-ml
Posted
Hey @salomasik!
I also want to recreate this challenge using React, I believe it's going to be a good experience using props, useEffect()...
The feedback: Your solution looks good, needed to change the font family to the correct one. The gap between cards is larger than in the provided solution, and on mobile screens, it's not centered.
The HTML is semantic and the solution is responsive.
Marked as helpful
0 - Pjuliusalberto• 220
@juliusalberto
Submitted
What are you most proud of, and what would you do differently next time?
I am most proud of creating the js script! I learnt how to manage events and change element class. I would do it faster next time (although I think mine is alr fast enough).
I also created this using a mobile-first workflow. Surprisingly, it's kinda fast!
What challenges did you encounter, and how did you overcome them?
I don't encounter any difficult one, but I think it's lining up the padding and margin. And responsive design. My website looks ugly on tablet.
Mateus Lima• 230@mts-ml
Posted
Hey @juliusalberto!
Nice design, looking at yours I realized I didn't change the standard e-mail from mine, got to correct it...
For feedback, two things, the HTML is not semantic, you should use at least a
<main>tag instead of only<div>. And in my opinion, I'd change the message when the e-mail is valid and the field color.0 What are you most proud of, and what would you do differently next time?
/
What challenges did you encounter, and how did you overcome them?
/
What specific areas of your project would you like help with?
Well i ran into a couple problems. first of all. i created mobile first and created the design for both of the share parts. i just do not know how to change that when full screen as that is looking different. the mobile social media icon div is looking different from the one on the desktop. What is the best way to do that? as now i put display none on the light share bar and display flex on the other one and that toggles. but on the desktop version the light one doesnt need to be removed.
Mateus Lima• 230@mts-ml
Posted
Hey @gajbos99!
I liked that you used React and useState. I've used JS to manipulate the class, but using the hook seems better.
I tried to preview the solution site but got a 404 error. Looking at the code, I noticed that you jumped from a <h1> to a <h4>. I've read that you should always follow header hierarchy.
The solution differs a little from the design; the background color is off, and the name/date is centered when it should be aligned to the left.
About your question, I’d need to see the page and play around with it a bit to try and provide some input.
0- Mateus Lima• 230
@mts-ml
Posted
Hey!
Great job overall! Everything looks pretty good, aside from some color differences. The HTML and CSS are well done, and it's responsive too.
Nice work!
0 - Dei• 60
@deidalopez
Submitted
What are you most proud of, and what would you do differently next time?
Getting the initial scaffolding done.
What challenges did you encounter, and how did you overcome them?
I needed more grid practice, the heading was a struggle for me for some reason.
Mateus Lima• 230@mts-ml
Posted
Hey @deidalopez!
Congratulations on finishing the challenge, I've had some trouble with this one too, had to learn grid in order to get the cards right.
I liked how you've configurated you CSS, I didn't know you could use
$red: hsl(0, 78%, 62%);. Gotta check this out.Does the solution include semantic HTML? I've noticed you used
<h1>and then jumped to<h3>, it's recommended to follow the headers hierarchy.Does the layout look good on a range of screen sizes? On mobile screens the header doesn't appear.
0 - PriyaSharma026• 40
@PriyaSharma026
Submitted
What are you most proud of, and what would you do differently next time?
I am proud of that I could make a responsive project without watching a youtube tutorial and figuring out things by my own and this time I used Sass extension for the first time and I loved it.
Mateus Lima• 230@mts-ml
Posted
Great design, looks exactly like the prototype.
Great job!!!
1 What are you most proud of, and what would you do differently next time?
I built it with attention to the detail and measures of the design. It's the kind of work I do at my workplace.
What challenges did you encounter, and how did you overcome them?
This template was more difficult than the previous one, I had to pay attention to the details
What specific areas of your project would you like help with?
How to avoid mistakes while building the template and be aware of errors.
Mateus Lima• 230@mts-ml
Posted
Hey Jaime!
Excellent work, the design looks very nice.
I have no comments, just congratulations!!!
Marked as helpful
0- Charles• 80
@Ghost-Writer-2
Submitted
What are you most proud of, and what would you do differently next time?
I didn't spend as much time as I did for my previous project and I noticed I've improved a bit in using media queries.
What challenges did you encounter, and how did you overcome them?
The challenge I encountered was making the design responsive but I managed to overcome them by googling stuff 😅
What specific areas of your project would you like help with?
I would heavily appreciate tips on making responsive designs
Mateus Lima• 230@mts-ml
Posted
Hey, pretty good solution, some tips, try using min-height instead of height.
On smaller screens the image is cut in half, using the min-height will solve this.
And on HTML instead of using a lot of <div>, use <ul> and <li> for the links.
Last thing and I don't know if it's on purpose, but the link in your footer is empty.
Coded by <a href="#">Charles</a>.Marked as helpful
0 - João Pedro• 80
@joaodev134
Submitted
Mateus Lima• 230@mts-ml
Posted
Fala João, boa noite!
Projeto ficou bacana, só uma dica, você pode criar um CSS com as configurações globais e as padrões. No segundo arquivo, quando mudar o tamanho da tela devido as media queries, você deixa somente o que quer mudar, não precisa criar 2 arquivos com praticamente a mesma configuração, automaticamente vai sobrescrever o CSS quando alterar a resolução.
Marked as helpful
1 - PMegan McNeill• 60
@bluethreadmade
Submitted
Mateus Lima• 230@mts-ml
Posted
Hi! The solution looks pretty good, no issue with the HTML as far as I can tell. The only issues I've found are that the link to your dev page doesn't work and the <h1> tag is being closed by a </h2>.
0 - Yessica-jsy• 40
@Yessica-jsy
Submitted
Mateus Lima• 230@mts-ml
Posted
The code HTML seems correct, you used <h1> which is good for accessibility (just learned that you need a h1 to help blind people navigate easier). I've noticed the layout isn't properly centralized, you didn't change the font to 'Outfit' and the color is a little different from original, but overall, everything is ok.
Note: English is not my native language.
0
