Hello my name is João Vitor and i have completed another frontend mentor challenge.🔗
How can i improve and reduce unnecessary code? Leave your comment. 😁
You could take this approach to read inputs:
Add an onchange event listener to the input fields which will read the value every time it changes. You can read about this event listener in the MDN web docs
I learned a lot from this challenge! I have a question, when I configure the background images in tailwind, they only work for me in development. These images disappear when I open the index.html file, the reason I find is because of the absolute paths with which I call them. I don't know how to put them when I have the configuration file outside the folder that has my final code.
Hi there. For images, you should directly specify them in the src attribute of the img tag but for background images you can configure the tailwind config file by extending the theme:
theme: {
extend: {
backgroundImage: {
TheImg: "url('/images/the-img.png')"
}
}
}
After this, you can use it in your classes like this:
class="bg-TheImg"
I hope this helps, but if not then let me know and I'll look for a different approach.
If you like, here is a real-world example from one of my projects but I use ReactJS so it has a different setup. Just note the extended theme in the tailwind config:
/** @type {import('tailwindcss').Config} */
export default {
content: ["./index.html", "./src/**/*.{js,ts,jsx,tsx}"],
theme: {
extend: {
screens: {
custom: "750px",
},
colors: {
Cyan: "hsl(176, 68%, 64%)",
Blue: "hsl(198, 60%, 50%)",
LightRed: "hsl(0, 100%, 63%)",
IntroBack: "hsl(217, 28%, 15%)",
MainBack: "hsl(218, 28%, 13%)",
Footer: "hsl(216, 53%, 9%)",
TestimonialsBack: "hsl(219, 30%, 18%)",
},
backgroundImage: {
Intro: "url('/images/illustration-intro.png')",
CurvyDesktop: "url('/images/bg-curvy-desktop.svg')",
CurvyMobile: "url('/images/bg-curvy-mobile.svg')",
ProductiveIllustration:
"url('/images/illustration-stay-productive.png')",
Arrow: "url('/images/icon-arrow.svg')",
Quotes: "url('/images/bg-quotes.png')",
},
fontFamily: {
Raleway: ["Raleway", "sans-serif"],
OpenSans: ["'Open Sans'", "sans-serif"],
},
},
},
plugins: [],
};
Q: What did you find difficult while building the project?
A: I found that positioning and aligning elements on the webpage was a challenge. There were times that certain elements wouldn't position itself the way it should so I had to fix individual elements to get them in the right spot.
Q: Which areas of your code are you unsure of?
A: The use of position: relative; for alignment/positioning
Q: Do you have any questions about best practices?
A: What are some good resources to improve alignment/positioning in CSS?
Hi there!
I see that you're most concerned about the positioning of elements. Well here are some tips that I believe will be handy: You can center the entire card like this:
body {
min-height: 100vh;
display: flex;
justify-content: center;
align-items: center;
}
One huge mistake that you've made is by not setting every element's box sizing to border-box. You should do this:
*, *::before, *::after {
box-sizing: border-box;
}
/* The * is used to select every element */
You also said that you couldn't position the elements properly. There is a very simple solution to your problem. Instead of using positioning, you should use padding and margins. for your .benefits-section and your button, instead of positioning, use margins and padding. Something like this:
.benefits-section {
margin: 1rem auto;
/* Maybe some padding here if needed */
}
button {
max-width: 250px;
margin: 1rem auto;
/* Specifying an explicit width and then setting the left and right margins
to auto allows you to automatically center an element. The 1rem is for
top and bottom margins.*/
}
You can tweak the above values as you prefer.
All in all, I think all your problems with positioning the elements can be solved using margins and padding. You don't need to use positioning because it makes the code complicated and difficult to understand. I hope I could help and If you have any other questions, don't hesitate to ask.
Dear coders!, I would love to know how to you guys write your js when it comes to client-side form validation.
For validation, I create a function that is executed when the form is submitted.
It will set the display of the error message to block if the input is invalid else it shows the success message
Feel free to be direct with your feed-back, i'm open for positive feed-back even if it hard to listen.
Nice!
Since you're looking for feedback, here it is.
body {
min-height: 100vh;
display: flex;
justify-content: center;
align-items: center;
}
My first project, I use semantic html together with flex css, any recommendation is good to improve. Thanks
Perfect!
I have one suggestion that would make it look just a little better. It's subtle but it does have a nice effect:
box-shadow: 1px 3px 15px rgba(0, 0, 0, 0.2);
Also change the width of the container to 375px:
max-width: 375px;
Amazing! Just two things I think you might want to take a look at:
box-shadow: 1px 3px 15px rgba(0, 0, 0, 0.2);
border-radius: 1rem;
You can tweak the code further if you like. Over all, amazing detail in the design.
I am a beginner to programming, all feedback are welcome but I will glad if you can check through my html, css, js code structure and rate my coding skill and feedback on where adjustment can be made.
The overall layout looks good but you've done a major problem with the colors.
The text isn't readable so try to change the colors as shown in the style guide. It will make the card look much better.
Also the very first heading "Join our Commmunity" should have a larger font-size. You should write this inside of an h2 element because this is an important heading.
To make the card look like a "card" use box-shadow property. Here is what I used:
box-shadaow: 1px 3px 15px rgba(0, 0, 0, 0.2);
This is my second complete challenge. Though, the image of the challenge seen to be simple but I find difficult to reduce the entire card height in desktop view.
/*Desktop & Tablet view*/ @media screen and (min-width: 768px) { .container { max-width: 50%; } .img-box, .txt-box { width: inherit; height: inherit; } .img { width: 100%; height: 100%; } body { margin-top: 2%; } }
Any suggestion on how to improve on it are highly welcome, Thanks.
Hi,
This is a simple project. If you could just give it a max-width of 350px or maybe 400px it would work properly on mobile AND large devices. Don't specify width as 50%. It will work on mobile because the screen is small but on desktops and laptops, the card gets too big. Specifying an appropriate max-width would make life easier. Also, this way you wouldn't have to create media queries which will reduce the code and the project will still look the way it should.
I hope this helps.
