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
OverviewSolutions19Comments34

All comments

  • P
    Wannika123• 310

    @Wannika123

    Submitted

    What are you most proud of, and what would you do differently next time?

    I'm glad that I finish another challenge.

    What specific areas of your project would you like help with?

    When fetching the data, what is the difference between:

    try {
...
} catch { ... }

    and

    fetch(...)
  .then(...)
  .then(...)
  .catch(...)

    And which situation to use it?

    P.S. As the advice #117 is no longer the same as in the design file, I made it generate random quote when loaded. And I think that's how it's supposed to be.

    Practice using API.

    1

    Ayobami Ikuewumi• 850

    @Ikuewumi

    Posted

    Hi 👋 @Wannika123, Great project, really well done

    About your question, the try...catch...finally block was the first one made, it is just another tool for control flow, like an if , or switch statement.

    The fetch().then().catch().finally() was a way to bring the try...catch functionality into fetch calls

    So, they do the same thing, provide functions for code to run if it fails, preventing the error from spilling out into the outer scope

    Happy Coding, Ayobami

    Marked as helpful

    2
  • ParthUON• 100

    @ParthUON

    Submitted

    What are you most proud of, and what would you do differently next time?

    I take pride in implementing the clamp() function to achieve responsive typography. Looking forward, I would enhance my approach by exploring additional techniques for even more versatile and dynamic designs.

    What challenges did you encounter, and how did you overcome them?

    I faced challenges adapting images for mobile and desktop, but I overcame them by utilizing CSS's content feature within img tags, ensuring a responsive solution.

    What specific areas of your project would you like help with?

    animation and parallax effect

    Responsive Product Card

    2

    Ayobami Ikuewumi• 850

    @Ikuewumi

    Posted

    Hi @ParthUON. Awesome Project 👏

    About your question, I was impressed by the use of the content property, I always thought it was only used in pseudo-elements. But the answer here would be to use the picture element,

    This is an example

    <picture>
    <source srcset="...desktop.jpg" media="(min-width: 40rem)">
    <img src="...mobile.jpg" alt="">
</picture>

    picture {
    display: contents;
}

picture img {
    width: xrem;
    // more
}

    What happens is that the browser switches out the src of the image when it hits a specified media query

    A caveat though is that the content that is shown is only the image tag, so I would suggest, putting any styles on the image tag

    You can learn more about the picture tag on the MDN docs

    And btw what do you need parallax for?

    Happy Coding, Ayobami

    Marked as helpful

    1
  • Sara• 360

    @saranatour1

    Submitted

    What are you most proud of, and what would you do differently next time?

    I got more comfortable in using grid in css, its a neat little thing, and I still could learn more.

    What challenges did you encounter, and how did you overcome them?

    at first, I used the picture tag to put the assets within, but that made a few issues on resizing, and I didn't want to use 'position' property to fix that, but I ended up adding the images to my local tailwind config file, and adding a div with a background-image.

    What specific areas of your project would you like help with?

    In general, what do you think I should do to make this a better solution?

    Product preview card using vue ,tailiwndcss

    #tailwind-css#vue

    1

    Ayobami Ikuewumi• 850

    @Ikuewumi

    Posted

    👋 Hi Sara.

    Unfortunately, the project isn't on GitHub anymore

    0
  • Ayobami Ikuewumi• 850

    @Ikuewumi

    Posted

    Hi Nadda. Great Project 👌.

    About a better way to do dark mode, I checked your site out and saw you used the css :has selector on the .app wrapper. This is good, but a better way could be to define custom properties on your main element directly and just toggle that with the class change. This means your code is more maintainable and you can add more themes in the future.

    Also, right now the :has selector isn't the safest for production, although the major browsers all support it, a lot of users aren't running on the most up-to-date version of their browser. So, I would suggest you use it just for progressive enhancement.

    This is how my suggestion might look in code

    main {
   --bg-img: url(...path-light-mode.jpg);
   --clr-bg: ...;
   --clr-text: ...;
   // and so-on
}


main.dark {
    --bg-img: url(...path-dark-mode.jpg);
    --clr-bg: ...;
    --clr-text: ...;
}

    You can read more about how CSS custom properties work in the MDN docs. Hope this suggestion helps.

    Happy Coding, Ayobami

    Marked as helpful

    0
  • IamVictheCG• 190

    @IamVictheCG

    Submitted

    Does anyone know to change the color of SVG elements??

    Sunny Side

    1

    Ayobami Ikuewumi• 850

    @Ikuewumi

    Posted

    Hi @IAMVICTHECG. Changing the color of an SVG can only be done if the vector is inline in the html, and doesn't work with an SVG linked in a <img> tag.

    If the SVG is in your markup, you can target it with a CSS selector and change its color with the fill css property:

    For example

    HTML

    <svg></svg>

    CSS

    svg {
    fill: blue;
}
    0
  • Poonamkothawade25• 30

    @Poonamkothawade25

    Submitted

    I had difficulty integrating API in my project. I am not very familiar with asynchronous javascript. I was confused as to which method to use to integrate API. Would it be better to use Asynchronous javascript? Also, since the text length is variable, what can I use to make sure that the end double quotes will be appended exactly after end of the sentence?

    Responsive advice generator app using API - fetch method

    #accessibility#fetch#semantic-ui

    1

    Ayobami Ikuewumi• 850

    @Ikuewumi

    Posted

    Hi! Good project, About your question, you can put quotes in strings by prefixing them with the backslash, Like this:

    const str = "\"Be a good lover\""
console.log(str) // "Be a good lover"

    And use interpolation for easier concatenation of strings, like this

    const str = "World"
const str2 = `Hello ${str}`
console.log(str2) // Hello World

    One more thing, please avoid mutating the innerHtml of an element directly if you can,new elements should be added via document.createElement('span') or templates

    Overall, good project. Hope these tips help. Happy coding, Ayobami

    Marked as helpful

    0
  • Ayobami Ikuewumi• 850

    @Ikuewumi

    Posted

    Sorry, I didn't see this before, but I noticed you used predefined heights on the cards, it leads to the UK cark breaking, please try to avoid setting heights in general, they're kinda evil, and I think the cards would work even without a set height in this case

    Marked as helpful

    0
  • Ayobami Ikuewumi• 850

    @Ikuewumi

    Submitted

    Hi. It's been quite a while since I posted solutions here. I've been busy with med school, but now with the holidays, I can restart programming.

    So, this project, I did most of it by hand including the routing and state management. I did use a tiny library called nanostores though, to give me stores to work with. It was mostly ok, and I tried being cognizant of a11y.

    I also ended up adding a few features like system theme and a to top button,

    Anyway, if you can, check the project out, and all comments are welcome, even appreciated. Happy Coding,

    Ayobami

    Countries and their Bio

    #sass/scss#typescript#vite#accessibility

    2

    Ayobami Ikuewumi• 850

    @Ikuewumi

    Posted

    Hey guys, one more question, how do you handle loading all the images, I thought it would place way too much strain on the page performance, so I tried lazy-loading them, but some problems came up, How did y'all handle it?

    0
  • Ayobami Ikuewumi• 850

    @Ikuewumi

    Posted

    Hi Ivan! Great project, I did notice somethings though:

    • The link on each country exists on only the image. This is maybe just my preference, but I think people might have problems finding that link as they would most likely just check the countries' name first, but this is just my experience, so take it with a grain of salt

    • More worryingly, the search functionality seems to have a bug, where it searches the input as it was before a change(eg. Searching for "a" when the user has typed in "ar"). I checked the code and there you used an onChange event(which should work, but for some reason doesn't), maybe look into the onInput event instead? Seems to work for this exact use case

    Anyhow, this is a good project. Well done and happy coding, Ayobami

    Marked as helpful

    0
  • Ayobami Ikuewumi• 850

    @Ikuewumi

    Posted

    Hi Jary👋. Really cool solution. Here are my suggestions on improving this:

    This page generates an error about: Links must have discernible text. In this case the link's content is an icon, and you could fix this issue by adding a title attribute to the <i> element like -

    <a href="#">
  <i title="twitter" class="fa-brands fa-twitter"></i>
</a>

    Also, I saw you didn't add the decorative shape on the hero section. The shape is just a rectangle / square with a curved side. You could add it like so:

    hero {
   position: relative
}

hero::before {
   content: "";
   position: absolute;
   inset: auto 0 0 auto; //shorthand for the top, right, bottom, left properties
   width: 300px;//arbitrary number
   height: 300px; //arbitrary number
   background: blue;
   border-bottom-left-radius: 4vmax;//arbitrary number
}

    Anyways, I hope this helps. Again, this solution is really cool. Don't hesitate to ask more questions and keep coding👍,

    Ayobami

    Marked as helpful

    1
  • Orton Bright• 290

    @ortonb110

    Submitted

    Hi there 👋, I’m Orton and this is my solution for this challenge.

    Built With:

    TailwindCSS npm - prettier React.js I couldn't get the sidebar to have a dark backdrop and I humbly ask for help. Any suggestions on how I can improve are welcome!

    Thank you. 😊✌️

    Loopstudios landing page

    #react#tailwind-css

    1

    Ayobami Ikuewumi• 850

    @Ikuewumi

    Posted

    Hi Orton 👋. Great solution. And about your question on the backdrop. I think the best way to achieve this is using a pseudo-element on the header element and giving it a background color of your backdrop so that it is on top of everything, except the text, like say: #00000020.

    I hope this helps. Again, great solution. Keep coding 👍,

    Ayobami

    Marked as helpful

    0
  • Aghla Abdo• 320

    @AghlaAbdo

    Submitted

    Hi guys, I just finished Product preview card component challenge.

    One thing I struggled with is how to make the image fit in the div without scratching it. But the only solution I found for that is to make the width and height of the image 100%.

    Tell me guys if there is any other way make the image adjust automatically to fit in the div.

    Product preview card component

    2

    Ayobami Ikuewumi• 850

    @Ikuewumi

    Posted

    Hi 👋. Cool solution. About your question, I think the aforementioned picture element is the best way. But css could somehow end up squishing the image to fit it in the declared dimensions. To fix this issue, you could check out the object-fit css property. You can read more about it on the MDN docs but a basic use would be as follows:

    selector {
    ....
    object-fit: cover;
}

    Anyway, I hope this helps. Feel free to ask any questions, and keep coding 👍,

    Ayobami

    Marked as helpful

    0
  • Ayobami Ikuewumi• 850

    @Ikuewumi

    Posted

    Hi Victor 👋. Cool solution. But I have a minor tip that might help improve it.

    In your solution, you used the default sans-serif font. You could go to the Google Fonts homepage, follow the steps and get the custom font(its name is in your style-guide.md) in your site in no time. It's not compulsory, but I think it'll just make the end product look a little better

    I hope this helps 😊. Feel free to ask any questions and keep coding 👍,

    Ayobami

    Marked as helpful

    1
  • Sayani Biswas• 20

    @sayanibiswas00

    Submitted

    I had doubts about making the page responsive like, what are the best practices for changing the img src on the basis of the size of the viewport? Also, how to find the accurate fonts? Any feedback and criticism are welcome.

    Product Preview Card Component

    #bootstrap

    2

    Ayobami Ikuewumi• 850

    @Ikuewumi

    Posted

    Hi Sayani👋. Good solution! Apart from the aforementioned tips. I noticed a few things like:

    • For the word PERFUME, you don't need to use spaces to space it out. A better fit here would be the letter-spacing css property like so: selector {letter-spacing: 5px;}

    • On accessibility, the page generates the warning, All page content should be contained by landmarks. What this means is that all your page content should live in semantic, unique, elements, most likely these three(header, main and footer): like in this case you could structure your content like so;

    <main class="card">
     ....
</main>

<footer>
    Challenge....
</footer>

    Also, try to use more semantic elements where necessary, for example, for the price, it doesn't make a lot of sense for it to be a heading, you could use the <strong> element. You can find out more about this on the MDN docs as well

    I hope this helps. Again, this is a cool solution. Feel free to ask any questions and keep coding👍,

    Ayobami

    Marked as helpful

    0
  • shaunfroseth• 60

    @shaunfroseth

    Submitted

    Im assuming the Javascript was supposed to be added for the hover effects, but I just used CSS selectors instead because it seemed much easier.

    Still unsure how to optimize CSS/HTML to be responsive, probably wont work well with the grid I set up

    News site using grid layout

    1

    Ayobami Ikuewumi• 850

    @Ikuewumi

    Posted

    Hi Shaun 👋. Good solution. About your question on grid issues, here is my suggestion:

    In this situation, mobile-first CSS comes in handy because on mobile-screens, there isn't a lot to do layout-wise, then you add on the complexity on desktop screens. In this case, I think you could incorporate that with something like this:

    main-grid {
	display: grid;
}

@media (min-width) {
	main-grid {
		grid-template-areas: "...."
	}
}

    Anyways, I hope this helps. Feel free to ask any questions, and keep coding👍, Ayobami

    0
  • Ayobami Ikuewumi• 850

    @Ikuewumi

    Posted

    Hi 👋. Nice solution. About your question on grid issues, here is my suggestion:

    In this case, I don't think CSS Grid is the best tool for the job. Flex might be more suitable. This is because Grid shines most in extrinsic layouts(where you explicitly define where a particular element goes) and Flex is better at intrinsic layouts, where the browser just knows what to do. So in this case, the explicitness of Grid kind of gets in the way, whereas with flex the layout could be achieved in a much simpler way:

    card {
	display: flex;
	flex-direction: column;
}


@media (min-width) {
	.card {
		flex-direction: row;
	}
}

    Anyways, I hope this helps. Feel free to ask any questions, and keep coding👍,

    Ayobami

    Marked as helpful

    0
  • Karen Lourenço• 380

    @KarenMascarenhasLourenco

    Submitted

    Is my code understandable?

    Did I use the semantic HTML tags correctly, should I add more or less?

    In what areas of my code can I improve on?

    All feedback is greatly appreciate. It helps me to improve as a frontend developer. Thanks!

    Advice Generator App

    #typescript

    1

    Ayobami Ikuewumi• 850

    @Ikuewumi

    Posted

    Hi Karen 👋. This solution is awesome👌. The JS logic is elegant. About semantics, I think you got it absolutely spot on. But I do have a few minor suggestions:

    On the 🎲 button, it looks like an oval, probably because of the approach you used to form the "circle". I would suggest making the container/button a fixed width and height, greater than the icon, and then center the icon with, like, flex or something. This should lead to a perfect 🔵 at all sizes.

    I saw that you defined a fixed width on the card. In this case is works fine with no overflow, but I'll suggest checking out this technique for making more fluid layouts with the css min function;

    main {
     width: min(350px, 90vw);
}

    I hope this helps. Again, this solution is really cool. If you have any questions, don't hesitate to ask. Keep coding👍,

    Ayobami

    0
  • prabhjot singh• 30

    @prabh234

    Submitted

    I could not make the background dark in the mobile version when you toggle the menu otherwise it's almost the same as asked in the challenge

    responsive news homepage

    #jquery

    1

    Ayobami Ikuewumi• 850

    @Ikuewumi

    Posted

    Hi @prabh234 👋. Great solution, and about your question, the option I would recommend is adding a box-shadow that has a large spread on the nav in mobile screens. I would suggest that you not animate the box-shadow though, might impact performance negatively. The code could go like so:

    nav {
    ...
    box-shadow: 0 0 0 200vmax #00000020;
}

    If you have any questions, don't hesitate to ask, and keep coding👍,

    Ayobami

    Marked as helpful

    0
  • Charles Mueke• 170

    @CharlesMueke

    Submitted

    I've completed the challenge. The problem i did face what how to place the SVG images instead in the footer i just added a background color. I really need help there. Any feedbacks are welcome.

    Huddle landing page using flex-box, grid css

    1

    Ayobami Ikuewumi• 850

    @Ikuewumi

    Posted

    Hi 👋. Cool project. About your question on the curved sections, I think my way to place the svgs is using a pseudo-elements like before and after with relative positioning on the section element and absolute on the pseudo element. Here is an example:

    section {
   ...
   position: relative;
}

section::before {
   content: '';
   position: absolute;
   inset: 0 0 auto 0; // a shorthand for top, right, bottom, left. This pseudo element would be on the top
   width: 100%;
   height: 300px; // arbitrary number.
   background-color: transparent;
   background-image: url(..path.svg);
   background-position: bottom left;
   background-size: contain;
   bg-repeat: no-repeat;

}

    On the contrary, you could place the images in markup and use the absolute positioning to get it in the right spot (while paying attention to a11y).

    I hope this helps. Above all, this is a great project🎊. If you have any questions, don't hesitate to comment, and keep coding👍,

    Ayobami

    0
  • Misael Alisson Ursulino de Lima• 30

    @misalima

    Submitted

    More challenging than I thought

    The desktop part was ok. I had a little difficulty with the mobile styles, in the media query, because I couldn't make the horizontal scroll bar disappear, I don't know why. Somehow I fixed the problem, I also don't know exactly how. I would like to know if the way I sized the image in the media query style is ok, or if there is a better way in terms of best practices.

    Responsive Product Card using HTML and CSS

    1

    Ayobami Ikuewumi• 850

    @Ikuewumi

    Posted

    Hi @misalima 👋. Really cool project. About your question:

    I saw the code and think the problem is the overflow: hidden. Instead of just overflow, there is another CSS property I would recommend : overflow-x : hidden and also, maybe remove the html style block. It doesn't do anything at all.

    Something else I noticed was the way you used the image as a background image. This does not make a lot of sense semantically, cause the image is a part of the content and not a presentational piece. And there is a way to accurately position images and control their dimensions with the css object-fit property. You might want to read more about it on MDN, but you could use it like this:

    selector { 
	object-fit: cover; 
	object-position: top left; 
	width: 300px; 
	height: 100%;
 }

    Hope you find this helpful. Your project is great. Feel free to ask more questions and keep coding👍,

    Ayobami

    Marked as helpful

    0
  • Furk• 600

    @doganfurkan

    Submitted

    The only part that I'm not feeling that good about is the popular news section at the bottom of the page. I couldn't find any other way but to use those images as backgrounds for the divs. I believe there should be some way to use them as img tags, but it was challenging and couldn't do it for now.

    Any idea, feedback is appreciated.

    News Homepage using Grid and Flex

    1

    Ayobami Ikuewumi• 850

    @Ikuewumi

    Posted

    Hi👋. Awesome Project. About the images issues,

    In manipulating an image, especially its dimensions without squishing the image, I don't think you'll find a better solution than the css object-fit property / family of properties. You can read more on this on the MDN website, but you could use it like so:

    selector { 
	object-fit: cover; 
	object-position: top left; 
	width: 300px; 
	height: 100%;
 }

    Hope you find this helpful. Your project is great. Feel free to ask more questions and keep coding👍,

    Ayobami

    0
  • Ayobami Ikuewumi• 850

    @Ikuewumi

    Posted

    Great project👍. With the dark mode twist, This is awesome

    0
  • csut1337• 30

    @csut1337

    Submitted

    I initially planned to do this project as a means of practicing Bootstrap while I learn enough JavaScript to begin implementing that in projects. I've found pretty quickly that I prefer my own CSS/layout to Bootstrap, however. It still ended up being the right project to undertake as the responsive components were much more elaborate than the last (Equilibrium) project I did.

    • The images in both desktop and mobile views do not quite fill the container (they both have a white line on top that I was struggling to remove entirely). I tried a number of ways around this without any luck. Any suggestions?

    • I've seen 'mobile-first' tags in the readme's for a few of these projects but I normally tackle desktop first and then media query for mobile (using the <picture> tag in this project was the first time I've not entirely done that). Is this a preferential thing or considered best practice and I'm not aware?

    Or if there is anything else I missed that warrants commenting, of course! Thanks in advance!

    Product Preview card - Responsive (Third project)

    1

    Ayobami Ikuewumi• 850

    @Ikuewumi

    Posted

    Hi✋. Awesome Project. About your questions, here are my suggestions:

    • In manipulating an image, especially its dimensions without squishing the image, I don't think you'll find a better solution than the css object-fit property / family of properties. You can read more on this on the MDN website, but you could use it like so:
    selector {
	object-fit: cover;
	object-position: top left;
	width: 300px;
	height: 100%;
}
    • The mobile first approach is popular because generally, you don't have to do a lot to build the mobile version of a site (it usually just involves stacking the contents on top of one another) and it is inherently responsive. So the idea is to write the mobile-first styles, then use Grid or flex to add complexity to the layout as needed.

    I hope you find these helpful. Overall, great project. Feel free to ack more questions and keep coding👍,

    Ayobami

    0
  • Esther Rose• 150

    @codarose

    Submitted

    Is there a way to do this grid layout without having grids within grids?

    Is there a better way to apply the dim background overlay on mobile when the menu is open?

    Is there an easier way to make the grid responsive when screen size changes?

    Responsive Home Page with CSS Grid, Media Queries

    2

    Ayobami Ikuewumi• 850

    @Ikuewumi

    Posted

    Hi ✋. Great project and about your questions, my suggestions are:

    • Honestly, the only part needing grid is the middle section. In my experience, grid tends to do better with explicit layouts, while flex usually handles implict layouts (where the engine kinda just figures what do by itself) a lot better.
    • About the backdrop, well there are at least two options:

    Using pseudo-elements: You could use the before or after pseudo-elements or a kinda new one: backdrop It might go like this: css :before{ position: absolute; width: 100vw; height: 100vh; background-color: #00000020; }

    Although, here you could run into rare issues of z-index. You could solve that with the new isolation css property

    But if all that sounds too complicated, a simpler one I would personally recommend is using a box-shadow (with a really large spread) It could go like: selector {box-shadow: 0 0 0 200vmax #00000010}

    • About easier ways of making a responsive grid. Here I would say it pays to start writing CSS mobile-first because the default grid stacks children on top of each other which is what is usually preferred. Then you can add complexity on top with, like a media query or something for larger screens

    Hope you find these useful. Above all, this is an awesome project. Feel free to ask more questions and keep coding👍,

    Ayobami

    Marked as helpful

    0