Hi Frontend Mentor community!
This is my solution for the Coding bootcamp testimonials slider challenge.
I really struggled with the control icons as they should be positioned relative to the img but I ended up putting them on top of the testimonial slider. If there is a way to position them as they should be, please let me know. π
Any feedback is greatly appreciated! Thanks!π
Hello!
I wanted to say that your fading animation is very cool! I wanted to do that for mine but I didn't know how to do it until I saw your code.
Talking about your control buttons, I would recommend you to take a look at my code to understand much better how I did it, but in short: I used a div container for the person img and my buttons container, so that I can use it to control the img size and use position: relative to positionate my buttons container with position: absolute. I'm using two buttons for each testimonial and using my JS to make them work together and not break the display.
nice solution! :)
Hello, hope you like my solution, any question and advice will be greatly apreciative
Hello!
Nice Solution, I also used chart JS to make the chart! It was very hard for me to read only the documentation, luckly I found a youtube channel that makes tutorials about how to personalize the charts, this video may help you, I'ts abou how to change the cursor when we hover a Bar.
I hope that channel Helps you. Good luck! :)
Hello! Your project is great, keep the good work! :)
To improve your HTML structure I would recommend to start using semantic HTML, for example you could replace your div with class card with a main tag, replace your p tag with class title with a h1 tag. You could also start using BEM to name your CSS styles. And finally you could try to remove your div with class wrapper and move its styles to the body tag, It will have the same result :)
I am a person who has just begin making static website. Please if anyone could correct the mistakes is highly appreciated
Hello Shantanu! You have made a great work here, keep it up :)
to improve your website you can add to the body styles a min-height: 100vh; margin: 0; display: flex; justify-content: center; align-items: center to make the content of your page automatically position in the center of the view, so you can remove the margin-left and margin-top you added to your div with the class card .
since I see you're using a div with class sub-card with background for the image, you can add another div inside that one with a width: 100%; height: 100%; background: hsl(277, 64%, 61%); mix-blend-mode: multiply to try to simulate the purple filter on the image.
and at last i would recommend you to change your div tag with class card for a main tag, since it's the main container of your website. so you can start using semantic HTML.
I hope these recomendations help you, nice work and happy coding :)
I had a few minor problems aling the way the way thats why my css is so messy lol plus i was too lazy to clean it up :D. im open to criticss as always :D.
hello Chiemeka!
To fix the problem with the height of the body i would add min-heigth: 100vh so that the body will have a height you could work with and then i would remove the padding top you have. Using height:100% doesn't work because the body at first doesn't know the total height of your screen (or even the total height of your page), and because of that the body height is set by the elements that are inside of it, unless you set a height for the body like i'm telling you (min-height:100vh).
By the way, i didn't know that using height: 100vh wasn't advisable, i would like to know why D:
You're doing a great work. keep going :)
Still having problem with how to arrange my css/html code and dont know why it isn't responsive
Hello Gidado! Don't worry if you're struggling doing a project, that means you're in the right way to be better in the future.
I'll change the name of your index2.html to index.html, so that github will know which file it has to show in github pages
You can add min-height: 100vh, display: flex; align-items: center to the body, and you'll see how the main container will align vertically. Adding min-height:100vh will help you occupy all the height of the screen view, no matter what device the user is using.
To use the fonts for the project you can get them from google fonts, i've seen that every project on frontendmentor uses google fonts for the font-family. if you don't know how to use google fonts yet you can watch this tutorial: https://www.youtube.com/watch?v=qgmLDPLApBY
One of the best ways to improve your skills at writing code is to try to make the code smaller. you can try use the less divs you can. by doing this you'll learn when you need to use them or not.
Keep the good work :)
I was not able to make this perfectly so I have lots of doubts they are:
Welcome for feedback and if possible can solve my doubts. Thank you
Hello Karthikeya!
You are making a great work. don't worry if you struggle making projects. When you struggle it means that you're going the right way to be better in the future!
Personally i used this setting to make the blue background when you hover the image: Background-color: hsla(178, 100%, 50%, 0.5), you could try it. hsla allows you to use oppaticy in your colors at the final setting: 0.5.
To use the fonts for the project you can get them from google fonts, i've seen that every project on frontendmentor uses google fonts for the font-family. if you don't know how to use google fonts yet you can watch this tutorial: https://www.youtube.com/watch?v=qgmLDPLApBY
You can use this CSS rule to make the project more inmersive: cursor: pointer, so that when you put the mouse on something that is supposed to be some kind of link the cursor of the mouse will change to a pointer icon.
I couldn't understand your third point: I was not able to link the three hover items so that.... if you'd like to explain it again maybe i can help you.
I had a hard time doing the desktop design for the first time.
I think that there is no fluent transition in my design because I use units like em and rem where I am not sure in my code.
If u want u can help me to use responsive units like a rem em vw vh . Thanks for eveyone .
hello @MFA34! Your result is great, don't worry! something that i learned by doing projects is that the harder they are the more you can learn from them. here are some suggestions and advices i can tell you:
if you start coding from mobile version you'll see that it'll be easier for you to code the desktop version. your CSS file reads the code from up to down, so you can write the mobile styles first without a "@media", and once you finished the mobile version you can create a "@media" for the desktop version.
Another thing i would suggest you is try to use less divs, look for a way to make the same project but using less of them, it's a very good practice that will increase your skills!
i would recommend you to use BEM to name your CSS classes and use descriptives names like "product-container" for example, that will make them easier to understand where they belong.
Also, when an element is inside another container, you can use percentage measures to make sure that the element inside fit the container, you can use "with: 100%" in the class "box-1" to make sure the element will always fit the container.
there's a difference between em and rem, i recommend you to read this https://www.geeksforgeeks.org/difference-between-em-and-rem-units-in-css/ . personally, i only use REM for fonts.
vw and vh (view-width and view-height) are usually used for containers that depend on the size of the device. so knowning this you can use them whenever you see it'll be useful.
you can see the projects from other users to compare and learn new things from them, i'm sure that will be very helpful. Nice work and keep going!
