I'd like help on how I could better set the dimension of the mobile screen size (375px - 425px).
Also any advice on the best rule of thumb to follow when setting vertical spacing. I find percentages with width dimension simple as it's usually just a percentage of the screen width or parent width, but height dimensions are a bit more tricky for me.
Hello @ DAJ350. Congratulations on completing this challenge!!!🎉
To fix the width issue, you can remove width: 64.444444444444444% its unnecessary.
You can add max-width on the .sign-up-form
The code blocks can be removed from your style.css file
.sign-up-form__text-content {
display: flex;
flex-flow: column nowrap;
row-gap: 2.5rem;
width: 42.727272727272727%;
height: 50.681818181818182%;
align-self: center;
}
@media only screen and (max-width: 48rem) and (min-width: 21.875rem) {
.sign-up-form__text-content {
width: 87.2%;
padding: 2.5rem; // you can add padding on all sides and remove the width and height
height: 100%;
}
Add cursor: pointer on the input
I used the <picture> tag this way in my solution
<picture>
<source media="(min-width: 60rem)" srcset="./assets/images/illustration-sign-up-desktop.svg">
<img src="./assets/images/illustration-sign-up-mobile.svg" width="375" height="284" aria-hidden="true" alt="">
</picture>
I hope you find this useful and don't hesitate to reach out if you have any questions
Hello @MatheusPolletti. Congratulations on completing this challenge!!!🎉
I have a few suggestions to improve your solution.
Update your code to this
body > .container {
/* margin-top: 10%; */
/*margin-bottom: 10%; */
background-color: hsl(0, 0%, 12%);
border-radius: 2%;
/* width: 30vw; */
padding: 1rem;
}
min-height: 100vh; on the body than the .container and padding: 1rem;/* This is a comment*/The media query below is unnecessary because on mobile devices your code is too small and social media links are outside the card.
To remove the scrollbar, add margin: 0; on the body
@media (max-width: 764px) {
body > .container {
margin-top: -50%;
width: 85vw;
height: 55vh;
}
}
I hope you find this useful and don't hesitate to reach out if you have any questions
As part of the "Introduction to web accessibility" learning path, I focused on using semantic HTML for all the elements, a clear hierarchy and structure to the HTML, and clear aria-labeledby headings for each of the major landmarks in the page. Would appreciate hearing from others what other accessibility considerations I should be taking into account.
Hello @elisilk. Congratulations on completing this challenge!!!🎉
For the mobile navigation, you can use <button> tag rather than <a> tag for the hamburger and close icons.
<button>
<span class="visually-hidden"> Open mobile navigation</span>
<img src="assets/images/icon-menu.svg" alt="" >
<img src="assets/images/icon-menu-close.svg" alt="">
</button>
Add ARIA to the <button>
nav when you put a id="nav"Using JavaScript you can use setAttribute of aria-expanded="false" to "true"
Here is an example: Project tracking intro component
More info📚:
The visually-hidden CSS class will tell screen readers that this <button> will say open mobile navigation.
/* sometimes referred to as .sr-only */
.visually-hidden:not(:focus):not(:active):not(:focus-within) {
clip-path: inset(50%);
height: 1px;
overflow: hidden;
position: absolute;
white-space: nowrap;
width: 1px;
}
To check accessibility on website
Lighthouse analyzes the website with 4 categories
I hope you find this useful and don't hesitate to reach out if you have any questions.
FEEDBACKS ARE WELCOME
Hello @jovic-djordje. Congratulations on completing this challenge!!!🎉
index.html file needs to be reworked on to improve accessibility.<div> tag to wrap content does not explain the information on the website.Example of HTML Semantic Tags in action
<header> tag contains the navigation<main> tag is a landmark wraps content<body>
<header></header/>
<main><main>
<footer></footer/>
</body>
I hope you find this useful and don't hesitate reach out if you have any questions
💻 Hello, Frontend Mentor Community,
This is my solution for the Base Apparel coming soon page.
🛠️ Built with:
Fully responsive design crafted with a mobile-first approach 📲
Enjoyed every moment coding this! 😎
Feedback is always welcome—let’s grow together! 🌱
Completed 18 out of 19 Newbie Challenges so far—keeping up the momentum! 🔥
👨💻 Join me on my coding journey as I tackle advanced challenges and add innovative touches to every project.
As I am starting my journey with React I'm really looking forward to hearing your thoughts and suggestions! 💡
Hello @MikDra1. Congratulations on completing this challenge!!!🎉
Your project looks fantastic and keep up the great work.
The only suggestion I have is to change the height in the media query below to min-height: 100dvh because the image can take the dynamic viewpoint height.
More info📚:
@media (min-width: 62.5em) {
._hero_585p9_1 > img {
height: 100vh;
object-fit: cover;
}
}
I hope you find this useful and don't hesitate to reach out if you have any questions
Hello @rebeccaoneill. Congratulations on completing this challenge!!!🎉
I have few suggestions to improve your solution below.
HTML 📃:
<main> tage.g: alt="Scan the qr code to visit Frontend Mentor"HEADINGS TAGS
Heading tags must be used in chronological order and you think about heading tags are similar to a table contents.
There should be only one h1 on every website
<h1>Improve your front-end skills by building projects</h1>
More info📚:
CSS 🎨:
margin and padding and etcMore info📚:
Here is my solution - QR Code Component
I hope you find this useful and don't hesitate to reach out if you have any questions
I think I'll try using an empty div with a background image to change the image from the desktop one to the mobile one instead of using two `` tags with display: none;.
I also may try mobile-first workflow.
Hello @Gehad28. Congratulations on completing this challenge!!!🎉
To change the product image you can do it in index.html file using the <picture>
tag
Example:
<picture>
<source media="(min-width:650px)" srcset="images/image-product-desktop.jpg">
<img src="images/image-product-mobile.jpg">
</picture>
Be sure to add descriptive alt text improves accessibility and screen readers will say the alt text below in the example for people who blind and or visually impaired.
Example: alt="Gabrielle Essence Perfume bottle laying down with a green leaf above and below it">
More info📚:
To improve your index.html file, make sure you use HTML Semantic Tags
Add to cart text should be wrapped in <button> because users are clicking on the <button> to trigger an action to do something
Using a <div> on the website does not explain any of the content
Here is my solution to this challenge: Product preview card component
I hope you find this useful and don't hesitate to reach out if you have any questions
any suggestions for improvement are welcome
Hello @Yashbabani0. Congratulations on completing this challenge!!!🎉
I have few tips you might be interested in to improve your solution.
In your index.html file, you should change the <title> so users who look at your website know what they are looking at.
Example: <title>Frontend Mentor | Huddle landing page with curved sections</title>
For each React component, it's best practice to use HTML Semantic Elements improves accessibility.
Using <div> is a non-semantic which means it doesn't describe the content on the page.
Let's take your header component for example
header tagdiv<h1> on every pageI hope you find this useful and don't hesitate to reach out if you have any questions
Hello @ameera-abed. Congratulations on completing this challenge!!!🎉
In your CSS file you can add this code to remove the default styles like margin and padding from the browser.
*{
margin: 0;
padding;
}
You can also implement the shorthand property for margin and padding in your CSS file. Shorthand properties
When I write CSS, I use logical properties for margin and padding which depends on the writing mode.
If I want to margin on the top and bottom, the logical property would be margin-block and left and right is margin-inline and right would be margin-inline-end and left would be margin-inline-start
More info📚:
I hope you find this useful and don't hesitate to reach out if you have any questions.
The buttons!
What challenges did you encounter, and how did you overcome them?The buttons.
Hello @ArjayGithub-dev. Congratulations on completing this challenge!!!🎉
I have a few tips you might be interested in to improve your solution.
HTML 📃:
main tag. You can wrap all your content using main tag.alt text for screen readers
<img src="assets/images/avatar-jessica.jpeg" alt="headshot of Jessica Randall">To make your HTML more accessible
For the social media wrap them in ul tag
<ul>
<li>
<a href="wwww.github.com"> Github</a>
</li>
</ul>
The code above is showing that a user can link on the Github link and go to the website.
More info📚:
CSS 🎨:
The code below is updated with comments explaining my corrections.
body{
/* height: 100vh; */ Using height or width gives elements a fixed size so you can change it to min-height
/* margin: auto; */ You can remove this line of code because it is unnecessary.
display: grid;
/* justify-content: center; */ You can use place-content: center which is CSS shortand property for justify-content:center and align-items:center
/* align-items: center; */
background-color: hsl(0, 0%, 8%);
font-family: "Inter", sans-serif;
}
.container {
background-color: hsl(0, 0%, 12%);
border-radius: 10px;
/* width: 90vw; */ You can remove this line of code because it is unnecessary.
max-width: 300px;
padding: 20px;
text-align: center;
}
Here is my solution to this challenge Social links profile
I hope you find this useful and don't hesitate to reach out if you have any questions.
Learned how to center a "card" with Flexbox on the screen.
What challenges did you encounter, and how did you overcome them?Need to improve on making the sizing more dynamic. Currently have a media query which I think generally works, but could be more dynamic. Right now it basically just snaps down enough when it reaches 375px
What specific areas of your project would you like help with?How do I make the sizing more dynamic as the screen size becomes smaller/bigger so that it is more fluid instead of snapping at a particular size?
Hello @jkaps9. Congratulations on completing this challenge!!!🎉
I have a few tips to might be interested in to improve your solution.
HTML 📃:
div is non-semantic element which tells nothing about its content and ever website should have at least one landmark<footer> tag<h2> to a <h1> because it is the only title on the websiteMore info📚:
CSS 🎨:
max-width: 320px; on your card makes it responsive without using any media querieswidth or height CSS properties give elements a fixed width or height and doesn't change when go from mobile to desktop screens.Instead of using flexbox, you can also use CSS Grid and saves you a couple lines of CSS as well.
.container{
display:grid;
place-content: center;
min-height: 100vh;
margin: 0 1rem; /* Adds space on left and right side on mobile screens */
}
More info📚:
To make your image responsive add max-width: 100%;
Here is my solution to this challenge - QR code component
I hope you find this useful and don't hesitate to reach out if you have any questions.
I am most proud of the following aspects of my project:
User Interface Design: I spent a considerable amount of time designing a clean, intuitive, and visually appealing user interface. The positive feedback from users regarding the ease of navigation and aesthetics has been very rewarding.
Responsive Design: Ensuring the website was fully responsive across various devices and screen sizes was a significant achievement. This involved implementing flexible grid layouts and media queries to maintain a consistent user experience.
Performance Optimization: I worked hard to optimize the performance of the application, focusing on reducing load times and ensuring smooth interactions. Techniques like lazy loading, code splitting, and optimizing images contributed significantly to this success.
What would you do differently next time? Reflecting on the project, there are several areas I would approach differently:
Improved Planning and Documentation: Next time, I would invest more time in planning and documenting the project requirements and workflows before jumping into the development. This would help in identifying potential challenges early and streamline the development process.
User Testing: While I conducted some user testing, I realized that more extensive and earlier user testing would have been beneficial. Engaging users from the start to gather feedback on prototypes could have helped in catching usability issues sooner.
Code Modularity and Reusability: I would focus more on writing modular and reusable code from the beginning. Breaking down the codebase into smaller, reusable components would make the project more maintainable and scalable in the long run.
Accessibility: Although I considered accessibility, I recognize that there is always room for improvement. Next time, I would prioritize accessibility features more, ensuring that the application is usable by everyone, including those with disabilities.
What challenges did you encounter, and how did you overcome them?I didn't face any challenge in this.
What specific areas of your project would you like help with?The quality of design i made
Hello @ yh919. Congratulations on completing this challenge!!!🎉
I have a few tips you might be interested in to improve your solution.
HTML 📃:
<footer> tag which is a HTML Semantic tag.More info📚:
You can also remove the p-24 on the <main> it will remove the scrollbar on your website.
Accessibility
More info📚:
Here is my solution to this challenge - QR code component
I hop you find this useful and don't hesitate to reach out if you have any questions