Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Log in with GitHub
OverviewSolutions36Comments234

All comments

  • Mojtaba Mosavi• 3,760

    @MojtabaMosavi

    Posted

    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

    @K4UNG

    Submitted

    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

    #accessibility#sass/scss

    1

    Mojtaba Mosavi• 3,760

    @MojtabaMosavi

    Posted

    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

    @lulzz

    Submitted

    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

    #bem#typescript

    1

    Mojtaba Mosavi• 3,760

    @MojtabaMosavi

    Posted

    • 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

    @MojtabaMosavi

    Posted

    • 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

    @Zephsa

    Submitted

    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

    @MojtabaMosavi

    Posted

    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

    @MojtabaMosavi

    Posted

    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-Rathor

    Submitted

    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

    #accessibility#itcss

    2

    Mojtaba Mosavi• 3,760

    @MojtabaMosavi

    Posted

    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
  • Robert• 50

    @robert-otieno

    Submitted

    Hey guys, I have finished the Fylo landing dark theme page challenge. Any feedback on improving the UI is welcome. Thank you!.

    Simple Landing Page with Tailwind CSS

    #tailwind-css

    1

    Mojtaba Mosavi• 3,760

    @MojtabaMosavi

    Posted

    • 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

    @BikeInMan

    Submitted

    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

    @MojtabaMosavi

    Posted

    • 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

    @lukakavtarra

    Submitted

    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

    @MojtabaMosavi

    Posted

    • 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

    @MojtabaMosavi

    Posted

    • 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

    @MojtabaMosavi

    Posted

    • 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
  • Yunus Alif• 150

    @frontendnus

    Submitted

    I worked on this project for one day. I am happy to receive feedback from you. Although here I am a little confused by how to change the color of the SVG extension. Therefore, for the footer logo, I changed the color using Figma and for the social icon on the footer, I didn't use the assets provided but took it via iconscout. Does anyone know how to change the color for SVG?

    Sunnyside Landing Page Using Scss and GRID for Layouting

    #sass/scss#bem

    3

    Mojtaba Mosavi• 3,760

    @MojtabaMosavi

    Posted

    Regarding your query: I personally have encountered these issue many time and there are two methods I use depending on what type of color change needs to be done.

    *1 If it's about a make the color darker or lighter, you can do it with filter property:

            filter: brightness( values < 100% lighter it darker | value > 100% makes it brighter)
}```
There are a number of other values for filter which are mostly function and by combining them you can create any custom color that you might need. For this taks you should use a css filter generator, no need to spend hours finding the right function and values.

*2 If the first methods does not work you can change the internal structure of that svg for a specific state, for instace often time your goal is to change the color of the svg in an interactive state such as hover, in this case you can modify the color in svg implementation and on hover state provide that asset. Svg filter allows you to do that but you need a basic understanding of how to Svgs work:
``` .element:hover{
     content: url(the address of the svg with modified color)
}

    Read this article for a deeper explanation

    Keep coding :=)

    0
  • Asad LIAQAT• 60

    @asadLjerry

    Submitted

    I made the questions to show the hidden content upon click but I messed up with the closing part. i couldnt figure out where the problem is :(. NEED help in this, first time played with JS. There`s a lot and a lot to improve and I'll get there soon. THANKYOU.

    HTML CSS JS

    1

    Mojtaba Mosavi• 3,760

    @MojtabaMosavi

    Posted

    • The bug cusing the question not to close is caused by the inline <div class="accordion_collapse collaspe" style:"display:block;"> . The functionality that you are tring to implement is:

      • 1 if button clicked display the answer
      • 2 if the button gets clicked again hide the answer
      • 3 if any other question clicked hide the current one that' You've already the code for 1 and 2 if you revome that line the set the inline style in js.  

    • Spend some time reading about the mobile frist workflow because it makes it easier to develop responsive applications. Keep coding :=)

    Marked as helpful

    1
  • Rudolph• 130

    @rudyjm3

    Submitted

    This took about 3 - 4 hours to complete. The css style property "filter: drop-shadow" is a very good alternative to "box-shadow: values; " depending on the scenario. Would love any feed back. Thanks

    Order Summary Component

    1

    Mojtaba Mosavi• 3,760

    @MojtabaMosavi

    Posted

    • Using <div aira-hidden="true"></div> you can hide elements from accessibility API because is purely decorative and to somebody using screen reader does not mean anything.  

    • Both of the cancel order and proced to payement are semantically and logically described better as links, here is the way I see it, A button is something you use activate and deactivate something, it could be a lamp or a button on a UI but here the purpose fo those two is to take the user to different pages.

    Keep coding :=)

    Marked as helpful

    1
  • Mojtaba Mosavi• 3,760

    @MojtabaMosavi

    Posted

    That relative question depending on what good mean to you, if you mean functional and responsive then the answer would be yes, but the fixing following things would make even better:

    • When the hambergur menu switchs state, the state change should be transitioned for a better Ux,which of the following is more natural to your ?

      • A: sudden and spantaneaous movement
      • B: A gradual movement

    • For the creation section it be better to use a grid that depending on viewport size adjusts it's number of columns, something along the line of:

    .grid-container{
    display: grid;
    grid-templete-columns: repeat(auto-fill,maxmin(the min-width of column,the max-width of the column))
}

    Keep coding :=)

    Marked as helpful

    0
  • Mojtaba Mosavi• 3,760

    @MojtabaMosavi

    Posted

    Take A look at the following:

    • The points do not update properly, when the house wins the player doesn't lose any point.

    • It would be nice if you maintain the state of the game using local storage so if the player refreshes points don't get lost.

    • Guding the user with clear communication is great thing to do but cost is redundency I woundn't do it, Im modal the picture clearly illustrates rules for which game are displayed. If you are doing for accessibility consider hidding it visually using a helper class.

    • A hover state on button would improve the UX because it makes it more interactive.

    • The button that are on the reuslt section have slightly different styles for instance the inner and outer box-shadows are a bit thicker.

    • More natural trasitions also improve the UX, to clarify this think about how changes happen in the natural world that we live in are they sudden and spantaneaous or slow and gradual ? for example the way paly again button enters the page does not feel natural, it just suddenly appears as oppose to gradually appearing.

    • Since the buttons don't have any text, alternative text should be provided for assistive technologies, it can simply be do be aria-label attribute

    Keep coding :=)

    1
  • Mojtaba Mosavi• 3,760

    @MojtabaMosavi

    Posted

    1- Stats is more semantically described as unordered list, always prioritize native html elements.

    2- You chose the quite an intuitive name "main-paragraph" but the right element, whenever your doing this I suggest you always ask yourself a simple question witch is what is this piece of content ? I sure you did it when choose the class name, if there isn't a native html element for that content then go with div.

    3- If there is multiple repeating propeties such padding-top and padding-bottom try to use shortand padding: top right bottom left; it simplifies your code and also reduces the volume.

    4- Try not use to many fixed widths because doing so works against reponsiveness and as consequence you end up writing a lot more styles to make it responsive.

    Keep coding

    Marked as helpful

    1
  • Mojtaba Mosavi• 3,760

    @MojtabaMosavi

    Posted

    1-When the first media query hits there is a an overlapping between the resigter button and social icons, it's like one pixle after your media query hits going form mobile to desktop.

    2- Since you are already using aria-hidden to hide the icon for assitive technologies it would be nice to give them a way to make sense of it thus making the icons more accessible with aria-label.

    Keep coding :=)

    Marked as helpful

    1
  • Mojtaba Mosavi• 3,760

    @MojtabaMosavi

    Posted

    1- There is too much empty space om the mobile view which makes look a bit off, I suggest you set the max-width to something like 34rem and ceneter it horisontelly.

    2- A good way to make things you style is to pay extra attention to how different UI component behave in their interactive state, for instace the accordion question open state could be trasition a bit more smoothly, at the moment it's just sudden movement.

    Keep coding :=)

    Marked as helpful

    1
  • Mojtaba Mosavi• 3,760

    @MojtabaMosavi

    Posted

    Regarding you query, there are two most obivious way of implementing them:

    1 All html elments have pseudo elements but there are two of them that you mostly use for cosmatic purposes. Using the the ::after and ::before you can implement them, take a look at my solution to see how i did it. My solution: https://www.frontendmentor.io/solutions/launchcountdowntimermain-RFKBZhKW9

    2- You can also do it with two span and the style would be approcimately the same as the implementation 1.

    Keep coding :=)

    Marked as helpful

    1
  • Mojtaba Mosavi• 3,760

    @MojtabaMosavi

    Posted

    1-It's a little bit oversized for the amount content it's containing, you could reduce the max-width to something like 400px.

    2- Using css shorthand properties is great way to reduce the volym of you styles, for instance using background you merge background-image,background-size and ect.

    Keep coding :=)

    Marked as helpful

    1
  • Mojtaba Mosavi• 3,760

    @MojtabaMosavi

    Posted

    1- A litle note about naming classes, it always a good practice to try to be descriptive and logical as possible which is not so easy all the time. In small project like this you can get aways with it but once you start working larger projects is should be something that you really put thought into.

        <section class="product__community></section>
    <section class="product__cta></section>
    <section class="product__features></section>

    Keep coding :=)

    Marked as helpful

    0
  • Mojtaba Mosavi• 3,760

    @MojtabaMosavi

    Posted

    1- I don't know what kind of styles framework you are using but it really makes the markup unreadable, for instance if you are working with something like BEM a look at markup tells alot about how everything is working togather. I recomand you get solid grasp on css before moving on to frameworks.

    2- Limit the with of you top-level container so it doesn't grow too big on large screen because the aligment of content gets inconsistent.

    3- Transition help to create a more natural changes in a UI, I no expert in motion design but usage of some basic transition would make quite a differece in some sections like the navbar's underline.

    4- It also a good practice if you get into habit of using landmark elements like <main>, <header> and <footer> because they standard structure of many pages and you gain some accessibility feature like allowing the user to go directly to main content with scape link. You could do something like:

    <body>
    <header></header>
    <main>
        <div class="block"></div>
   </main>
</body>

    Keep coding :=)

    Marked as helpful

    1