@Kaji17
@minnieme20
Submitted
his is my first time creating a landing page, the main issue was the responsiveness but I think I tried to make it work. with responsive designs is it better to use percentages as units of things like div widths and such?
@Kaji17
Posted
**Helo @minnieme20 congratulation for your solution ** I have some tips to increase your code and good practice.
01 it is important to put an alternative text in tag <img> with properties alt :
<img src="images/logo.svg" class="logo" alt="logo">
02 for more semanctic it preferable to use <h1> <h2> ... for display title in your page. Use <h1> for title 'Build The Community Your Fans Will Love'.
```<h1 class="main-p">Build The Community Your Fans Will Love</h1>`
03 set attribute 'type' in tag <button>:
<button type="button">Register</button>
04 for display social media icon instead of putting class="social" in position="fixed" you can put this container inside the info div class="info" in position="relative " and class="social" in position="absolute " like the class="social" will adapt according to changes in class="info".
I hope it will help you
Marked as helpful
@Arjun7478
Submitted
@Kaji17
Posted
Hi @arjunbarman74 🎉 good result. I give you some advice so that you have a code plus ultra.
First you must remove the tag space under your testimonial.
To enhance the semantics, in your code you can use the tag figure instead <div class="review-2 br-10".the individuals information (profile image, name, verified graduate) should be wrapped in a Figcaption Element instead of <div class="bio">... and lastly, the testimonial itself should be wrapped in a Blockquote Element.
Code:
HTML
<figure class="review-... br-10 mb-1rem">
<figcaption class="bio">
<img...>
<div class="bio__title">
<h3>name</h3>
<h3 class="opacity">graduate</h3>
</div>
</figcaption>
<blockquote>
<h2>...</h2>
<p class="mar-top">...<p>
</blockquote>
</figure>
CSS
.mar-top{
opacity: 50%
}
I hope it will be useful for you good code 🤞 (⌐■_■)
Marked as helpful
@BGLeee
Submitted
@Kaji17
Posted
Hi @BGLeee 🎉 good result. I give you some advice so that you have a code plus ultra
The profile images Alt Tags need to be improved. It should state the following; “Headshot Daniel Clifford-“
To enhance the semantics, in your code you can use the tag figure instead <div class="testimoneyCard".the individuals information (profile image, name, verified graduate) should be wrapped in a Figcaption Element and lastly, the testimonial itself should be wrapped in a Blockquote Element. And name and graduate of people is not a list you can use the tag p instead ul.
Code:
HTML
<figure>
<figcaption>
<img ...>
<div class="namepost">
<p>name</p>
<p>graduate</p>
</div>
</figcaption>
<blockquote></blockquote>
</figure>
CSS
figure{
border-radius: 10px;
padding: 40px;
}
figcaption{
display: flex;
align-items: center;
margin-bottom: 1rem;
}
.namepost{
flex-direction: column;
margin-left: 1em;
}
I hope it will be useful for you good code 🤞 (⌐■_■)
@ahmed-Faroolle
Submitted
Do you have any questions about best practices?
@Kaji17
Posted
Hi @ahmed-Faroolle good djob 👍, let me give you some tips that can help you👨💻.
text in your field input instead type= 'number' to avoid to have a default vertical row in your input. Code:<input type="text" ... oninput="this.value = this.value.replace(/[^0-9.]/g, '').replace(/(\..*?)\..*/g, '$1');">
<div class="checkboxes__grid"> replace input and label to avoid to use label for write percentage 5% instead button . Code:HTML
<div class="checkboxes__grid">
<button class="check__box" id="fivepercent" value="5">5%</button>
<button class="check__box" id="tenpercent" value="10">10%</button>
...
<input type="text" placeholder="Custom" class="check__box custom" id="inputcustom"
oninput="this.value = this.value.replace(/[^0-9.]/g, '').replace(/(\..*?)\..*/g, '$1');">
</div>
JS
var selectTipTab = document.querySelectorAll('.check__box');
// add logic when we click on a button
selectTipTab.forEach(element => {
element.addEventListener('click', () => {
...
})
});
I hope it will be useful for you good code 🤞 (⌐■_■)
Marked as helpful
@Herbilot
Submitted
@Kaji17
Posted
Hi @Kaji17 👋, good job for completing this challenge and welcome to the Frontend Mentor Community! 🎉
Here are some suggestions to improve your code:
Try to use semantic tags in your code. More information here: With semantic tags:
<body>
<main class="main-content">
. . .
</main>
. . .
<body>
The profile images Alt Tags need to be improved. It should state the following; “image-qr-code“
I just wanted to encourage you to use rem as your main unit throughout the whole project instead of px. There's nothing wrong with pixels, but they are not as responsive as rem, especially if a user has a different font-size in their browser other than the regular 16px.
click here to access converter px to rem
Use max-width: 15.625rem to .container selector instead of width.
Use padding: 1.25rem to .container selector.
I hope that help you 😃
@shimaahriaz
Submitted
@Kaji17
Posted
**Hi @shimaahriaz 👋, good job for completing this challenge and welcome to the Frontend Mentor Community! 🎉 **
Here are some suggestions to improve your code:
Try to use semantic tags in your code. With semantic tags:
<body>
<main class="main-content">
. . .
</main>
. . .
<body>
<br>, the <br> tag is not semantic. It should never be used to add vertical spacing, it is only used in specific cases (e.g. poem or an address) also when a screen-reader reads the text it will break the text at the <br /> tag and break the flow of reading, You could use padding or margin styling via CSS to avoid them. More Information here.I hope those tips will help you.
**happy coding ! and with Front end mentor we learn to code like a pro **(⌐■_■)
@sagarboyal
Submitted
Great learning from this project i have gain some knowledge about display grip also media quires
@Kaji17
Posted
Hey @sagarboyal 👋! Congratulation for your first solution is great, and welcome to the Front-end mentor community
Here are some suggestions to help improve your code:
-You must use semantic tag in your here you can use the tag main to improve your code is not use as a container but it use to precise in your code that it is the Main Element :) More information here
with tag:
<body>
<article>
</article>
<main>
<article>
<h2>Perfume</h2>
<h1>Gabrielle Essence Eau De Parfum</h1>
...
</article>
</main>
</body>
-Also in the tag img you must set attribute alt='image'
I hope it will be useful to you
@Cupskrrt
Submitted
how to make the screen responsive when reducing the size of screen? what is the best practice to making a responsive webpage?
@Kaji17
Posted
Hi @Cupskrrt congratulation for your first submit, i give some advice for you improve your improve your code :)
class="content" of the card qr code in the tag main<main class='content'>
...
</main>
please rename your file .css to style.css because we use the name index to refer to the main html page
for display your card qr code center you can use the poperty in your css
body{
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
}
.content{
background-color: white;
width: 250px;
height: 430px;
border-radius: 15px;
margin: 10px auto;
}
Good luck
@Moorroww
Submitted
@Kaji17
Posted
Hi @Moorroww ! thanks for your solution i can use some element of your codebase for improve my solution And👋 Here are some suggestions to help improve your code:
->you have to add a condition to reset the form in your Js Code:
resetBtn.addEventListener('click', () => { if (numberOfPpl !== '' ...){ } })
->you can use buttons instead of <input type='button' ...> you can use the value property in buttons to avoid manually intentiating in javascript the values of different button type inputs
