Skip to content
OverviewSolutions
36
Comments
233
Mojtaba Mosavi
@MojtabaMosavi

All comments

  • Mojtaba Mosavi•3,760
    @MojtabaMosaviPosted over 2 years ago

    Good job, I working on this one as well. Take a look at the following points:

    • In my opinion the more interactive a UI is the better and therefor as frontend dev you should use at every at you disposal where it makes sence for example for simple link a hover state suffices but somewhere else you might wanna spice things up with custom animation/transitions.

      1. the toggle button for the theme needs a hover state to communicate to the users it could be changed.

      2. the card representing each contry needs a hover state as well to let the user know there is more.

      3. The border contries displayed in the footer of when you click on contry

    • Take a look at the issu rapport generated and correct them.

    • The mode toggle button is not keybord accessible and has a too wide of a clickable area by which I mean if you click in the middle of header you can change the theme, the clickable area should be a small rectangle covering the toggle button.

    • The queries that don't mapp to a real country, it should display a "no result" message to let the user know it does not exist.

    Happy coding :=)

    Marked as helpful
    1
  • Kaung Zin Hein•720
    @K4UNGSubmitted over 2 years ago

    I tried to make this a single page app and because of that I almost didn't do the bonus challenge. But somehow I finished it. I tried to reuse as many code as possible and overall, I'm really satisfied with how it turned out.

    I learned a lot about JS and familiarized myself with timing functions. The hard part for me was fitting everything in one file and reusing them. I also added some sound effects and hopefully it doesn't annoy you. I'd very much love to hear your feedbacks and suggestions on how I can improve further. Happy Coding!

    P.S. I had my overflow: hidden on my body before, that's why the preview screenshot looks messed up. I fixed it by putting it all in a wrapper and it should be fine now.

    Rock, Paper, Scissors, (Lizard, Spock) game with SCSS, Vanilla JS

    1
    Mojtaba Mosavi•3,760
    @MojtabaMosaviPosted over 2 years ago

    Hi Kaung!, Congrats on completing this, it's not a easy beast to sly. I think the the sound effects a positively supplemental to the interactivity, it's always fun and inspirational to see individuals mark up the interactivity (pun intended) and get creative.

    • Using ES6 module system you can easily split this into sperate chunks by functionality something like:
    game:
    modal.js
    rockPaperScissors.js
    rockPaperScissors-extended.js
    main.js

    • The close icon in the modal has a simple hover state where the bg color is changed to red.

    • Upon tabbin the game button excute the styles of the hover state, it would be benefiery to visual user if the aslo had some kind of visual marker like a ouline:

    game-button{

    &:hover,&:focus{
        outline: 1px solid color;
        outline-offset: 0.25rem; 

} 
}

    • A note about you implentation of the mode, using a unordered list has accessibility implication such as a screen reader would take much longer time to read all the five list item reather tha a simple heading one therefore the mode is semantically better descriebed be a <h1>.

    • The pluse animation is key visual, suggetively it should be amplified.

    Keep coding :=)

    Marked as helpful
    1
  • lulzz•210
    @lulzzSubmitted over 2 years ago

    This was really much tougher than i thought it would be. Used typescript for handling animations and add/remove classes. Your thoughts are very welcomed. :)

    Responsive Preview card HTML CSS Typescript

    1
    Mojtaba Mosavi•3,760
    @MojtabaMosaviPosted over 2 years ago
    • Add a hover state to the social icons, a color or size change suffices.
    • The markup implenetation is a bit interesting, I think something the you missed is to ask youself where this would be used ? The answer is most like that is going to be a constituent of something bigger and it that case you might wanna resue it somewhere else. Here is an alternative markup
    <article class="article">
    <div class="article__content">
       <h3 class="article__heading"></h3>
      <p class="article__text"></p>
       <div class="article__profile">...<div>
    </div>
   <div class="article__img-wrapper">
      <img  class="article__img"/>
   </div>
</article>
```
Keep coding :=)
    Marked as helpful
    1
  • Mojtaba Mosavi•3,760
    @MojtabaMosaviPosted over 2 years ago

    • It would've looked better with original background-color, totatly respect your choci (just a suggestion).

    • Add hover state to the soical icon, a minimal hover state would be a subtle change in size, something like

    .icon:hover{
    transform:scale(1.1)
}
    • "class="top-text"" would be better semantically as a h1 than p element since it explains the whole function of the UI.

    Keep coding :=)

    Marked as helpful
    0
  • Zephsa•10
    @ZephsaSubmitted over 2 years ago

    Hi everyone!

    I'm not sure about how I set up the responsive width of the box. I'd like to know if there are better ways to achieve the same result (maybe without using pixels unit?). Also I'd appreciate some advice on how to "shrink" my CSS file, I mean if there's something I can delete or position differently to get a cleaner file.

    Thank you all!

    Mobile-first responsive solution using CSS Flexbox

    1
    Mojtaba Mosavi•3,760
    @MojtabaMosaviPosted over 2 years ago

    Regarding you query:

    • Correct inutition (or maybe you read it somewhere!), css unit generally can be categoried as relative units and absolute unit. Pixel belongs to the letter category which are not so well suited for responsive behavior. Using relative units such rem or em gives are better choices, I would recomand using rem becausing em are a bit more diffcult to wrap you're head around since the are base depend on font-size.

    • For projects of this scope a proper section style will due but as you take on bigger projects something like 7-1 scss architecture is a good candidate for modularizing you styles. You can apply to css if you dont want to use scss or sass.

    Keep coding :=)

    Marked as helpful
    0
  • Mojtaba Mosavi•3,760
    @MojtabaMosaviPosted over 2 years ago

    Regarding you query:

    I not sure if i understand you're question correctly, it would help a great deal if you describe the desired outcome that you're trying to accomplish.

    If you're mean not flex-items don't have eaqual width by "not correctly aligned", there are different ways of making that happen. The first item is taking more space that the two other because it's has more content.

    • By explicitly telling flex container how you want to distribute the space between flex item:
    .container{
        justify-content:center;
 }

.container > * {
     flex:1;
}
    • By giving each flex-item a max-width:
    .container{
justify-content:space-between;
 }

.container > * {
     max-width: value 
}

    Keep coding :=)

    Marked as helpful
    0
  • Ganesh•280
    @Ganesh-RathorSubmitted almost 3 years ago

    everything is fine in this airticle component only challange that stuck me is responsive layout.

    1. plese give me answer that is I use div more time then it need .
    2. In my display flex property the align-item: center ; property isn't working so I need to set a margin for y-axis center.
    3. How did i change the color of svg icon because the color property was faild to do that.

    Article preview component challenge hub

    2
    Mojtaba Mosavi•3,760
    @MojtabaMosaviPosted almost 3 years ago

    Regarding you query: 1- The basic rule for using divs is if there are no other nativ html elements that describe the content more semantically you can use divs. As developer we always wanna write code that dry(don't repeat yourself) so the anwer is yes, you overuse divs in places where it's not necessary. For instance you can style this the samm way:

    <div class="infoSite">
    <h1 class"infoSite__heading"></h1>
    <p class="infoSite__text"></p>
   <div class="infoSite__profile">
   </div>
</div>

    2- I not sure if understand what you mean, it would be easier of you refer to the element or class but if you're aimaing to center profile you need to set that property on both profileShare and profile.

    3- There different ways of doing it depending on complexity of the color change but in this case I this filter: brightness(value) to change the brightness and if you need to change the color you need to use a css filter generator to generate the mix of functions that produce the desired color, I use this one, you enter the color's hex representation and get the color: https://codepen.io/sosuke/pen/Pjoqqp

    Keep coding :=)

    Marked as helpful
    1
  • Mojtaba Mosavi•3,760
    @MojtabaMosaviPosted almost 3 years ago
    • css transition give us a powerful tool to make movements on the page feel more natural and smooth. Use cases in your this one would be:
      • hover state of nav links, you can transition the underline so it appreas more gradually.
      • background color change for button and social icon.

    Keep coding :=)

    0
  • bikeinman•1,080
    @BikeInManSubmitted almost 3 years ago

    May have made more difficult than it should be using Grid for mobile and desktop layout. But got to learn many things about Grid. Hope I got it right.

    HTML5 | CSS | Grid

    3
    Mojtaba Mosavi•3,760
    @MojtabaMosaviPosted almost 3 years ago
    • Mixing bem and css selectors are not recomended becuase css selectors have higher specificity than bem selector, Spend some time reading about bem methodology.

    Keep coding :=)

    0
  • Luka•320
    @lukakavtarraSubmitted almost 3 years ago

    My Solution for Four card feature section

    I want to start JS from today any suggestion on what should I learn first or how should I start?

    CSS Grid / Flex grid-row

    2
    Mojtaba Mosavi•3,760
    @MojtabaMosaviPosted almost 3 years ago

    • Going from mobile view to desktop when your media query hits first, the grid container sticks to the side, it does't look appeling visually, put some padding on it.

    • Checkout the freecode camps curriculumn for js.

    Keep coding :=)

    Marked as helpful
    1
  • Mojtaba Mosavi•3,760
    @MojtabaMosaviPosted almost 3 years ago

    • Teke a look at the issues mentioned in the rapport and fixs them, specially the accessibility relatd onee.

    • Whenever you dealing with user input, the main thing you have to take into consideration is:

      • 1 The input should not be trusted meaning that you should first senitize it and then use it. For instance think about users being able to run their input on you application, that can lead to an really ugly situation. Another example from you own code is, check out what happend when you provide an other input than a contry name. The better approach would be to first check and make sure the input is valid and then make the request to the API.

    Keep coding :=)

    0
  • Mojtaba Mosavi•3,760
    @MojtabaMosaviPosted almost 3 years ago

    • This just opinion but the custom form validation suffices as communication for user and there's no need to have the native html validator too.

    • The input controlls on desktop view is not behaving the same as in mobile view becuase when you try to click on it and input you email only 1/4 of it from top is interactive, this becuase when you use the position:relative; on errorMsg it get higher z-index than input controll, you can easily solve it by giving the control a higher z-index.

    • Spend some time reading about mobile first workflow since it makes it alot easier to work in responive way the is not geared twords specific viewports but rather responsiveness in general.

    Keep coding :=)

    0