Skip to content
OverviewSolutions
10
Comments
10
Fikerte Tesfaye
@Fikerte-T

All comments

  • Maren Ehlers•220
    @MarenOelixtownSubmitted 9 days ago
    What are you most proud of, and what would you do differently next time?

    It was an interesting refactoring process how my js-file grew. From a rather hardcoded time-tracking-element to a mostly dynamic one.

    💡I will take a break more often in the future while coding, it seems useful to me...

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

    It is always an exciting question for me how to structure the html appropriately. And also how to deal with accessibility correctly.

    In this case, these links were a help to me.

    👉ARIA: tab role

    👉Example Tab Group

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

    About any other ideas on accessibility and html-structure I am pleased to find out.

    Time tracking dashboard

    1
    Fikerte Tesfaye•210
    @Fikerte-TPosted 9 days ago

    hi @MarenOelixtown Your solution looks amazing. You did a great job. Just few things to improve it 😊😊 Removing the margin for larger screen size in your main margin: 10rem auto; and then adding

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

    to the body will position your grid at the center both vertically and horizontally.

    Great job!! happy coding 😊😊😊

    Marked as helpful
    0
  • Fikerte Tesfaye•210
    @Fikerte-TPosted 16 days ago

    Hi @daurygg Congratulations!! you did a great job with your solution. I believe there are few things that can be improved

    • Make sure you applied the required font for the entire app.
    • Make the font-sizes a bit larger from what they are now, for better user experience
    • Right now your content overflows when screen size changes. To improve that, make sure you apply min-height on your main component so that it can grow taller whenever it needs to.

    Hope this helps!!

    Happy coding

    Marked as helpful
    0
  • Abhi•320
    @abhi-zeroSubmitted about 1 month ago
    What are you most proud of, and what would you do differently next time?

    This is my first project with JavaScript. Working with JavaScript is difficult for me, but it’s interesting.

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

    A little bit of challenge occurs during development, but I fix most of those issues myself, and I take a little help from GPT.

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

    Mmm, this is my first project, so I don’t know much about how to handle JavaScript. My logic is simple: when user click the button, it adds a class to the share section, which has two wrappers—one for mobile and one for desktop. I created a class called 'hide' with the CSS rule display: hide; (I know, what was I thinking?). This 'hide' class is the initial state, and when the user clicks the button, it removes the 'hide' class and adds the appropriate wrapper class according to the window size.

    I’m sure I’ll improve my skills faster than a squirrel on an espresso! Any feedback or suggestions are welcome!"

    Article Preview |HTML| |CSS| |JS|

    2
    Fikerte Tesfaye•210
    @Fikerte-TPosted about 1 month ago

    Congratulations!! Your solution looks great.

    Keep up the good work!! happy coding

    1
  • CoolNight99•100
    @CoolNight99Submitted about 1 month ago
    What are you most proud of, and what would you do differently next time?

    I think I got the design pretty close to what was given.

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

    It was tricky to get the sizes of the grid items correct but then I remembered the grid-row and grid-column properties.

    Testimonials grid section

    2
    Fikerte Tesfaye•210
    @Fikerte-TPosted about 1 month ago

    hey @CoolNight99 You did a really good job!! congratulations!!! I see a few things than can be improved

    • use lower important heading like h2 and h3 instead of h1 as it is a simple page that doesn't serve a main heading
    • include everything in main
    • use justify-content: center; on grid-container class (for smaller screen) so that your cards can be centered.
    • Keep the order of the cards as they appear in the design and use grid-column-start, grid-column-end, grid-row-start, grid-row-end as needed to rearrange the cards. Because this is the main lesson here about using grids.

    I hope this helps Happy coding

    1
  • Fikerte Tesfaye•210
    @Fikerte-TPosted about 1 month ago

    Its confusing that what is displayed here is a solution for the four-card-feature-section project but the code and live url are for a different challenge.

    0
  • Fikerte Tesfaye•210
    @Fikerte-TPosted about 1 month ago

    Great solution @arolik there are some improvements that can be made

    • use lower important heading level like h2 because this is a simple card component
    • Make product-description's font family "Montserrat", "sans-serif". Also make the font size smaller than what it is now like 0.9 rem
    • adding some padding to product-info class
    • Most importantly, don't wait for the screen to hit exactly 1440px for it to change the layout. Use the desktop layout around 768px and above for better user experience.

    I hope it helps!!! Happy coding

    0
  • ldonnianni•130
    @ldonnianniSubmitted about 2 months ago
    What specific areas of your project would you like help with?

    I struggle not setting fixed sizes for the card. I tried to use %. I could make it work for the mobile site but not for the desktop. Finally i left all with fixed sizes.

    Product-preview-card with HTML and CSS

    2
    Fikerte Tesfaye•210
    @Fikerte-TPosted about 2 months ago

    Great solution!! Your solution looks with the design, great job. However, there is still room for improvement. for example

    • instead of giving those properties to the body, apply them to the main element. main { display flex align-items: center justify-content: center background-color: min-height: 100vh } and remove all the properties from body

    • its important to give min-height rather than fixed height so that your content can grow larger when it needs to.

    • also don't use fixed height for product-card

    • making the footer fixed affects user experience because it overlaps on your content. Remove position-fixed and adjust the style

    Hope this helps. Happy coding

    Marked as helpful
    0
  • Derik Boghozian•230
    @psychederikSubmitted about 2 months ago
    What are you most proud of, and what would you do differently next time?

    I'm proud at how the design turned out overall. I used Tailwind CSS in two different ways. My first go, I installed Tailwind using node.js, imported the custom fonts from the assets folder along with the color hex codes into the tailwind.config.js file and used them as my custom palette. The second attempt, I brought in Tailwind and the Inter fonts via CDN import.

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

    The main challenge was the tailwind custom font and color palette control. It was much cleaner to just import from a CDN for a small project like this Social Links Profile mockup.

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

    I'm confident I understood everything in this project.

    Social Links Profile: HTML5, TailwindCSS, node.js

    1
    Fikerte Tesfaye•210
    @Fikerte-TPosted about 2 months ago

    Hi @psychederik Great solution!! Its very nice that you are using Tailwindcss. Its okay to use CDN for prototyping and small projects like this. However its advised to install tailwindcss locally for building larger applications where customization and performance are important. It also makes the build process easy with tools like npm.

    In your html: there is no semantic reason to use nav because this is not a navigation bar. Using a list (<ul> and <li>) of anchor tag <a> is enough.

    Its very good to continuously improve your solution to make it look exactly like the design. It helps to work on our attention to details skill.

    Great work!! Keep going!! happy coding

    Marked as helpful
    1
  • Joseph Goodwin•100
    @jcgoodwin86Submitted about 2 months ago
    What are you most proud of, and what would you do differently next time?

    I didn't need a media query for the card size to make it responsive.

    Using CSS Grid and Flex

    2
    Fikerte Tesfaye•210
    @Fikerte-TPosted about 2 months ago

    hi @jcgoodwin86

    Great solution !! 🎉 🎉 Code is well-structured and layout is responsive on a range of screen sizes.

    You can still work on your solution to look similar to the design perhaps by adjusting the height of your card.😊

    Good job and keep going 👏

    0
  • Eloisa8•10
    @Eloisa8Submitted 2 months ago
    What are you most proud of, and what would you do differently next time?

    I am proud to be able to finish this content in one sit, and I will enjoy it next time.

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

    Challenges that I encounter was Change PX to rem. Upload my code to GitHub.

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

    Any feedback would be greatly appreciated.

    QR-Code-Component

    1
    Fikerte Tesfaye•210
    @Fikerte-TPosted 2 months ago

    @Eloisa8 great solution!! Its well-structured and readable. No considerable difference from the design. Your UI looks good on most of screen sizes. However, the image gets unresponsive for smaller screen sizes (screen sizes less than 300px). So instead of this

    .codigo{
 max-width: 19.2rem;
 margin: 1.067rem 1.067rem 1.6rem 1.067rem;
 border-radius: 10px;
}

    You can add a fixed width to be a percentage of the container and a height set to auto. This helps to scale up and down your image with different screen sizes.

    .codigo{
    width: 90%;
    max-width: 19.2rem;
    height: auto;
    margin: 1.067rem 1.067rem 1.6rem 1.067rem;
}

    Hope you find this comment helpful Good job!!

    0