Skip to content
OverviewSolutions
10
Comments
29

Ted Rinquest

@climb512Chiang Mai, Thaland440 points

I have been a full-stack web developer since 2003. I have developed many e-commerce websites from scratch, coding in PHP, SQL and Javascript and building for great SEO results. I am currently shifting my focus to the front end, and implementing the professional best practices for layout and CSS.

I’m currently learning...

I am currently reviewing the modern coding landscape and plugging holes in my skill set. React Angular SASS Building WordPress plugins/themes

Latest solutions

View more solutions

Latest comments

  • Ted Rinquest•440
    @climb512

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

  • Ted Rinquest•440
    @climb512

    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!

  • Ted Rinquest•440
    @climb512

    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
  • Ted Rinquest•440
    @climb512

    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
  • Ted Rinquest•440
    @climb512

    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
  • Ted Rinquest•440
    @climb512

    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!

View more comments