Skip to content
OverviewSolutions
33
Comments
17
P
Ralph Virtucio
@ralphvirtucio

All comments

  • ikitamalarose•400
    @ikitamalaroseSubmitted 3 days ago
    What are you most proud of, and what would you do differently next time?

    First I'm proud to be able to realise this challenge then, to have learned to do the screen reader tests and keyboard accessibility finally, soon in my projects I will write my code respecting the semantic HTML.

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

    I didn't have any challenges. F I N A L L Y 😅

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

    All remarks are welcome

    FAQ accordion

    1
    Ralph Virtucio•650
    @ralphvirtucioPosted 1 day ago

    Hi @ikitamalarose,

    Great job on completing this challenge! Your solution looks solid. I have one suggestion: consider replacing the width on your #container selector with min-width to prevent elements from becoming too narrow on smaller screens, or use max-width to keep elements from expanding too much on larger screens.

    Keep up the great work!

    CODE UP ☕🧑‍💻🙌!

    0
  • Tuna Erten•340
    @tunaertenSubmitted 2 days ago
    What are you most proud of, and what would you do differently next time?

    This turned out to be a relatively easy project. I had previously worked on the Quiz-App, which was quite challenging. To be honest, I didn’t encounter any difficulties with this project. It was a fun and time-efficient project. In addition to the original, I added an error statement.

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

    I am open to any suggestions!

    Interactive-Rating-Component with error-statement

    1
    Ralph Virtucio•650
    @ralphvirtucioPosted 2 days ago

    Hi @Tuna Erten,

    Great job on doing this challenge !

    0
  • ikitamalarose•400
    @ikitamalaroseSubmitted 25 days ago
    What are you most proud of, and what would you do differently next time?

    First of all i'm proud that, I was able to finish this project. Then to have been able to manage the generation of new question with each click on the Next Question button. Finally, from now I will proceed by section and spend more of my time studying the model and how to proceed to code the elements.

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

    It was hard to injecting each question into the content and recovering the score, but I took a step back to carefully study the figma model then it was easier once I made a good cutting. The deployement on Vercel was an ordeal I had to spend more time there to finally migrate to Netlify. Because by documenting me on the net there was several comments like 'Vercel does not take into account the JavaScript module model etc..'

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

    I'm learning so any help or comment is welcome :)

    Frontend Quiz App

    2
    Ralph Virtucio•650
    @ralphvirtucioPosted 4 days ago

    Hi @ikitamalarose,

    Great job on completing this challenge! The only suggestion I have is that the tablet view doesn’t quite match the design; approaching it with a mobile-first mindset might make it easier to achieve the desired layout.

    Overall, you did an excellent job on this challenge!

    Keep it up!

    CODE UP ☕🧑‍💻😊!

    0
  • Hexerse•460
    @HexerseSubmitted 3 months ago
    What are you most proud of, and what would you do differently next time?

    Being able to create the generator. next time I want to jot down how the algorithm works more accurately before creating it.

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

    I did not understand the steps to create a generator. So I found one online and studied it. I understand how it works through active recall .

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

    If my code is not efficient/If I forgot to do some parts up. Put it down ! I wish to learn.

    password-generator-app

    1
    Ralph Virtucio•650
    @ralphvirtucioPosted 3 months ago

    Hi Hexerse

    Great job on doing this challenge !

    These are my suggestion that you can reviewed and apply to the codebase:

    - Semantic HTML Suggestions -

    • If you want more semantic approach, you can change the <div class="generator__options"> to a <fieldset> element as this will provide a semantic HTML because the checkboxes are group as a inclusion of the password generator, you can hide the <legend> element by using a sr-only styles.

    • A semantic approach for your <h3 id="passwordLength"> is to update it to an <output> element

    - Solution to Design comparison -

    • I notice that your solution screenshot is more smaller than the design, To improve it you can replace the min-width property in your form element with a max-width and set a width base on your desire value, I also think it would make your app more responsive if you implement max-width instead of min-width.

    • If you want to style your input range, Someone at the discord community give me this article on how to create a custom input range. Feel free to check it out ☕

    -----------------------------------

    • I also notice that the ids of lowercase and uppercase checkboxes are different to the for attributes of the label which if you click the label of the lowercase and uppercase the checkboxes are not getting click.

    • I also found that you experience the overlapping of the classes in the strength indicator as I also experience it, What I did a save the previous class to a variable and then every time my ```generateFunction`` is called it iterate through all bars and remove the previous class from strength bar. I also create an dataset attribute for it to track the strength of my password.

    If you want more challenges 😅🧑‍💻 try implementing an entropy function and try Fisher Yates Method to shuffle the password to generate a more unpredictable password.

    I would also suggest to check your README, As this file is important so other developers that will check your repository will get the primary information of your project or codebase. It is a great practice to check and write a README.md file. If you want to know the benefits of it check out this article

    Overall you did great in completing this challenge

    Here have some virtual donuts🍩 and coffee ☕ while going through my feedback :)

    CODE UP 🧑‍💻🧑‍💻😊

    Marked as helpful
    0
  • Danae Lescano•270
    @Lescano713Submitted 3 months ago
    What are you most proud of, and what would you do differently next time?

    I'm proud of using validations to check the data from inputs. I would like to experiment with creating validations in a more concise way.

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

    When I tried to use one of the buttons as a parameter within a forEach loop I resolved the issue by assigning a class to the button when it was clicked.

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

    First in my code, I had two functions that iterate on an array of elements (buttons and inputs) and I wanted to pass the clicked element as an argument to another function, but I didn’t understand how to do it.

    Responsive Tip CalculatorApp with Grid, EventListeners and Validations

    1
    Ralph Virtucio•650
    @ralphvirtucioPosted 3 months ago

    Hi Danae Lescano,

    Great job on completing this challenge!

    I have a few suggestions that might help you refine your code further:

    • Semantic HTML for Tip Section: For a more semantic approach, consider using radio buttons within a <fieldset> element for the tip section. This will help with both structure and styling. You can apply active styles using the :checked pseudo-class selector in CSS. For custom input styles, you can use JavaScript to manage the state of these radio buttons.

    • Code Structuring: To improve the clarity and maintainability of your code, try breaking down the uploadDiscount function into smaller, more focused functions. For example, you could separate the logic for clearing and rendering errors into their own functions. If you're in Learning path here is a link that you can read about refactoring your code:

    const clearError = () => {
  sectionPeople.classList.remove('error');
  sectionBill.classList.remove('error');
}

const renderError = () => {
  sectionPeople.classList.add('error');
  sectionBill.classList.add('error');
}

    • Layout for Desktop Design: For achieving the desktop design, consider using display: grid for the tip section. While Flexbox is useful, Grid can provide better control over rows and columns, making layout adjustments easier.

    • Reset Button Enhancement: Instead of manually disabling the reset button with styles, use the disabled attribute in HTML. This will handle the button's disabled state more reliably. You can then use the :disabled pseudo-class in CSS to style the button. This approach avoids using !important in your stylesheet, which is generally best to avoid.

    Overall, you’ve done a fantastic job, and your README file is well-composed and clear!

    Feel free to check out the links I provided for this project. Here’s some virtual coffee to fuel your studying ☕☕☕.

    CODE UP! 🍩☕🧑‍💻

    Marked as helpful
    0
  • Ralph Virtucio•650
    @ralphvirtucioPosted 3 months ago

    Hi Diego Alves, Great job on completing this challenge !

    I'd like to suggest taking another look at the semantic HTML of your site. I had a similar approach initially, but after reading these articles tabbed inferaces, cards and w3 tabbed patterns my perspective changed. It made sense why this challenge involves tabs and panels. Try checking out those articles 😊

    I hope you find this helpful 😊. Overall, the solution you submitted is great!

    CODE UP 😊🧑‍💻☕!*

    0
  • 🔅 Yuliya 🐈•240
    @O-Julia-OSubmitted 3 months ago
    What are you most proud of, and what would you do differently next time?

    Finally, I placed the image with faces on the page similarly, as shown in the design.

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

    Challenges related to layouts, flexboxes, and grids. Difficulties in understanding the best names for blocks and elements.

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

    Hi everyone ✋

    Feedback on my website's layout and suggestions for improvement

    I would appreciate your feedback on both its layout and the usage of HTML tags. I'm particularly interested in whether I've used the correct tags for structuring content and any suggestions for improving the layout.

    What a better way to put the circle with number

    How better to place the image with faces

    I used a div block and css background-image for that, but I'm interested in knowing if there is a better way to place it on a webpage.

    Here is a snippet of the code I'm using:

    HTML:

    CSS:

    .image_faces {
    background-image: url("./assets/tablet/image-hero.png");
    width: 100%;
    height: 200px;
    background-size: 120%;
    background-repeat: no-repeat;
    background-position: top center;
}

    Please help with naming blocks and elements in HTML.

    Thanks a lot in advance:) Any feedback is important :)

    Meet landing page html css

    4
    Ralph Virtucio•650
    @ralphvirtucioPosted 3 months ago

    Hi O-Julia-O,

    Great job on completing this challenge!

    Your approach to the hero images is impressive! I'm considering refactoring mine because I couldn't quite implement it to match the design 🥲😅. I would suggest including the images in the HTML for accessibility since they are profiles of persons.

    For semantic HTML, I would also recommend removing the section with the class footer from the main element and creating a separate footer element for it.

    I noticed that your footer isn't exactly like the design. There are many ways to approach the footer styling. What I did was set the background color to match the design and then created a ::before pseudo-element for the background image.

    I also observed that the active state of your buttons isn't working.

    Lastly, I suggest including a README.md file in your repository. It’s a great habit to have as it communicates important information about your project.

    CODE UP 🧑‍💻☕😊 !*

    1
  • Jim Barnett•260
    @jamesbarnettSubmitted 3 months ago
    What are you most proud of, and what would you do differently next time?

    I am happy with how the confirmation using the `` element turned out. The only thing I would do differently would be to get the asset paths correct for deployment earlier in the process.

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

    I did run into a couple of issues with selector specificity. I did eventually recognize what was going on and adjusted. Good learning experience.

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

    Suggestions to improve the javascript for managing the dialog. Am I missing any obvious, well-adopted best practices, etc.?

    Newsletter Signup - Vite/Vanilla JS/Responsive/Flex/Grid/dialog

    1
    Ralph Virtucio•650
    @ralphvirtucioPosted 3 months ago

    Hi Jim Barret, Great job on completing this challenge

    I like how you used a dialog for the "Thanks for subscribing" message. I'm considering using it when I refactor this challenge. Thank you for sharing the showModal resource.

    • I have a test scenario for you: When the user inputs an invalid email and then clears the input to enter a valid email, they are redirected to the "Thanks for Subscribing" page. After clicking the dismiss message and returning to the main page, I notice that the error message "Valid email required" is still there even though there is no user email input.

    • It is also a good practice to use button type="submit" when submitting a form.

    If you want more references about client-side form validation here is a MDN article you can check. 😊

    Everything looks great!

    CODE UP ☕🧑‍💻😊 !

    Marked as helpful
    0
  • Daniel Basilio•390
    @danielbasilioSubmitted 9 months ago
    What are you most proud of, and what would you do differently next time?

    In a refactoring in the future, I would focus more on the accessibility part and use some framework, probably react

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

    Using the ITCSS methodology was the biggest challenge

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

    In terms of accessibility

    Article Preview component

    1
    Ralph Virtucio•650
    @ralphvirtucioPosted 4 months ago

    Hi Daniel Basilio,

    Great job on completing this challenge!

    • Your semantic HTML looks good. You could consider updating the footer element to a div element inside the section element.

    • When I clicked the View Code button, I was redirected to GitHub, but the page was not found.

    • The button for this project is not hoverable but clickable. Additionally, the share disclosure component is not working in the mobile design.

    Keep coding and stay caffeinated 😊☕🧑‍💻!!!

    0
  • Prem Kumar•260
    @prem-kumartSubmitted 4 months ago
    What are you most proud of, and what would you do differently next time?
    • Very proud of the fact was able to produce a full page website.
    • Better planning and structuring
    What challenges did you encounter, and how did you overcome them?
    • Main challenge was creating the footer which required background image and color and also the content on the top.
    • Initially went with parent-relative and child- absolute. This approach failed responsive design.
    • Used linear gradient and background-image css property to overcome it.
    What specific areas of your project would you like help with?
    • How do I better structure the code and improve my workflow
    • Is there better way of doing things?

    Meet Responsive Landing page

    1
    Ralph Virtucio•650
    @ralphvirtucioPosted 4 months ago

    Hello @prem-kumart,

    Great job on completing this challenge, Everything looks great.

    These are my some feedbacks for your challenge and things to improve.

    • Consider including a Semantic HTML this will make your project more informative and adaptable allowing browsers and search engines to better interpret your project. It will provide more accessibility to all users.

    • Include a README.md to your project this gives other developers some information about your project. Feel free to read this link to know the benefits of writing a good challenge readme. You can use the README-template provided by Frontend Mentor.

    • I also notice that your the background color of your Download button is different, here is the correct background color for it #4D96A9 and this is the color #8FE3F9 of the text inside it.

    • You can also use <a> tag element for the button when you consider the usage of it. <a> tag element will be a good HTML element for it because the user will redirected to other page or component of the page.

    DEVELOP BUILD CODE UP!! ☕🧑‍💻

    1
  • Ralph Virtucio•650
    @ralphvirtucioPosted 6 months ago

    Hi developercris7, Great job on completing this challenge !

    Here are my feedback about your project:

    1. I'd suggest writing and adding a README file on your project. It's a good practice to include a README in all your project because it serves as the gateway to your project and offering essential information. This practice explaining what you mean clearly and having a reference for yourself and others, If you want to know more about the benefits of writing a good challenge README check out this article by Vanza Setia

    2. I'd suggest to update the bg-pattern quotation on your first section to a background-property, It's because the quotation is purely a decorative images that do not convey essential content. This helps separate content from presentation and keeps your HTML cleaner.

    3. Try practicing use of REM and EM to your project this will make your project more flexibility, scalability, and accessibility, becuase REM and EM depend on the used font-size of the user.

    **HAPPY CODING 🧑‍💻 ! CODE UP ☕☕!

    0
  • jaiden-lee•90
    @jaiden-leeSubmitted 6 months ago
    What are you most proud of, and what would you do differently next time?

    I am most proud of actually getting the four card system to work properly. This was the first time that I had used CSS grid successfully.

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

    I struggled with the position of the image. I struggled with getting the image to align with the bottom. Normally, in the mobile layout, since it was vertical, the height was determined completely by the content/where the image was, so the image was at the bottom. However, when I used a media query and changed the grid layout, the heights of all the cards were equal, rather than auto. So, to make everything at the bottom, I used margin-top: auto.

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

    There isn't anything I would like help in.

    Four Card Feature Section Layout

    2
    Ralph Virtucio•650
    @ralphvirtucioPosted 6 months ago

    Hi Jaiden Lee, Great job on completing this challenge!

    Here are my feedbacks to your challenge:

    1. It's not a good practice to have two <h1></h1> tag element in your HTML, I'd suggest making the other heading a <h2></h2>

    2. If your struggling on positioning the image, I'd suggest wrap the image in the div element, set a align-self property with a value of flex-end to the div selector.

    3. Try using rem or em for your max-width and media-query. This will improve responsiveness of the page because rem and em are relative units they scale with the user's font size settings.

    4. I'd suggest to remove the property text-align in your .site-container and move it to each content that you want to have the text centered. Setting a text-align: center in the parent div will cause everything to be centered. That's the reason that the text in your card are also centered.

    ** HAPPY CODING 🧑‍💻🧑‍💻 CODE UP ☕☕☕**

    0