All comments

• 

  Beibei•290

  @Diviner-BeibeiSubmitted over 1 year ago

  Hi everyone, I've been a coder for a few years , but I'm still new to the web development, any comments or suggestions would be greatly appreciated!

  Technologies Used:

  • Vite
  • React
  • Tailwindcss

  Unresolved Issues:

  #slider::-webkit-slider-thumb {
    appearance: none;
    -webkit-appearance: none;
    width: 40px;
    height: 40px;
    background: no-repeat center, #10d8c4;
    background-image: url("./icon-slider.svg");
    border-radius: 50%;
    box-shadow: 0px 15px 30px 0px rgba(0, 255, 231, 0.6);
  
    cursor: pointer; /* Change cursor on hover */
    margin-top: -18px;
  }
  

  I added this code in the index.css file, but when I deploy I get this problem： GET https://diviner-beibei.github.io/interactive-pricing-component/assets/icon-slider.svg 404

  I know the reason for this problem, but there is no solution, if you can provide me with some solutions, I will be very grateful

  

  Reponsive Interactive pricing component using Vite+React+Tailwind

  1

  50
  

  Tomazi•300

  @tomazi15Posted over 1 year ago

  dont think you can import svg's using css in React, you can import svg as a component: there are some examplese here good read:

  https://www.freecodecamp.org/news/how-to-import-svgs-in-react-and-vite/

  Marked as helpful

  0

  This comment has received 2 repliesShow
• 

  Corbinhol•140

  @CorbinholSubmitted over 1 year ago

  Hi! I had a lot of fun building this project, and have spent the last couple of days working on it. If you wish to see my process, feel free to check out the GitHub repository, as I have written my entire thought process, along side what I did poorly and what I did great.

  I also have fully commented code over there as well.

  

  Multi Step Form

  1

  60
  

  Tomazi•300

  @tomazi15Posted over 1 year ago

  @Corbinhol

  Really good functionality and design, I would break it up into components it would be easier to maintain and manage.

  A very good practice is to always add form validation because at the moment the user can enter anything, ie invalid email, name or pone number, You could start with something very simple that html gives you out of the box in you email input can be set to type="email" or phone number to type="number" this would make sure that the user is forced to enter valid email and for phone user has to enter numbers only, also the form can be submitted without entering any data

  Just few things to consider but overall well done and keep it up

  1
• 

  Abdulhamid Adeniji•160

  @Alpha437Submitted over 1 year ago

  Starting the project felt pretty easy and finishing up the desktop design. I encountered a barrier when it came to making it responsive for all devices, i had help from a community of web developers who guided me through debugging most of the jargon that gave me hard time.

  I used flex-box for almost everything, I don't know if that is a good practice. I'd really love if anyone can enlighten me on this.

  

  Responsive Hubble landing page using CSS Flexbox

  1

  30
  

  Tomazi•300

  @tomazi15Posted over 1 year ago

  Hi @Alpha437

  Congrats on completing your challenge it looks really good, there might be some heights and widths but without figma guidelines its hard to get it 100% but considering think your solutions looks great.

  In terms of responsiveness as a good practice use mobile-first design methodology.

  0

  This comment has received 1 replyShow
• 

  Taiwo-art•10

  @Taiwo-artSubmitted over 1 year ago

  Kindly advise best practices/more efficient ways to align the surrounding container carrying the QR code image and the texts underneath as i found it a bit challenging.

  I am unsure of the body background color i used. It took a while to find a color that was close to the prototype and I'm still not satisfied. Will welcome suggestions on tools to use to get accurate colours and hex color codes.

  Thank you.

  

  Responsive QR code component using CSS Grid and media query

  2

  60
  

  Tomazi•300

  @tomazi15Posted over 1 year ago

  Hi @Taiwo-art

  Sometimes i also find that some colours provided for the challenges do not really match the prototype.

  When that happens i usually find the solution for the challenge i am working on and use chrome colour picker extension to get the correct colours.

  Marked as helpful

  1
• 

  Kamil Wiater•230

  @WiaterKaSubmitted over 1 year ago

  Another project delivered! This time more than one-page website :D

  Do you have any suggestions on management of files in case of multi-page projects?

  Any suggestions are welcome!

  Best and happy coding! :)

  

  Art Galery Website

  1

  40
  

  Tomazi•300

  @tomazi15Posted over 1 year ago

  Hi @Kamil Wiater

  Firstly i think you have done great job in terms of the design and responsiveness.

  One thing i would change immediately is the directory naming convention ie: secondary page when you have a folder with a space in it i can cause you a lot of headache if you were trying to ship your code into production, when you bundle your code it could break. to avoid it just try sticking to not using space ie: secondaryPage.

  Next thing i would do i would strip the html page from its sections and turn them into stand alone components.

  also i would create src directory when i would keep all the implementation files to keep them away from all the config files like package.json

  suggested file structure:

  ./src/ components/ pages/ images/

  Also for each component, you would create a sub directory where you would keep all the component specific file ie: component.js componet.scss component.test

  Keep the up the good work 👌

  Marked as helpful

  1
• 

  Divyanshu Sharma•10

  @divyanshu29Submitted over 1 year ago

  I am a Beginner in web development and have created this Front end.It took me 10 min to create this QR component.

  

  QR-code-component

  1

  60
  

  Tomazi•300

  @tomazi15Posted over 1 year ago

  Hi @Divyanshu Sharma

  When you want to host your static project on github it has to have index.html this is the standerd naming convention otherwise github will not display. change Learn.html to index.html

  0
• 

  Kure-ru•120

  @Kure-ruSubmitted over 1 year ago

  Hi there! 👋

  I had a lot of fun doing this challenge, however I cannot figure out why the hover effect doesn't work on my button.

  I would be very grateful if you had any insight about this problem.

  Thanks

  

  Results summary component 【 React & TypeScript 】

  2

  50
  

  Tomazi•300

  @tomazi15Posted over 1 year ago

  Hi @Kure-ru

  The problem you are having is is z-index: -1 I think what this does it puts your summary section behind everything thing even including the body and even dough it is visible on the page because its is not covered by any other element. In short the the whole summary section sits behind and the whole section is not clickable including your button hence why you cannot see the hover effect.

  Even if you inspect the element you will see you cant pick any elements on your summary sections but you can on your result section.

  To fix this

  add z-index: 10 to your summary class and z-index: 20 to your results class. This way you will not be sending anything behind the page body but you will simply put result on top of summary.

  If you still struggling i can make a PR to your repo :)

  Hope this helps keep coding 👌

  Marked as helpful

  0

  This comment has received 1 replyShow
• 

  Morgana Kuhnen•30

  @morganakuhnenSubmitted over 1 year ago

  All feedback is welcome!

  

  Order Summary

  2

  100
  

  Tomazi•300

  @tomazi15Posted over 1 year ago

  Hi

  Really good effort keep it up 👌

  On suggestion on your looks like Annual Price £59.99 /year is in one line but the price should be in the next line, had a look at your html DOM and this should fix it:

  on your class="price" add display:flex and flex-direction: column; you can add multi-nested divs and at any level you flex.

  Hope this Helps

  Marked as helpful

  1

  This comment has received 2 repliesShow
• 

  Kehinde•660

  @jonathan401Submitted over 1 year ago

  I'll really appreciate your feedback. I left out some of the elements because I got weighed down by the CSS 😐. How could I improve this solution?

  

  Fylo Dark theme

  1

  50
  

  Tomazi•300

  @tomazi15Posted over 1 year ago

  Hi

  I Think you have done a really good job, the design does what it suppose to do in terms of the responsiveness. Main issues you are having is with widths, hights, margins and paddings its hard enough the get the right without figma designs so over all good effort. One small thing i could say when it comes to z-index use it in tens as in 10, 20 etc

  Keep it up 👌

  Marked as helpful

  1

  This comment has received 1 replyShow
• 

  DKKs•90

  @mjkodkksSubmitted over 1 year ago

  Feedback Welcome :)

  I spent 1 hour before going to bed.

  What I learn :

  I found targeting-a-breakpoint-range in tailwindcss such as "max-md-*" help me a lot for responsive in mobile.

  

  tailwindcss cdn, fetch and github page

  1

  70
  

  Tomazi•300

  @tomazi15Posted over 1 year ago

  HI

  Well done for completing this challenged visually it is really good! and i love tailwind css my self it allows to produce a simple to advanced design very quickly! css it self can be annoying especially when you have to manage multiple break points and write a @media query for them.

  Small if you have adde tailwind.config in your html you can remove tailwind.config from the root. Also its a good practice to keep your js in separate file as well as root css rules ie: body or html.

  I would also recommend looking into semantic html.

  Keep it going 👌

  Marked as helpful

  1

  This comment has received 1 replyShow
• 

  Trottie McQueen•80

  @trottiemcqueenSubmitted over 1 year ago

  All feedback is welcome. I am seeking to grow stronger and get better. I fixed as many errors as I could. Still growing. Not sure why <p> is not showing right or car pics at top isn't showing. All strictly VS Code using HTML/CSS nothing else.

  

  3-column-preview-card-component

  1

  20
  

  Tomazi•300

  @tomazi15Posted over 1 year ago

  Hi

  All i can say is keep going and dont stop :)

  Your are missing few key things here:

  Mobile view Icons (check your path) Buttons The columns are overlapping when changing your screen size i think this is because you have declared grid-template-columns in % try something like pixels or rem which are fixed widths.

  Also try finding out how you can use custom google fonts for future challenges

  Marked as helpful

  0

  This comment has received 1 replyShow