Martin Mwaka

Latest comments

• 

  P

  Prem Kumar•370

  @prem-kumartSubmitted 8 months ago

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

  • Was able to work out the event loop of the whole app.

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

  • Problem : To keep checking the current tip selected.
  • Solution : Used stack properties push() and pop()

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

  • How to write better code?

  

  responsive-tip-calculator

  1

  10
  

  P

  Martin Mwaka•390

  @TemceoPosted 8 months ago

  Good effort. For this feedback I will focus on the CSS. I recommend setting the min-width media query at around 600px. It is currently at 1440px which means someone on laptop (like me), never gets to see the desktop layout as my screen is below 1440px.

  Also set a max width (around 800px) for the calculator card so that it does not stretch out too much (regardless of the size of the viewport the user is using)

  0
• 

  P

  RadaidehDaniel•390

  @RadaidehDanielSubmitted 10 months ago

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

  Most proud of: I learned how to use the old way (XML) and the new way (fetch).

  Do differently: Create a loading spinner.

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

  None

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

  None, but I welcome any comments and hints.

  

  Time tracking dashboard

  1

  00
  

  P

  Martin Mwaka•390

  @TemceoPosted 10 months ago

  Hi, good effort.
  One recommendation for improvement is in the media query. It stays in mobile design until 1000px. You can use css grid auto-fit / minmax to create a responsive layout at all screen sizes. This article from css tricks gives a good demonstration of how this works.

  Marked as helpful

  1
• 

  alvarozama•360

  @alvarozamaSubmitted 10 months ago

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

  The thing I'm proud of the most it the time it took me to complete this project. The previous challenge took me more than a week to get to a point where I was somewhat satisfied, so I was expecting to take about that long to complete this one. However, this time around it only took me three days as it didn't take too many tries to get everything to work properly.

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

  Nothing particularly challenging this time around. Completing this challenge wasn't a breeze, but there was constant progress at all times.

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

  If anything, I'd like to improve the design of the mobile layout. I'm not completely satisfied with it.

  

  Newsletter signup challenge

  1

  20
  

  P

  Martin Mwaka•390

  @TemceoPosted 10 months ago

  A very good effort.

  One area I would suggest for improvement is to give the container a max-width (eg 900px) so that at desktop the layout will remain constant no matter how large the viewport. This will enable you to cut down on the amount of media queries you have used.

  I also recommend learning to use mobile first design as I find this reduces the need for media queries. This article from Kevin Powell gives a good introduction to mobile first design

  Marked as helpful

  0
• 

  Mesoma•140

  @mesoma-hubSubmitted 10 months ago

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

  The Javascript

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

  The Javascript

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

  The actual sizing, spacings and all

  

  article-preview-component

  1

  20
  

  P

  Martin Mwaka•390

  @TemceoPosted 10 months ago

  Well done. The solution is very close to the brief at both mobile and desktop design.

  One potential area for improvement is using a naming convention for your css variables. This will make it easier to understand, especially if you review your code at a later date. This is a good article on css variable naming conventions - link - guidance on css naming conventions

  0
• 

  Tarık•330

  @developertarikSubmitted over 1 year ago

  

  meet landing page with css flexbox

  1

  20
  

  P

  Martin Mwaka•390

  @TemceoPosted 11 months ago

  Hi Tarik

  A good effort. A few potential areas for improvement:

  1. Please review either the figma or sketch files provided in the challenge. You will be able to get the correct layout at different viewports, font, colours shown in the design - (https://www.frontendmentor.io/learning-paths/building-responsive-layouts--z1qCXVqkD/steps/65eab0bd5acebd40b10dc978/challenge/start)

  2. Consider using media queries to better reflect the changes at different viewports. For example there is a single hero image at mobile / tablet view. This transforms to 2 images (left and right side) as you have shown in the desktop view. This article on the use of media queries - (https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_media_queries/Using_media_queries)

  3. Consider using css variables for values you use repeatedly. This will save on typing and remembering. See example below:

  :root {
    --ff-primary-font: "Red Hat Display", sans-serif;
    --fc-primary: #28283d;
  }
  
  html {
    font-family: var(--ff-primary-font);
    color: var(--fc-primary);
  }
  

  0
• 

  Deepti Singh•120

  @DeeptiGit22Submitted 12 months ago

  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?

  .

  

  Responsive Four Card Section

  2

  60
  

  P

  Martin Mwaka•390

  @TemceoPosted 12 months ago

  Good effort. A few areas for potential improvement.

  1. Avoid using inline CSS as it can be difficult to maintain. For the card borders you can an extra class for each card - eg for the first card - ''' class="card supervisor" ''' in the html and then in the styles page set the top border colour using ".supervisor"

  2. I recommend having an interim media query at about 700px where you can have 2 cards per row and then at the 1200px break out into the desktop design. Below is an example using grid:

  @media (min-width: 700px) {
    .container {
      display: grid;
      gap: 2rem;
      grid-template-areas:
        "one two "
        "three four";
    }
  
    .card {
      max-width: 340px;
    }
  
    .card:nth-child(1) {
      grid-area: one;
    }
  
    .card:nth-child(2) {
      grid-area: two;
    }
  
    .card:nth-child(3) {
      grid-area: three;
    }
  
    .card:nth-child(4) {
      grid-area: four;
    }
  }
  
  @media (min-width: 1200px) {
    .container {
      grid-template-areas:
        "... two ..."
        "one two four"
        "one three four"
        "... three ...";
    }
  }
  

  Marked as helpful

  0