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
OverviewSolutions18Comments54

All comments

  • Suleman• 750

    @legion40216

    Posted

    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

    @legion40216

    Posted

    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

    @saswat10

    Submitted

    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

    #axios#react#sass/scss#react-router

    2

    Suleman• 750

    @legion40216

    Posted

    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

    @CornflakesPlus

    Submitted

    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

    #accessibility#jquery

    1

    Suleman• 750

    @legion40216

    Posted

    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

    @legion40216

    Posted

    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

    @legion40216

    Posted

    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

    @legion40216

    Posted

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

    Marked as helpful

    1
  • Suleman• 750

    @legion40216

    Posted

    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

    @diru0

    Submitted

    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

    #accessibility#bem

    2

    Suleman• 750

    @legion40216

    Posted

    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

    @mohammadsalih

    Submitted

    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

    #cube-css#itcss#chart-js

    1

    Suleman• 750

    @legion40216

    Posted

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

    0
  • Suleman• 750

    @legion40216

    Posted

    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

    @TerminalEagle

    Submitted

    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

    @legion40216

    Posted

    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
  • Lim Tangmeng• 80

    @ImFropZ

    Submitted

    • How to solve the picture tag in NextJS?
      • if I use it with the Image component from NextJs It doesn't optimize my image in the source tag.
      • I found a solution for this they told you to display: none; the image you don't want to show if the screen is not in the correct size.

    Space Tourism with NextJS

    #next#tailwind-css

    1

    Suleman• 750

    @legion40216

    Posted

    Your background image shouldnt be in a picture tag but instead use CSS and place the background image on the body tag

    As for the picture tag, The picture tag is used on the technology page which has two images one for desktop and other for mobile devices

    0
  • Fachi• 60

    @Fachi-r

    Submitted

    The most challenging part was making the dropdown menu. On top of that switching from a navbar to a sidebar menu on mobile. It was a nice learning experience.

    Anotger thing is that, it was a bit tricky to load the specific images for mobile and desktop correctly. I didn't know how to do it using Html, so I had to use Java script to check the screen size and switch the images accordingly.

    Responsive landing page using CSS and Javascript

    1

    Suleman• 750

    @legion40216

    Posted

    Regarding the different images for desktop and mobile, the recommend path was inserting the picture tag in html which comes with media query for changing images on different screen sizes, you should check it out.

    Happy Coding

    Marked as helpful

    1
  • P
    Jake Godsall• 1,340

    @jakegodsall

    Submitted

    Hey everyone! 😀

    I completed this challenge some time ago, but have decided to built upon it and resubmit.

    In the first iteration I used a hard-coded <div> based design for the visualisation, and have now redone it completely using D3.js.

    This is the first time I have worked with D3, except for a few tutorials. Hence, it would be really great if anyone with knowledge of the library could give me any feedback on how I have built the visualisation.

    The visualisation code is found at ./js/visualisation.js in the accompanying repository.

    Thanks again! 🥴

    Responsive visualisation with D3

    #d3

    1

    Suleman• 750

    @legion40216

    Posted

    Its pretty cool bro, there are some issue with the responsiveness on desktop mode the .grid__balance has a overflow issue, in which half of its not visible

    1
  • Jeffrey Tuason• 550

    @Tuason066

    Submitted

    Hi, 👋

    I have a question about the GitHub pages. So this solution is built with react and react-router, I am using gh-pages to live my solution but the output(live website) doesn't work correctly because there is an unexpected bug(the images don't show). That's why I used Netlify to live my solution(website).

    Thank you so much for helping me out. Happy Coding. 🥳🔥✨

    CRUD/Functional Ecommerce Product Page

    #react#tailwind-css#react-router

    2

    Suleman• 750

    @legion40216

    Posted

    Bro Awesome work... keep it up

    1
  • Mehdi• 990

    @siavhnz

    Submitted

    Hi dear community 👋

    I've just completed this challenge, I tried to use @keyframes and transition for smooth toggling instead of using React animation libraries

    Any tips will be appreciated

    🙏 💝

    Article preview component

    #react

    1

    Suleman• 750

    @legion40216

    Posted

    Hey so looking at the Article section, u have placed padding on both elements individually Article_body and Article_footer it could be best if you placed the padding on the Article_section instead and give Article_body{ margin-bottom: 0.7rem} for consistency

    0
  • Mehdi• 990

    @siavhnz

    Submitted

    Hi dear community 👋

    Image position and smooth toggling was the tricky part of this challenge. Finally, I've solved this challenge by using useRef, useState, and useEffect to achieve smooth animation on the toggling description section. I planned to not use any animation library for this simple toggling

    Any tips will be appreciated

    🙏 💝

    FAQ accordion card

    #react

    1

    Suleman• 750

    @legion40216

    Posted

    Bro excellent your coding is simple and elegant. Your Frontend skills are awesome, I love to look at your Html and Css coding... But wasnt React an overkill for this project XD

    Marked as helpful

    1
  • Suleman• 750

    @legion40216

    Posted

    No carousel ? :(

    1
  • Suleman• 750

    @legion40216

    Posted

    The background image should be place in the background of the body through CSS and not by using the image tag. You can do this by using background-image:url() property on the body using CSS. Then use flexbox to center the main element in the middle of the page.

    1
  • Suleman• 750

    @legion40216

    Posted

    Good work on the project, There two easy fix regarding your problem

    1. Remove the form tags The form tags have a auto refresh button when the key is pressed, So By removing the form tags this issue can be resolved. There is no need for the form tags regarding this app anyways because the data is not sent anywhere else its safe to remove it aswell

    2. JS method through e.preventDefault() You have to write script by querySelecting the form element and placing onSubmit event handler and writing this function in it e.preventDefault()

    btw your code is clean and well written keep it up

    Marked as helpful

    1
  • Maciej Niedźwiecki• 50

    @maciejniedzwiecki

    Submitted

    I started learning frontend this vacation. After a tough month of learning, I decided to take up the challenge. I'm new to the community and wanted to check if I'm good enough to continue this adventure. Honestly, this time wasn't the worst. This problem took me around 4 hours. The most difficult has been the proper use of overflow. It didn't want to work for a while, and I didn't want to solve that with border-radius property.😜 After all, I decided to take up new challenges.

    Solution used Flexbox

    #sass/scss

    1

    Suleman• 750

    @legion40216

    Posted

    Good work, though i think you can improve this solution by placing a max-width:60rem to the .card to make it more responsive and address the ACCESSIBILITY ISSUES

    Marked as helpful

    1
  • Suleman• 750

    @legion40216

    Posted

    I think its good just the mobile break point needs adjustments

    Marked as helpful

    1
  • Suleman• 750

    @legion40216

    Posted

    Its a job well done... Excellent little more padding on top and bottom will make it perfectly alike to the design

    1