Jan

Latest comments

• 

  Karin•10

  @KarinPortfolioSubmitted 6 months ago

  

  QR Code

  2

  10
  

  P

  Jan•290

  @Jan-Dev0Posted 6 months ago

  Here are a few suggestions for improvement:

  1. Use display: flex on the body to center your container both horizontally and vertically. Also, setting min-height: 100vh ensures that the body takes up at least the full height of the viewport, making sure your content is always centered regardless of the viewport height.

  body {
    display: flex;
    justify-content: center;
    align-items: center;
    min-height: 100vh;
  }
  

  2. In general, it’s better to use class names rather than tags as selectors.
  3. It’s also a good practice to style everything for mobile view first, use media queries with min-width, and then adjust the styles for larger screens.

  Marked as helpful

  0
• 

  samritbasnet•200

  @samritbasnetSubmitted 6 months ago

  

  Newsletter

  2

  00
  

  P

  Jan•290

  @Jan-Dev0Posted 6 months ago

  Your design looks great, but there is something you could improve. You're showing the form again using form.style.display = 'block' which removes the Flexbox properties. Instead, you could control the visibility by adding and removing a class, like this:

  .hidden {
    display: none;
  }
  

  This way, the Flexbox layout stays intact.

  Also, I would suggest using media queries with min-width for responsive design. It’s better to style for the mobile view first, and then in the media queries, only change the styles needed for larger screens.

  0
• 

  Limnosa•100

  @LimnosaSubmitted 6 months ago

  

  FAQ accordion solution with bootstrap

  #bootstrap

  1

  10
  

  P

  Jan•290

  @Jan-Dev0Posted 6 months ago

  I just took a quick look at the code and noticed the use of !important frequently. This likely happens because Bootstrap is included after your stylesheet, causing Bootstrap’s styles to override yours. To ensure that your styles are applied correctly, you should include your stylesheet after Bootstrap’s in the HTML.

  <link rel="stylesheet" href="bootstrap.min.css">
  <link rel="stylesheet" href="styles.css">
  

  Marked as helpful

  2
• 

  ArijTrad•50

  @ArijTradSubmitted 6 months ago

  

  recipe page responsive design

  2

  20
  

  P

  Jan•290

  @Jan-Dev0Posted 6 months ago

  This looks really good! I would just recommend considering using min-width in your media queries, as it generally works better with a mobile-first approach. Also, you might want to use slightly longer and more descriptive variable names to make the code easier to understand. Other than that, great work!

  0
• 

  Levan•90

  @MosacdSubmitted 7 months ago

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

  1. manually changing styles with Javascript probably takes more time than just adding and removing classes, so I should use that approach.

  2)I made it so that the pop up can disappear only by pressing on the button (should have made it so that it'd close by pressing anywhere)

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

  3)I made the div with triangular shape to be a child of the "sharedata" div which makes transitions more uneven (when disappearing there is a brief moment where u can see triangle as it's own thing and not part of the bigger shape) so I just played around with setTimeout function. I should have tried making it a neighbouring element to the "sharedata" div rather than a child, (or start using "::before" and "::after" pseudo classes?)

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

  4)I would like to know how to make the picture look exactly like in the given examples. (do we change it with Css or just use a different picture/use some editor for it)

  

  responsive post, HTML, CSS, JS

  1

  00
  

  P

  Jan•290

  @Jan-Dev0Posted 7 months ago

  The result looks good! However, the JavaScript code is quite extensive. By using CSS classes, you could achieve the same functionality with just a few lines of JavaScript. Cheers!

  0
• 

  P

  Jamie•180

  @jamiethomas1Submitted 7 months ago

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

  I took the time to set up the custom properties I needed from the design system, meaning I didn't have to repeat myself. I may have overused the spacing variables though, I found that there were some cases where it would have been more suitable to set a max-width and have auto margins instead. So I'll try to be aware of that next time.

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

  I had a lot of trouble getting the mobile & tablet hero image to be zoomed in while not overlapping the spacing below it and not causing the page to be wider than the viewport. Eventually found a way around it, but not sure if it's the best solution.

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

  Something I was wondering about towards the end of this project is how properties should be changed in media queries. There are two ways I can think of: re-assigning the properties directly, or initially setting up the properties to use global custom properties which can then be re-assigned in media queries. I think I've seen both done, but I opted for the former. Interested to know what other people have done.

  

  Meet landing page

  1

  01
  

  P

  Jan•290

  @Jan-Dev0Posted 7 months ago

  Looks very good. The only think I would note is that I think it's not necessary to use min-height on both html and body.

  Marked as helpful

  0