Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Log in with GitHub
OverviewSolutions17Comments61

All comments

  • Klaudiaβ€’ 50

    @Haraved

    Submitted

    Let me know what u think about code, and if that's the corect way to achive this solution! :)

    Thanks in advance!

    Huddle-landing-page

    1

    Muhammad Shajjarβ€’ 1,100

    @muhammadshajjar

    Posted

    Hello, congrats on completing your FEM challenge, yep you approach the design as needed but at some viewports, your content is overflowing and some other suggestions that would help you with your design and solution

    • Background-image is repeating, use background-repeat:no-repeat;
    • AddΒ max-widthΒ to a body or make a container class that wraps your all content, by adding it you can control your content from growing too much on larger viewports and save yourself from this situation
    • The logo should be in anchorΒ a, logos are used to navigate on the home page in most the cases
    • Your images should haveΒ altΒ attribute but for decorative images, you should leave alt as blankΒ alt="" and useΒ role=" presentation"Β orΒ aria-hidden=" true"Β to make sure all screen readers ignore those images. In your case, the illustration image is decorative.
    • To overcome your accessibility issue you would need to add some semantic markers to designate sections of the page as the header, navigation, main content, and footer e.g:

    <main>
<div class”wrapper”> 
</div>
</main>

    Apart form this very well done, keep up the great work

    Marked as helpful

    1
  • Muhammad Shajjarβ€’ 1,100

    @muhammadshajjar

    Posted

    Hi saykeed, Nice work, I think some minor changes make your solution looks more similar to design

    • Some changes on the body, you should use this color background-color: hsl(210deg 46% 95%); as background-color
    • make your content perfectly center this would help
    use body or make container class{
    min-height: 100vh;
    display: flex;
    justify-content: center;
    align-items: center;
    • instead of giving widths to grid-template-columns use 1fr which is handier to achieve design
    • use max-width:1110px on card container because card container is not 1440px, this disturbs your hole design
    • Give a look to report to overcome accessibility and HTML issues

    Hope it would help you

    Marked as helpful

    1
  • Muhammad Shajjarβ€’ 1,100

    @muhammadshajjar

    Posted

    Hey Arslan, congrats on completing this challenge, you did a great job

    some suggestions would be

    • By using width on yourΒ cardΒ cause horizontal scroll or your content gets cut on the window at some viewports, useΒ max-widthΒ instead, and adopt the habit of not specify fixed heights and widths, it would create unexpected issues for you
    • Have a look atΒ mix-blend-modeΒ orΒ background-blend-modeΒ to put an overlay on your images as it is in the design. check out this I used background-blend-mode to put overlay, not sure about it worked 100%, but it works to some extent
    • Use one h1 per page, mainly for tilting the page
    • Use rem or em , don’t go with pixels, if you are writing scss make a function to convert pixel to rem, it would be handy

    Marked as helpful

    0
  • Muhammad Shajjarβ€’ 1,100

    @muhammadshajjar

    Posted

    Hi, you already get the valuable feedback, I want to add some more points

    • Don't use width on .huddle-introduction-content instead of use max-width, becasue it causes horizontal overflowing
    .huddle-introduction-content {
    display: flex;
    /* width: 40rem;  (max-width: 40rem)
    • Add max-width to a body or make a container class that wraps your all content, by adding it you can control your content from growing too much on larger viewports
    • The logo should be in anchor a, logos are used to navigate on the home page in most the cases
    • Links must have discernible text, [check out this link] (https://help.blackboard.com/Ally/Ally_for_Websites/Instructor_Editor/Improve_Content_Accessibility/Indiscernible_Link#:~:text=What%20does%20discernible%20text%20mean%3F%20Links%20generally%20have,looks%20like%20this%3A%20%3Ca%20href%3D%22%23best-practices%22%3EBest%20practices%20for%20links%3C%2Fa%3E)
    • use media queries to prevent the layout from breaking

    Aside from this Great effort, keep it up

    0
  • Rizqy Fachriβ€’ 110

    @Rizqyfm

    Submitted

    Hello again! This is my third solution for this community!

    As always, I tried to make 10/10 similarity between my solution and the design. I found the obstacles when making the social media logo on the footer, but I think I figured it out.

    Any feedback, advice, and suggestion is what I need :)

    Have a great day fellow developers!

    Landing page using CSS Flexbox for desktop and phone display

    2

    Muhammad Shajjarβ€’ 1,100

    @muhammadshajjar

    Posted

    Hi congrats on completing your third FEM solution, you succeeded in similarity, some suggestions that would help you

    • By giving width on illustration-Image, it causes a horizontal scrollbar at some viewports, use max-width instead
    • Add max-width to a body or make a container class that wraps your all content, by adding it you can control your content from growing too much on larger viewports
    • The logo should be in anchor a, logos are used to navigate on the home page in most the cases
    • always have a look at the report, it helps you to overcome accessibility and HTML issues

    Happy coding :)

    Marked as helpful

    0
  • Muhammad Shajjarβ€’ 1,100

    @muhammadshajjar

    Posted

    Hey, Great job on finishing the project! The layout looks decent, HTML and CSS are structured very well, some suggestions that would help to improve your solution more

    -Try to addΒ max-widthΒ to a body or make a container class that wraps your all content, by adding it you can control your content from growing too much on larger viewports

    • Better to use blockquotes for testimonial quotes text instead of writing it directly in div
    • Font-size of top-section is a little bit off that make your solution off from design
    • Form validation and active states are missing, reffer to design/active-states.jpg
    • You can validate your form with pure CSS here is the link to CSS tricks
    • Footer get stuck with window at the bottom add some padding-bottom to it

    Apart from this very well done, keep up the great work

    0
  • Tomiβ€’ 565

    @Tomi-pter

    Submitted

    Feedback will be appreciated!! 😁 I have a problem with the color of the social media icons when its hovered. I can solve this by importing editable icons from somewhere else but i'll like to use the assets contained in the starter pack. I'd appreciate any help.

    Clipboard-landing-page. html/css

    1

    Muhammad Shajjarβ€’ 1,100

    @muhammadshajjar

    Posted

    Hi Nice Work, Awesome work on this one layout looks great and responds well on all sizes but there is a small issue that content is growing too much on larger viewports addΒ max-widthΒ to a body or make a container class that wraps your all content, by adding it you can control your content from growing too much on larger viewports, it is first stepped to responsiveness in my opinion.

    I think you are on the right path of using the filter to your image on hover but the filter you used is not right Check out this code-pen it will generate filter which you want This is generated by this code pen,

    .social a:hover {
filter: invert(56%) sepia(100%) saturate(338%) hue-rotate(122deg) brightness(90%) contrast(85%);
}

    And if you would use directΒ SVGΒ in your Html, ThisΒ css tricks link would lead you to the best

    Apart form this very well done, Keep up the great work

    Marked as helpful

    0
  • Muhammad Shajjarβ€’ 1,100

    @muhammadshajjar

    Posted

    Hi Mohamed! Awsome work layout looks good and HTML is very well structured

    some suggestions are

    • The logo should be in anchor a, logos are used to navigate on the home page in most of the cases
    • TheΒ register nowΒ should be an a link, in my opinion, usingΒ aΒ tag and not aΒ button. Use theΒ buttonΒ if it will act as a control for something. But on this, it is treated as a link, go forΒ aΒ tag.
    • Avoid too much class nesting

    hope it would help you

    Marked as helpful

    1
  • Muhammad Shajjarβ€’ 1,100

    @muhammadshajjar

    Posted

    Hi!

    To your question; Justify-content:centre and align-content: centre would place your grid-section-container to perfectly centre but you need to remove some styles check out this these are some styles that need to be removed

    Some other suggestions would be

    • Use only one h1 per page usually for tilting the page
    • Try to addΒ max-widthΒ to your body or make a container class that wraps your all content, by adding it you can control your content from growing too much on larger viewports
    • UseΒ blockquotesΒ for quotes instead of usingΒ p
    • always give a look at report it helps you to overcome accessibility and html issues

    Apart from this very well done, keep up the great work

    Marked as helpful

    1
  • Basmaβ€’ 300

    @btebe

    Submitted

    I couldn't make the background look exactly as it was shown in the challenge. it would really be appreciated if I got some tips on how to do it or improve on my existing CSS. Thanks.

    Reactjs

    1

    Muhammad Shajjarβ€’ 1,100

    @muhammadshajjar

    Posted

    Hi congrats on completing your first FEM challenge, It looks good and behaves well on all viewports

    To your quesiton;

    Your background image is placed where it has to be, Use correct background color on body which is hsl(225deg 100% 94%) (very pale blue) And don’t need to use gradients on the background image, use as it is. Then your background looks like to the design You confused yourself in overlays, I have a little simple solution for you, Use background color in body and use background image in the body too here is my solution hope it would help you in this case

    Some other suggestions that would help you to improve your design

    • changeΒ should behave as it controls something, and for controlling I preferΒ to useΒ buttonΒ for navigating somewhere it is good to go withΒ a
    • Aoid using width and height, you used width on your .card-container, using hard code would cause some issues, I know in this solution your design is not very much affected form this, but in future projects, this habit falls you in the cumbersome scenarios. Try max-width and min-height instead
    • You should need to add some semantic markers to designate sections of the page as the header, navigation, main content, and footer e.g:

    <main>
<section> 
</section>
</main>
<footer>
</footer>

    Marked as helpful

    1
  • Parhamβ€’ 200

    @frontendparham

    Submitted

    Stats Preview Card Project: I will be glad to know your opinion about my project πŸ˜„

    HTML, CSS, FLEX-BOX

    1

    Muhammad Shajjarβ€’ 1,100

    @muhammadshajjar

    Posted

    Hi, Nice work! some suggestions would help you

    • By using width on your content and image cause horizontal scroll or your content is gets cut on the window at some viewports, use max-width instead, and adopt the habit of not specify fixed heights and widths, it would create unexpected issues for you.
    • It is highly recommended to read style-guide.md, In the style guide there are two font families, that would be better to use instead of using Ubuntu, font family highly affected your style if you want to get pixel perfect solutions.
    • Have a look at mix-blend-mode or background-blend-mode to put an overlay on your images as it is in the design
    0
  • Clarice Almeidaβ€’ 65

    @ClariceAlmeida

    Submitted

    In my last challenge I was told to use more relative measure units so in this challenge I tried to focus on that. Please feel free to give me any tips of how I can improve the code.

    Responsive Layout

    1

    Muhammad Shajjarβ€’ 1,100

    @muhammadshajjar

    Posted

    Hi ClariceAlmeida, I’m glad to hear that you imply what you learn in the previous code reviews, keep doing this approach, You will surely succeed.

    Some feedback on your solution

    • changeΒ should behave as it controls something, and for controlling I preferΒ to use buttonΒ for navigating somewhere it is good to go withΒ a
    • Avoid using width and height, you used width on your card, using hard code would cause some issues, I know in this solution your design is not very much affected form this, but in future projects, this habit falls you in cumbersome scenario. Try max-width instead
    • Your images should haveΒ altΒ attribute but for decorative images, you should leave alt as blankΒ alt=""Β and useΒ role=" presentation"Β orΒ aria-hidden=" true"Β to make sure all screen readers ignore those images. In your case, the music icon and your hero image are decorative.
    • background-image is little bit off, trying to fix it by giving proper size and position. Position top and size contain would work in your cause. Hope it would help you

    Marked as helpful

    1
  • Muhammad Shajjarβ€’ 1,100

    @muhammadshajjar

    Posted

    Hi Avisre!

    I think you chose the correct color, given some opacity on img it would work, e.g

    .card-img-container img {
opacity: .75; 
}

    check out this

    • your card is not perfectly center and on mobile view stats are also not center

    Marked as helpful

    0
  • Rohitβ€’ 330

    @Rohitgour03

    Submitted

    Here is my solution to this challenge. Suggestions and feedbacks are welcomed. πŸ™

    Fylo-data-storage-component

    1

    Muhammad Shajjarβ€’ 1,100

    @muhammadshajjar

    Posted

    Hey Rohitgour03! Awesome work, the layout looks pretty decent and behaves well on all viewports, but at some viewports, your background image create distance on the bottom that looks weird Talking about this , use background-position: bottom; to overcome this issue, instead of defining it with `vh. Other than this everything looks good.πŸ‘

    Keep up the great work.

    Marked as helpful

    0
  • Muhammad Shajjarβ€’ 1,100

    @muhammadshajjar

    Posted

    Hi, I think it is properly set and placed where it has to be

    0
  • Muhammad Shajjarβ€’ 1,100

    @muhammadshajjar

    Posted

    Hi, Nice work!

    some suggestions would be

    • For the testimonial quote, I recommend to use block-quote for more semantic HTML check out this for information
    • Try to addΒ max-widthΒ to a body or make a container class that wraps your all content, by adding it you can control your content from growing too much on larger viewports, it is first stepped to responsiveness in my opinion. It would save your from this
    • I appreciated for leaving alt blank for decorative images but it would be good practice to useΒ aria-hidden="true"Β orΒ role="presentation". So screen reader ignore those
    • You should need to add some semantic markers to designate sections of the page as the header, navigation, main content, and footer e.g:

    <main>
<section> 
</section>
</main>
<footer>
</footer>

    Marked as helpful

    0
  • Muhammad Shajjarβ€’ 1,100

    @muhammadshajjar

    Posted

    Hi,

    Some suggestions are:

    • Better to add a margin on the left and right sides of your card because its sides collapse to the window on small viewports check the screenshot
    • To overcome your accessibility issue you would need to add some semantic markers to designate sections of the page as the header, navigation, main content, and footer e.g:
    <main>
<section> 
</section>
</main>
<footer>
<div class="attribute"></div>
</footer>
    • Active states are missing, refer toΒ active-state.jpeg for it
    • changeΒ should behave as it controls something, and for controlling prefer button for navigation it is good to go with a

    Apart from this very well doneπŸ‘, Keep up the great work

    Marked as helpful

    0
  • Muhammad Shajjarβ€’ 1,100

    @muhammadshajjar

    Posted

    Hey, Awesome work on this one, as this was your second challenge, you did great in it . There are more challenges are waiting for you, go and solve them for more learning. some suggestion that would help you

    • It looks more attractive if you properly center your cards.
    • Try to addΒ max-widthΒ to a body or make a container class that wraps your all content, by adding it you can control your content from growing too much on larger viewports, it is first stepped to responsiveness in my opinion.
    • ForΒ Learn MoreΒ they are links so should be inΒ a . Buttons are more likely to act as control some thing.
    • To overcome your accessibility issue you would need to add some semantic markers to designate sections of the page as the header, navigation, main content, and footer e.g:

    <main>
<div class”container”> 
</div>
</main>

    Work on a class naming convention and if possible have a look at BEM naming convention css tricks and kevin Powell on youtube leads you to the best

    Marked as helpful

    0
  • Muhammad Shajjarβ€’ 1,100

    @muhammadshajjar

    Posted

    Hi CarlosDra, Awsome work.Yep, you are right we all here to learn, and the best thing is that we are on the right path πŸ™Œ. Your solution is good and it responds well, Here are some points that would make it more responsive

    • Try to addΒ max-widthΒ to a container class that wraps your all content, by adding it you can control your content from growing too much on larger viewports, it is first step to responsiveness in my opinion.
    • Add some gap between .testimony__card by a margin in my opinion, Because flex-gap is not supported in all browsers
    • Instead of giving width to .square__layout use max-width, avoid hard code because it is causing horizontal scroll bar on smaller viewports
    .square__layoutΒ {

    width: 340px;  /*max-width:340px (use relative units )*/
}
    • Pattens are more likely to use as background images instead of img in my opinion, and their name also start as bg so it is a kind of HintπŸ˜…
    • For decorative images it is better to leaveΒ alt as blank alt=""Β , and useΒ aria-hidden="true"Β orΒ role="presentation". In your case it is better to not give stars any alt text.

    Hope it would help you

    1
  • Muhammad Shajjarβ€’ 1,100

    @muhammadshajjar

    Posted

    Hi Take, Nice work on this one some suggestions would help you

    • Try to add max-width to your body or make a container class that wraps your all content, by adding it you can control your content from growing too much on larger viewports
    • To overcome your accessibility issue you would need to add some semantic markers to designate sections of the page as the header, navigation, main content, and footer e.g:
    <main>
<section> 
</section>
</main>
<footer>
<div class="attribute"></div>
</footer>
    • Page should contain one 'h1'
    • Use bloclquotes for quotes instead of using p
    0
  • Muhammad Shajjarβ€’ 1,100

    @muhammadshajjar

    Posted

    Hello Zybarkas! Nice work on this one, here are some suggestions which may help you

    • Make your gird-template-columns to 1fr so they all equally distribute their widths, Using % and auto will cause issues Check this
    • It's good to add breakpoint between 700-800px viewport width, because your layout breaks at that point with grid-template-areas you would easily achieve another layout check out my solution hope it would help you -Try to addΒ max-widthΒ to your body or make a container class that wraps your all content, by adding it you can control your content from growing too much on larger viewports
    • You are switching displays, I think don’t need to switch to flex for the mobile design you can achieve that with grid too -To overcome your accessibility issue you would need to add some semantic markers to designate sections of the page as the header, navigation, main content, and footer e.g:

    <main>
<section> 
</section>
</main>
<footer>
</footer>

    Marked as helpful

    1
  • Muhammad Shajjarβ€’ 1,100

    @muhammadshajjar

    Posted

    Hey congratulations! on completing your first junior level challenge, it was always fun to complete the challenge, Your overall layout looks good but try to add some more things to it for better design and code

    • Avoid too much classes inheritance because sometimes it would cause specificity issues header .header_content .build_community instead of this you may go with .build_community

    • Try to add max-width to your body or make a container class that wraps your all content, by adding it you can control your content from growing too much on larger viewports

    • Your logo is an image so font-size would not work in this case use height or width instead, And try to fix it, it looks too big on small viewports

    • Create your link to mailto link, it is used to redirect to an email address instead of a web page URL. To create a Mailto link, you need to insert "mailto:" parameter in href, like the following: <a href="mailto:[email protected]">[email protected]</a> And for the mobile number you can use tel link it is used to redirect to a phone dialler directly, like the following, <a href=β€œtel:+1-543-123-4567”>+1-543-123-4567</a>

    • Give your cards some shadow so they would look like cards

    Marked as helpful

    0
  • P
    Carlaβ€’ 420

    @iamcgs

    Submitted

    Hi! Feedback is more than welcome! I am sure there are "cleaner" ways to do this challenge. Regards!

    HTML, CSS and Flex

    2

    Muhammad Shajjarβ€’ 1,100

    @muhammadshajjar

    Posted

    Hey, awesome work on this one πŸ‘ The layout looks good and responds well on all viewports but it is not perfectly centre on viewports greater than 1440px, you would see the left alignment of hole content margin: 0 auto on body would fix it.πŸ™Œ

    Some more suggestions that would make your solution more cleaner are

    • I prefer to put a header outside of main element
    • Avoid adding those words that relate to graphics such as logo, image, and for decorative images use alt attribute as a Blank atl=β€œβ€ and useΒ aria-hidden="true"Β orΒ role="presentation". In your case .service-images are decorative
    • Hover states on Social media images are missing, Try to add them too.

    Marked as helpful

    0