Skip to content
OverviewSolutions
10
Comments
13
Elyor05
@Elyor05

All comments

  • Elyor05•200
    @Elyor05

    Great job, but:

    • your header's word "splitter" in tablet version looks odd, as i saw you forgot adding line-height to media (min-width: 700px) and (max-width: 1000px)
    • in images we had logo.svg that we can use instead of making it, i also didn't notice it at start so, i made header also by myself, you can check if you want.

    Firstly you can add line-height to media queries, to see how it should look, then replace it with logo.svg

  • Elyor05•200
    @Elyor05

    Great job, but:

    • The only things that can be fixed is tablet view of your website.I see you used media queries, but set
    .main {
         padding: 0; 
         margin: 0; 
         display: block;
}

    which made it looks odd.

    Marked as helpful
  • Elyor05•200
    @Elyor05

    Grate job.

    • to get rid of colors of the edges just set border-radius of <div class="card card--${title}"> larger that <div class="card__content">…</div>. Set for 2rem, for example.

    On the other hand, everything is perfect.

  • Elyor05•200
    @Elyor05

    Great job, but:

    • You should probably work on adaptive design.
    • Firstly, you can use 'vh' - viewheight and 'vw' - viewwidth when setting height and width for your element, it will resize based on screen resolution
    • Secondly(i suggest this one), you can use media queries, they allow you write css styles for certian devices
    // setting css styles for tablets 
@media screen and (max-width: 769px){
body {
    display: flex;
}
}

    i hope you will keep working

    Marked as helpful
  • Elyor05•200
    @Elyor05

    Good job, everything looks good, but...

    • Your images arent loading up, select correct path to your image
    • Also sort your files in folder in your github, ut will be easier to understand which file is where, for you and for other people
  • RoelofWobben•50
    @RoelofWobben
    What are you most proud of, and what would you do differently next time?

    I would different that some things are gone in my mind. So I would take a beginners course in css to get into it.

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

    no real challenges

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

    is this site good responsive ? Did I use semantic html well ? Are there other things I could improve ?

    Responsive blog card

    2
    Elyor05•200
    @Elyor05

    Great job.

    • You set background-color for the main tag, i suggest you to set it on body tag. Your page will be looking good and without whitespaces around
    body {
    background-color: var(--yellow)
}
    • You have a great responsive design and without using media queries
  • Elyor05•200
    @Elyor05

    Good job. You've done pretty good, but...

    • the background-color of body is not Dark-Slate-Grey: hsl(234, 29%, 20%), it is Charcoal-Grey: hsl(235, 18%, 26%)
    • i suggest you to use variables in css to store specific colors that will be used in project many times
    :root {
    --Dark-Slate-Grey: hsl(234, 29%, 20%);
    --Charcoal-Grey: hsl(235, 18%, 26%);
    --Grey: hsl(231, 7%, 60%);
    --White: hsl(0, 0%, 100%);
}

    in the beggining of yor css file or style tag add this pseudo-class ":root" and there write names of the colors with two dashes at the begining and then the color. Often in style-guide.md will be given main colors, you can take them from there. I wish you good luck and i hope you will keep working

  • Tarek Islam•220
    @tarekul
    What are you most proud of, and what would you do differently next time?

    I am happy about interacting scripts to html and css. I am happy to be able to learn more about CSS positioning.

    What challenges did you encounter, and how did you overcome them?
    • Positioning the share button and social media icons
    • Positioning the social media icons
    • Transitioning the social media icons to fade in and out

    I overcame this by learning to use margin-left: auto to automatically move the share button left as possible. I also learned to use negative margin values to overwrite padding for the social container. I've learned to use visibility and opacity to create animatable properties.

    Responsive Actionable Article Preview Card

    1
    Elyor05•200
    @Elyor05

    Good job.

    • I noticed that you didn't set the colors you needed, try using pipette, it will in css file beside "background-color"
    • Also making curved corners will be pleasing to the eye, try using
    .main {
    border-radius:10px
}
    • Instead of classes you can use ids, if you are sure that only one element will have certain styles. All in all, your project is great, keep going.Good luck
  • agypsynamedTunechi•100
    @agypsynamedTunechi
    What are you most proud of, and what would you do differently next time?

    This is my first time working with media queries and I would say it was fun, looking forward to more building project with media queries

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

    I had an issue adjusting the space between the li markers and the li items but after a quick google search I was able to find a solution on stackoverflow

    Responsive Recipe page using CSS flexbox and Media Queries

    1
    Elyor05•200
    @Elyor05

    great job

  • Elyor05•200
    @Elyor05

    you have done great job but there something you can change/improve in your code

    • in index.html еach tag is surrounded by a div tag which is unnecessary, only parent <div class="container"> would be useful
    • instead of class you can use "id", because if you are sure that this container will be only one, why bother use classes
    • i saw you used tags buttons to yor links, but there are specific tag for links - "<a href="https://www.frontendmentor.io/">Frontend Mentor Link</a>". This is example of link tag and "href" attribute allows to users by clicking on link to go on the website.
    • your container little bit small and not in center, there is solution how to make container always in center
    body {
    display: flex;
    justify-content: center;
    align-items: center;
    min-height: 100vh;
}

    with this styles container will be always in the middle You did amazing job, i hope you learned something new from this feedback and i wish you never give up and remeber to prctice

  • Ademuyiwa•200
    @codingat17
    What are you most proud of, and what would you do differently next time?

    I was able to get the main container centered horizontally and vertically.

    CSS Flexbox

    1
    Elyor05•200
    @Elyor05

    great

  • Elyor05•200
    @Elyor05

    great job

  • Elyor05•200
    @Elyor05

    i see that you made content for whole width of monitor, maybe try to use next time this css styles:"main {width:50vw;margin:0 auto}", to make its centrialized use margin auto to left and right

    Marked as helpful