Skip to content
OverviewSolutions
19
Comments
12
P
Martin Mwaka
@Temceo

All comments

  • Prem Kumar•260
    @prem-kumartSubmitted 4 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
    Martin Mwaka•390
    @TemceoPosted 4 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
  • RadaidehDaniel•370
    @RadaidehDanielSubmitted 5 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
    Martin Mwaka•390
    @TemceoPosted 5 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 6 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
    Martin Mwaka•390
    @TemceoPosted 6 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 6 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
    Martin Mwaka•390
    @TemceoPosted 6 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
  • Martin Mwaka•390
    @TemceoPosted 7 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 7 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
    Martin Mwaka•390
    @TemceoPosted 7 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
  • Martin Mwaka•390
    @TemceoPosted 8 months ago

    Well done. Very good representation of original. Slight suggestion for improvement is more explicit naming of the root variables. For instance "--color1-a" . I am curious to learn what the "a" stands for.

    Marked as helpful
    0
  • Martin Mwaka•390
    @TemceoPosted 8 months ago

    Thanks for submitting your effort. Your css style is not showing. Please place it inside the <head> element for it to show - see below

    <head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Social links profile</title>
    <link rel="preconnect" href="https://fonts.googleapis.com">
    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
    <link href="https://fonts.googleapis.com/css2?family=Inter:[email protected]&display=swap" rel="stylesheet">
******
</head>

    It is best practice to save the style as a separate page - eg "style.css" and then link to it from the <head> element. See example below (final line in head section)-

    <head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Social links profile</title>
    <link rel="preconnect" href="https://fonts.googleapis.com">
    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
    <link href="https://fonts.googleapis.com/css2?family=Inter:[email protected]&display=swap" rel="stylesheet">

<link rel="stylesheet" href="./styles.css">
</head>
    0
  • Anton Vasilache•580
    @AntonvasilacheSubmitted 8 months ago
    What are you most proud of, and what would you do differently next time?
    • Creating and placing the box shadow according to the design
    • Creating an active state
    • Integrating the box-shadow into that active state
    What challenges did you encounter, and how did you overcome them?
    • Adjusting the spacing between the elements to make it look like the design file - took multiple trials and errors to do it without too many fixed values
    What specific areas of your project would you like help with?
    • Not sure how best to adjust the font for mobile view, without using media query. Tried using vw for font-size, but the result does not seem visible.

    Blog preview card using CSS Flexbox

    2
    Martin Mwaka•390
    @TemceoPosted 8 months ago

    A very good replication of the brief - well done.

    A few minor areas for improvement -

    To make the container centred on all views (especially mobile) place the display flex on the body and make the width of the container a percent of the body, with a max width in pixels - see example below -

    body {
  font-family: "Figtree", sans-serif;
  min-height: 100vh;
  display: flex;
  justify-content: center;
  align-items: center;
}

.container {
  padding: 1rem;
  width: 90%;
  max-width: 375px;
  margin-inline: auto;
}

    Also consider using css variables for your colours as it makes it easier to remember - see example below:

    :root {
  --clr-white: hsl(0%, 0%, 100%);;
}

.content {
  background-color: var(--clr-white);
}

    You can read further on css variables here - mdn - css variables

    Marked as helpful
    1
  • Martin Mwaka•390
    @TemceoPosted about 1 year ago

    This is a decent effort. This article will give you some tips on how you can add an overlay using CSS - https://tympanus.net/codrops/2013/11/07/css-overlay-techniques/

    Regarding adding text over another, you can place the stats in a span and then in css display the span as a block (display: block) to force the following text into the line below

    <div> <p><span>10k+</span>companies</p> <p><span>314</span>templates</p> <p><span>12m+</span>queries</p> </div>
    Marked as helpful
    0
  • Martin Mwaka•390
    @TemceoPosted about 1 year ago

    A decent effort. I recommend using google fonts to get similar fonts to the ones used in the example (get the "inter" and "Lexend Deca" fonts from here - https://fonts.google.com/).

    Also have a look something to make you website more dynamic such as flexbox. This is a good article to get you started - https://css-tricks.com/snippets/css/a-guide-to-flexbox/

    0
  • Martin Mwaka•390
    @TemceoPosted about 1 year ago

    Bien hecho, es una buena réplica. Un consejo: considere crear consultas de medios para que puedan verse en pantallas más pequeñas (ipads, teléfonos).

    Marked as helpful
    0