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
OverviewSolutions35Comments26

All comments

  • Angel• 90

    @AngelZ5

    Submitted

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

    I'm happy that after a while of not being able to develop projects, I finally managed to finish another one. I made a mistake and ended up jumping from project to project instead of focusing on one. It reached a point where I couldn't develop anything anymore; I was tired, mentally exhausted. I decided to stop for a whole day and didn't touch anything related to code, and when I came back, I managed to complete this project. Well, now I'll need a break, I don't know for how long, but I'll use it to study my first framework and develop small things. So if I disappear for a while from here, know that I'm just improving to bring the best possible solution to the projects.

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

    The challenges I encountered involved JavaScript. I saw something that until recently, when I was learning on the scrimba website, was simple to remember, but now it became so difficult. To solve this problem of not being able to accomplish things in JS, I simply used what I knew along with ChatGPT to assist me, and it seems to be working fine! If you find any mistakes, don't hesitate to let me know so I can avoid repeating them again.

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

    I need to learn and relearn some things involving JS. I'm not very adept at developing with it without using AI or researching basic information. So, I'm going to take another course and would like a recommendation for a JavaScript course, it can be from basic to advanced even though I've already learned. I really need to review things. Additionally, I'd like recommendations for the best frameworks for beginners who are starting to learn frameworks.

    Age Calculator app using html css and javascript

    2

    AshongAbdallah06• 790

    @AshongAbdallah06

    Posted

    Just here to recommend. Check out supersimpledev on YouTube by far the best JS course out there

    1
  • M• 40

    @mkalmetieva

    Submitted

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

    Setting margin: 0; padding: 0; at the beginning helped me a lot with further indentation styling

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

    1. At first I tried linking static downloaded fonts in html with , but it didn't work. I succeeded with using @font-face in CSS directly.
    2. I also had a problem on mobile: the content was wider than 100% of the page. I fixed it by adding box-sizing: border-box;.

    Responsive recipe page

    1

    AshongAbdallah06• 790

    @AshongAbdallah06

    Posted

    The content is not wider than 100% on mobile. 100% means it should take up the whole width of the screen, which is exactly what it is doing. Or maybe I'm missing something. Feel free to let me know.

    0
  • dewyrag• 90

    @dewyrag

    Submitted

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

    I seem to know what i'm doing its just I feel overwhelmed sometimes and start to doubt myself.

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

    When I first looked at the project I was overwhelmed for some reason. This project wasn't any different the past ones I did.

    I watched a video on this project and studied it. I completed the project from start to finish with no help.

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

    For some reason I can't round the borders for the image. I try to use border-radius in the .card-img and it doesnt work, then I try to use it in card-img img { } and it still doesn't work.

    (PROBLEM FIXED)

    Blog Preview Card

    2

    AshongAbdallah06• 790

    @AshongAbdallah06

    Posted

    To fix your problem, you can remove the inline style, and add a class to the image to target it in the CSS

    <img src="assets/images/illustration-article.svg" alt="Blog Art">

    And put it into the stylesheet .image { width: 279px; height: 200px; border-radius: 10px; }

    This should help fix your problem. Hope you find this helpful

    Marked as helpful

    1
  • AshongAbdallah06• 790

    @AshongAbdallah06

    Posted

    For the image element, you could make use of the picture element, which is an easier way to implement the image change on different viewports. And you wouldn't need any media queries for that.

    Code Example

    <picture>
  <source srcset={desktop image here} media="(min-width: 600px)" />
  <img src={mobile image here} alt="" />
</picture>

    You can specify any width, depending on when you want the changes to occur. You can check it out more on MDN

    Hope you find this helpful!

    Marked as helpful

    0
  • AshongAbdallah06• 790

    @AshongAbdallah06

    Posted

    There is no gap at the bottom, if that's what you mean. The design should not exactly match the original. It should just look a little bit like it. Don't stress yourself out. I've had this problem so many times and pretty much everyone on here. You could do it, but you may end up destroying your work. One more thing I would add is to make the max-width a little bigger, like maybe 700px.

    Marked as helpful

    1
  • AlexStraton• 70

    @AlexStraton

    Submitted

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

    I am proud of making the image responsive and using the media query (I did follow a Youtube tutorial which told me how).

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

    I was not able to make the list numbers move over to the left, I didn't know how to style just the numbers.

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

    I would like feedback on responsive design. I used the dev tools and saw that on some mobile devices a bit of the right side is cut out, I don't know why or how to fix it.

    Recipe page using CSS, HTML and responsive design

    1

    AshongAbdallah06• 790

    @AshongAbdallah06

    Posted

    I don't think there's a problem with the responsiveness. The items start to overflow when the screen is 120 pixels or less. Realistically, there's no screen size less than 200, I might say. But you can improve on making it look similar to the original by using the styles provided in the README.md and just testing them out.

    Marked as helpful

    1
  • Aman• 590

    @AmanGupta1703

    Submitted

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

    • The main challenge I faced was managing the global state with the Context API

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

    • Please check out the Context API section of the project

    Multi-step form

    #react

    1

    AshongAbdallah06• 790

    @AshongAbdallah06

    Posted

    There seems to be a problem with the third step. It says to choose at least one add-on, and even though I've selected all three, it still gives me the same alert, and I can't move to the next page. And there are some changes that need to be made when the button has been toggled to yearly on the third step. All values, e.g., +$1/mo need to change to +$10/yr when the button is toggled to year. I hope you find this helpful.

    Marked as helpful

    1
  • AshongAbdallah06• 790

    @AshongAbdallah06

    Posted

    Your work looks pretty good and is almost exactly the same as the original's.

    0
  • Valchali• 70

    @Valchali

    Submitted

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

    I actually strugled with the u/i, cos at first my design didn't look anything close to the sample image. So i deleted the defualt html file content and started writing the code from scratch the way i best understand html later proceded to css had a couple of time i even have to go look at another project i had worked on just to get around css. It's really good stuff that this path of learning comes with challenges. What i'll do diferently next time is dependant on the honest reviews and contributions i'll be getting from the cummuninty.

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

    I was faced with difficulties tring to get my user interface look just like the sample i was given, so the image wasn't redusing at a time , but afetr couple of twist i had a heads up from a friend that actually worked. He pointed me to an in-lne styling(css) to the html file, code line that targeted had image and it worked i was then able to resize the imge to fit.

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

    I know my work is not very much good as per the user interface, so i'll appreciate honest contributions pointing me to where i would have done better with the styling, my css file to this work is available at my git profile provided aabove

    QR Code Components Built With Just Html And Css

    3

    AshongAbdallah06• 790

    @AshongAbdallah06

    Posted

    Hi there. A few suggestions. To make your project look close to the original design. You can add a border-radius to the qr-code image. And then maybe decrease the width of the text at the bottom so that it looks a little bit close to the original.

    Good Luck on your changes🎉👍

    0
  • P
    Jacob Andersen• 70

    @pxmdk

    Submitted

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

    The grid

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

    The grid

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

    The grid

    Four section feature card

    1

    AshongAbdallah06• 790

    @AshongAbdallah06

    Posted

    Great work. I may have even picked one or two things from your project to improve mine. Keep up the good work. Happy coding🎉

    0
  • ArgueDev• 80

    @ArgueDev

    Submitted

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

    .

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

    .

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

    .

    Product Services Solution

    1

  • AshongAbdallah06• 790

    @AshongAbdallah06

    Posted

    There are a lot of problems with your project. But I don't know where to start, so you can check out mine or different projects for references on how to approach the problem.

    Marked as helpful

    1
  • AshongAbdallah06• 790

    @AshongAbdallah06

    Posted

    Great, nothing to say really, but maybe you can add links to them (probably links to your social media). And basically, customize it to be your own. Like, add your own picture, name, or anything of yours.

    0
  • FabianoTerdenge• 80

    @FabianoTerdenge

    Submitted

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

    align items center for the avatar and name part was hard to find.

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

    The Border of the Preview Card is not 100% the one in the design. Can someone provide a correct solution for the border problem?

    Blog Preview Card with plain css and html

    1

    AshongAbdallah06• 790

    @AshongAbdallah06

    Posted

    I actually don't have anything to say. I just wanted to let you know that I stole your box-shadow: 10px 10px 0px black; syntax. I just didn't know the right values to use.

    0
  • DReynoso12• 10

    @DReynoso12

    Submitted

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

    i excited because i try it alone, i do different my way to declare class names, most professional.

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

    i have difficult with all because i'm beginner in this but i do that i known to practice and isn't beauty but is functional, i will to study to be better the next time.

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

    i need help with css in special the use of display:grid and display:flex

    Página con QR y descripción

    2

    AshongAbdallah06• 790

    @AshongAbdallah06

    Posted

    A few suggestions for your code Change the <div class="contenedorPrincipal">...</div> to <mainclass="contenedorPrincipal">...</main>.

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

    Marked as helpful

    2
  • AshongAbdallah06• 790

    @AshongAbdallah06

    Posted

    Is it only me or are the values are not showing when we hover over the bars. Try figuring what's causing the problem.

    Anyway, what's the next transfer news? Is Mbappe going to Madrid?

    1
  • Mehmet Eroğul• 230

    @mehmeterogul

    Submitted

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

    What I'm most proud of about my project is how closely the outcome match the original design. If I were to do it again, I would prefer to use SCSS for the project.

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

    I had forgotten how to use the box-shadow property and how to define css variables. I looked at the css documentation to remember and used them.

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

    It would be cool to have someone to review my code and give feedback how to improve it.

    QR code component using Flexbox

    2

    AshongAbdallah06• 790

    @AshongAbdallah06

    Posted

    It's really well designed. But just a few suggestions. Make use of semantic HTML to make it easy for screen readers.

    Change <div role="main" class="container">...</div> to <main role="main" class="container">...</main>. <div class="text-container">...</div> to <section role="main" class="container">...</section>. You can also put the image into a section tag

    Lastly change the tag of the attribution to a <footer> and take it out of the <main> tag.

    1
  • AshongAbdallah06• 790

    @AshongAbdallah06

    Posted

    A few suggestions? On the input element, you have unnecessary padding that looks great, but when the user types a long email, it cuts off, while there is so much space on the right. Try reducing the padding and increasing the width.

    One more thing: take the header and footer tags out of the main.

    The responsiveness is just marvelous. 🤝🎉😊 I love it

    Marked as helpful

    0
  • VakhoCloud• 120

    @VakhoCloud

    Submitted

    It's working fine on 1920 x 1080 and browser scale of 100%, but everything is on mess when scale changes. also it was quite challenging because desktop version has different action on share button. mobile version was really easy, it was working well but after changes it has same behavior as desktop because of transform: transition(), is there any advice?

    HTML, CSS, CSS Flex-box.

    1

    AshongAbdallah06• 790

    @AshongAbdallah06

    Posted

    Wrap the code in a main element. Remove the display: flex; justify-content: center; align-items: center; on the body and put on the main. And set the flex-direction: column. This way, you can just flip it to flex-direction: row for the desktop UI.

    You can check out mine for reference. Happy coding🎉

    Marked as helpful

    0
  • AshongAbdallah06• 790

    @AshongAbdallah06

    Posted

    Brilliant

    1
  • AshongAbdallah06• 790

    @AshongAbdallah06

    Posted

    Some suggestions for you to improve your code.

    1. Take the <div class="attribution"> out of the div class="card"> element.
    2. Try giving a width to the .card element in CSS.
    3. Make use of the semantic elements:
    4. Change div class="card"> to <main class="card">...</main>.
    5. Also change <div class="attribution"> to <footer class="attribution">...</footer>

    Put @import url('https://fonts.googleapis.com/css2?family=Fraunces:ital,opsz,wght@0,9..144,100..900;1,9..144,100..900&family=Outfit:[email protected]&display=swap') at the very top of your CSS document to change your font. To use it, type body{font-family: "Outfit", sans-serif;}.

    0
  • AshongAbdallah06• 790

    @AshongAbdallah06

    Posted

    Hi. You can copy this link into your html file

    ***<link rel="preconnect" href="https://fonts.googleapis.com">

    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin> <link href="https://fonts.googleapis.com/css2?family=Outfit:wght@100;400;700&display=swap" rel="stylesheet">***

    And then in the body, call font-family: 'Outfit', sans-serif;.

    Marked as helpful

    2
  • AshongAbdallah06• 790

    @AshongAbdallah06

    Posted

    Great work! But have you tried it on mobile? When the email address is long it exceeds the input box. So try and maybe decrease the ‘font-size’, the ‘input’ box and the ‘button’. Happy coding 🎉

    0
  • AshongAbdallah06• 790

    @AshongAbdallah06

    Posted

    Hi this is my opinion.

    Add separate classes to each card. For example ‘<div class="column sedans”>’ and so on for the rest. And when the screen is in mobile view, use the individual classes and add the ‘border-radius’ where necessary. Since there is no curve on the second element SUVS you make the ‘.sedans {border-radius: none}’

    Marked as helpful

    0