Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Your session has expired please log in again.
Your session has expired please log in again.
Not Found
Your session has expired please log in again.
Your session has expired please log in again.
Not Found
Your session has expired please log in again.
Your session has expired please log in again.
Not Found
Log in with GitHub
OverviewSolutions23Comments28

All comments

  • Michael Bishop• 1,070

    @MikeBish13

    Posted

    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!

    1
  • Michael Bishop• 1,070

    @MikeBish13

    Posted

    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

    0
  • Chitrang• 150

    @cwebdev

    Submitted

    Hi,

    This is my solution for Huddle Landing Page.

    I was unsure of how to implement social media icons but I downloaded some SVG from internet and used CSS filter property to change color on hover. Is it a good approach or is there some other way?

    Any other general feedback is welcome.

    Happy Coding!

    Huddle Landing Page

    1

    Michael Bishop• 1,070

    @MikeBish13

    Posted

    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

    1
  • ERIGO Chigozie Nicholas• 650

    @nick335

    Submitted

    • how was the right top border of the hamburger menu styled to face up??
    • how do I make my code responsive with less amount of code? (feeling like I wrote a lot of code for this project which could have been avoided)
    • how do we deal with positioning in terms of responsiveness, are we always going to change the position directly for different sizes of phones as I did?

    html, javascript, grid, flexbox

    #accessibility#airtable#backbone#itcss#chai

    2

    Michael Bishop• 1,070

    @MikeBish13

    Posted

    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

    0
  • Michael Bishop• 1,070

    @MikeBish13

    Posted

    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!

    0
  • abhikr4545• 280

    @abhikr4545

    Submitted

    When I click remove on tag the list does get updated instant rather it waits for next render. Any help would be very useful. Thanks

    Solution using react

    #react#tailwind-css

    1

    Michael Bishop• 1,070

    @MikeBish13

    Posted

    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

    0
  • Shaina Khan• 220

    @shainay

    Submitted

    Feedbacks are always welcome. let me know where i messed up Happy Coding..!!

    Testimonials Grid

    1

    Michael Bishop• 1,070

    @MikeBish13

    Posted

    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!

    0
  • Yash• 130

    @yashviradia

    Submitted

    Hi everyone,

    In the beginning, I used only CSS positioning, and it made progress on the project cumbersome. Then with help of CSS flex box, it got easier.

    Feedback on code review most welcome!

    NFT preview card component

    1

    Michael Bishop• 1,070

    @MikeBish13

    Posted

    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

    2
  • Pawn• 320

    @CryptoPawn

    Submitted

    Feedback on my JS is greatly appreciated. Also, if reading from a .json file, is async functions always needed? Or would it be possible to convert a .json file to a JS object without using async functions in $(document).ready

    Challenge #18 - Time tracking dashboard

    #accessibility#jquery

    1

    Michael Bishop• 1,070

    @MikeBish13

    Posted

    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

    1
  • John Andrey Galingan• 180

    @johnrookie-coder

    Submitted

    I think I happened to mess things out with the layout. I also don't know how to add the flipping effect. Any comments are highly appreciated. Thanks.

    HTML, CSS AND JAVASCRIPT

    1

    Michael Bishop• 1,070

    @MikeBish13

    Posted

    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

    0
  • Michael Bishop• 1,070

    @MikeBish13

    Posted

    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

    1
  • Michael Bishop• 1,070

    @MikeBish13

    Posted

    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

    0
  • Michael Bishop• 1,070

    @MikeBish13

    Posted

    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.

    0
  • Michael Bishop• 1,070

    @MikeBish13

    Posted

    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

    1
  • Kai Liin• 40

    @Beginneraboutlife116

    Submitted

    I'm not sure about my BEM announcement and my HTML usage. I really want to get some suggestions on it. If you could give me some advice, I will really appreciate you. 🙂

    Semantic HTML tag using, Sass, BEM className

    #accessibility#sass/scss

    4

    Michael Bishop• 1,070

    @MikeBish13

    Posted

    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

    1
  • Jesse Ma• 95

    @jma26

    Submitted

    Hey guys! There were a couple CSS properties I learned more about which were the background position for the two background-patterns that I could manipulate with background-position! Focused more on making sure the HTML semantics is "correct" instead of relying on divs for the layout.

    I'd appreciate it if you can give your thoughts or opinions regarding the HTML semantics or CSS I could improve on!

    Thank you!

    #happycoding

    HTML CSS Profile Card

    1

    Michael Bishop• 1,070

    @MikeBish13

    Posted

    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

    1
  • Logan Willaumez• 160

    @LoganWillaumez

    Submitted

    Hello ! This is my next challenge, it was a bit more difficult, but it was really fun to play with !

    If u have any suggestion for improving my code or if I did it wrong, don't hesitate, it's when we fall that we learn :D

    Best,

    Logan

    Social Proof section

    1

    Michael Bishop• 1,070

    @MikeBish13

    Posted

    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!

    2
  • Elizabeth Okuta• 150

    @Mimieveshofuo

    Submitted

    I would like feedback on this job. And advice on how it could be done better

    HTML, CSC FLEX

    1

    Michael Bishop• 1,070

    @MikeBish13

    Posted

    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!

    1
  • Pete Saunders• 20

    @sim338

    Submitted

    Any feedback welcome, just used html and css, didn't seem worthwhile to use javascript and im not that confident with it yet anyway, was a fairly quick and painless project this one....

    completed with html and css, no javascript

    1

    Michael Bishop• 1,070

    @MikeBish13

    Posted

    Hey, great job!

    One thing I've spotted:

    • I'm not quite sure you need position: absolute to position the buttons within each section. With the code as it is, your buttons will always be 50px from the bottom of their container. When I reduce my window size to check responsiveness, the buttons jumped up and overlapped your text. I think the correct spacing could be easily achieved with simple margins.

    Hope that helps!

    0
  • Atul Anand• 100

    @atulanand206

    Submitted

    1. How to work with img sizing? As the image does not scale like text does, it becomes hard to manage its responsiveness. How to make it so that img also scales relatively?
    2. As grid layout is pretty much squarish and a non-square image doesn't scale properly, clearly evident from the overlay when the dimensions are changed. How to navigate through this?

    Stats preview card component

    1

    Michael Bishop• 1,070

    @MikeBish13

    Posted

    Hey, nice job so far. Seem's like a pretty simple fix to me:

    • You also need to set a height on your img so that it fills the container for various screen sizes. height { 100% } should do the trick.
    • Then to make the image scale and not distort you can use object-fit: cover. That should do the trick. More info on object-fit here - https://developer.mozilla.org/en-US/docs/Web/CSS/object-fit

    Hope that helps!

    1
  • Kofi Nartey• 650

    @kofinartey

    Submitted

    Hi there. I had issues with using the same set of nav links for both mobile and desktop screen widths. To work around this, I wrote two different sets of nav links; one for mobile and the other for desktop and hid them accordingly. I know this is not standard procedure and I'd appreciate all the help I can find in refactoring my code.

    Looking forward to receiving suggestions on other matters as well. Cheers

    Landing page using HTML, CSS and JS

    1

    Michael Bishop• 1,070

    @MikeBish13

    Posted

    Hey, nice job overall.

    In terms of the nav links, I would consider using a ul for the list and then an li for each link, with an a tag inside each li - this is generally the standard way of creating a nav.

    In terms of responsiveness for mobile and desktop, have a think about you could potentially use position:absolute on the nav when you're in mobile view, and how this could be combined with some simple javascript toggling of display: block/none on the click of the hamburger, as you've already demonstrated.

    One general comment is that your media query breaks into mobile view a little bit too soon - I'd maybe consider lowering this to around the 700px mark.

    Hope this helps!

    Marked as helpful

    0
  • Mojtaba Mosavi• 3,760

    @MojtabaMosavi

    Submitted

    Hi folks, I not really satisfied with this one because the code is a bit messy but I 'll make the next one cleaner. I would be glad to hear you thoughts about the following questions.

    1. Usage of BEM and how it could be improved ?
    2. Is it ok to use more the one modifier on a block ?
    3. Should the logo in the footer be pure css becuase I coundn't find any svg for it project files ?

    Happy coding :)

    Huddle landing page with curved sections solution

    1

    Michael Bishop• 1,070

    @MikeBish13

    Posted

    Hey, your code looks nice and clean to me! Great job!

    I'm no expert in BEM so won't comment on that, but in regards to point 3:

    • Have you considered inserting the SVG code into the html as opposed to setting it as a background image on a div? That way you're able to target the SVG properties directly such as the color, which you can usually get through like so: svg { path { fill: #ffffff; } }

    Take a look at the code of the SVG and you should be able to work it out. An alternative is to copy the SVG file and change the color in the fill attribute, then use the new file as the background image in the footer.

    Hope that helps!

    1
  • Daniel• 280

    @ddaniel27

    Submitted

    I really need help with widths. I put an early @media query to avoid weird behavior, so, how do you do it in general?

    Responsive three columns cards

    2

    Michael Bishop• 1,070

    @MikeBish13

    Posted

    I think your issue here stems from coding the challenge out desktop first, which makes things a little more difficult as the screen size reduces. Coding your projects mobile first is a good habit to get into.

    In terms of the issue itself, I think the flex-wrap is causing the problem alongside a lack of flex-direction. I would remove the flex-wrap and set the flex-direction to 'column' on your (max-width:800px) media query - this should remove the need for setting widths on each of your sections.

    0
  • Helin• 20

    @helinozlemm

    Submitted

    This is my first grid component challenge! I wanted to apply what I learned. I am open to any feedback!

    Single Price Grid Component

    2

    Michael Bishop• 1,070

    @MikeBish13

    Posted

    Great job, Helin! Very neat implementation of grid and hopefully you can see how simple it makes creating layouts!

    Couple of things to consider:

    • I would consider adding a padding to the top and bottom of each of your sections, rather than adding it individually to each element - it'll save you a lot of time in the future and leaves you less prone to errors/it's easier to debug.
    • Similarly, I would space out the individual elements within the containers using a margin top/bottom as opposed to padding. If the spacing between the elements is the same (eg 1.5rem), I would consider grouping these together in a single CSS declaration - again, it's less code and stops you repeating yourself.

    Hope that helps!

    0