Skip to content
OverviewSolutions
11
Comments
12
P
juliusalberto
@juliusalberto

All comments

  • Gilbert•360
    @juliengDevSubmitted 4 months ago
    What are you most proud of, and what would you do differently next time?
    1. Clear Interface and Enum Definitions The use of interfaces (Activity, Timeframes, TimeframeData) and enums (Timeframe) demonstrates a well-structured approach to data modeling. This improves code readability and maintainability, while also enforcing type safety throughout the application.
    2. Asynchronous Data Fetching The fetchData function uses async/await syntax for handling asynchronous operations. This results in cleaner, more readable code compared to nested callbacks, and makes error handling more straightforward.
    3. Separation of Concerns Functions like updateDashboard, setTimeframe, and displayError each have a single, clear responsibility. This adheres to the Single Responsibility Principle, making the code easier to understand, test, and maintain.
    4. State Management The use of a global currentTimeframe variable and the setTimeframe function shows a simple but effective approach to state management, ensuring that the application's state is consistently updated and reflected in the UI.
    5. Flexible and Reusable Code Functions like getTimeframeText demonstrate how the code is designed to be flexible and reusable. This reduces code duplication and makes future modifications easier.
    6. Use of Modern JavaScript Features The code leverages modern JavaScript features like template literals, arrow functions, and optional chaining. This results in more concise and readable code.
    7. Consistent Code Style The code maintains a consistent style throughout, which is crucial for readability and maintainability, especially in team environments.
    8. I added modern CSS animations to enhance the overall user experience.
    What challenges did you encounter, and how did you overcome them?

    At the beginning, I coded the cards using a mix of grid for the overall layout and relative/absolute positions for overlapping the cards. It turned out that mixing these two layout algorithms made the responsive design extremely complex to manage. I had to break down all my code and redo it with a different approach. It was a real challenge for me to find the right arrangement of the elements.

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

    Again, if a TypeScript expert comes across this, you can find my file here: src/home.ts. I would appreciate feedback on the code. Thank you in advance. Feel free to add me on GitHub and LinkedIn to connect if you wish; just visit my profile. See you soon and happy coding.

    Time-tracking-dashboard_TypeScript_Html_Css-Scss-Bem_Responsiv

    1
    juliusalberto•220
    @juliusalbertoPosted 4 months ago

    This is a really good solution! I like how you stick with grid from the start - I used flex for my mobile design and grid for my desktop and it's making the media query a bit complicated.

    You also have several breakpoints, which is nice. I also like the motion that your card gives when I hover on top of it - super nice. Overall a good design. The code is well structured (at least I can read it). Top notch!

    1
  • Alexandru736•210
    @Alexandru736Submitted 4 months ago
    What are you most proud of, and what would you do differently next time?

    I am proud of the fact that I was able to learn about regex. It's an easy way to do match validation with strings, and it solved easily the email validation part.

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

    Understanding the regex. It wasn't that easy at first

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

    Not quite sure what I could have done better regarding the responsiveness of the website.

    Newsteller Sign Up using SCSS

    1
    juliusalberto•220
    @juliusalbertoPosted 4 months ago

    OK I noticed some things about your website:

    1. It's not centered? I think in the desktop design you can center by using flex or grid. Example:
    display: grid;
place-content: center;
    1. There is no hover effect on the button :(.
    2. I think the gap between the button and the paragraph in the success message container mobile view can be increased
    3. The JS is good, however you can add something to change the [email protected] to change into the email address that the user input

    Overall nice job!!

    0
  • Masseh•210
    @Masseh2025Submitted 4 months ago
    What are you most proud of, and what would you do differently next time?

    What I'm most proud of is how I implemented the tooltip, If I were to do something differently next time I would probbaly add clamps to the text size so it would be more responsive.

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

    The challanges I encountered were that I managed to implement a blue footer by problem solving and trying different approaches.

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

    The specifc areas I would like help with is neater code and maybey different approaches, any feedback would be much appreciated however.

    Article preview component

    1
    juliusalberto•220
    @juliusalbertoPosted 4 months ago

    The solution isn't very semantic but it's okay (at least for me). The layout does look good, but there are few improvements that can be made:

    1. I believe that the font is a bit off, particularly with regard to the line height. It can be fixed!
    2. There's no name and profile picture in the mobile page? I'm not sure if this is a bug tho

    The code is pretty well structured I believe. It doesn't considerably differ from the design.

    Nice one!

    Marked as helpful
    1
  • Mikhil Desai•200
    @mike15395Submitted 4 months ago
    What are you most proud of, and what would you do differently next time?

    This was my first premium challenge. I learned a lot about using figma, grid layout, background image with colors and lot more. I am proud that i completed the challenge in 2days.

    I would like to improve my speed in next challenge.

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

    Writing responsive code for images was challenging intially but using grid layout with proper width height solved the problem.

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

    Working with image clipping and adding image above background(footer).

    Responsive-meet-landing-page

    1
    juliusalberto•220
    @juliusalbertoPosted 4 months ago

    The solution uses semantic HTML - and it is certainly accessible (at least for me) (idk I don't have much experience with accessibility)

    But it doesn't look good on different screen sizes :(. I tried using several screen sizes, and the header is bigger than the screen size.. I think you can improve the header by setting max-width (or something like that).

    The paragraph and content is okay, but notice that the chapter line and circle (02) should be overlapping with the footer. I think you can do this by setting the margin to negative. The footer image should be smaller as well (yours have 2x the height).

    The PC solution does not differ considerably from the design, but the mobile one can be improved further. Good luck!!

    0
  • juliusalberto•220
    @juliusalbertoPosted 4 months ago

    The solution uses semantic HTML (well tbf I'm not a big fan of semantic HTML as long as it does the job).

    I think it's accessible (IDK for anyone else but it's accessible for me, probably there are some things that can be improved with regards to the WCAG compliance but yeah that's fine.

    It doesn't look centered enough? I think you can make it centered. It looks good though on mobile. The code is well structured but there are so many repeated things :(. You could use Sass / other css preprocessor to refactor your code.

    The solution does not differ considerably from the design. Nice job!!

    Marked as helpful
    0
  • Gilbert•360
    @juliengDevSubmitted 5 months ago
    What are you most proud of, and what would you do differently next time?

    I was able to improve my understanding of media queries by using multiple breakpoints throughout the design integration process. I applied the responsive principles learned during the review of courses recommended by the platform.

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

    I encountered challenges while implementing the desktop layout grid, particularly in adapting it across different breakpoints. Initially, maintaining consistency and alignment across various screen sizes posed difficulties. To overcome this, I systematically adjusted the grid layout using @media queries, ensuring each breakpoint preserved the integrity of the design while accommodating different device dimensions. This iterative approach allowed me to refine the grid’s responsiveness effectively, achieving a cohesive layout experience across all targeted devices.

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

    please let me know if there is anything I could do better on this one. Thank you for reviewing my code. :)

    Four_card_feature_section - Responsive Layout GRID & Flexbox - SASS

    1
    juliusalberto•220
    @juliusalbertoPosted 4 months ago

    It's good! The grid and positioning are top notch, however the code is a little bit too hard to read due to it having so many lines :(.

    I really like the fact that you have a personalized design for tablet. Nice attention for details there!

    I would recommend refactoring the scss and reducing the number of lines. From a quick skim, I can notice several things:

    1. See that the .item1, .item2, .item3, and .item4 code is all similar? I think you can try to create a base style and extend it to each item (or include a style for each item).

    It is good overall! I learnt a lot through reading your code! Nice one!!

    0
  • beowulf1958•1,450
    @beowulf1958Submitted 5 months ago
    What are you most proud of, and what would you do differently next time?

    Most proud of being able to swap the picture when the page goes from desktop to mobile and to make the image align with card content. The picture swap was accomplished in a very easy way that is easy to understand. I was able to create the page very quickly once all the research was done by using sass.

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

    Every time I fixed something, something else broke! I tried three different ways to swap the picture and settled on the easiest way. I had a lot of challenges with flexbox and lining up items in the content, then switched over to grid and it worked. I was able to get a lot of good ideas from others who had done the challenge.

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

    I tried to use the picture element, but the image didn't scale or respond. Is there some trick to getting the image to fill its div?

    Responsive product preview with Sass, Flexbox and Grid

    1
    juliusalberto•220
    @juliusalbertoPosted 4 months ago

    The solution includes semantic HTML, which is nice. I am not sure whether it is accessible or not but it's good enough for me :)

    The layout doesn't look good on iPhone SE as the card element is bigger than the screen (I assume that you don't use the Figma file, which provides the exact width and height). It's nice though. The margin between elements is a bit... off. (I'm sorry if I am too nitpicky in this) - the margin between elements in mobile and desktop should be different.

    Code is well structured. Good job!

    PS: I don't know much about grid so can't comment on your picture element solutions.

    0
  • Dharun Gandhi M•20
    @Dharungandhy28Submitted 4 months ago
    What are you most proud of, and what would you do differently next time?

    I am proud of myself to start the web development journey after very long gap and I will correct my mistakes through upcoming works.

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

    I encounter challenges in css part especially padding and colors hsl. This is new method for me I learned and give a try, I hope i will do better in upcoming projects

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

    Mobile view (media query) I would like to improve a lot on that particular part, If someone help me with it I would be so thankful.

    Frontend-Recipe-Page using HTML CSS

    1
    juliusalberto•220
    @juliusalbertoPosted 4 months ago

    No specialised mobile page :(

    0
  • Lara Mesa•180
    @Lara-artSubmitted 4 months ago
    What are you most proud of, and what would you do differently next time?

    With this exercise, I learned something I had never done before: changing the color of the list item markers.

    li { list-style-type: inherit var(--color-Dark-Raspberry); }

    & ::marker {
    color: var(--color-Dark-Raspberry);
}

    }

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

    I also had to set the image to position: absolute in media, so that it wouldn't be affected by the div it was placed in.

    @media screen and (min-device-width: 325px) and (max-device-width: 600px) {

    .card {
    border-radius: 0px;
    margin: 150px auto 0px auto;

    & img {
        position: absolute;
        top: 0;
        left: 0;
    }
}
    What specific areas of your project would you like help with?

    I’m not sure if the solution I gave for the image in the media query is the best one. How could I improve it?

    Recipe page solution

    1
    juliusalberto•220
    @juliusalbertoPosted 4 months ago

    I saw your code and it's readable for me! Good job! Your HTML page uses semantic HTML, and I think it's accessible enough. It looks good on range of screen sizes (I tried it on phone and tablet).

    There are some things that could be improved, tho. For the desktop page, I think that the gap between elements in a section is a bit off. The font weight are also off (but it's a minor thing tho).

    I really like the way you use grid for your table. I hadn't thought of it previously, should have used it next time. I have similar solution w/ you with regard to the absolute position of the picture. In my case, I removed the padding for the card and add some extra padding for the text content.

    Overall good job.

    Marked as helpful
    0
  • f1r3•140
    @f1r3placeSubmitted 4 months ago
    What are you most proud of, and what would you do differently next time?

    i like how no grid was used! flexbox ftw

    next time i'd probably make the code more readable, as the utility classes and the general styles aren't really separated

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

    there were problems with centering the text in the buttons, but i just thought hard about them and fixed them :)

    social links list using flexbox

    1
    juliusalberto•220
    @juliusalbertoPosted 4 months ago

    I like your code - it's readable. It also includes semantic HTML, things like h1, div, a, are properly used (unlike mine!). It looks good on a range of screen sizes (I tried it on iPad and iPhone).

    I can read your code, so it's readable enough for me. It's well structured (as I mentioned earlier, you use h1, div, and a properly). It does not differ considerably from the design! Good job!

    0
  • Subham0813•90
    @Subham0813Submitted 4 months ago
    What are you most proud of, and what would you do differently next time?

    proud of to able to build the design using Html and Css, learned media query, Things are getting easy 🚀

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

    It was easy challenge for me.

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

    i think. I've done it in right way.

    Responsive Blog Card Design

    1
    juliusalberto•220
    @juliusalbertoPosted 4 months ago

    It's good. You used semantic HTML, which is also good - I can understand most of your code. It looks good too on different screen sizes (I checked on iPad and other devices).

    The solution does not differ considerably from the design. Good job!!

    Marked as helpful
    1
  • juliusalberto•220
    @juliusalbertoPosted 4 months ago

    All good. I don't find any problems with the css and html code. Good one!

    0