Skip to content
OverviewSolutions
18
Comments
54
Suleman
@legion40216

All comments

  • Suleman•750
    @legion40216Posted over 1 year ago

    Good job on this challange, i would like to point some improvement

    1.remove the width property of 1150px instead let the flex streach and shrink accourding to the size of the view port for better responsiveness on testmoninal-box and add property of flex-wrap to wrap

    2.I liked your implementation of margin: 28em auto in .text-service i was trying myself to find another solution by doing it without using postion: absolute and good use of custom classes

    3.You should add background-position: center in your service section images with background-repeat: no-repeat this will inhance responsiveness

    4.You should reduces the padding of the left and right of text-about classes using calc or min max properties for responsiveness using vw or vh units

    Overall well done loved the detailed thought you put on it

    1
  • Suleman•750
    @legion40216Posted over 1 year ago

    Bro good work some suggestions

    First you should start with the layout you can either use grid or flex to accomplish this you need two equal columns and add max-width for responsiveness also remove height

    Avoid using height unless you have to instead use padding of the content to size according to your liking

    .cardContainer {
max-width: 40rem;
border-radius: 20px;
background-color: hsl(0, 0%, 100%);
display: grid;
grid-template-columns: 1fr 1fr;
}

    now we remove widht and height from .RightSide and LeftSide

    .RightSide {
padding: 0 30px;
/* width: 30rem; */
/* height: 100%; */
}

    Happy Coding...

    Marked as helpful
    0
  • Saswat Samal•80
    @saswat10Submitted over 1 year ago

    problems

    • naming classes in css
    • dividing the react components into smaller chunks, like which would make the code more reusable

    unsure areas

    • displaying the currencies and native names in international format

    questions

    • how can I make use of useMemo and useCallback for making fetch reqeusts?
    • what are the best practices for optimizing the search component (it is in the CountryList.jsx file)?
    • how to break down components and make code DRY?

    GENERAL QUESTION How do you start your project - like do you first start writing the logic and add design or do you study the design first and make classes and then add logic?

    Any other suggestions are open, please free to answer, It would help me a lot

    REST API Countries

    2
    Suleman•750
    @legion40216Posted over 1 year ago

    Ans General question: study the design then start with the html and emphasizing on semantic html as possible then logic.

    Ans problems: naming classes in css try to avoid naming each and every class instead use custom classes for example

    if you want to style the h1 tag instead of naming the h1 you should simply make class for the color size and weight

    something like this:

    html

    <div>
<h1 className='text-cool-gray fs-250'>
You have the option of monthly or yearly billing.
</h1>
</div>

    css

    .text-cool-gray { color: hsl(231 11% 63%;)}
.fs-250 { font-size: var(--fs-250); }

    this will save you the hassle of not naming each and every tag you want to style learn more about this through cube css and BEM

    Marked as helpful
    2
  • Cornflakes•290
    @CornflakesPlusSubmitted over 1 year ago

    Heyyooo! How are you today? (I really do care)

    First of all, I think this is not a Junior level challenge maybe more like level 3. It was a massive challenge with A LOT of CSS. If you want to test your basic CSS skills, this challenge is a good start. Anyways, I learned and improved many things on the way to accomplishing this challenge.

    Some questions:

    1. How long did it ( or would it) take you to complete this project?

    2. What primary tools would you use for this project?

    3. What tools and technologies should I learn in 2023 for a FrontEnd Development job?

    4. When to use ChatGPT and Ai tools?

    5. Is it worth learning WordPress, WebFlow, or any other website-building tools?

    6. What would you rate my solution?

    0 = lowest ( go back to school kid) 5 = highest ( You're a pro bro).

    1. Any suggestions to improve my JavaScript?

    I will GREATLY appreciate the time and knowledge you would give me. If I could donate to you I would ;)

    Sunny Side Agency Landing Page | HTML/CSS | JavaScript | Mobile-First

    1
    Suleman•750
    @legion40216Posted over 1 year ago

    Hi, great work on this challenge. I agree that this challenge was easily intermediate because this project requires good knowledge of flex and grid and position properties to accomplish it.

    I am impressed on your "second section" which doesn't use an height value if you can explain how you did that i struggled with it a lot and had no choice to add height value

    and over all i rate your work an easy 4.5 out of 5

    1
  • Suleman•750
    @legion40216Posted over 1 year ago

    Hey, nice work it works perfectly, my suggestion would be to highlight the tip button so that user can visually see which one is currently selected and their isn't any error appearing when one of the input values is empty.

    0
  • Suleman•750
    @legion40216Posted over 1 year ago

    Hey, good job on the challenge i experienced some problems in this site.

    • The content is not centered on large screen sizes.

    try and use

    position: absolute;
top: 50%;
right: 50%;
transform: translate(50%,-50%);

    or use grid to center it....

    1
  • Suleman•750
    @legion40216Posted over 1 year ago

    Bro why havent u used utility classes in this project most of the styles are being repeated ?

    Marked as helpful
    1
  • Suleman•750
    @legion40216Posted over 1 year ago

    Hey, good job on this challenge. I would like to add some of suggestions, try to avoid manually centering the content vertically by using magic pixel values they almost never work on other screen sizes.

    My advice here is to group all your content in a div and using the code below to center them.

    position: absolute;
top: 50%;
right: 50%;
transform: translate(50%,-50%);

    and avoid giving heights to elements instead use padding and margin inside the div content to adjust the height.

    1
  • Chris•40
    @diru0Submitted over 1 year ago

    Hi! 🫵🏻

    This is my solution to Order Summary Component challenge.

    It was a lot of fun working on that challenge. I could put my current knowledge to work. My implementation will be updated in future when I find better solutions.

    Thank you for your time and feedback, it really helps me to grow!

    Order Summary Component - BEM, CSS Flexbox

    2
    Suleman•750
    @legion40216Posted over 1 year ago

    maybe you can improve on ur semantic html of main tag instead of div, But kudos bro the HTML and CSS is very clean and organized refrain from using height property.

    Marked as helpful
    1
  • mohammad salih•220
    @mohammadsalihSubmitted over 1 year ago

    I recently embarked on a fun and challenging adventure to create my very own todo app. The excitement of designing a tool that could help me stay organized and efficient was just too good to pass up.

    After several attempts and countless hours of coding, I finally managed to create an app that I'm proud of. It features an array of cool and dynamic features, such as the ability to change the order of tasks, sort them by completed or unfinished status, and remove tasks as desired. And if you're like me and love the satisfaction of having a clean slate, the app also lets you clear all your completed tasks at once with just a single button.

    But what makes this app truly stand out is its simple yet stunning design. With two themes (dank and light) to choose from, you can pick the one that suits your mood best. And let me tell you, it was no easy feat to make the app look as beautiful as it does. I put a lot of effort into crafting every little detail to make it as user-friendly and aesthetically pleasing as possible.

    While the whole journey was definitely challenging, it was also incredibly rewarding. Despite the occasional frustration and setbacks, the thrill of seeing my app come to life and being able to use it in my daily life is indescribable.

    I did my best to write clean and efficient code, but I'll admit, the JavaScript code could use some improvement. Nonetheless, I'm excited to share my app with others and hope it will be useful for those seeking a practical and visually pleasing tool to keep them on track. So go ahead, give it a try and let me know what you think!

    MOS - TODO App

    1
    Suleman•750
    @legion40216Posted over 1 year ago

    its pretty good but the drag and drop wasnt working very well...

    0
  • Suleman•750
    @legion40216Posted over 1 year ago

    Use the picture tag to change the image according to the viewport (the main image) and set ur mobile navbar to position fixed to cover whole page

    and center the main tag the alignment is all wrong

    Marked as helpful
    0
  • Affan Shaikh•440
    @Terminal239Submitted over 1 year ago

    Got a lot of issues fixed I had with the previous exercises, especially my structuring and design choices. Also, incorporated CSS variables into this one which actually helped in reducing the time spent, for example, in looking for the appropriate colors for texts, backgrounds.

    Do comment on my Code and design, would love to hear feedback.

    Product Preview Card Component using Flexbox

    1
    Suleman•750
    @legion40216Posted over 1 year ago

    Hi, Its pretty neat work... couple of problems i think the image is part of the document so it shouldnt be added as an background image. The card should have gotten the max-width property, and most of the classes are unnecessary instead use the classes to style the product page.

    0