Looking to hire developers?
@brodiewebdt
@zstephenson2
Submitted
What are you most proud of, and what would you do differently next time?
I was able to learn basic Git commands and utilize CSS flexbox tools
What challenges did you encounter, and how did you overcome them?
I had difficulty with centering the element at first, which I resolved by using flexbox
What specific areas of your project would you like help with?
Nothing in particular
@brodiewebdt
Posted
Nice job. Use rem units for the font sizes for accessibility. They will scale if the user changes the font size on their individual computer.
@AlphaCharlieFoxtrot
Submitted
Hi, if someone can help and tell me why the pictures does'nt want to show on the @media (min-width: 1024px){} it would be very helpful, thanks
@brodiewebdt
Posted
Just looking at this quickly, the image is set to display: none at 1024px. If you use the Devtools to inspect the page you can turn off that property and the image will show up. You will have to position it as it is not in the right place. Hope this helps. David
Marked as helpful
@obaidash99
Submitted
I want to know if this is the best practice for writing the code for this project? Or is it a clean code I wrote? The logo picture is not showing on the live demo but is showing on my localhost. Does anyone know why? Making Global components was a lot of fun, if there is a better way to write or think about them, please inform me.
@brodiewebdt
Posted
This is your code for the Social Media links
<div class="social-media">
<i class="fab fa-facebook"></i>
<i class="fab fa-twitter"></i>
<i class="fab fa-instagram"></i>
</div>
This is how I coded it:
<ul class="social">
<li>
<a class="circle" href="#" aria-label="Facebook link">
<i class="fab fa-facebook-f"></i>
</a>
</li>
<li>
<a class="circle" href="#" aria-label="Twitter link">
<i class="fab fa-twitter"></i>
</a>
</li>
<li>
<a class="circle" href="#" aria-label="Instagram link">
<i class="fab fa-instagram"></i>
</a>
</li>
</ul>
Hope this helps. David
Marked as helpful
@obaidash99
Submitted
I want to know if this is the best practice for writing the code for this project? Or is it a clean code I wrote? The logo picture is not showing on the live demo but is showing on my localhost. Does anyone know why? Making Global components was a lot of fun, if there is a better way to write or think about them, please inform me.
@brodiewebdt
Posted
Nice job with this. Your logo isn't showing because you forgot to add the dot in front of the path to the images folder. Your other images have it, which is why they are showing up.
To clear the accessibility issues, wrap all of your main content in a main tag and change the ALL YOUR FILES text to an H1. Every page should have an H1. You can style it however you want it to look. Don't use Headings according to their size. You can always re-style them. You also want to avoid skipping Heading sizes as well. Change your div class of footer to an actual Footer tag since this is a footer. You can leave Headers and Footers out of the Main tag since they have semantic meaning already.
Add the code aria-label="Facebook link" or whatever describes it to links that only show icons for screen readers. That should clear all of the accessibility warnings.
Hope this helps. David
Marked as helpful
Any feedback welcome, Made it within 1 hour. I am great learner and I will be happy to hear anything regarding design and code in order to enhance my skills. Feel free to share your thoughts.
@brodiewebdt
Posted
That didn't take long.
Marked as helpful
@alexcarmonadev
Submitted
Do you think the code needs any changes? Please let me know so I can keep improving. And if you liked it, you know, give me a lot of love by pressing the like button.
@brodiewebdt
Posted
The image is showing up for me now.
@PhoenixDev22
Submitted
Hi! I have modified the wrong things, I would love to receive your feedbacks .
@brodiewebdt
Posted
That is how mine looks, and is that way in Figma. The design comparison must be using a different color. Nice job.
@bayubskr
Submitted
i'm very happy if you can give me some advice to improve my skills. thank you.
@brodiewebdt
Posted
You did a pretty good job on this. The submit button can use some work, they are a little small at some resolutions. The phone and mail Icons are distorted at some resolutions as well. You also want to research form validation as you will need to use it later on.
Add Fylo to the ALT text on your logo images, and add aria-label="Facebook" etc.. to the A tags surrounding your social media icons. That will clear the accessibility warnings.
Download AXE DevTools and you can clear accessibility warnings while you code. https://www.deque.com/axe/devtools/
Hope this helps.
Marked as helpful
@maym42
Submitted
👋 I would like to get feedback on my code!
@brodiewebdt
Posted
You did a great job on this. Your code is easy to read, and you did a good job with the comments. The alignment, spacing and hover effects are just like the design. No issues in the report either. Great job.
Marked as helpful
@Gino16
Submitted
How do you make the hover effect over the image? I am starting on frontend but it was very hard for me
@brodiewebdt
Posted
The hover effect is working fine for me in your project.
Wrap your container div in a Main tag and change the attribution div to a Footer. Change the H2 in your code to an H1. Every page should have an H1 for accessibility reasons. Doing these things will clear the accessibility warnings.
Download AXE DevTools and you can clear accessibility warnings while you code. https://www.deque.com/axe/devtools/
Hope this helps.
Marked as helpful
@Ascecent
Submitted
Another challenge complete, any feedback would be awesome :D.
@brodiewebdt
Posted
Nice job. Everything looks like the design. Alignment and spacing are good. Very good.
Marked as helpful
@Vj3ko
Submitted
any feedback is welcomed :)
@brodiewebdt
Posted
You did a great job on this. Looks really good. You want to wrap all of your content in a Main tag. You just have one section named main. Add aria-label="Facebook link" etc.. to the A tag surrounding your font-awesome links. Add Alt text to your two testimonial images. They can stay empty as they are decoration only.
Download AXE DevTools and you can clear accessibility warnings while you code. https://www.deque.com/axe/devtools/
Hope this helps.
Marked as helpful
@jaimeandres77
Submitted
Does the end result looks like the expected one? How can I improve in terms of responsive web design?
@brodiewebdt
Posted
Everything on the card looks good. Put the background-color on the body instead of the main tag and will cover the entire view-port. Change your H2 to an H1. Every page should have an H1 for accessibility reasons. Use the same styles that you have on the H2 with the H1 and you won't have to re-style. Change the attribution div to a Footer and it will clear the accessibility warnings.
Hope this helps.
Marked as helpful
@Latth
Submitted
Shadowing was kinda hard but i still tried some shadow.
@brodiewebdt
Posted
Everything looks good on this. Just like the design. Change the Equilibrium text to an H1. Every page should have an H1 for accessibility reasons. You may not have to re-style it because you used a class name. The box shadow is a little heavy. In the Figma file the box shadow is this:
box-shadow: 0 25px 50px hsla(0, 0%, 0%, .1);
Hope this helps.
Marked as helpful
@SullivanBerger
Submitted
Hello guys,
I wanted to develop some frontend stuff since I no longer have time for it, with my full time job as a backend developer. I still want to work on some frontend projects in the near future, and I need to sharpen my skills.
Thanks in advance for your feedback !
@brodiewebdt
Posted
This looks very good. Spacing, alignment and hover effects all like the design.
Wrap your app div in a Main tag and add lang= "en" to the HTML tag and it will clear the accessibility warnings.
Hope this helps.
Marked as helpful
@Ascecent
Submitted
Another challenge complete, I think I overcomplicated myself with the handling of the form, what do you say?
Any feedback would be awesome :D.
@brodiewebdt
Posted
Ok. I didn't click in the inputs, I just clicked the Submit button. They are working.
Marked as helpful
@Ascecent
Submitted
Another challenge complete, I think I overcomplicated myself with the handling of the form, what do you say?
Any feedback would be awesome :D.
@brodiewebdt
Posted
It wasn't showing up at all. There were no error messages when the inputs were left empty.
Marked as helpful
@Ascecent
Submitted
Another challenge complete, I think I overcomplicated myself with the handling of the form, what do you say?
Any feedback would be awesome :D.
@brodiewebdt
Posted
The layout looks great. You want to give some line-height to the Learn to code text. It is a little tight at some resolutions. The form validation doesn't seem to be working for me.
Marked as helpful
@codezeloss
Submitted
Hello world!! Any suggestions for improvements!!! Thank you (:
@brodiewebdt
Posted
The layout on this looks great. There are a couple of things that need to be fixed. You have two H1 tags. You only want to use one on a page. Make the Stay productive text an H2 and style it the same as the H1. You don't need to wrap the buttons in an A tag. Remove the a tags and give the buttons a type of Submit. Any form buttons should have a type of Submit as they are set up to submit the form when filled out. The other thing is you don't have any form validation. That is something will have to do with some of the more involved layouts.
Hope this helps.
Marked as helpful
@rodrigovn
Submitted
I would like to know if the tools that i used are aproppriated, any advice for me is welcome
@brodiewebdt
Posted
Hi @rodrigovn, nice job on this card. I have a few suggestions to make it look better and be more accessible. Yo are using a bold tag for the Order Summary text. You don't want to use the bold tag anymore, it has been deprecated. It works, but it isn't really valid HTML. Use an H1 for the Order Summary text. You will have to re-style the text. Every page should have an H1 for accessibility reasons. In the Figma File the box shadow has the following settings: ' box-shadow: 0px 20px 20px hsla(245, 75%, 52%, .2); ` Your box shadow doesn't have a blur which is why it has a hard edge.
Wrap your card div in a Main tag and change the attribution div to a Footer and it will clear the accessibility warnings.
Download AXE DevTools and you can clear accessibility warnings while you code. https://www.deque.com/axe/devtools/
Hope this helps.
@alosoft
Submitted
I would love to hear your suggestions
@brodiewebdt
Posted
Your welcome. Glad I could help.
@barbara-musial
Submitted
Good code review always appreciated! 🥰
@brodiewebdt
Posted
This looks good. Everything working well. Great job.
Wrap the content in a Main tag and change the attribution div to a footer and it will clear the accessibility warnings.
Hope this helps.
@barbara-musial
Submitted
@brodiewebdt
Posted
You did a good job on this. everything looking like the design. You can remove the height from your card as it is not needed. If you check it in devTools you will see all it does is move the attribution div up and down a few pixels.
If you use this code on the body tag it will center the content in the center of the screen:
display: grid; place-items: center; min-height: 100vh;
Wrap your shadow-light div in a Main tag and change the attribution div to a Footer and it will clear the accessibility warnings.
Download AXE DevTools and you can clear accessibility warnings while you code. https://www.deque.com/axe/devtools/
Hope this helps.
Marked as helpful
@alosoft
Submitted
I would love to hear your suggestions
@brodiewebdt
Posted
Change the 10,000+ text to an H1. Every page should have an H1 for accessibility reasons. You may have to restyle the text to look like the design. Remove the justify-content: space-between in the testimonials section. Use the gap property to create space between the names and the comments. That will remove the extra space in the blocks.
Hope this helps.
Marked as helpful
