IO

Latest comments

• 

  nikolajseverin•60

  @nikolajseverin

  Submitted about 2 months ago

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

  probraly just how good it looks, and also the hover modes, looks nice!

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

  I’m currently facing a challenge with making my site responsive after going live with my HTML and CSS project. I’ve built the layout for desktop screens (1440px), and it looks good at that size. However, I’m not sure how to approach making it work for mobile devices (like 375px width).

  When I open my live site and try to resize the window, I can’t get it to show how it would look at 375px unless I use Chrome’s developer tools and switch to mobile view manually. This makes it hard for me to understand what the proper workflow or strategy is for developing a responsive site that works well on both desktop and mobile.

  I know that media queries are involved, but I’m confused about: • When and how to test mobile views effectively (especially after going live). • How to set up a proper development process for building mobile responsiveness after the desktop version is done. • Whether I should rely on the Chrome inspector tools for mobile views, or if there’s a better approach.

  Any advice or guidance on how to structure the development and testing for responsiveness would be super helpful!

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

  I’m currently facing a challenge with making my site responsive after going live with my HTML and CSS project. I’ve built the layout for desktop screens (1440px), and it looks good at that size. However, I’m not sure how to approach making it work for mobile devices (like 375px width).

  When I open my live site and try to resize the window, I can’t get it to show how it would look at 375px unless I use Chrome’s developer tools and switch to mobile view manually. This makes it hard for me to understand what the proper workflow or strategy is for developing a responsive site that works well on both desktop and mobile.

  I know that media queries are involved, but I’m confused about: • When and how to test mobile views effectively (especially after going live). • How to set up a proper development process for building mobile responsiveness after the desktop version is done. • Whether I should rely on the Chrome inspector tools for mobile views, or if there’s a better approach.

  Any advice or guidance on how to structure the development and testing for responsiveness would be super helpful!

  

  Sign up site

  1

  40
  

  IO•710

  @i000o

  Posted about 1 month ago

  Hi, regarding your comment about responsiveness/mobile design:

  Designing optimally for both desktop/mobile should become part of your normal workflow. One is not an afterthought of another. You can opt to start with one (many start with mobile), and then use media queries to expand your design for wider screens (desktop etc.)

  A typical approach is to, say you start with mobile, use min-width media queries. I.e. @media screen and (min-width: 426px); to gradually scale your design up. This means widening the window until your design 'breaks' and then adjusting at that breakpoint. You don't need to design for every breakpoint/every screen. Sometimes, if you've started with a good base, say a Flex layout, a lot of it will be taken care of for you because its intended to be 'flexed', but some you'll need to adjust yourself through the queries.

  Alternatively, if you opt to use a desktop-first workflow, you would use max-width media queries and work backwards down to a mobile design.

  Regarding Google Dev Tools: I understand what you're saying about relying on it for design, it's not that great. I've come to the same impasse before. The best practice is to use as many actual screens to check your design as you can - This means your own phone, a tablet you might have etc. Of course, there's an accessibility issue if you don't have loads of these (which is normal), but there are services like BrowserStack for example that show your design on different screens. I can't speak to how good that or any others are as I'm still trying to find my workflow with this, too. Just do your best with what you can access. While you're learning, your designs don't have to be ultra-perfect. Just get as close as you can.

  Hope that helps - good luck, keep going.

  0
• 

  Manuel-D-Creator•10

  @Manuel-D-Creator

  Submitted 2 months ago

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

  I'm most proud of how I structured my code throughout the project. I focused on writing semantic HTML, organizing my CSS efficiently, and ensuring design responsiveness across different screen sizes. Additionally, I took extra care to follow best practices, which made debugging and refining the project much easier. I'm also very proud as this is my very first project involving JavaScript after learning the basics of the language. Next time, I would focus more on optimizing my workflow.

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

  One of the challenges I encountered was implementing certain JavaScript functionalities. There were some operations I wasn't entirely familiar with, which made it difficult to achieve the desired functionality right away. To overcome this, I did some research on how to use the classList property to check if a particular element contains a particular class by using the ".contains" property. This experience helped me deepen my understanding of JavaScript interactivity and improved my problem-solving skills.

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

  I would appreciate feedback on my JavaScript implementation, particularly on how I handled event listeners and classList. While I was able to make the functionality work, I'd like to know if there's a more efficient or cleaner way to achieve the same result. Additionally, I'd love guidance on improving my CSS organization. I feel like I might have written some redundant styles, and I want to ensure that my approach is structured and maintainable. Finally, if there are any best practices I might have missed, whether in JavaScript, HTML, or CSS, I'd love to hear any recommendations for improvement.

  

  Responsive Interactive rating component using JavaScript

  #bootstrap

  1

  00
  

  IO•710

  @i000o

  Posted 2 months ago

  Hi!

  Your solution looks good and functions well. I can't speak on all the feedback you asked for, particularly .classList since, as a fellow newcomer to Javascript, I haven't used this yet. But I can say:

  1. HTML - The advised approach to this problem is to use a HTML form that uses radio buttons (buttons that don't allow for multiple choice answers). From here, you can control interactivity of the form with JS and shorten your code considerably. Have a look at my solution and the recommended Useful resources in my README.md. You'll find links to explanations on these concepts there. In general, I recommend joining the Discord community and searching for others' questions on the same solution as you work on it. This can help you save time and understand how to get clear guidance on approaching the problem instead of going in blind. If your JS is still elementary, I think it's more efficient to get straight into writing JS that functions well and is as simple as possible to help your understanding of it at this stage.
  2. Good use of .querySelector
  3. I can't see an .addEventListener in your JS. This is the technique we'd use for a situation like this.
  4. Conditional statements - You have a long list of if/else if statements in your conditional logic. Potentially look into switch-case statements with break clauses, as these might be allow you to organise your conditions into cases which might improve readability. Alternatively, I have only 1 if/else statement in my JS for this project - maybe take a look. It essentially states that if a rating is submitted, convert it to a value to remember and show the Thank-you state, otherwise, just show the default screen.
  5. I like your prompt that shows when Submit is hit with no rating given.
  6. I'm new to JS also and using an AI assist really helped me to break down the problem to approach it. This might give you some direction to avoid detours/confusions/verbose code and help you to understand tackling projects better.
  7. Styling - The font used for this project is given in the style-guide.md document. To organise your CSS further and write DRY code, you could use a pre-processor like Sass. These really help me and make CSS-writing more enjoyable. To learn more, you can compare my input.scss file in my sass folder in this repo to the output.css to see how the processor converts Sass into pure CSS (and saves you code).

  Well done on your first JS challenge! Keep goin' -

  0

  Marked as helpful
• 

  P

  Serhii Derkach•50

  @SerhiiDer

  Submitted 4 months ago

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

  Not much

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

  I couldn't align the last section Nutrition to look like in figma

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

  I couldn't align the last section Nutrition to look like in figma

  

  Recipe Page

  2

  10
  

  IO•710

  @i000o

  Posted 4 months ago

  Hi!

  Instead of <div>s for your Nutrition table, you can learn about HTML <table> element, and <tr>, <th> elements (table row and table heading). This is really useful when building semantic tables in a design.

  Here's an example of how you can improve this section:

  table {
      display: flex; 
      flex-direction: row;
      justify-content: center;
      text-align: left;
  

  You can view my CSS for this challenge here.

  The rest looks great and accurate to the design! Well done - This challenge was chunky and takes some time, but you did it 👏🏻

  0

  Marked as helpful
• 

  Prashant Uniyal•170

  @mod-prashant

  Submitted 4 months ago

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

  I would appreciate any help in making the code more professional and any improvements you think I might need

  

  Product preview card component solution

  2

  10
  

  IO•710

  @i000o

  Posted 4 months ago

  Hi!

  Your HTML looks good - You've made semantic choices. I would only say, you could replace <span> with a heading of your choice, like a <h2>. Always use <div>/<span> as a last resort - but in your <div> case, it makes sense to create the flex alignment.

  Your CSS also looks clean - As your projects get more complex and the CSS doc longer, you can consider using a pre-processor to help organise your approach to support clarified thinking when problem-solving! It has helped me a lot when things got confusing with more content.

  I think in the design, the product title has a hover state, too. But your solution looks great, otherwise. Well done.

  1

  Marked as helpful
• 

  Juanka•80

  @icyjkk

  Submitted 4 months ago

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

  The ease that I already have with CSS, in the first project, seemed very difficult to me.

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

  I didn't have any particular difficulty with anything.

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

  Specifically, I don't need help with anything in particular. But it would be good for me if you could give me some opinion on the structure of my HMTL and my CSS.

  

  Social links profile using HTML and CSS

  1

  00
  

  IO•710

  @i000o

  Posted 4 months ago

  1. Alternatively to <blockquote> in the HTML, you can use <q> to create the quotation marks without typing them.
  2. You can also make the link stack an <ul> for semantic HTML.

  Your CSS looks good 👍🏻

  1

  Marked as helpful
• 

  BCEESAY10•150

  @BCEESAY10

  Submitted 4 months ago

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

  Proud of completing yet another frontend mentor's challenge

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

  No Challenge, this is so basic.

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

  None

  

  Responsive QR Code component challenge using HTML & CSS

  1

  10
  

  IO•710

  @i000o

  Posted 4 months ago

  1. Your card could use some border-radius and some padding so the content is not so close to the edge.
  2. You can also add a box-shadow to the card for extra impact.
  3. Your design isn't responsive. You can use display: flex;, flex-direction: row; with justify-content: center; and align-items: center; to help the content size down as you shrink the viewport.

  1

  Marked as helpful