Skip to content
OverviewSolutions
28
Comments
24
Ilya Andreev
@NeoScripter

All comments

  • developer-luizcarlos•120
    @developer-luizcarlosSubmitted about 2 months ago
    What are you most proud of, and what would you do differently next time?

    In English:

    I could say I've improved in state management and in building more projects using my favorite tools: Tailwind and NextJS. Recently, I've been learning about other React Hooks, which has given me some ideas for this project and a boost in my skills.

    Em Português:

    Eu poderia dizer que melhorei na gestão de estados e na construção de mais projetos usando minhas ferramentas favoritas: Tailwind e NextJS. Recentemente, tenho aprendido sobre outros React Hooks, o que me deu algumas ideias para este projeto e um ganho nas minhas habilidades.

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

    In English:

    I couldn't say I had challenges in this project. For me, the whole process of building the project was quite easy, and I was able to apply some ideas and fix personal mistakes from the past. I enjoyed the process.

    Em Português:

    Eu não poderia dizer que tive desafios neste projeto. Para mim, todo o processo de construção do projeto foi bastante fácil, e consegui aplicar algumas ideias e corrigir erros pessoais do passado. Eu gostei do processo.

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

    In English:

    Comments are always welcome.

    Em Português:

    Comentários são sempre bem-vindos.

    Tip calculator created using TailwindCSS and NextJS

    1
    Ilya Andreev•750
    @NeoScripterPosted about 2 months ago

    Hey, nice job!

    Suggestions:

    1. Limit the calculation amount, currently, if I enter a very large number, the results overflows.
    2. Add validation that indicates that the user needs to specify the number of people to get the result (it works only in certain cases, when I enter the total and select a percent, the validaton is not triggered).
    3. Custom percent results in a very large number if I fill it in before filling in other fields.
    4. Reset button doesn't remove the validation message from the number of people field.

    Other than that, great job!

    Marked as helpful
    0
  • Ganang Dewana•220
    @FxGanangGHSubmitted about 2 months ago
    What are you most proud of, and what would you do differently next time?

    This project racked my brain a little bit because I wanted to use Pinia to populate the contents of the cards. I got to practice using type guards with TypeScript, and replace() to match image file path.

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

    Any feedback is appreciated.

    Responsive Four Cards with Vue 3, Tailwind CSS, TypeScript, Pinia

    1
    Ilya Andreev•750
    @NeoScripterPosted about 2 months ago

    I like your solution, it looks really neat and corresponds to the design. Two things I would recommend to improve:

    1. Add margin-top for large screens as now the title touches the upper viewport;
    2. Set user-select: none on cards to avoid selecting effect when you click on them.

    The thing I'm curious about is why did you decide to use Vue for that? It doesn't have any interactive elements. You can't ulitize the advantages that Vue gives you as a JS framework. That's it, I hope it helps.

    Marked as helpful
    1
  • Paloma-Cruz•20
    @Paloma-CruzSubmitted about 2 months ago
    What are you most proud of, and what would you do differently next time?

    I am proud of the project's fidelity to the proposed designer.

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

    I didn't encounter any challenges in this project, other than the fact that I didn't have a Figma designer to guide me. The solution was to use other means, including Figma's own tools to extract information from the example images I had.

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

    Which took me more time, as I'm not used to deploying using GitHub pages.

    Project MTD

    1
    Ilya Andreev•750
    @NeoScripterPosted about 2 months ago

    Hey, Paloma! Good job using React for this project. The cart gets updated dinamically, corretly displays the items and empties out when the order is submitted. Here are the things I recommend to improve:

    1. You could add a dollar sign to the finally calculated price, currently, it's just a number.

    2. For the tablet screens, you could lay the items in two columns and then into one on mobile screens. Currently, it transitions into one column right away.

    3. The cart icon appears only after about 2 seconds if I remove the item from the cart. The same goes to the delete item sign in the list. I don't know if it's intentional, but I would make them appear instantly.

    4. I would add more space between the title, description and price of each item, currently, they are right next to each other.

    Other than that, good job!

    0
  • olalois•80
    @olaloisSubmitted about 2 months ago
    What are you most proud of, and what would you do differently next time?

    the fact that i lost enthusiasm, but later encouraged myself to finish the project. i will be more consistent next time

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

    Nil

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

    nil

    responsive landing page using css grid

    1
    Ilya Andreev•750
    @NeoScripterPosted about 2 months ago

    Hey, Olalois! I checked your solution and here is what I would improve:

    1. Your cart doesn't actually work, the items on the left should be added to the list on the right and be interconnected. This is a relatively hard task for a newbie, I don't honestly know why they put in the junior category. You can use localStorage to dinamically update the cart list when the user adds the item to the cart.

    2. The add buttons look too small, it's hard to press them, I would recommend increasing their size.

    3. The remove from cart buttons don't work, you can leverage localStorage for this task as well. Set up an event listener for each of these buttons, give each item in the list a data-id attribute and listen for clicks. If it's clicked, your code should retrieve the item with this id from a local storage and remove it. I know, it's quite complex to implement, but that's how I would go about it.

    4. The list should get empty after the confirm order button is clicked.

    I hope these suggestions help, good job creating a layout.

    0
  • oduwa-A•160
    @oduwa-ASubmitted about 2 months ago
    What are you most proud of, and what would you do differently next time?

    Using the grid-template elements to properly format everything.

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

    I originally didn't know to size the grid properly, so messing around with the amount of fractions helped me with that.

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

    Mainly spacing within an element, such as line-spacing and padding.

    Testimonial with Grid and Flexbox

    2
    Ilya Andreev•750
    @NeoScripterPosted about 2 months ago

    Hey, Oduwa! I checked your solution and here are the things I would improve:

    1. Your parent container doesn't have max-width. As a result, if you increase the screen size, your grid elements expand, losing their shape. You can set max-width on the parent container to avoid it.

    2. The solution doesn't implement the tablet layout. You can check the design file and use media queries to make the elements change their position for tablet screens.

    Other than that, good job!

    0
  • Alingggg•150
    @AlinggggSubmitted about 2 months ago
    What challenges did you encounter, and how did you overcome them?

    Had some trouble copying the table. It doesn't exactly look the same but its good. Also had to do some searches editting the bullets and their margin/padding on every list.

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

    Hoping for some feedback about the cleanliness of my css.

    Recipe page solution

    1
    Ilya Andreev•750
    @NeoScripterPosted about 2 months ago

    Hey, Alingggg! I checked your solution and here is my feedback: Overall, it looks good and according to the design file, however, I noticed that the mobile version is not implemented in your solution. You might wanna use media queries to change your layout for mobile version or, better yet, create a mobile version first and then change its layout for desktop screens. Other than that, good job!

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

    I liked that Formik allowed me to atomically break down form components into independent components like a UI kit.

    Next time I would try using grid instead of flex, react-hook-form instead of formik, linaria+styled instead of css modules+postcss. In general, I would like to try more different libraries to understand their advantages.

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

    It was not obvious how to make friends between PostCSS and Vite, because in the official PostCSS documentation, there is not a single word about Vite. But if you look at the Vite documentation, there is one paragraph of text about PostCSS configuration. It would be best to look for information on two sides of the same coin.

    It was also not easy to organize atomic hierarchy in Formik with the useField() hook and still keep a custom radio and checkbox.

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

    It would be great to get tips on using Formik in this way. I have no confidence that the result correctly implements the Formik logic as intended by the library author.

    [React, JS, Formik + Yup, Vite, CSS Modules, PostCSS] Contact form

    1
    Ilya Andreev•750
    @NeoScripterPosted 2 months ago

    I like the performance of you app and the smoothness. The validation is good, it doesn't allow me type the wrong email and other fields. I would add the field reset after the form was successfully submitted. Also, you need to make the button's font color white and remove the border from it. Other than that, great job, kudos!

    Marked as helpful
    1
  • Tohir564•80
    @Tohir564Submitted 2 months ago
    What specific areas of your project would you like help with?

    I could not do the grid on larger screen sizes, any feedback would really help

    Bento Grid using CSS and HTML

    2
    Ilya Andreev•750
    @NeoScripterPosted 2 months ago

    Hey, Tohir! I'm not sure why you couldn't use grid on large screens. The way I would go about it is creating a grid layout and giving each child element grid-area property with a unique name without parethesis. For example, grid-area: emodji-group;. After that, you should give the grid container the grid-template columns and rows and simply distribute the elements inside the property grid-template-areas. You can read Mozilla docs on this topic or simply google how to use this property. Do it in a media query for a large screen. After that, it will work just fine. You can also check out Kewin Powell's Youtube channel and find a video where he explain how to do it in detail. I hope it helps!

    0
  • Kim•450
    @MismistySubmitted 2 months ago
    What are you most proud of, and what would you do differently next time?

    I had some difficulty with the layout but I think I figure it out somewhat.

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

    The layout was a bit of a challenge but I'm somewhat ok with how it turn out.

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

    When the clear all button is clicked it clears the form but it also makes the borders red and I can't figure out how to prevent this. Also when the form is fill out completely the mortgage type error message gets triggered and I cannot stop that happening. I would appreciate any help on this. Thanks

    Mortgage-Repayment-Calculator

    1
    Ilya Andreev•750
    @NeoScripterPosted 2 months ago

    I recently did the same challendge and would like to give you feedback on your solution.

    1. Your calculator is too large. The tablet size is not implemented so it shifts from the mobile to the desktop right away. You might wanna check the dimensions in the design file.

    2. The result shows doesn't have dot and commas separation, which makes it ready hard to read large numbers. You might wanna implement Intl.NumberFormat (built-in JS method). Here is how I used it:

    const NUMBER_FORMATTER = new Intl.NumberFormat(undefined); this.totalField.value = this.currency + NUMBER_FORMATTER.format(totalInterest);

    1. The red validation error color doesn't disappear from the fields after I enter the correct values and get the calculation result.

    2. Nothing stops me from entering letters and a very large number to the mortgage amount field, which result in NaN on the display. You might wanna implement dinamic validation of the number before the calculation.

    3. It's hard to select the radio button, the area for it is super tiny. What you can do is to create a pseudo element to the radio button, put it in a position absolute and make it occupy all the size of its parent container (it will work if you set the parent container to position relative). As the result, the pseudo element will propagate all the clicks to the radio button, making it super easy to click (you can check out my solution if you need to see how it is implemented).

    4. After I click the Clear All button, the invalid input fields still stay red.

    I hope these suggestions help!

    0
  • Mikael•20
    @mikael-vSubmitted 2 months ago
    What are you most proud of, and what would you do differently next time?

    I am most proud of the fact that I learned some new skills doing this project and encountered elements I hadn't previously come across such as SVG elements, which required some research into styling. I'd also never dabbled with the interface itself being different on different devices, so I learned how to replace a regular navigation bar with a hamburger menu depending on the device.

    I spent too much time trying to make styles work for specific devices that I made the mistake of hardcoding certain element sizes and positions, as such zooming in and out on desktop changes the styling and I plan to return to the project to fix that.

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

    After deploying the URL, I tested it on my mobile and found my mobile device's screen size was larger than Chrome dev tool's largest mobile option, this altered styling quite a bit, so I returned to it post-deployment to ensure it also worked on my device.

    I had some struggles changing the colour of the SVG element on the footer, since it didn't use the same properties as a regular image tag, but after some research I learned the correct methods to apply to SVG.

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

    What technologies would people recommend that make responsive styling (orstylign in general) easier for them outside of vanilla CSS?

    Responsive Agency Landing Page

    1
    Ilya Andreev•750
    @NeoScripterPosted 2 months ago

    Hey, Mikael. I checked your solution and here are my suggestions:

    1. Your navigation bar is overflowing to the right on small screens. You don't need to use the position absolute on it and set the width 100vw. You can just put it in a header in a static position in a div and it will automatically adjust to the screen size without overflowing.
    2. Your nav menu items change the size on hover because you set extra padding on hover. That's why they are noticeably change their position, creating a little bit jerky effect. What you can do is set padding on each nav menu element by default so that they don't change on hover. Also, you could set transition on background color on them to make it smooth on hover.
    3. For the hero image, instead of using a regular image, I suggest you use it as a background image with background-size cover so that it doesn't squish on smaller screens.
    4. The text on the cherry and orange should be black so that it stand out and more readable.
    5. Don't set explicit height on footer as it gets very small on smaller screens. Instead, you min-height.
    6. The entire layout breaks when I reduce the screen size. You might wanna adapt it to every screen size from 320px to 1920px. Try not to set explicit width on parent containers as it breaks the layout. Use max-width instead.

    I hope these suggestions help, good luck!

    0
  • EL harabiy•250
    @Mubarak-AdeyemiSubmitted 2 months ago
    What are you most proud of, and what would you do differently next time?

    I’m most proud of implementing a fully responsive design and using CSS Grid effectively to create a clean, organized layout. Next time, I’d focus on optimizing JavaScript for better performance and explore adding more interactivity, such as allowing users to customize their tracked activities.

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

    I found it difficult to arrange the cards in the desktop view while ensuring smooth accessibility and optimizing SEO. I strictly adhered to semantic tags and ARIA labels. To overcome this challenge, I wrapped all the elements in a container, allowing for better structuring and layout management.

    Time Tracking Dashboard Main

    2
    Ilya Andreev•750
    @NeoScripterPosted 2 months ago

    Hey! I checked your solution and it's nice that you adapted it to different screen sizes. I haven't done this one myself so I'm not sure what functionality it should have. However, one thing I noticed that you can improve is your profile picture proportions. Currently, it's distorted due to the image adjusting to the container size. What you can do is put the image into another div and set on the image the properties object-fit: cover and object-position: center. It should fix the problem. I hope it helps!

    Marked as helpful
    1
  • Ilya Andreev•750
    @NeoScripterPosted 2 months ago

    Perfect animation and layout! I like everything. One tiny thing I noticed is the button border on focus. It always stays blue after I click on it even when I remove the cursor. You might wanna use 'focus-visible' instead of 'focus' property.

    Marked as helpful
    1