Favourite Jome

Latest comments

• 

  Anna Leigh•5,135

  @brasspetalsSubmitted about 3 years ago

  

  Pod Request Access Landing Page - CSS Animations, JS

  6

  141
  

  Favourite Jome•1,110

  @jomefavouritePosted almost 3 years ago

  Hello Anna!

  I really love how you take your time to make the layouts of each project you've done pixel-perfect, and also add really smooth animations. I wish I spent more time on animations 😅

  Welcome back to coding!

  1
• 

  Ajiboso Adeola•70

  @comfort-deolaSubmitted over 3 years ago

  

  Base Apparel coming soon page challenge hub

  1

  20
  

  Favourite Jome•1,110

  @jomefavouritePosted over 3 years ago

  Hi Adeola, nice solution.

  The email validation is okay, using just HTML to validate is fine. I guess you could change the text alignment to left when you're on desktop view by adding a media query.

  0
• 

  Agata Liberska•4,015

  @AgataLiberskaSubmitted almost 4 years ago

  

  React JS + Styled Components

  2

  61
  

  Favourite Jome•1,110

  @jomefavouritePosted almost 4 years ago

  Nicely done, Agata!

  0
• 

  Dike Obinna Clinton•200

  @Dike-CodeSubmitted almost 4 years ago

  

  Semantic HTML5 and CSS coupled with Flexbox and Grid)

  3

  30
  

  Favourite Jome•1,110

  @jomefavouritePosted almost 4 years ago

  Hello Clinton, you did a very good job on your first challenge and here're my suggestions.

  • I noticed that the section element with the class name site has a div element with an image element with no src attribute link which produces an unnecessary space in the layout. I suggest removing that div element.

  • Also, I suggest applying a max-weight property to the paragraph p elements in other for the text not to be stretched out on bigger screens.

  • Also the images, should have a max-weight property applied. For example:

  .device_showcase .device {
      width: 75%;
      max-width: 1000px;
  }
  

  The max-weight property prevent the image from growing along with the viewport when that max weight is reached.

  • Finally, I'll suggest following a much better semantic layout structure. I noticed you didn't include the main element. Well, this is my personal structure though. Example below

  <header>...</header>
  <main>...</main>
  <footer>...</footer>
  

  0
• 

  Priyanka•150

  @priyankaladSubmitted almost 4 years ago

  

  chat app css illustration using flexbox

  2

  40
  

  Favourite Jome•1,110

  @jomefavouritePosted almost 4 years ago

  Very good solution, it's very close to the design.

  1. Adding a max-width to the selector .mobile-flex-item would fix it from growing. You could try max-width: 350px;.

  • top: 100% simply means that the element should be at the bottom of the viewport.

  Think of it like you want white space to be at the top of the viewport, so you assigned a value of 100%, which pushes the element to the bottom.

  • bottom: 100% is the opposite, so the element would be at the top of the viewport.
  • right: 0% simply means there shouldn't be any white space left on the right side of the screen. So therefore the element should occupy that white space, that's why the element moves to the right.

  3. It depends, there isn't one right way of achieving a responsive design. I noticed you use percentages along with the values in your margin/padding to achieve the device. I'll try to avoid using percentages though, it could cause some issues on smaller issues but ah, you pull it off.

  Keep on coding, I hope my explanations were simple enough.

  0
• 

  Priyanka•150

  @priyankaladSubmitted almost 4 years ago

  

  chat app css illustration using flexbox

  2

  40
  

  Favourite Jome•1,110

  @jomefavouritePosted almost 4 years ago

  Very good solution, it's very close to the design.

  1. Adding a max-width to the selector .mobile-flex-item would fix it from growing. You could try max-width: 350px;.

  • top: 100% simply means that the element should be at the bottom of the viewport.

  Think of it like you want white space to be at the top of the viewport, so you assigned a value of 100%, which pushes the element to the bottom.

  • bottom: 100% is the opposite, so the element would be at the top of the viewport.
  • right: 0% simply means there shouldn't be any white space left on the right side of the screen. So therefore the element should occupy that white space, that's why the element moves to the right.

  3. It depends, there isn't one right way of achieving a responsive design. I noticed you use percentages along with the values in your margin/padding to achieve the device. I'll try to avoid using percentages though, it could cause some issues on smaller issues but ah, you pull it off.

  Keep on coding, I hope my explanations were simple enough.

  0