ItsZubek

Latest comments

• 

  Govardhan V Prakashmurthy•260

  @Top-Trekx-Im-gvp-98Submitted 5 months ago

  

  Responsive Newsletter sign-up form with success message with flex Box

  1

  10
  

  ItsZubek•130

  @ItsZubekPosted 5 months ago

  The javascript part looks alright, however when the dismiss button is pressed the signup form re-appears but the sucess message stays where it was. Another thing is that whatever email I put in it still shows the default one at the sucess screen, it doesn't update automatically to reflect what email has been used in the form.

  As for the CSS I see that you've ignored the mobile design completely. It is really important to practise both the desktop and mobile design and to think about it when creating the html layout to accomodate both cases if necessary. Some styles are off, for example the success message is not styled at all and looks very different from the design.

  Overall it is a good project, but I would spend a little more time on getting the little things right as it will look better on your github.

  0
• 

  Yosef shawah•200

  @yosefshawahSubmitted 5 months ago

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

  hello y'all, can someone point me to repo/guide how to do the shadow-box correctly and managing fonts, thanks!.

  

  desktop order-summary-component layout

  1

  10
  

  ItsZubek•130

  @ItsZubekPosted 5 months ago

  here you go: https://box-shadow.dev/ and https://cssgenerator.pl/box-shadow-generator/

  The latter one works better for me, but it's in Polish

  1
• 

  P

  ttwmf•100

  @ttwmfSubmitted 5 months ago

  

  article-preview-component-master

  1

  20
  

  ItsZubek•130

  @ItsZubekPosted 5 months ago

  I like the solution as it is working as intended. But it would be best if you created the mobile layout as well as it is important for all work to be usable on mobile devices - not just for the challenge but in real life situations as well. Other than that no other issues apart from some colour differences to the design, but that's not a real issue.

  0
• 

  Aurore GOURRAUD•80

  @AuroreTurtleSubmitted 5 months ago

  

  Four card feature section with HTML and CSS

  1

  20
  

  ItsZubek•130

  @ItsZubekPosted 5 months ago

  The cards themselves look very similar to the design. However I'm not sure if it's just on my monitor, but the horizontal spacing between the cards is completely off. I think if you've tried centering the whole design and adding a gap property if you're using flexbox to space them out it would be okay. Another thing I've noticed is if you change the screen size to around 700px you can see the background colours coming out from beneath the card itself. Other than that it looks good.

  0
• 

  Hazhir Naseri•180

  @hazhir00Submitted 5 months ago

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

  I need help to make this design responsive

  

  Product Preview Card using HTMl, CSS & Flexbox

  1

  20
  

  ItsZubek•130

  @ItsZubekPosted 5 months ago

  The solution looks alright, however I see that the image is slightly smaller in width than the right side of the product card. You can fix it by assigning flex-basis property a value of 50% to both the image and the right side of the card. This way they will always take 50% of available space and basically, will be equal in size.

  As for the responsiveness of the design I see that you included media querries in your code, but it would be more effective if you set them a bit higher, i.e. 600px instead of 400 something. I understand this is a rather small thing, but can still make your design look better.

  I see that you've used img instead of the picture that was discussed in the article before this challenge. This forces you to use display: none when changing the screen size to mobile from desktop and vice versa. Check picture online as it will make next mobile responsive designs a lot easier for you and you will avoid unnecessary code.

  Also alt tags are important for accessibility. I understand this is just a challenge on a frontend website, but it's good practice to not forget them even when working on fake projects as it will create a possibly harming habit in the future.

  Overall the design and code look good, but some small tweaks can be made to make it more readable adn resemble the design a little more.

  Marked as helpful

  1
• 

  GProost•40

  @GProostSubmitted 6 months ago

  

  Recipe Page - Gproost

  1

  30
  

  ItsZubek•130

  @ItsZubekPosted 5 months ago

  All necessary HTML is there. However I think you placed the td and th wrong way around. th is table header which should be the first column of the table (calories, carbs, etc. ) and td is table data which are the values. I'd improve on the CSS aspect of the project as it seems you gave up on it halfway through. I can clearly see you know how to style the elements, but you didn't choose to do so in the later part of the design. As for the table an easy fix to make it look more like the design is to use the width property and set it to 100% and then select the th and td and make them 50% and it should sort out the issue. Overall a good attempt and solid work, but I would try to finish the challenge even if you 100% know how exactly to do it - practice makes perfect.

  0