Skip to content
OverviewSolutions
16
Comments
40
IO
@i000o

All comments

  • Manuel-D-Creator•10
    @Manuel-D-CreatorSubmitted 9 days 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
    IO•690
    @i000oPosted 7 days 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' -

    Marked as helpful
    0
  • P
    Serhii Derkach•50
    @SerhiiDerSubmitted 2 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
    IO•690
    @i000oPosted about 2 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 👏🏻

    Marked as helpful
    0
  • IO•690
    @i000oPosted about 2 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.

    Marked as helpful
    1
  • Juanka•80
    @icyjkkSubmitted 2 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
    IO•690
    @i000oPosted 2 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 👍🏻

    Marked as helpful
    1
  • BCEESAY10•150
    @BCEESAY10Submitted 2 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
    IO•690
    @i000oPosted 2 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.
    Marked as helpful
    1
  • Leoy96•60
    @Leoy96Submitted 2 months ago
    What are you most proud of, and what would you do differently next time?

    How i was able to design with less stress.

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

    font challenge, still a havent resolve it.

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

    how to incorporate the required font in the design

    A blog post design

    1
    IO•690
    @i000oPosted 2 months ago

    The correct font is given in the styleguide.md provided in the files. You can try using the @import rule and retrieve the font from Google Fonts to help you. The rule requires that you import the font at the top of your CSS (not your HTML) and then call on it in a declaration with the font-family property.

    Marked as helpful
    0
  • uzainmalik123•260
    @uzainmalik123Submitted 2 months ago
    What are you most proud of, and what would you do differently next time?

    I would write CSS differently next time completely messed it up but i still managed to kinda fix it.

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

    A lot of challenges in this challenge like the layout a lot of div's have been used the CSS and HTML code is in a mess.

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

    Any feedback would be appreciated but I think you are going to have a stroke reading the CSS.

    HTML, CSS Social Proof

    #pure-css
    1
    IO•690
    @i000oPosted 2 months ago

    Your last comment made me laugh out loud on an unmotivated Monday morning 😂

    1. Try using Sass or another preprocessor with hefty CSS projects - it can help clean things up so much and really allow you to focus on one problem at a time, which for this project, I found hard to do as many elements change frequently on viewport adjustments. The initial syntax you need to get started is simple to learn and now that I've started using one, I can't go back to long scrolls of CSS. Here's an example - 3 column preview. You can compare the input.scss file to the output.css to see the difference between what I wrote myself and what CSS it results in.

    2. Instead of <div>ing your reviews, you can use a more semantic element like <article> for instance. It's a bad habit to div everything, although it can be tempting. Try to build this HTML semantic practice.

    3. You can also make use of :first-child and nth-child() pseudoclasses instead of labelling things with classes (I used to do the same), but this can help clean up your CSS, too. It can also help teach you how to understand the parent-child relationship better.

    Well done, though. The design looks good. Just try and make your own life easier so you can have more enjoyment.

    Marked as helpful
    0
  • Robert Horosewski•310
    @horoserpSubmitted 2 months ago
    What are you most proud of, and what would you do differently next time?

    I am glad that I implemented this using CSS Grid. I would like to go back and try this challenge using entirely CSS Flexbox.

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

    The background images continue to challenge me. I relied on my previous project to get me through it this time.

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

    Is there a way to edit the .svg file for the background images so that I can make them darker, or better yet, a different color?

    Social Proof Card using HTML/CSS Grid

    1
    IO•690
    @i000oPosted 2 months ago

    I had a hard time with the bg images too, not a fan yet 😂 .SVGs are Scalable Vector Graphics usually designed in Adobe Illustrator, optimised for web. You might be able to change the file if you have that software. Otherwise, you could try opacity or mix-blend-mode properties to play around.

    Marked as helpful
    0
  • Robert Horosewski•310
    @horoserpSubmitted 3 months ago
    What specific areas of your project would you like help with?

    I would appreciate feedback on if there is a way to have both the "button" text and the background JUST under that text be transparent while keeping the rest of the background as it is. Alternatively, is there a way to optimize my CSS so that I don't have to target each button individually: .category:nth-child(2) .button:hover {.

    HTML/CSS 3-Column Card

    2
    IO•690
    @i000oPosted 3 months ago

    Hi!

    1. Consider using the <button> element for Learn More instead of <a>. This might be why the styles weren't behaving how you expected.

    2. I've seen a few people do this and I initially did the same thing, but it's not :hover, it's :active which is different. Both are also different from :focus. Brush up on these! :active is when a button is clicked. I think if you adjust this your background styles will comply more towards your intention than before. You can view my output.css file to see how I achieved it. Note that I used Sass to pre-process my CSS (which I'd recommend if you're interested - See Sass basics).

    3. You can target a group of elements by only referring to the element itself, not the pseudo-classes. For instance, if you change your <a>s to <button>s, you can then just target <button> and apply all the common styles there, and then hone in on each column's background-color on :active using your pseudoclasses.

    Hope that helps!

    Marked as helpful
    0
  • DrMetr•250
    @DrMetrSubmitted 3 months ago
    What are you most proud of, and what would you do differently next time?

    I'm proud of making a responsive webpage.

    Next time I'd like to use SASS or Tailwind, it'd be cool and useful.

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

    The most challenging part was "Learn more" buttons.

    I didn't find any elegant easy ways that would allow me avoid repetition in styles.css file.

    And also for some reason the text of those wouldn't change from transparent to white upon mouse hover when I include color: white; property into .button:hover, so I had to include the same line in each of three cards.

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

    Why wouldn't a button text change color upon hover if I include color: white; into .button:hover {...} but it would if I write it into each separate "#id > .button:hover {...}"?

    Is there a way to make a repetitive element (like the "Learn More" button in the challenge) appear in each block without manually including it everywhere like I did?

    Three columns challenge solution html css

    1
    IO•690
    @i000oPosted 3 months ago

    Hiii! I can help you -

    I just posted my solution to this challenge and I make use of Sass here. It's really useful to keep your code simple and stop you repeating yourself. I recommend you start here Sass basics which is what I did.

    Some of the things that Sass can offer you are - mixins, variables, nesting and partials.

    1 Mixins - You can declare multiple lines of code at once on multiple selectors! This saves you writing the same lines over and over again in different places in your CSS. For e.g.

    display: flex; 
justify-content: center; 
align-items: center;

    You declare it at the top and then refer to it later with @include. So much faster.

    2 Variables - If you know you are going to reuse a value again and again throughout the design, you can make it a variable with $ and use that instead. It contains the value for you so for e.g. you don't write 20px over and over for a margin property. In my Sass, I used one for the border-radius and called it $rounded-corner.

    3 Nesting - This allows you to correctly target selectors and understand this. It's very helpful to use Sass and then compare it to the CSS output file and see well-written CSS that you didn't write directly 😂 It teaches you what it's supposed to look like.

    It also keeps your code neatly organised into sections instead of having a loooong scroll of CSS. This means you can focus better and put aside lines/segments that aren't part of the current problem you're solving.

    3 Partials - Partials are where you can call on pieces of modular code to save yourself writing sections of code everytime. For e.g. I use this for my CSS reset at the top of the document. It uses one line instead of 10.

    Secondly, it's not :hover! It's :active. I did the same thing and learnt the importance of the different - from focus, too. I think once you adjust this, your code will behave more how you expect.

    Hope this helps!

    Marked as helpful
    0
  • IO•690
    @i000oPosted 3 months ago

    Nice touch with the JS! Replace the placeholder text for a more immersive feel 😉 You can add the further active states in the design on the h1, as well. Font-family for the button and paragraph is 'Monserrat', linked in the style-guide.md file.

    Marked as helpful
    0
  • IO•690
    @i000oPosted 3 months ago
    1. font-family is Red Hat Display (click on link in styleguide.md file given to grab from Google Fonts).
    2. .second class background-color: should be hsl(225, 100%, 98%);.
    3. Add box-shadow property on Payment button. Use this to help you program its appearance - Box shadow generator.
    4. You might need to add background-size: 100% or use value cover or contain since it cuts off early on the viewport width.

    Good job, otherwise!

    0
  • IO•690
    @i000oPosted 3 months ago

    Fantastic job on the sizing (and styling)! I'm going to use this example to help me improve mine 🙂

    You can add background-image: url(), background-repeat: norepeat;, background-postition-x/background-position-y:, background-attachment: scroll; and background-size: for the quotation mark behind the Daniel card.

    Marked as helpful
    1
  • demon2316slayer•110
    @demon2316slayerSubmitted 3 months ago
    What are you most proud of, and what would you do differently next time?

    I was able to make the layout using flexbox first. But the right card was impossible then i did some research. I tried grid, Using the grid it became easy , and i was able to do it easily. But this will help me focus on topics i must revise again.

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

    As i said how to approach the design is the problem i used to face but now im able to break down the problem a little easily in my mind, im feeling proud of myself. I think i can do more challenges and become better overall.

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

    Well i would love for other to review my work and give me effective feedback, mostly that only.

    Testimonial grid

    1
    IO•690
    @i000oPosted 3 months ago
    1. Font is "Barlow Semi Condensed".
    2. You can add some padding to your cards. Try padding: 10px 30px;
    3. Research background-image as a property to get the quotation mark in the Daniel's card. You can import via url() as the value. You can also use background-position, background-repeat: norepeat; and background-size to style it.
    4. You can use the HTML element <br> to insert a line-break where you want it in text.
    5. Try using Sass or another pre-processor for your CSS to save you work and make your code DRY (Don't Repeat Yourself). It's helped me.
    6. I added some margin-left to Kira and Jeanette's card to make the lines match the design a bit more.
    Marked as helpful
    0
  • IO•690
    @i000oPosted 4 months ago

    I can't speak much on your use of React, but your cards could have more negative (empty) space in them using margin properties around your text and image icons.

    Header can be a display: flex; with a Grid layout for the cards on desktop.

    0
  • Shardool Singh•30
    @shardoolsinghSubmitted 4 months ago
    What are you most proud of, and what would you do differently next time?

    My First challenge. Reasonably quick time to finish with this basic card component. Although, next time I would like to improve on the styling of card particularly box-shadow and gradients.

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

    Not much of challenge to speak of. Relatively easy challenge, though I would love to add more stylistic flare next time.

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

    Going forward, I would like to learn particularly how to give my cards different box shadow effects - like raised, overlay, hover effects on my cards.

    Simple order summary componet card

    2
    IO•690
    @i000oPosted 4 months ago

    Regarding box-shadow, this helped me achieve mine - Box shadow generator.

    1
  • IO•690
    @i000oPosted 4 months ago

    Nice! Font is Outfit 😉

    0
  • IO•690
    @i000oPosted 4 months ago

    Nice! Font is Outfit 😉

    0