Skip to content
  • Unlock Pro
  • Log in with GitHub
Profile
OverviewSolutions
24
Comments
28
Michael Bishop
@MikeBish13

All comments

  • Cris Elias•50
    @cristianelias
    Submitted about 3 years ago

    React | EmotionCSS | Vite | Framer Motion | Formik+Yup | LocalStorage

    #emotion#motion#react#react-router
    1
    Michael Bishop•1,080
    @MikeBish13
    Posted about 3 years ago

    Incredible job on this - nothing but praise! Absolutely love the animations you've added. I've never looked at Framer Motion before so will definitely check this out for my next project!

    Great work!

  • Muhammad Owais•250
    @ProgrammerOwais
    Submitted about 3 years ago

    Responsive Ecommerce Product Page using React

    #react
    1
    Michael Bishop•1,080
    @MikeBish13
    Posted about 3 years ago

    Great job on this project - everything seems to be working well.

    Couple of things I've spotted in terms of how you've built your React app:

    • It's best practice to not use DOM selectors when using React (eg document.getElementByID), as this defeats the purpose -- React was designed so that you wouldn't need to access the DOM directly and that it could be manipulated based on state. For example, in order to make your cart visible, you could create a local bit of state cartIsVisible which could either be true or false, then create a CSS class for the cart isVisible, which would have the property of display: block, then put a conditional statement in your cart's className, eg className={cartIsVisible ? 'cart isVisible' : 'cart'} so that every time cartIsVisible is changed, the display property would also change.

    • Secondly, you should also try not to have onClick and 'onChange' functions written out fully within your JSX -- it can get quite messy and is difficult to understand. Instead, create a name for the function and write it out above the JSX, then reference it below.

    Hope that all helps!

    Marked as helpful
  • Chitrang•150
    @cwebdev
    Submitted about 3 years ago

    Huddle Landing Page

    1
    Michael Bishop•1,080
    @MikeBish13
    Posted about 3 years ago

    Good job on this project!

    In answer to your question about SVGs: if you want to style them on :hover then the best thing to do is actually insert them into your code, rather than use an img tag with a src attribute.

    The beauty of SVGs is that they are actually built with code, so you can access and change different properties without having to overlay colors onto them, as you've done here. It'll make things so much easier for you. For example, you can usually access an SVGs outline through:

    svg {
        path {
             stroke: blue;
        }
    }
    

    Check out this link to find out more about styling SVGs.

    Marked as helpful
  • ERIGO Chigozie Nicholas•650
    @nick335
    Submitted about 3 years ago

    html, javascript, grid, flexbox

    #accessibility#airtable#backbone#itcss#chai
    2
    Michael Bishop•1,080
    @MikeBish13
    Posted about 3 years ago

    Great job on this project. Your solution matches up pretty well to the design, so well done.

    I've tried to answer your specific questions below:

    • I'm not sure what you mean by the top border of the hamburger menu, but happy to take a look if you can clarify or expand on the question

    • The easiest route to better responsiveness/less code is to style your page mobile first, ie style the mobile design first and then work upwards by including @media statements with a min-width. You'll find that in the long run this will save you a lot of code. There's also another reason for you using a lot of code in this project - see below

    • I think you're making this project a lot more difficult for yourself by using generic CCS classes for everything, and then trying to shoehorn the design into your CSS by using very complicated CSS selectors, eg #grid-section .flex-container:nth-child(3) .card:nth-child(1) .display-content h3. With a few extra classes added to some of your components, the styling would be a lot easier for you to code and a lot easier for somebody else to read. For example, the third section of your grid-section is stylistically very different to the other two sections, so why not give it some extra classes, rather than you having to use absolute positioning? For what it's worth, I think this project could easily be complicated without using a single position: absolute.

    Hope that helps and keep up the good work!

    Marked as helpful
  • Lylia Azzouz•80
    @liliaazz
    Submitted about 3 years ago

    html , css , flexbox , responsive

    #itcss
    1
    Michael Bishop•1,080
    @MikeBish13
    Posted about 3 years ago

    Great job on the project.

    Few helpful pointers for you:

    1). Maybe have a look again at the text within the box and see if you can match it to the design - consider font-size font-weight line-height and text-transform

    2). The site is responsive and the layout changes on different screen sizes, so well done on that. Again you should pay attention to the smaller details - at 375px the box takes up the whole screen to you may want to consider adding some padding around it. Similarly, your first breakpoint is at 425px, which is way too small for the two-column grid layout. Maybe consider increasing this to somewhere around the 600/700px mark.

    Hope that helps!

  • abhikr4545•280
    @abhikr4545
    Submitted over 3 years ago

    Solution using react

    #react#tailwind-css
    1
    Michael Bishop•1,080
    @MikeBish13
    Posted over 3 years ago

    Great job on the project - looks really good!

    In answer to your question - the issue that you have is that you are using jobList for everything and so this keeps getting overwritten with new pieces of filtered data and so you can never return to the initial list of jobs. What you need is a separate array/piece of state for your filtered results. This is how your app currently works:

    1. jobList is populated with data and this loads on the page. All good so far.
    2. 'Frontend' filter is clicked and jobList is filtered accordingly. So your filter is working up to this point.
    3. 'Frontend' filter is unclicked and so your filter removes everything in jobList, which leaves you with an empty array.
    4. Now when you try to display all of your items again using jobList, you're doing so from an empty array and so nothing is displayed.

    Hope that helps!

    Marked as helpful
  • Shaina Khan•220
    @shainay
    Submitted over 3 years ago

    Testimonials Grid

    1
    Michael Bishop•1,080
    @MikeBish13
    Posted over 3 years ago

    Great job on this project!

    A few things to point out:

    • Each of the boxes overflows on the screen at mobile screen sizes. Have a look at the size of the content of each box, which is causing the grid to get larger to accommodate it.
    • This problem could be because you've coded this desktop-first, whereas mobile-first quite often makes things a lot easier. For example at mobile screen sizes you're using a lot of !important rules on your grid layout, which isn't best practice. This should be a last resort only, so try tackling the problem from a different angle first.
    • Your footer is also inside the grid container and therefore becomes a grid item, which causes it to pop up in unusual places at certain screen sizes.

    Hope this helps and keep up the good work!

  • Yash•130
    @yashviradia
    Submitted over 3 years ago

    NFT preview card component

    1
    Michael Bishop•1,080
    @MikeBish13
    Posted over 3 years ago

    Great job on this project!

    One small point: you've used a <p> tag to create your image overlay, which is bad practice when we talk about semantic HTML and how browsers, search engines, screen readers, etc interpret your page. A <div> would probably be better suited here.

    Better still, you could maybe use a pseudo element to create the image overlay which could also hold the image in the content property - that way you don't need to use 2 elements and have 2 hover selectors.

    Give it a try! Best of luck!

    Marked as helpful
  • Pawn•320
    @CryptoPawn
    Submitted over 3 years ago

    Challenge #18 - Time tracking dashboard

    #accessibility#jquery
    1
    Michael Bishop•1,080
    @MikeBish13
    Posted over 3 years ago

    Great job on this project!

    In answer to your specific question -- generally yes, when fetching data from an external file or an API, this needs to be done asynchronously because the fetching can take some time (maybe the server is being slow, for example) and as Javascript is single-threaded, everything else will need to wait until the data is fetched. Here's a nice article explaining it.

    As for more general feedback on your JS, though your solution works it seems to be very prescriptive, ie you have assigned variables in your JS file (the cardNames, for example) which essentially dictate how the data is displayed on the screen, and this isn't very flexible.

    Say that we wanted to add a new activity ('Coding') into the grid and we added the corresponding data to the data.json file. You would need to go into your JS file and edit it, rather than the JS file being able to handle the new data and display it accordingly. Similarly, say there were 200 activities that needed to be displayed - you would have to manual write them into your code.

    This is why it would be better to automatically fetch and then display the data dynamically.

    Hope all that makes sense, and keep up the good work!

    Marked as helpful
  • John Andrey Galingan•180
    @johnrookie-coder
    Submitted over 3 years ago

    HTML, CSS AND JAVASCRIPT

    1
    Michael Bishop•1,080
    @MikeBish13
    Posted over 3 years ago

    Great job on this project!

    Design looks good and the countdown works as expected.

    The obvious thing to point out is the missing 'flip clock' function. It's actually quite a tricky thing to implement and requires a good working knowledge of CSS -- but it's also a brilliant learning opportunity and a good way of getting to know some advanced CSS techniques.

    My advice would be to take a look through some of these examples on CodePen of how others have implemented it and once you've fully understood how it works (this is the important part!) then try and give it a go yourself.

    Good luck!

    Marked as helpful
  • Khael•230
    @i-am-Khael
    Submitted over 3 years ago

    Interactive Rating Component created with HTML, CSS and JS.

    2
    Michael Bishop•1,080
    @MikeBish13
    Posted over 3 years ago

    Great effort on this challenge!

    In terms of functionality, the main issue I see is that I'm able to select all of the numbers and then submit the form, whereas the brief states that only one number should be selected and submitted. See if you can figure out a way of getting this to work.

    Another thing I've spotted is that you've used camelCase as a naming convention for your CSS classes. The standard naming convention for CSS is hyphenated (eg. user-name, user-id, etc) so I'd suggest adopting this to save yourself a lot of confusion in the future. Here's a good article explaining a bit about naming your CSS classes, and how BEM is a very useful and widely used convention. Maybe give it a try in your next project!

    Keep up the good work!

    Marked as helpful
  • Roman Zvir•290
    @rmzvr
    Submitted over 3 years ago

    Rock, Paper, Scissors game using SCSS MODULES, REACT, REDUX TOOLKIT

    #react#redux#redux-toolkit#sass/scss
    1
    Michael Bishop•1,080
    @MikeBish13
    Posted over 3 years ago

    Great job on this - the game seems to function as expected.

    One major issue I have is that I can't scroll down on the screen, so the 'rock' icon is only a quarter visible. Seems like you've set overflow: hidden to the .root selector which is causing the issue.

    Keep up the good work!

    Marked as helpful
  • frontendgeek•295
    @yusufweb
    Submitted over 3 years ago

    Advice slip generator with react.js ,axios, advice slip API

    #bootstrap#node#react#sass/scss#typescript
    2
    Michael Bishop•1,080
    @MikeBish13
    Posted over 3 years ago

    Great job! The app functions pretty smoothly so well done.

    A couple of things I noticed in terms of the design:

    1). Some of the sizings seem to be a little off, specifically the size of the central box and the text of the quotes compared to the design. See if you can line these up more accurately.

    2). The green button doesn't appear to be centred in the middle of the advice box. There is a million and one ways of doing this, so have a play around and see if you can come up with something.

  • RTX3070•490
    @RTX3070
    Submitted over 3 years ago

    HTML5 CSS3

    2
    Michael Bishop•1,080
    @MikeBish13
    Posted over 3 years ago

    The screenshot you've taken looks pretty accurate compared to the final design, so great job on that!

    However, you should consider 'responsive layouts' and how the page looks on different screen sizes. From what I can tell, the full page 'grid' layout only shows at a screen size of 1400, and then reverts back to the mobile layout at screen sizes below that. Have a think about a suitable 'break point' to implement into your project and rememeber -- not everyone views a page on a full-screen!

    Hope that helps and keep up the good work!

    Marked as helpful
  • Kai Liin•40
    @Beginneraboutlife116
    Submitted over 3 years ago

    Semantic HTML tag using, Sass, BEM className

    #accessibility#sass/scss
    4
    Michael Bishop•1,080
    @MikeBish13
    Posted over 3 years ago

    Nice job on the solution!

    Some feedback regarding your use of BEM and semantic HTML.

    When using BEM, just be careful of the nesting of components. For example, in one section you have card__info-title and card__info-describe. Not only can this naming convention be confused for a modifier (--title, --describe) it can also get messy and complicated very quickly. See if you can create higher level components instead and then try and re-use them throughout the entire project, adding modifiers where needed. For example, these two components could easily have been changed to card__title and card__text. This article does a great job of explaining and solving some of the pitfalls of BEM - https://www.smashingmagazine.com/2016/06/battling-bem-extended-edition-common-problems-and-how-to-avoid-them/

    As for semantic HTML, you've done a great job overall and this is a brilliant habit to get into. My advice would be to try not using a semantic element for the sake of it, and if in doubt always check the MDN docs for the full definition to see if it matches your intention. For example, I would argue that you don't really need <aside> in your article as the info in question is a crucial part of the card, rather than something indirectly related. Similarly, I would argue that <time> should be reserved for specific times or dates that could be supported by a datetime attribute, e.g 7 July, 20:00, 2h30m.

    Hope that helps.

    Marked as helpful
  • Jesse Ma•95
    @jma26
    Submitted over 3 years ago

    HTML CSS Profile Card

    1
    Michael Bishop•1,080
    @MikeBish13
    Posted over 3 years ago

    Great job - your solution looks really good!

    You are definitely on the right tracks with using semantic HTML and it is a great habit to get in to. Just be careful about overdoing it and putting in semantic tags for the sake of it. For example, you have a <header> tag for the background section at the top of the card but, in my opinion, the tag should usually be reserved for encapsulating things such as logos, navigations, etc. Here's a line taken from MDN:

    "<header> element represents introductory content, typically a group of introductory or navigational aids. It may contain some heading elements but also a logo, a search form, an author name, and other elements."

    Similarly, it's great that you're using <h> tags for your headings. But you can resize them manually, so that they match up to the design - some of your sizings are a bit off. But obviously make sure you're resizing each of them proportionally so that you maintain the hierarchy.

    Hope that helps and keep up the good work!

    Marked as helpful
  • Logan Willaumez•160
    @LoganWillaumez
    Submitted about 4 years ago

    Social Proof section

    1
    Michael Bishop•1,080
    @MikeBish13
    Posted about 4 years ago

    Hey, great job! Your solution looks good.

    My main feedback would be that the site looks a little disjointed on the larger desktop screen sizes. In particular:

    • The font of the main heading looks a little small.
    • The 5 star review sections are unevenly spaced and don't match the design. I think you have made this hard for yourself by creating the indentions using different margins at different screen sizes. One solution or improvement could be to consider using the align-self property for each of the children within the flexbox. For example you could set the align-self properties of the children to flex-start, centre, flex-end to ensure the spacing always stays consistent.

    Hope that helps!

  • Elizabeth Okuta•150
    @Mimieveshofuo
    Submitted about 4 years ago

    HTML, CSC FLEX

    1
    Michael Bishop•1,080
    @MikeBish13
    Posted about 4 years ago

    Hey, great job on the project.

    One major thing I've noticed:

    • When you get to around 780px screen size, the end of the content box gets cut off. This is because you have a container with a width of 70% and overflow: hidden set, so when the content is too big for the container it disappears. You could solve this by either making the breakpoint of your media query larger, or perhaps explore another way of centering your content box without the need for a container -- flexbox could be a neat way of doing this.

    On a more general note, you have exactly the same styles repeated for each of the three sections in your container. You could maybe consider applying a single class to each of the three sections, eg class="car-container", and that would drastically reduce the amount of code that you have to write.

    Hope that helps!

Frontend Mentor logo

Stay up to datewith new challenges, featured solutions, selected articles, and our latest news

Frontend Mentor

  • Unlock Pro
  • Contact us
  • FAQs
  • Become a partner

Explore

  • Learning paths
  • Challenges
  • Solutions
  • Articles

Community

  • Discord
  • Guidelines

For companies

  • Hire developers
  • Train developers
© Frontend Mentor 2019 - 2025
  • Terms
  • Cookie Policy
  • Privacy Policy
  • License

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub