Skip to content
OverviewSolutions
10
Comments
29
Ted Rinquest
@climb512

All comments

  • Ted Rinquest•440
    @climb512Posted over 1 year ago

    You may have missed icon-view.svg in the main directory.

    0
  • Ted Rinquest•440
    @climb512Posted over 1 year ago

    Looks great!

    I see you were able to center the project both vertically and horizontally using margins, and it looks great for this simple page, but I can point out another way, which is a very popular standard and much more useful as projects become more complex. You can use the built in CSS property of display: flex; to achieve this easily. I point this out because I see you tried using

    .box { 
display: block;
align-items: center;
justify-content: center;
}

    ...but align-items and justify-content won't work with display: block. Instead, remove the margin and put this centering code on the parent (the body tag in this case), and give it a full page height, like so:

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

    Instead of Flex you could also use Grid, but positioning most elements with one of those two is the general standard in 2023. Actually most projects will use both, as they are slightly different. There are many great tutorials on Flexbox and CSS-Grid available, and I found that understanding at least one of them to start is pretty important.

    Keep coding!

    0
  • Lucas Araújo•40
    @LucasSilvaAraujoSubmitted over 1 year ago

    I'm unsure of the way I did to do spacing between the words and icons from the right part. I'm sure there's a better way to do this but idk how. Like, the actual space is proportional from the 3 parts because I'm using "space-between" from "justify-content", idk how to do a smaller space between the icon and text, and a bigger space between the text and grade. As a matter of fact, I'm actually know some ways to do, but I'm sure there are better ways, so I'm open to listen from community :V!

    Results Summary Component

    1
    Ted Rinquest•440
    @climb512Posted over 1 year ago

    Looks great Lucas,

    For the spacing which you ask about, I decided to use grid-areas to solve this. I took inspiration from the old Bootstrap framework, where everything is in 12 columns. So what I did was this:

    .card {
display: grid;
gap: 4px;
grid-template-areas: "A B C C C C C C C C C D";
justify-items: end;
align-items: center;
}

    ...then for the icon, I just gave it grid-area: A; the word ("Reaction") gets grid-area: B; and the whole score (80/100) gets grid-area: C; Grid-area D is for margin on the right, while justify-items: end; takes care of margin-left.

    I'm interested to see how others do this too.

    Marked as helpful
    1
  • Tatiana Naumova•10
    @Tatiana190389Submitted over 1 year ago

    It was my first own project. My code is not clear, and I want to understand how I can do it in future. I did't use file data.json. Would you tell me, please, how and where I can use it in future. And I want to hear your general opinion of my project. Maybe, what was good and what was bad.

    I used only CSS and HTML. It is my one of the first project

    2
    Ted Rinquest•440
    @climb512Posted over 1 year ago

    Looks great!

    Your desktop solution looks awesome. I do have some suggestions on 1) how to make it responsive (change depending on which device or screen size is viewing it), 2) general advice on centering without random margin values, and 3) your question about data.json

    1 -- Responsiveness: If you want to create a better experience on mobile screen sizes, the Results and Summary sections should stack, rather than appearing beside each other. For this you can use a @media query, such as:

    @media screen and (min-width:500px) {
/* all your css for DESKTOP (larger than 500px) goes here */
}
/* all your code for MOBILE (under 500px) goes here. */

    You can change the "500px" to whatever size makes sense for the particular design.

    2 - You can center your entire project vertically and horizontally using either CSS-Grid or Flexbox, both of which are native CSS methods and supported in all modern browsers. For instance, you could remove the margin-left and margin-top from the card class and add this to the body element:

    body {
height: 100vh;  /* giving a full height is necessary for vertical centering */
display: flex;
flex-wrap: wrap; /* necessary to allow align-content to work */
align-content: center;
justify-content: center;
}

    3 - data.json can be used to dynamically add data to the page. I implemented this when I did this challenge, so please check out my solution to see how I read in the data.json file, set an event listener, and how to do the html updating in a callback function. https://github.com/climb512/results-summary-component-main

    Keep coding!

    Marked as helpful
    0
  • 00YellowLemon•440
    @00YellowLemonSubmitted over 1 year ago

    I had trouble converting this to mobile . Can anyone tell me how to do it. The question does not fallback to its original color. Suggest a fix for this and more. Feedback will be highly appreciated. I just dont why the images dont show on github pages.

    FAQ Accordion

    2
    Ted Rinquest•440
    @climb512Posted over 1 year ago

    Hi, I took a look at your solution and can offer a few suggestions:

    1 -- some images not appearing: this is just due to typos in your html. Make the image path relative to the index.html, not the root of the server (in this case, just add a . before the path, because "." means "starting from this directory").

    <img src="/images/illustration-woman-online-desktop.svg" alt="" class="img2">
should be
<img src="./images/illustration-woman-online-desktop.svg" alt="" class="img2">

    2 -- font colors not "resetting" correctly if multiple <li>s are clicked: Your javascript starts out with a global "i" set to true, then you toggle this value every time an <li> is clicked -- this works if only one <li> is ever opened and then closed before another one is clicked, but breaks when two of them are opened in a row. You could change this to open an <li> if it has the class of "closed" and close it if it has the class of "open", and use querySelector to set and remove those classes immediately after you set the font-weight, color and rotate.

    3 -- mobile vs desktop versions are usually done with a @media query at some breakpoint. In this case, a common breakpoint at which to change the layout might be 765px (very common point to change between tablet and desktop). Put all your code for the MOBILE version OUTSIDE the breakpoint, and all the DESKTOP version code INSIDE the breakpoint. You could do it the other way around, but this way will be "mobile-first" development style, an accepted best practice dev style. So in code:

    ...
/* all normal css code to style the mobile version */
...
@media screen and (min-width:765px)  {
/* all normal css code to style the DESKTOP version (larger than 765px) */
}

    I hope this helps you get started with solving your questions. Good job!

    Marked as helpful
    0
  • Ted Rinquest•440
    @climb512Posted over 1 year ago

    Looks good!

    Did you consider different options for positioning the background images? To me, it looks like they have vertical edges positioned near the center. This way also eliminates the need for a media query. If you like that look, you can use a "calc" to set this bg-image posiition:

    position: absolute;
top: -488px; /* half the image height */
left: calc(50% - 976px); /* 50% minus full image width */
width: 976px;
height: 976px;

    The bottom image would just use

    right: calc(50% - 976px);

    ...instead of left.

    Cheers!

    0
  • beth•110
    @beth1207Submitted over 1 year ago

    I found using the hoover efect extremely difficult I am unsure of the active version what is the difference between margin and padding

    NFT card

    2
    Ted Rinquest•440
    @climb512Posted over 1 year ago

    You did it!! Looks great! I see that you used a screenshot image of the "eye icon" rather than the .svg in the images folder, which is fine if you prefer how the .png looks. The main reason to prefer an .svg over a .png is that it will scale up without losing its sharpness, but that isn't an issue here.

    Great job :)

    Marked as helpful
    0
  • Ted Rinquest•440
    @climb512Posted over 1 year ago

    Just a note to elaborate on the main point of the advice which Boots left you:

    Your Flexbox needs to have a height for the content to vertically center inside of.

    As it stands, after removing the margin-top: 10vh; hack from .secaoQr your whole layout is just 445px tall, just the size of your content with padding. Making the min-height: 100vh; on the body (or even on just the menuQR div) will give it the full room to center in the page.

    This is a very common point of confusion that most Flexbox tutorials do not stress enough.

    Happy coding!

    2
  • beth•110
    @beth1207Submitted over 1 year ago

    I found using the hoover efect extremely difficult I am unsure of the active version what is the difference between margin and padding

    NFT card

    2
    Ted Rinquest•440
    @climb512Posted over 1 year ago

    Looks good!

    You've got the basics down, now let's tackle the positioning concepts that make the hover effects possible.

    The hover effect on the main image is done in css by using "position" and "opacity".
    So, first create an empty <div> the same size as the large image, center the "eye" icon inside of it, setting a cyan background and then, importantly, setting its opacity to 0. This makes it invisible. Then you use :hover on the <div> to change opacity to 1 when the mouse hovers over it. Something like this:

    HTML:
<div class="image-group">
<img class="image__img" src="images/image-equilibrium.jpg" alt="NFT Equilibrium #3429">
<div class="image__overlay">
<img src="images/icon-view.svg" alt="eye icon" class="hover-eye">
</div>
</div>

CSS:
.image-group {
position: relative;
}
.image__overlay {
position: absolute;
top: 0;
left: 0;
width: 100%;  // this means 100% of the containing element, the .image-group div
height: 100%; // this means 100% of the containing element, the .image-group div
background: hsla(178, 100%, 50%, 0.5); //cyan color
opacity: 0;
.image__overlay:hover {
opacity: 1;
}

    As for margin vs padding, you can search for info on the "box model" of css, and there are a million resources that explain it in detail. Basically, your "content", like, say, a picture or some text, sits at the center of your element (a <div>, a <p>, or whatever). This element can have padding, then possibly a border and finally margin around it, in that order, moving outwards from the center. Padding and margin can both be used to space out elements, but experimentation will show you that they are actually not the same. For instance, a background color will show up in the padding, but not in the margin. Please check out the "box model" for a full explanation.

    I hope this helps! Keep coding!!

    Marked as helpful
    0
  • BBualdo•540
    @BBualdoSubmitted over 1 year ago

    Hello, When I was building this project I met 2 issues:

    • [FIXED] How to style site for mobile device, when I can't fold my page more than 440px wide?
    • Is there a way to position paragraphs automatically with flexbox without using too much margin properties?

    Feel free to check out my code and point out things I could do better, because I feel that I used too much code.

    Thanks!

    Flexbox and weird style technique

    2
    Ted Rinquest•440
    @climb512Posted over 1 year ago

    Hello again,

    As for your first question, if you are using the Chrome browser, hit <F12> to access the dev tools then Ctrl-Shift-M to show a mobile-device view. You can then show your page on any screen size.

    Marked as helpful
    1
  • BBualdo•540
    @BBualdoSubmitted over 1 year ago

    Hello, When I was building this project I met 2 issues:

    • [FIXED] How to style site for mobile device, when I can't fold my page more than 440px wide?
    • Is there a way to position paragraphs automatically with flexbox without using too much margin properties?

    Feel free to check out my code and point out things I could do better, because I feel that I used too much code.

    Thanks!

    Flexbox and weird style technique

    2
    Ted Rinquest•440
    @climb512Posted over 1 year ago

    Your Desktop version looks great!

    You ask about how to style the Mobile version, so I'll give you some general thoughts on how to proceed with a project like this where you know you want a different display on mobile:

    There is a well-respected design pattern in web development called "Mobile First", which I try to apply to all my projects. It just means that you do the Mobile version first, with all the styling, and then put everything that you want to change for Desktop into a @media query. This is often much easier, because usually the desktop layout looks more complex, and it is often easier to add complexity in a @media query rather than take the complexity away inside that @media query.

    So I see that now you have all your code inside @media (min-width: 376px) {}

    This means that there is no stying at all below 376px, which is one problem, and also your desktop styling applies all the way down to 376px (some number like 600px might be more appropriate for a breakpoint on this project, just based on how the desktop sections start to crush together at 600px).

    Please check out "Mobile-first" design, there are many videos and blog posts on the topic. It seems simple, but it made a big difference for me, especially in the speed at which I could develop a responsive project.

    So, to be clear, most of the element styling (other than the overall split-panel layout) can apply to mobile and desktop too, so all of that can be OUTSIDE the @media (min-width:600px) {} along with any special mobile styling.

    I hope this helps! Ted

    Marked as helpful
    1
  • Ted Rinquest•440
    @climb512Posted over 1 year ago

    Looks good!

    You mentioned colors, so I have a couple suggestions that helped me:

    -- You say "It's quite difficult for me to copy colors", so you definitely need a color picker. If you use Windows you can download "PowerToys" from Microsoft. I use the color picker and also the measurement tool all the time: https://learn.microsoft.com/en-us/windows/powertoys/color-picker

    -- For this specific project you have the option of just adding another number to the hsl colors that they gave us which will alter the opacity. For instance, on the red "Reaction" section, use the given "hsl" color for the text, but change this to "hsla" and add an opacity below 1.0 for the lighter background, like this:

    .reaction {
color: hsl(0, 100%, 67%); 
background-color: hsla(0, 100%, 67%, 0.07); /* 0.07 makes for a low opacity Red color) */
}

    Hope this helps!

    Marked as helpful
    0