All comments

Busari Akeem Tunde• 60
@Aalphakeem-Adroit
Submitted 4 days ago
What are you most proud of, and what would you do differently next time?

Challenges Faced

Responsive Design:

Problem: Ensuring the website looks good and functions well on different devices (desktop, tablet, mobile) was challenging.

Solution: Used CSS Flexbox and Grid, along with media queries, to create a responsive layout. Tested on multiple devices and screen sizes.

Accessibility:

Problem: Making the website accessible to all users, including those with disabilities, was difficult due to the need to understand and implement various accessibility standards.

Solution: Implemented semantic HTML, used ARIA roles, labels, and ensured good color contrast. Ran accessibility tests using tools like Lighthouse and Axe.

Performance Optimization:

Problem: Ensuring fast load times and smooth performance was a major concern, especially with high-resolution images and complex scripts.

Solution: Optimized images using formats like WebP, lazy loaded images, minimized CSS and JavaScript, and used async/defer for script loading.

Cross-Browser Compatibility:

Problem: Ensuring the website worked consistently across different browsers (Chrome, Firefox, Safari, Edge) was challenging due to varying support for CSS properties and JavaScript features.

Solution: Used tools like Autoprefixer and Babel to ensure compatibility. Regularly tested on different browsers during development.

User Experience (UX) Design:

Problem: Designing an intuitive and pleasant user interface that allows easy navigation and interaction.

Solution: Conducted user testing and gathered feedback to improve the layout and functionality. Focused on clear navigation, concise content, and visual hierarchy.

What I'm Most Proud Of

Responsive and Attractive Design: Successfully creating a visually appealing and fully responsive website that works seamlessly across various devices and screen sizes.

Improved Accessibility: Implementing accessibility features to ensure the website can be used by a wider audience, including those with disabilities.

Performance Enhancements: Achieving fast load times and smooth performance, which significantly improves user experience.

Clean and Maintainable Code: Writing clean, well-organized, and maintainable code, which makes future updates and maintenance easier.

What I'll Do Differently Next Time

More Thorough Planning:

Spend more time in the initial planning phase to map out the structure and design of the website. This includes creating detailed wireframes and user flow diagrams.

Automated Testing:

Incorporate automated testing tools like Jest and Cypress to ensure code quality and catch bugs early in the development process.

Enhanced Accessibility:

Focus more on accessibility from the start, including better planning for keyboard navigation and screen reader support.

User Feedback Integration:

Involve end-users earlier in the development process to gather feedback and iterate on the design based on their needs and preferences.

Advanced CSS Techniques:

Explore and implement more advanced CSS techniques, such as CSS variables and custom properties, to improve design flexibility and maintainability.

By reflecting on these challenges and accomplishments, I can continue to grow as a developer and create even better projects in the future.

What challenges did you encounter, and how did you overcome them?

Going straight to the point, the border-bottom at the base of the design gave me problem. Also, making my unordered list and ordered list on the same line and changing their colors because i never i could use marker until i googled it. With the help of Google and ability to recall what i've learnt so far, I was able to complete the challenge.
Recipe Webpage
#accessibility
1
Alberto Raúl José• 410
@alberto-rj
Posted 4 days ago
Hi, @Aalphakeem-Adroit! I really liked your documentation. Could you tell me how a beginner like me could learn to document a project like yours, please?
Marked as helpful
1
Raphael Carvalho• 60
@RaphaelCarvalh
Submitted 4 days ago
What are you most proud of, and what would you do differently next time?

nenhum

What challenges did you encounter, and how did you overcome them?

até o momento nada

What specific areas of your project would you like help with?

nenhuma
PAgina com QR code responsiva
#cube-css#jss#lighthouse#sass/scss#rxjs
1
Alberto Raúl José• 410
@alberto-rj
Posted 4 days ago
👋 Hi, Raphael!

👏 Congratulations on investing your time and taking your frontend skills to the next level with the QR code component challenge.

I have a few suggestions that could help you improve your solution to this challenge:

On line 14 of your index.html file: Instead of using the <p> tag to define the most important title of the page, you could use the <h1> tag, as it already has this semantic meaning. Learn more

👎 Don't

<p class="texto">...</p>

👍 Do

<h1 class="texto">...</h1>

On line 15 of your index.html file: For the body of the text, instead of using the <texto> tag, you could use the <p> tag. This is because the <texto> tag is not a valid HTML tag. You can use the W3C Markup Validation Service to verify this by clicking here.

👎 Don't

<texto class="caixa-menor">...</texto>

👍 Do

<p class="caixa-menor">...</p>

Your solution has contrast errors: Low-contrast text is difficult or impossible for many users to read. You could avoid these issues by using the Accessibility Insights for Web extension.

So, Raphael, these are my suggestions for your solution. I sincerely hope they can help you in some way.

Keep learning, coding and sharing! 🌟

Happy coding! 🚀
Marked as helpful
1
P
yinnie• 210
@wcyin9
Submitted 26 days ago
What are you most proud of, and what would you do differently next time?

I did a mobile first approach where I used flexbox for everything except the 4 images under 01, which was done with grid. My reasoning for this was that I imagined flexbox to be more suitable for the main layout than grid. For example, flexbox with the desktop hero image and description was easily achievable, where I used order to put the two images on both ends, and the text in the middle.

Next time I might try grid. Please let me know if you think grid is better for this layout, and why.

What challenges did you encounter, and how did you overcome them?

The most challenge I went through was figuring out how to code out the footer image with the blue overlay. I solved it by using picture and source elements in html rather than css background-image (for responsive reasons), and adding a background-color in css for the footer selector.

I also had a bit of trouble planning out how to code the hero image for the desktop view, but I solved it by using display: none;

What specific areas of your project would you like help with?

Please let me know if grid was a better choice for this challenge.

In addition, I feel like my media query may have a lot of redundancy. If there's better ways to code responsive sizing, please let me know. If there's any other area where I could use more work on or I should change, please let me know as well. Thanks for your time!
Responsive Landing Page, CSS grid and flex
#accessibility
2
Alberto Raúl José• 410
@alberto-rj
Posted 22 days ago
👋 Hi, yinnie!

👏 Congratulations on investing your time and taking your frontend skills to the next level with the Meet landing page challenge.

I have a few suggestions that could help you improve your solution to this challenge:

Use the Lighthouse extension: If you don't already use it. It can help you with best practices, performance, accessibility and SEO for your next projects.

Your solution has contrast errors: Low-contrast text is difficult or impossible for many users to read. You could avoid these issues by using the Accessibility Insights for Web extension.

Your links are not crawlable: Search engines may use href attributes on links to crawl websites. Ensure that the href attribute of a elements links to an appropriate destination. In your case, you could avoid these issues by creating empty links, adding the href="#" attribute for each a element.

Avoid use images not appropriately-sized: Images that are appropriately-sized to save cellular data can improve the loading time of the page. Learn more here. Convert your images to next-gen formats, such as WebP or AVIF because those formats often provide better compression than PNG or JPEG. Learn more here. You can solve this problem here.

So, yinnie, these are my suggestions for your solution. I sincerely hope they can help you in some way.

Keep learning, coding and sharing! 🌟

Happy coding! 🚀
0
Ranem Haffar• 20
@Ranem97
Submitted about 1 month ago
What are you most proud of, and what would you do differently next time?

I am proud of myself for not giving up, I have not practiced in a while and faced many challenges while preparing this solution, so I am proud of myself for not giving up.

What challenges did you encounter, and how did you overcome them?

I encountered some challenges with getting the design right especially with the font size and weight.

What specific areas of your project would you like help with?

I would have liked some help with the design aspects such as size, padding and margin.
Recipe page using bootstrap
#bootstrap
1
Alberto Raúl José• 410
@alberto-rj
Posted about 1 month ago
👋 Hi, @Ranem97!

👏 Congrats on investing your time and leveling up with the Recipe page challenge.

I have some suggestions that can help you improve your solution to this challenge.

Use the CSS rem unit in your styles.css file

It is good practice to use the rem unit to specify the font-size, margin, padding, width, height..., instead of the CSS px unit. Learn more here.

On line 108 to 126 of your index.html file

You could use the <table> tag to create the nutrition section table, instead of simply using the <div> tag and the Bootstrap grid system. <table> should be used here, because it has this semantic meaning. Learn more why here. Learn how to create a table using Boostrap here.

On line 134 to 144 of your index.html file

For the footer of the page, you could use the <footer tag because it express this semantic meaning too. Learn more here.

👎 Don't

<div class="attribution"> Challenge by <a href="https://www.frontendmentor.io?ref=challenge" target="_blank"> Frontend Mentor </a>. Coded by <a href="https://focused-joliot-da009a.netlify.app/">Ranem Haffar</a>. </div>

👍 Do

<footer class="attribution"> <p> Challenge by <a href="https://www.frontendmentor.io?ref=challenge" target="_blank"> Frontend Mentor </a>. Coded by <a href="https://focused-joliot-da009a.netlify.app/" target="_blank">Ranem Haffar</a>. </p> </footer>

So, @Ranem97, these are my code suggestions for your solution. I sincerely hope they can help you in some way.

Keep learning, coding and sharing! 🌟

Happy coding! 🚀
Marked as helpful
0
Nichole McGrew• 50
@nicholemcgrew
Submitted about 1 month ago
What are you most proud of, and what would you do differently next time?

Learning new CSS skills from my previous projects feedback.

What challenges did you encounter, and how did you overcome them?

Positioning the main image and avatar image and span.

What specific areas of your project would you like help with?

Review code and suggest imporvements.
Blog Preview Card
1
Alberto Raúl José• 410
@alberto-rj
Posted about 1 month ago
👋 Hi, @NICHOLEMCGREW! Congrats on investing your time and leveling up with the Blog preview card challenge.

👍 Your CSS code is very easy to read, keep it up.

👍 Consider using the Lighthouse extension, if you don't already use it. It can help improve the best practices, performance, accessibility and SEO for your next projects.

👎 Your solution has contrast errors

Low-contrast text is difficult or impossible for many users to read. You could fix them by using the Accessibility Insights for Web extension.

So, @NICHOLEMCGREW, these are my suggestions for your solution. I sincerely hope they can help you in some way.

Keep learning, coding and sharing! 🌟

Happy coding! 🚀
0
Exploblogworld• 20
@Onas-2000
Submitted about 1 month ago
What are you most proud of, and what would you do differently next time?

The fact that I built the project with react, my first time using the framework

What challenges did you encounter, and how did you overcome them?

Basically for the project, I know that instead of using media queries there could have been a way that I'll be able to dynamically resize to adapt to different screen sizes

What specific areas of your project would you like help with?

How to dynamically resize the content in a page to adapt to different screen sizes
FAQ accordion
#react
1
Alberto Raúl José• 410
@alberto-rj
Posted about 1 month ago
👋 Hi, @Onas-2000! Congratulations on investing your time and leveling up with the FAQ accordion challenge.

Aassuming you want to implement this with Vanilla JavaScript, then you could use a resize event and the matchMedia() method. For example:

const resizeHandler = () => { // replace it by your media query string const query = '(min-width: 768px)'; // return a new MediaQueryList object // for your media query string const mediaQueryList = window.matchMedia(query); // true if your media query is true. // Otherwise is false. mediaQueryIsTrue = mediaQueryList.matches; if (mediaQueryIsTrue) { // you can do something here when // your media query is true. console.log('The media query is true'); } else { // you can do something here when // your media query is false. console.log('The media query is false'); } }; // add a resize event to the window object window.addEventListener('resize', resizeHandler);

So, @Onas-2000, these are my suggestions for your solution. I sincerely hope they can help you in some way.

Keep learning, coding and sharing! 🌟

Happy coding! 🚀

Useful resources:

Window: matchMedia() method

Window: resize event

Marked as helpful
0
Yannisp2000• 70
@Yannisp2000
Submitted about 1 month ago
What are you most proud of, and what would you do differently next time?

I´m really proud of my hover animations because it is the first time i used it.

What challenges did you encounter, and how did you overcome them?

The main problem was the hover animation in the container. Everytime i hover over the Frontend Mentor button the container scales up. i fixed the problem by giving the container a fix size.

What specific areas of your project would you like help with?

in the hover settings i needed a bigger font-size as in the non hover settings to look the same size. i don´t know why maybe someone can explain to me.
Landingpage Social links profile using CSS animation
1
Alberto Raúl José• 410
@alberto-rj
Posted about 1 month ago
👋 Hi, @Yannisp2000! Congratulations on investing your time and leveling up with the Social links profile challenge.

On line 71 of your style.css file

The transform: scale(1.04); declaration, causes the element's scale to always increase to 104% on the hover state.

If you want the font-size on the hover state to look like the default state, then you need to remove the transform: scale(1.04); declaration.

So, @Yannisp2000, these are my suggestions for your solution. I sincerely hope they can help you in some way.

Keep learning, coding and sharing! 🌟

Happy coding! 🚀
1
YuyuTB• 30
@YuyuTB
Submitted about 1 month ago
What are you most proud of, and what would you do differently next time?

I have learned quite a lot with practice on how to work with vue. I would definitely keep practicing so I won't need the documentation as much for basic tasks.

What challenges did you encounter, and how did you overcome them?

The biggest challenge I overcame was understanding the components and props and how to work with it.

I however couldn't find a solution to open the questions with Enter.

What specific areas of your project would you like help with?

I would like some help on how I could've implemented the keydown on enter to open questions.
Responsive Faq Accordion using Vue.js
#vue
1
Alberto Raúl José• 410
@alberto-rj
Posted about 1 month ago
👋 Hi, @YuyuTB! Congratulations on investing your time and leveling up with the challenge, FAQ accordion.

I have some suggestions that can help you improve your solution to this challenge.

The recommended way

You can follow the guide of the accordion pattern to be able to implement this component effectively. Learn more here.
0
Ahmed• 140
@Xandros9
Submitted about 2 months ago
Testimonials grid section
1
Alberto Raúl José• 410
@alberto-rj
Posted about 1 month ago
👋 Hi, @Xandros9! Congratulations on investing your time and leveling up with the challenge, Testimonials grid section.

I have some suggestions that can help you improve your solution to this challenge.

Your solution has contrast errors

You could fix them by using the Accessibility Insights for Web extension.

On line 55 of your styles.css file:

If you want to center the items vertically, you could replace align-items: cnter; by align-items: center;

So, @Xandros9, these are my suggestions for your solution. I sincerely hope they can help you in some way.

Keep learning, coding and sharing! 🌟

Happy coding! 🚀
Marked as helpful
1
vinodh05• 10
@vinodh05
Submitted about 2 months ago
Responsive Landing Page (Four Card Component Section)
1
Alberto Raúl José• 410
@alberto-rj
Posted about 1 month ago
👋 Hi, @vinodh05! Congratulations on investing your time and leveling up with the challenge, Four card feature section.

I have some code suggestions about CSS style that can help you improve your solution to this challenge.

👍 What you could do to improve your solution:

Decrease the font-size of the paragraph on each card.

Instead of using the color hsl(229, 6%, 66%) to specify the text color of the paragraph on each card, use the color hsl(225, 3%, 45%) to avoid low contrast errors.

Add spacing around the element with attribution class on the footer.

So, @vinodh05, these are my code suggestions about CSS style for your solution. I sincerely hope they can help you in some way.

Keep learning, coding and sharing! 🌟

Happy coding! 🚀
0
P
Mikhail• 220
@mkostrikov
Submitted about 1 month ago
What are you most proud of, and what would you do differently next time?

I will use a more modern image format

What challenges did you encounter, and how did you overcome them?

There were no serious difficulties

What specific areas of your project would you like help with?

bem
Landing page using css grid
2
Alberto Raúl José• 410
@alberto-rj
Posted about 1 month ago
👋 Hi, @mkostrikov! Congratulations on investing your time and leveling up with the challenge, Product preview card component

On line 76 of your internal style

You could just specify border-radius from the upper corners instead of all corners of the image to match the design on mobile device.

👎 Don't

border-radius: 1rem;

👍 Do

border-radius: 1rem 1rem 0 0;

Learn more here

On line 218 to 220 of your index.html file:

Instead of using the h2 tag, you could use the h1 tag because in this case it is in the correct hierarchical order.

Titles are in the correct hierarchical order when:

h1 is the main title;

h2 is just the subtitle of h1;

h3 is just the subtitle of h2;

h4 is just the subtitle of h3;

h5 is just the subtitle of h4;

h6 is just the subtitle of h5;

Learn more here

So, @mkostrikov, these are my code suggestions for your solution. I sincerely hope they can help you in some way.

Keep learning, coding and sharing! 🌟

Happy coding! 🚀
Marked as helpful
1
P
SMHN• 220
@smhnfreelancer
Submitted about 1 month ago
What are you most proud of, and what would you do differently next time?

I created the layout like the original design.

What challenges did you encounter, and how did you overcome them?

`` list-style ::marker was a bit of a challenge.

The nutrition facts table, also was a challenge, I was trying to make a responsive table using , , ``, tags, but in the end I used flex.

The project has 2 sizes for responsive layouts, it was started by 375px, but I tried to make the layout, look good between 375px and 1440px.

What specific areas of your project would you like help with?

tables, and making the layout responsive in between the main sizes.
Recipe page - Pure CSS
1
Alberto Raúl José• 410
@alberto-rj
Posted about 1 month ago
👋 Hi, @smhnfreelancer! Congratulations on investing your time and leveling up with the challenge, Recipe page.

On line 103 to 124 of your index.html file:

If you want to specify that an element is a table, you could use the table tag instead of the ul tag. Learn more here.

Keep learning, coding and sharing! 🌟

Happy coding! 🚀
0
Sneha Gonjari• 20
@snehagonjari
Submitted about 1 month ago
Blog preview card
1
Alberto Raúl José• 410
@alberto-rj
Posted about 1 month ago
👋 Hi, @snehagonjari! Congratulations on investing your time and leveling up with the challenge, Blog preview card.

I have some code suggestions that can help you improve your solution to this challenge.

👎 What you coud avoid to improve your solution:

Don't use h2 where it should not be used. Learn more

Don't use CSS px unit where it should not be used. Learn more here

👍 What you could do to improve your solution:

Specify the description of the page. Learn more here

Center the card on the page. Learn more here

Make the card responsive. Learn more here

Make the card illustration image responsive. Learn more here

So, @snehagonjari, these are my code suggestions for your solution. I sincerely hope they can help you in some way.

Keep learning, coding and sharing! 🌟

Happy coding! 🚀
0
P
Serhii Orlenko• 275
@grifano
Submitted about 1 month ago
What are you most proud of, and what would you do differently next time?

I complete this challenge much quicker. For next time I will be more careful with line-height, and do not forget to add this property.

What challenges did you encounter, and how did you overcome them?

The screenshot generated by Challenge Hub doesn't look the same, so I spent a lot of time adjusting line-height property.

What specific areas of your project would you like help with?

For this time I do not need help, as I'm familiar with HTML&CSS
QR-Code Component clean HTML&CSS
2
Alberto Raúl José• 410
@alberto-rj
Posted about 1 month ago
Hi, @grifano! Congratulations on investing your time and leveling up with the challenge, QR code component.

I have some code suggestions about Accessibility that can help you improve your solution to this challenge.

You have Low-contrast text on the footer and card

Low-contrast text is difficult or impossible for many users to read. This tool can help you solve this problem.

Do not use the aria-label attribute for non-interactive elements

The aria-label attribute defines a string value that labels an interactive element. Learn more here

For the footer of the page, you could use the footer tag because it express this semantic meaning. Learn more here

👎 Don't

<div aria-label="attribution" class="attribution"> Challenge by <a href="https://www.frontendmentor.io?ref=challenge" target="_blank"> Frontend Mentor </a>. Coded by <a href="https://www.grifano.com">Serhii Orlenko</a>. </div>

👍 Do

<footer class="attribution"> <p> Challenge by <a href="https://www.frontendmentor.io?ref=challenge" target="_blank"> Frontend Mentor </a>. Coded by <a href="https://www.grifano.com">Serhii Orlenko</a>. </p> </footer>

So, @grifano, these are my code suggestions about Accessibility for your solution. I sincerely hope they can help you in some way.

Keep learning, coding and sharing! 🌟

Happy coding! 🚀
Marked as helpful
1
P
Michael Hatton• 240
@mikehwebdev
Submitted about 1 month ago
What are you most proud of, and what would you do differently next time?

For personal reasons my Web Development journey has been on hold for a while. I was great to come back into a simple project like this.

What challenges did you encounter, and how did you overcome them?

I'd recently started to really dive into grid just before my learning hiatus and was starting to do well. I wish I'd started here with Grid rather than trying to keep it "simple" with margins all over the place. Lesson learned.

What specific areas of your project would you like help with?

None but feedback is welcome.
Responsive social links component
1
Alberto Raúl José• 410
@alberto-rj
Posted about 1 month ago
Hi, @mikehwebdev! Congratulations on investing your time and leveling up with the challenge, Social links profile.

I have some code suggestions about your HTML code in the file index.html that can help you improve your solution to this challenge.

HTML

Specify the description of the page

Meta descriptions may be included in search results to concisely summarize page content. Learn more

Avoid use images not appropriately-sized

Line 15: Images that are appropriately-sized to save cellular data can improve the load time of the page. Learn more here.

Convert the profile picture to next-gen formats, such as WebP or AVIF because those formats often provide better compression than PNG or JPEG. Learn more here. You can solve this problem here.

Dont' use buttons where you should use links

Line 19 to 23: It's better to use links instead of buttons here. While a link generally serves to redirect the user to a new page, a button performs an action that occurs on the page. Learn more here.

👎 Don't

<button class="btn git">GitHub</button> <button class="btn fem">Frontend Mentor</button> <button class="btn link">LinkedIn</button> <button class="btn twi">Twitter</button> <button class="btn inst">Instagram</button>

👍 Do

<ul> <li> <a class="class="btn git"" href="#">GitHub</a> </li> <li> <a class="btn fem" href="#">Frontend Mentor</a> </li> <li> <a class="btn link" href="#">LinkedIn</a> </li> <li> <a class="btn twi" href="#">Twitter</a> </li> <li> <a class="btn inst" href="#">Instagram</a> </li> </ul>

So, @mikehwebdev, these are my code suggestions for your solution. I sincerely hope they can help you in some way.

Keep learning, coding and sharing! 🌟

Happy coding! 🚀
Marked as helpful
0
Si1entERA• 220
@Si1entERA
Submitted about 2 months ago
What are you most proud of, and what would you do differently next time?

I'm proud I was able to minify some of my CSS and learned a new tool "google lighthouse" to analyze the SEO of my webpage and the result I got was: performance: 69, Accessibility: 96, Best Practice: 100, SEO: 91.

from the results I got from "google lighthouse", I made changes based on the suggestions such as: add "alt" to the image, add meta description, so on.

What challenges did you encounter, and how did you overcome them?

First: The nutrition section of the webpage uses a table tag and I struggled with getting a single "border-bottom" line. Instead, there's two lines for each "table data." Second: Since I minified my CSS code, navigating the "style.css" can be confusing. Now I'm trying to make the codebase cleaner and readable.

What specific areas of your project would you like help with?

All feedback is welcome not matter how small the assistance may be.
RECIPE-PAGE-MAIN
2
Alberto Raúl José• 410
@alberto-rj
Posted about 2 months ago
Hi, @Si1entERA! Congratulations on investing your time and leveling up with the challenge, Recipe page.

I have some code suggestions that can help you improve your solution to this challenge.

HTML

Line 10: If you want to specify the description of the page, instead of name="description of the page", just use name="description".

Bad:

<meta name="description of the page" content="put your page description here" />

Good:

<meta name="description" content="put your page description here" />

The preparation time section

Line 43: Instead of using the h3 tag, you could use the h2 tag because in this case it is in the correct hierarchical order.

Titles are in the correct hierarchical order when:

h1 is the main title;

h2 is just the subtitle of h1;

h3 is just the subtitle of h2;

h4 is just the subtitle of h3;

h5 is just the subtitle of h4;

h6 is just the subtitle of h5;

Learn more here

The nutrition section

Instead of using the td tag, you could use the th tag for each column in the table, because in this case it expresses this semantic meaning.

PERFORMANCE

Convert the ./assets/images/image-omelette.jpeg image to next-gen formats, such as WebP and AVIF because those formats often provide better compression than PNG or JPEG.

Learn more here.

This website can help you solve this problem

CSS

Use the CSS rem unit: It is good practice to use the rem unit to specify the font-size, margin, padding, width, height..., instead of the CSS px unit. Learn more here

So, @Si1entERA, these are my code suggestions for your solution. I sincerely hope they can help you in some way.

Keep learning, coding and sharing! 🌟

Happy coding! 🚀
Marked as helpful
0
Stewyyy• 10
@DiegoVPonchero
Submitted about 2 months ago
What are you most proud of, and what would you do differently next time?

I think I can do better at centering things lol, I don't really know how to center divs tbh, and I don't think I will know any of these days, idk why its so hard but wtv

What challenges did you encounter, and how did you overcome them?

center div

What specific areas of your project would you like help with?

centering divs (:
Simple link tree page using simple CSS
1
Alberto Raúl José• 410
@alberto-rj
Posted about 2 months ago
Hi, @DiegoVPonchero! Congratulations on investing your time and leveling up with the challenge, Social links profile.

I have some code suggestions that can help you improve your solution to this challenge.

It is good practice to use an external css style rather than an inline or internal style. By doing this your code becomes easier to understand and maintain.

It's better to use links instead of buttons here. While a link generally serves to redirect the user to a new page, a button performs an action that occurs on the page. Learn more here.

Bad

<button>GitHub</button> <p></p> <button>Frontend Mentor</button> <p></p> <button>LinkedIn</button> <p></p> <button>Twitter</button> <p></p> <button>Instagram</button>

Good

<ul> <li> <a href="#">GitHub</a> </li> <li> <a href="#">Frontend Mentor</a> </li> <li> <a href="#">LinkedIn</a> </li> <li> <a href="#">Twitter</a> </li> <li> <a href="#">Instagram</a> </li> </ul>

So, @DiegoVPonchero, these are my code suggestions for your solution. I sincerely hope they can help you in some way.

Keep learning, coding and sharing! 🌟

Happy coding! 🚀
1
RNSDaniel• 40
@RNSDaniel
Submitted about 2 months ago
What are you most proud of, and what would you do differently next time?

.

What challenges did you encounter, and how did you overcome them?

.

What specific areas of your project would you like help with?

css
desafio 2
1
Alberto Raúl José• 410
@alberto-rj
Posted about 2 months ago
Hello, @RNSDaniel! Congratulations on investing your time and leveling up with the challenge, Blog preview card.

I have some code suggestions about your CSS Style that can help you improve your solution to this challenge.

add the following CSS declaration to your body selector: line-height: 150% or line-height: 1.5 to increase the line height of the text according to the design.

center vertically the user's profile photo with their name.

For example, You can do this with flexbox, wrapping the image and user name in a container.

HTML

<div class="user"> <img alt="An alt text" src="path/photo.png" /> <strong>RNSDaniel</strong> </div>

CSS:

.user { display: flex; align-items: center; /* Make sure there is always space * available between the image and * the user name */ gap: 0.75rem; }

So, @RNSDaniel, these are my code suggestions about your CSS Style for your solution. I sincerely hope they can help you in some way.

Keep learning, coding and sharing! 🌟

Happy coding! 🚀
0
salahdine• 100
@salahdinebocuif
Submitted about 2 months ago
What are you most proud of, and what would you do differently next time?

I am proud of making this project and hope for development in the future

What challenges did you encounter, and how did you overcome them?

Control the elements

What specific areas of your project would you like help with?

everything
qr-code
2
Alberto Raúl José• 410
@alberto-rj
Posted about 2 months ago
Hi, @salahdinebocuif! Congratulations on investing your time and leveling up with the challenge, QR code component.

I have some code suggestions about your CSS Style in the file index.css that can help you improve your solution to this challenge.

Use the rem unit: It is good practice to use the rem unit to specify the font-size, margin, padding, width, height..., instead of the px unit. Learn more here.

Line 10: You could use min-height: 100vh, instead of height: 100vh, in the body selector to avoid content overflow. Learn more here.

Line 22: Removes the height: 450px property from the .container selector. By doing this, you will avoid overflowing the content of the p element.

Use margin or padding: Add spacing on the left and right side of the p element to prevent the text from sticking to the card.

Line 28 to 29: Replace the width:240px and height: 260px declarations with width: 100% and height: auto to make the QR code image responsive.

So, @salahdinebocuif, these are my code suggestions about your CSS Style for your solution. I sincerely hope they can help you in some way.

Keep learning, coding and sharing! 🌟

Happy coding! 🚀
Marked as helpful
0
Nanyonga-Rahmah• 40
@Nanyonga-Rahmah
Submitted about 2 months ago
What are you most proud of, and what would you do differently next time?

Being able to create a full stack website using backend technologies

What specific areas of your project would you like help with?

Error states
Responsive Newsletter using Grid
#bem#express#node#accessibility
1
Alberto Raúl José• 410
@alberto-rj
Posted about 2 months ago
Hi, @Nanyonga-Rahmah! Congratulations on investing your time and leveling up with the challenge, Newsletter sign-up form with success message.

I'm Alberto and I have some code suggestions about Data Validation that can help you improve your solution to this challenge.

Instead of using <input type="email", use <input type="text">. This way you will have more control to be able to validate the email address.

You could validate the email address on the front-end, before sending it to the back-end. And you can implement this in JavaScript, with Regular Expression, Click Event...

For example, let's say you want to implement this, using Vanilla JavaScript:

HTML:

<form> <input type="text" id="emailInput"> <button type="button" id="subscribeButton">Subscribe</button> </form>

JavaScript:

const submitEmailForm = () => { // get the email address provided by the user const emailAddressInput = document.querySelector('#emailInput'); const emailAddress = emailAddressInput.value; // change it with your regular expression const regex = /[email protected]/; if (regex.test(emailAddress)) { /* * You should do something here because * the email address is valid */ console.log('The email addres is valid'); } else { /* * You should do something here because * the email address is not valid */ console.log('The email addres is not valid'); } }; // add click event to the subscribe button const subscribeButton = document.querySelector('#subscribeButton'); subscribeButton.addEventListener('click', submitEmailForm);

So, @Nanyonga-Rahmah, these are my code suggestions about Data Validation for your solution. I sincerely hope they can help you in some way.

Keep learning, coding and sharing! 🌟

Happy coding! 🚀
Marked as helpful
0
ydctnr• 160
@ydctnr
Submitted 2 months ago
Age Calculator App
1
Alberto Raúl José• 410
@alberto-rj
Posted about 2 months ago
Hi, @ydctnr! I'm Alberto.

Congratulations, your solution is working great!

But you could improve it by increasing the card width and font size to get closer to the design.

It is a good practice to use the Mobile-First approach instead of the Desktop-First approach when you are dealing with Responsive Design.

Marked as helpful
0
John Mirage• 1,610
@john-mirage
Submitted about 2 months ago
What are you most proud of, and what would you do differently next time?

I'm proud of the themes.

What challenges did you encounter, and how did you overcome them?

none

What specific areas of your project would you like help with?

Accessibility
Social Links Profile
#vite#bem
1
Alberto Raúl José• 410
@alberto-rj
Posted about 2 months ago
Hi, @john-mirage! Congratulations on investing your time and leveling up with the challenge, Social links profile.

I'm Alberto and I have some code suggestions about Accessibility that can help you improve your solution to this challenge.

Convert the profile picture to next-gen formats, such as WebP and AVIF because those formats often provide better compression than PNG or JPEG. Learn more here. This website can help you solve this problem.

The text color of the <p class="card__location">...</p> has a very low constrast. So try to change it. This tool can help you solve this problem

So, @john-mirage, these are my code suggestions about Accessibility for your solution. I sincerely hope they can help you in some way.

Keep learning, coding and sharing! 🌟

Happy coding! 🚀
0
Muhammad Abrar• 60
@abrarishere
Submitted about 2 months ago
What are you most proud of, and what would you do differently next time?

I'm most proud of completing the project successfully and learning from the experience. Next time, I would plan my time more efficiently and break down tasks into smaller steps to manage them better.

What challenges did you encounter, and how did you overcome them?

I encountered challenges with aligning elements properly and making the layout responsive. To overcome them, I referred to documentation, online resources, and experimented with different CSS properties until I achieved the desired results. Additionally, I tested the layout on different screen sizes to ensure responsiveness.

What specific areas of your project would you like help with?

I'm happy with the overall project, but I would appreciate some feedback on the design and usability aspects. Specifically, I'm interested in suggestions for improving the user experience and making the interface more visually appealing.
Normal QR Code Website Using Flex
2
Alberto Raúl José• 410
@alberto-rj
Posted about 2 months ago
Congratulations, @abrarishere! You have improved the previous solution!

But the background and foreground colors do not have a sufficient contrast ratio

You can solve this problem by changing the text color of the paragraph and footer (including the links). This tool can help you solve this problem

Convert the QR Code image to next-gen formats, such as WebP and AVIF because those formats often provide better compression than PNG or JPEG. Learn more here

This website can help you solve this problem

Make the QR Code image responsive, but not simply with the CSS declarations, such as:

img { width: 100%; height: auto; }

Or

img { max-width: 100%; height: auto; }

Images that are appropriately-sized to save cellular data can improve the load time of the page. Learn more here
Marked as helpful
0
Muhammad Hafizh Abdillah AR• 40
@dorman99
Submitted about 2 months ago
What are you most proud of, and what would you do differently next time?

playing around with box shadow

have more sense for flex box

What challenges did you encounter, and how did you overcome them?

manage the image to be able stretch as we expected, media query helps

What specific areas of your project would you like help with?

how to be able to slice the design to actual imput

Blog Preview Card (HTML + CSS)
1
Alberto Raúl José• 410
@alberto-rj
Posted about 2 months ago
Hi, @dorman99! Congratulations on investing your time and leveling up with the challenge, Blog preview card.

I'm Alberto and I have some code suggestions that can help you improve your solution to this challenge.

SPECIFY THE MAIN TITLE OF THE PAGE

It could help improve the usability, SEO for your page.

Bad

<p class="heading">HTML & CSS foundations</p>

Good

<h1 class="heading">HTML & CSS foundations</h1>

SPECIFY THE FOOTER OF THE PAGE

Instead of using the HTML code <div class="attribution">...</div>, you could use <footer>...</footer>. Because in this case, the <footer> tag has more semantic meaning.

Happy coding! 🚀
0

Alberto Raúl José

All comments

Recipe Webpage

PAgina com QR code responsiva

Responsive Landing Page, CSS grid and flex

Recipe page using bootstrap

Blog Preview Card

FAQ accordion

Landingpage Social links profile using CSS animation

Responsive Faq Accordion using Vue.js

Testimonials grid section

Responsive Landing Page (Four Card Component Section)

Landing page using css grid

Recipe page - Pure CSS

Blog preview card

QR-Code Component clean HTML&CSS

Responsive social links component

RECIPE-PAGE-MAIN

Simple link tree page using simple CSS

desafio 2

qr-code

Responsive Newsletter using Grid

Age Calculator App

Social Links Profile

Normal QR Code Website Using Flex

Blog Preview Card (HTML + CSS)