All comments

• 

  P

  yinnie•280

  @wcyin9Submitted 7 months ago

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

  I did a mobile first approach where I used flexbox for everything except the 4 images under 01, which was done with grid. My reasoning for this was that I imagined flexbox to be more suitable for the main layout than grid. For example, flexbox with the desktop hero image and description was easily achievable, where I used order to put the two images on both ends, and the text in the middle.

  Next time I might try grid. Please let me know if you think grid is better for this layout, and why.

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

  The most challenge I went through was figuring out how to code out the footer image with the blue overlay. I solved it by using picture and source elements in html rather than css background-image (for responsive reasons), and adding a background-color in css for the footer selector.

  I also had a bit of trouble planning out how to code the hero image for the desktop view, but I solved it by using display: none;

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

  Please let me know if grid was a better choice for this challenge.

  In addition, I feel like my media query may have a lot of redundancy. If there's better ways to code responsive sizing, please let me know. If there's any other area where I could use more work on or I should change, please let me know as well. Thanks for your time!

  

  Responsive Landing Page, CSS grid and flex

  2

  80
  

  M•940

  @Dev-MV6Posted 7 months ago

  Hi there 👋, great job on completing the challenge; your solution looks really good.

  Regarding your question about whether it's better to use Grid instead of Flexbox for the general layout of the site, I'd say the way you approached it this time is totally valid and appropriate for this specific case. You could have also used Grid if you wanted, and it would have been totally okay as well; I think you can choose the one you feel more comfortable working with.

  Personally, I don't like to use Grid when building simple layouts because Grid layouts usually require more configuration to achieve the same level of responsiveness and flexibility that Flexbox offers you by default (saving you some lines of code). So, I tend to leave Grid for more complex layouts.

  I hope you find this helpful. Please let me know if you have any further questions; I'd be more than happy to help.

  Marked as helpful

  0
• 

  Kyureus•160

  @Kyureus1Submitted 12 months ago

  when you inmediately click on the button after the advice shows up on the screen, it flashes and shows the same advice, it takes like a 2 or 3 seconds delay to show a new one, if you click on the button during these time, it will not change. I couldn't find out how to help that, i want the request to be faster and smoother. i will be checking some other solutions to see if i can do it.

  

  my responsive advice generator app

  2

  50
  

  M•940

  @Dev-MV6Posted 7 months ago

  Just in case you need it in the future...

  You can control HTTP cache with the Cache-Control header:

  • Using the Fetch API:

  fetch(url, { method: "GET", cache: "no-cache" });
  

  You should give this article a read, it will give you a better understanding of how HTTP caching works: https://developer.mozilla.org/en-US/docs/Web/HTTP/Caching

  Marked as helpful

  1
• 

  Kyureus•160

  @Kyureus1Submitted 7 months ago

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

  only thing i'm proud of is the styles switching thing. there's another project i made where i had to do a lot of useless things to switch styles when the best solution was simply setting a button to change the href in when you click in it. It was a simple thing, but saddly i didn't find out before. ``

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

  i didn't finish the border countries part, because i couldn't find out how. I thinked that maybe it was in the API but i think it wasn't ¿do you have any solution for that or do i have to do it by myself?

  

  responsive country-info app

  1

  20
  

  M•940

  @Dev-MV6Posted 7 months ago

  Hi there 👋, good job on completing the challenge.

  The information about the borders is provided by the Rest Countries API, there's a field called borders that you can request just like you did with the rest:

  https://gitlab.com/restcountries/restcountries/-/blob/master/FIELDS.md

  Now, I suggest you make a single request to the API instead of multiple for each field:

  • Instead of all these calls

  fetch(`${API_URL}/all?fields=name`);
  fetch(`${API_URL}/all?fields=population`);
  fetch(`${API_URL}/all?fields=region`);
  fetch(`${API_URL}/all?fields=capital`);
  

  • Just make one call and include all the fields you need

  fetch(`${API_URL}/all?fields=flags,name,population,region,subregion,capital,tld,currencies,languages,borders,independent`);
  

  This has a huge impact in your app's performance, let me give you an example:

  const fields = 'flags,name,population,region,subregion,capital,tld,currencies,languages,borders,independent';
  const url = `https://restcountries.com/v3.1/all?fields=${fields}`;
  
  async function fetchData() {
    const res = await fetch(url);
    const countries = await res.json();
  
    // And now you can simply access the properties you need, without having to make any extra requests
    countries.forEach(country => {
      console.log(country.name, country.borders);
    })
  }
  
  fetchData();
  

  Also, as you might have noticed, you should not use Promise.then() inside an async function, that's what the await keyword is for. You can read more about the proper use of async functions in this article:

  https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/async_function

  Remember you can also use the local data.json that comes with the challenge and fetch the data from there instead of using the API.

  Hope you find this helpful 👍

  Marked as helpful

  1

  This comment has received 2 repliesShow
• 

  Eunila•50

  @EunilaSubmitted 7 months ago

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

  I like to learn new things ,so if i mistake something of my code feel free to write feedback .i will be more happy for your feedback

  

  SOLUTIONS of QR code component

  1

  50
  

  M•940

  @Dev-MV6Posted 7 months ago

  Hi there 👋, congrats on completing this challenge, you did an excellent job. Your solution looks great.

  Just one small suggestion. You can use the position property to position your .attribution element absolutely so it doesn't take up any space:

  .attribution {
    /* padding: 80px 50px 0px; */
    /* margin: 80px 50px 0px; */
    position: absolute;
    bottom: 40px;
  }
  

  https://developer.mozilla.org/en-US/docs/Web/CSS/position#absolute_positioning

  Overall your solution looks really good. I hope you find this helpful, let me know if you have any questions, I'll be happy to help 👍

  0

  This comment has received 3 repliesShow
• 

  Netinho@_@•10

  @Netodev-dfzSubmitted 7 months ago

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

  Me orgulho que aprendi maneiras novas para abranger e melhorar meu código.

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

  Os desafios foram como iniciar o projeto, a centralização, a separação de cada coisa no seu devido lugar.

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

  Parte do display flex, com a centralização dos itens.

  

  QrCode

  1

  40
  

  M•940

  @Dev-MV6Posted 7 months ago

  Hi there, you can apply the following styles to your body to center the card:

  body {
    min-height: 100vh;
    display: flex;
    justify-content: center;
    align-items: center;
  }
  

  Hope you find this helpful 👍

  0
• 

  Erratic Enigma•200

  @erratic-enigmaSubmitted 7 months ago

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

  This is my first time experimenting with container queries, though I only used them for applying border-radius on the image when the main element reaches certain minimum widths:

  @container (width >= 42.875em /* 686px */) {
    border-radius: …
  }
  

  Interested to take advantage of them on larger projects in the future.

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

  On small viewports, the image fits across the full width of the page, but the rest of the content has whitespace on both sides. I didn't want to use an extra wrapper with padding applied around the content. Instead, I made use of grid with the following columns:

  grid-template-columns: [gutter-start] minmax(auto, 1.75rem) [content-start] 1fr [content-end] minmax(auto, minmax(auto, 1.75rem) [gutter-end];
  

  positioned all the content inside of the content column:

  main > * { grid-column: content; }
  

  then positioned the image across all available columns:

  .opening-image { grid-column: gutter; }
  

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

  I'm not entirely sure if I structured the markup for the table properly, so any pointers on that would be nice.

  I'm also not sure about the way I applied positioning styles to the ul and ol elements. Are there any better methods than using margin and padding?

  

  Recipe Page

  1

  20
  

  M•940

  @Dev-MV6Posted 7 months ago

  Hi there 👋, congratulations on solving this challenge, your solution looks great.

  I think you are using the table element correctly, remember you can always explore different ways to get the same result using CSS and Flexbox, in any case, don't worry about the table. The way you approached it is completely valid.

  Now, using margin to set the spacing between the list items is completely valid as well. In fact, I think it is the most common way. If you are curious about alternative ways to set the spacing between the items in a list, Flexbox has you covered:

  .list {
    display: flex; /* enable Flexbox in the container */
    flex-direction: column; /* position children elements in a column */
    gap: 0.5rem; /* the space you want between the children elements */
  }
  

  You can read more about Flexbox in this article: https://css-tricks.com/snippets/css/a-guide-to-flexbox/

  Hope you find this helpful 👍

  Marked as helpful

  1
• 

  Myat Thiha Naing•130

  @MyatThihaNaing-mthnSubmitted 7 months ago

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

  I can now build project without watching tutorial.

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

  There were a few challenges which I cannot override the global css with tailwind classes.

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

  I would like to know best practices of tailwind css. In my project, I felt I made spaghetti css.

  

  Responsive FAQ page with react and tailwind css

  1

  30
  

  M•940

  @Dev-MV6Posted 7 months ago

  Hi there 👋, congrats on solving this challenge.

  You might want to check this out from the Tailwind's official documentation, it will teach you ways you can manipulate Tailwind for the specific needs of your projects:

  https://tailwindcss.com/docs/adding-custom-styles

  Hope you find this helpful 👍

  Marked as helpful

  1
• 

  Okonkwo Vivian Uchechi•140

  @okonksSubmitted 7 months ago

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

  I'm most proud of the significant amount of new skills I acquired while tackling this challenge. Despite working at a slower pace, I found immense satisfaction in the knowledge gained throughout the process. Additionally, mastering responsive layouts was a notable achievement for me. Looking ahead, I aim to optimize my workflow to enhance productivity and efficiency in future projects.

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

  I encountered challenges while implementing responsive layouts, but I found valuable guidance from resources like W3Schools and ChatGPT. Additionally, achieving equal spacing between divs proved challenging, but I resolved it by utilizing the justify-content: space-between property. These experiences underscored the importance of seeking assistance from reliable sources and experimenting with different CSS properties to overcome obstacles effectively.

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

  I need help changing the color of the image to match exactly with the project's color scheme. I've conducted my own research, but I couldn't achieve the desired result of matching the color of the image precisely with the project's color scheme.

  @Grego14 and many others🙏🙏🙏

  

  Stats preview card

  1

  30
  

  M•940

  @Dev-MV6Posted 7 months ago

  Hi there 👋, good job on completing this challenge.

  If you want to improve the final result, you can simply reduce the opacity of the image to 0.75, this will make it match perfectly with the design:

  #right-side img {
    mix-blend-mode: multiply;
    opacity: 0.75;
  }
  

  Hope you find this helpful 👍

  0
• 

  P

  yinnie•280

  @wcyin9Submitted 7 months ago

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

  I had a lot of fun with this one. I think I'll revisit this challenge next time using CSS frameworks.

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

  I struggled a bit getting the grid to work correctly. If you look at the bottom of the card on the very right, the height of it is slightly off from the other cards. I think it has something to do with the amount of rows/columns I made.

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

  Please let me know if there's any mistakes I made, or if there's better code I can implement.

  

  Testimonial section CSS grid

  1

  100
  

  M•940

  @Dev-MV6Posted 7 months ago

  Hi there 👋, your solution looks great.

  The reason your element with the .card5 class-name doesn't seem to be aligned correctly with the rest of the cards on the bottom of the grid is because you've set the max-height property to the element, restricting its maximum height to 572px.

  To solve this, simply tweak the value you've set for this property on your style-sheet:

  @media (min-width: 1110px) {
    .card5 {
      /* max-height: 572px; */
      max-height: 577px;
    }
  }
  

  Hope you find this helpful 👍

  Marked as helpful

  0

  This comment has received 1 replyShow
• 

  Covenant-0•100

  @Covenant-0Submitted 7 months ago

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

  I am proud I finally completed this challenge completing this challenge. It took me a number of days.

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

  The only challenge i faced was how to display different images on different screen sizes. I made a lot of research and i was finally able to do it. I learnt new things. The snippet below is an example of what i learnt. (```

              ```)
  

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

  I need help with importing fonts from the google fonts website. I made a lot of research and tried a lot of things but the font did not reflect in the code. If there's anyway i can go about this or any alternative, kindly let me know in the comments below. Thanks

  

  Product Preview Page

  2

  50
  

  M•940

  @Dev-MV6Posted 7 months ago

  Hi there 👋, importing the fonts using the link tag in your HTML is not enough to apply the font family to your page. You need to set the CSS font-family property to the element you want apply the font to in your style-sheet:

  h1 {
    font-family: Fraunces, serif;
  }
  

  Hope you find this helpful 👍

  Marked as helpful

  0

  This comment has received 1 replyShow
• 

  Abhishek Kashyap•100

  @Abhishek10351Submitted 7 months ago

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

  I would like help on the two background svgs and how to add them in the desing as intended.

  

  Profile Card Component

  1

  50
  

  M•940

  @Dev-MV6Posted 7 months ago

  Hi there 👋

  Getting the background right can be the most difficult part in this challenge, here's one way you can achieve a very close result to the original design, with the help of the background-position property and CSS media queries to make it responsive:

  /* Mobile first */
  body {
    background-position: left -330px top -300px, right -428px bottom -326px;
    background-size: 540px, 640px;
  }
  
  @media (min-width: 700px) {
    /* Medium size screens */
    body {
      background-position: left -585px top -510px, right -530px bottom -633px;
      background-size: 978px;
    }
  }
  
  @media (min-width: 1300px) {
    /* Large size screens */
    body {
      background-position: left -285px top -510px, right -230px bottom -633px;
    }
  }
  

  Hope you find this helpful 👍

  Marked as helpful

  1
• 

  P

  Ortaly•970

  @ortalyartsSubmitted 7 months ago

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

  Features:

  • Vanilla Javascript + Native CSS + Semantic HTML5.
  • Responsive design + Mobile first approach.
  • Form validation.
  • Accessibility.
  • Customised accessible drop down select element.
  • Countdown to launch date (for presentation purpose: the date is set to 30 days in the future from the moment the user visits the website).

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

  Accessibility question: I've spotted a bug: if I navigate through the site with the keyboard (using tab key), after arriving to the select element I can't go further or go back to other inputs. So to move back or forth I have to use the mouse... Any suggestions on how to fix this issue are highly appreciated!

  Any other suggestions for improvement are also very welcome :)

  

  Officelite coming soon. Responsive design + Accessibility

  1

  40
  

  M•940

  @Dev-MV6Posted 7 months ago

  Hi there 👋

  The reason you are unable to change the tab focus when it reaches the drop-down menu is that you are you using the Event.preventDefault method in your handleKeyPress function which instructs the browser to not execute the default action for that event.

  In your case, you are telling the browser to prevent any default action when the keydown event is triggered on the target element, and the default action in this particular case is to change the tab focus, that's why when you press the Tab key, the focus gets stuck on the drop-down menu.

  Hope you find this helpful 👍

  Marked as helpful

  0

  This comment has received 1 replyShow