Frontend Mentor | matt2282's profile

@alidhainiSubmitted 6 months ago

News Homepage using CSS Grid System

@matt2282Posted 3 months ago

Good Job!

A few things to note: *On the nav bar on the mobile screen, you cannot exit the nav bar with the keyboard only. *The background color on the design is off-white, you used white on your solution *The ability to select the hyperlinks on the page with a keyboard is missing.("Hydrogen VS Electric cars", "Reviving Retro PCs", ect.) *If you resize the page to larger screen sizes the main image gets stretched out. You could either limit the size of the grid or make the grid scale up to larger screens.

0

Samuel Adu•990

@samuel-aduSubmitted 3 months ago

Accessible Contact Form

1

matt2282•310

@matt2282Posted 3 months ago

Very Good!

It might be more intuitive to have the query type buttons work when you click anywhere in the box, and to also display a pointer cursor.

The consent checkbox is overlapping with the custom image when it is checked.

0

Konrad•370

@konradbaczykSubmitted 3 months ago

FAQ accordion without JS

1

matt2282•310

@matt2282Posted 3 months ago

I like the animation on the buttons and the accordion functions as expected.

A few bugs and issues I encountered:

When on mobile and you expand the accordion all the way out on all four questions the top of the page can start to get cut off.
Your page does not have any support for keyboard only navigation.

Marked as helpful

0

Kamran Kiani•1,280

@kaamiikSubmitted 3 months ago

What are you most proud of, and what would you do differently next time?

Using Astro for the first time in a project

What challenges did you encounter, and how did you overcome them?

HTML structure and do this project based on making component was challenging

What specific areas of your project would you like help with?

I think accessibility issues is the most important part and html structure is important too.

Interactive Rating Component Using Astro and Sass

1

matt2282•310

@matt2282Posted 3 months ago

Good job!

My understanding of accessibility is that your page needs to meet a few criteria: -alternate text on images: you provided an alt text on the image on the thank you page. -navigation with the tab key on the keyboard: the tab button does not select the rating buttons on the main page. -using the correct semantic html elements -ensuring a screen reader can read the content on the page and its convey its context.

There is more to it than this, but this is the basics I have learned so far.

0

ikethedev•260

@ikethedevSubmitted 3 months ago

What are you most proud of, and what would you do differently next time?

I am proud that I wrote this more modular and I believe I did a solid job on naming function descriptive names

What challenges did you encounter, and how did you overcome them?

A few challenges I faced was writing a function that updated the object in a way that wasn't overly complicated

What specific areas of your project would you like help with?

Still working on pixel perfection!

tip calculator

2

matt2282•310

@matt2282Posted 3 months ago

Good job on the overall layout of the app, but I would recommend giving this another shot. I can't seem to get your calculator to give any values or at least when it does output some values they are not correct.

The grey "bill" and "number of people" and "custom" divs do not go 100% of the container and they don't line up with everything else. The text in placeholder for Custom also isn't centered.

Some additional features you may consider adding: -border around the custom tip, bill, number of people and amount to know you have it selected. -when you press reset it may be preferential to set 0 as the placeholder and not have it be an actual zero. Additionally, having the reset unselect the selected tip value if you prefer. -error checking for zero and subsequent error message -allow only positive integers as the input -greying out the reset button after it is pressed.

0

Bart Feesley•220

@antimatterhutSubmitted 3 months ago

What are you most proud of, and what would you do differently next time?

I am very proud of the fact that I could do this at all.

What challenges did you encounter, and how did you overcome them?

I have never worked with async/await or promises or none of that. I didnt even know why they were used or what they did until now.

What specific areas of your project would you like help with?

Optimally, I'd like to condense the js code into just 2 big functions instead of 6.

time tracking dashboard

1

matt2282•310

@matt2282Posted 3 months ago

Good job! I don't have much to say except that you forgot the hover state on the ellipsis. It is supposed to turn white when you hover over it.

Marked as helpful

1

sankiss55•200

@sankiss55Submitted 3 months ago

What are you most proud of, and what would you do differently next time?

saber muy bien como manejar el estilo de display: grid en css y me gusto como lo diseñe sin dificultad

What challenges did you encounter, and how did you overcome them?

creo que ninguno

What specific areas of your project would you like help with?

en todo un poco estaria bien me ayudaria mucho

pagina con ayuda de display grid css

1

matt2282•310

@matt2282Posted 3 months ago

You did the email validation and switching of the pages correctly and the general layout of the page is good, but it does have a lot of issues.

The email input has a cursor pointer when it should be a text selection pointer(this is default I believe). Desktop: -background color should be hsl(235, 18%, 26%)

The padding on the right of the image gets messed up when you switch from mobile back to desktop.
Missing a space on "Stay updated!"
I'd recommend setting a fixed height/width for the outside container because things get weird when the container gets resized.
Also recommend keep the image at a fixed size. -Could use a bit more padding especially on the left.

Mobile:

The original design has the image at the very top of the page while your solution has it centered and the desktop background visible.

Success Page:

Misspelled "subscribing!"
The email should be the same as the email you entered in the box on the first page not [email protected] every time.
You forgot to make a mobile friendly version. It looks not right on mobile.

0

Mateusz•390

@MatPawlukSubmitted 4 months ago

HTML and SCSS

1

matt2282•310

@matt2282Posted 4 months ago

You swapped Kira and Jeanette.

The design is centered on the page whereas your solution is at the top of the page.

0

Ahmed Bouhrira•80

@Ahmed-BouhriraSubmitted 4 months ago

Four card feature section

1

matt2282•310

@matt2282Posted 4 months ago

I'd recommend giving this another shot as most of the styling deviates from the original. The site is not responsive when you change the screen size to mobile and the cards start to overlap.

0

DipakMahara•30

@DipakMaharaSubmitted 4 months ago

What are you most proud of, and what would you do differently next time?

try simple things and dont jump directly to div tags.

What challenges did you encounter, and how did you overcome them?

my friend give some pointer to work on

What specific areas of your project would you like help with?

i thick my basic about html

Responsive page

2

matt2282•310

@matt2282Posted 4 months ago

It is common practice to name your css file "style.css"

When you load a mobile page and then go back to the desktop page it was keeping the mobile image loaded instead of changing it back to desktop again. You can replicate this by zooming in all the way and zooming out. The only way I was able to fix this was using this method: <picture class="product-image"> <source srcset="images/image-product-desktop.jpg 600w" media="(min-width: 600px)" /> <source srcset="images/image-product-mobile.jpg 686w" media="(max-width: 599px)" /> <img src="images/image-product-mobile.jpg" alt="Product Image" /> </picture>

You could also use media query to do this but that is less efficient as it loads both images regardless of which device you are on.

Marked as helpful

0