Skip to content
OverviewSolutions
4
Comments
4
boysers
@boysers

All comments

  • josip-hβ€’90
    @josip-hSubmitted 4 months ago
    What are you most proud of, and what would you do differently next time?

    I am most proud of sticking with my schedule for learning web development, seeing results, and completing the projects.

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

    During this project, I encountered two small challenges which were easily solved by searching the web.

    • Changing the color of list markers (bullets, numbers, ...)
    • Targeting all children elements except the last one

    Resources and examples can be found in the README file.

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

    I would greatly appreciate any suggestions or comments.

    Responsive Recipe Page Challenge Solution

    1
    boysersβ€’60
    @boysersPosted 4 months ago

    Hi, you can improve your "nutrition table" CSS as follows:

    .nutrition__table {
  display: block;
  margin-top: 12px;

  tbody {
    display: block;
  }

  tbody > :not(:last-child) {
    padding: 12px 0;
    border-bottom: 1px solid var(--color-white-coffee);
  }

  tbody > :last-child {
    padding-top: 12px;
  }

  tr {
    display: flex; /* Changed from block to flex */
  }

  td {
    display: inline-block;
    height: 24px;
    /* width: 115.5px; remove fixed width */
    flex: 1; /* Added flex 1 */
  }

  .tag {
    padding-left: 32px;
  }

  .value {
    margin-left: 16px;
  }
}

    good work! πŸ˜‰

    0
  • erenβ€’300
    @erensaracSubmitted 7 months ago
    What are you most proud of, and what would you do differently next time?

    It was the best of my solution I'ever completed. I can improve this project based this design.

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

    Space betweens texts was challange for me. I spent time for do my best.

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

    Any idea of improve this project based this design, will be good. All feedback is welcome.

    Social Links Profile built with HTML and SCSS (BEM Methodology)

    1
    boysersβ€’60
    @boysersPosted 4 months ago

    Hi, good work

    0
  • boysersβ€’60
    @boysersPosted 4 months ago

    Hi, a tip: never put all your CSS in media queries. This practice limits the readability and maintainability of your code. "Media queries" are intended to adjust styles based on different devices and screen resolutions. By isolating all your CSS within them, you make it harder to manage the overall site styles.

    And (in index.html) replace svg to img.

    <img src="./assets//images/illustration-article.svg" alt="illustration article" >

    I corrected your CSS to show you the difference. Feel free to use it as a reference or for inspiration.

    @import url("https://fonts.googleapis.com/css2?family=Figtree:ital,wght@0,300..900;1,300..900&display=swap");

html {
  font-size: 62.5%;
  box-sizing: border-box;
}
*,
* ::before *,
*::after {
  box-sizing: inherit;
}
:root {
  --Yellow: hsl(47, 88%, 63%);
  --White: hsl(0, 0%, 100%);
  --Grey: hsl(0, 0%, 50%);
  --fuente-principal: "Figtree";
}

/* CSS custom properties */

body {
  box-sizing: 16px;
  font-family: var(--fuente-principal);
  background-color: var(--ight-gray);
  font-size: 16px;
}

.contenedor {
  background-color: var(--Yellow);
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 0 2rem;
  height: 100dvh;
}

.contenedor__car {
  max-width: calc(384px - 1.5rem);
  -webkit-box-shadow: 10px 10px 1px 0px rgba(0, 0, 0, 0.75);
  -moz-box-shadow: 10px 10px 1px 0px rgba(0, 0, 0, 0.75);
  box-shadow: 10px 10px 1px 0px rgba(0, 0, 0, 0.75);
  background-color: var(--White);
  padding: 1.5rem;
  border: solid 1px black;

  border-radius: 3rem;

  display: flex;
  flex-direction: column;
}

.contenedor__header {
  max-width: 100%;
}

.contenedor__header img {
  width: 100%;
  height: 200px;
  object-fit: cover;
  border-radius: 2rem;
  display: block;
}

.contenedor__navegacion {
  margin-top: 2rem;
  font-weight: 400;
}

.contenedor__btn input {
  background-color: var(--Yellow);
  border: none;
  padding: 8px;
  font-weight: 800;
  border-radius: 4px;
}

.contenedor__text h2 {
  margin-top: 0;
  font-weight: 800;
}

.contenedor__text p {
  color: var(--Grey);
}

.contenedor__img {
  display: flex;
  align-items: center;
  gap: 12px;
}

.contenedor__img p {
  margin: 0;
  margin-right: 2rem;
  font-weight: 800;
}

.contenedor__img img {
  width: 4rem;
  height: 4rem;
}

.contenedor__footer {
  display: flex;
  justify-content: center;
}

.attribution {
  font-size: 11px;
  text-align: center;
}

.attribution a {
  color: hsl(228, 45%, 44%);
}

@media (max-width: 768px) {
  .contenedor__btn > input,
  p {
    font-size: 12px;
  }

  .contenedor__text > h2 {
    font-size: 20px;
  }

  .contenedor__text > p {
    font-size: 14px;
  }
}

    Good luck! πŸ˜‰

    Marked as helpful
    0
  • quangphan0102β€’40
    @quangphan0102Submitted 5 months ago
    What are you most proud of, and what would you do differently next time?

    Knowing how git works, Optimize my time with github, gotta delete repos about 3-4 times, LOL

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

    problems with git is the most, i have been known html5, css3 and js but never have exps with git and github so these 2 is my challenge and i am researching how to create, del, config my repo and how to publish project with github pages

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

    None, if it had i'd like to say it git and github lmao

    QR Code component main

    1
    boysersβ€’60
    @boysersPosted 4 months ago

    hello, you have to have your repository in public so that we can see your code :)

    for the design :

    • margin between image and title is slightly too large

    utils link :

    0