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
OverviewSolutions12Comments33

All comments

  • Dummy_ken• 180

    @DummyKen

    Submitted

    🤕 Need Help! This is my third challenge here and this is by far the most difficult one I have encountered. I managed to make the desktop design work but it still isn't quite good 😶. And I can't really configure how to design the mobile design. Please kindly help me 🙏🏻. I really do appreciate your help 🤩.

    Stats preview card-component with HTML and CSS

    2

    Tereza• 605

    @sirriah

    Posted

    Hello, the css looks little bit messy to me, but I assume, that it is desktop-first.

    • the line 113 should be '@media(max-width: 375px){'
    • the .text-section in mobile view need the flex-direction: column
    • paddings in mobile view have smaller values
    • the stats part needs to be designed with flexbox too
    • the image with the overlay should be made as background image with overlay blend mode, see the documentation
    • in HTML, you should add the h1 and other headlines. It helps to assistive technologies and SEO. Look to semantic HTML.
    • You can try to use mobile-first design
    • there are more problems, but those are the biggest

    What browser do you use? I know that chrome and firefox have the developer tools, where you can inspect the html/css/js. It can really helps you.

    Marked as helpful

    2
  • Tereza• 605

    @sirriah

    Posted

    Ahoj Tome, vypadá to skvěle, jen u 'content__left' ti vypadlo pozadí - je tam špatné lomítko v cestě k souboru.

    Mám dotaz: je nutné dávat prefix u flexboxu? Viděla jsem, že to používáš. Podle caniuse.com je podpora flexboxu dobrá. Já u těch prefixů nikdy nevím, jestli je mám nebo nemám použít.

    0
  • Tereza• 605

    @sirriah

    Posted

    Hello, don't use % for the width of elements. Watch this tutorial about units. It is better to use rems.

    I see that you split css into the multiple files. I think, that it is not necessary in this small challenge. If you want to split, you should import the css parts into the one styles.css. And this one styles.css should be linked in the HTML file.

    For me personaly is good to split the components, not the desktop/mobile/tablet view. So, make the component as a separate file, but put all media queries into this one file. It is more readable for another developers.

    Happy coding!

    Marked as helpful

    2
  • Tom Růžička• 40

    @tomruzicka

    Submitted

    Hi, I am a junior developer and I would be grateful for your feedback!

    HTML, CSS

    2

    Tereza• 605

    @sirriah

    Posted

    Zdravím Tome, 🇨🇿 vítej na FM.

    • zkus příští projekt udělat mobile-first
    • mrkni na BEM naming
    • podívej se na semantic HTML, tahle challenge je malá, ale určitě by se tam daly použít tagy jako header, main a footer :)

    Skvělá první challenge 👍 těším se na další!

    Tereza

    Marked as helpful

    1
  • Tereza• 605

    @sirriah

    Posted

    Hello DanielSere, I saw your code. I think that it would be better to use some h1-h6 tags. Specially for the name (Victor Crest). Same for the folowers, likes and photos. Try to use better tags - see some videos or articles about semantic HTML. It is important for the SEO and for the accessibility.

    Useful links - look at the code of this project made by Grace

    Some reading about semantic HTML.

    • freeCodeCamp blog
    • [MDN Accessibility] (https://developer.mozilla.org/en-US/docs/Learn/Accessibility/HTML)
    • [MDN Semantics] (https://developer.mozilla.org/en-US/docs/Glossary/Semantics#semantics_in_html)

    Happy coding!

    1
  • Tereza• 605

    @sirriah

    Posted

    Hello,

    nice work :). I see one problem - the theme switcher. In firefox I see that it is made with checkboxes, but I think that radiobuttons would be better. Checkboxes can be checked all together, but in a group of radiobuttons can turned on only one of them. In your app I could turn on all three options in one time. Happy coding!

    0
  • Manmohan Singh• 100

    @Manmohan7

    Submitted

    Hey guys, I tried using Scss in this project. Let me know if I can improve anything. Thanks!!

    Sass and Flexbox

    3

    Tereza• 605

    @sirriah

    Posted

    Hello Manmohan7 :)

    For your next or bigger project try to watch this super video from coder coder. She uses scss and this tutorial helped me a lot on my beginning with scss.

    Your work is really good. I look forward to your next challenge.

    0
  • Tereza• 605

    @sirriah

    Posted

    Hello, the problem with the bottom circle is that it has not set the z-index. So the browser doesn't know, which element should be on top.

    But instead of setting this, try to add these two circles into the ::before and ::after selectors. These images are not the part of the content they are only a background, so you can put them into the css.

    Happy coding!

    0
  • Guilherme• 20

    @glhrmarques

    Submitted

    Somehow, the width: 100%; inside the .purple class in my css was not filling the entire picture. So, I set it to 101%;

    Well, I have no ideia why that did not work.

    Card Component

    1

    Tereza• 605

    @sirriah

    Posted

    Hello, nice work! :)

    I have some suggestions:

    • the .purple div is unnecessary. You can add background: hsl(277, 64%, 61%); to the div .image and to the .img-desktop add mix-blend-mode: multiply;. Result be the same and there will not be the problem with 101%.

    • You don't have to use the double img tag for desktop and mobile version. Try to use <img srcset="..."> - link to the documentation.

    • try to use BEM naming in you future projects. This is small project, but naming div "image" is not the best practise in a bigger project.

    0
  • Tereza• 605

    @sirriah

    Posted

    Hello, I saw you code. I think that naming components like "img" etc. is not the best idea. Try to look at BEM naming. This is a small project, but in bigger designs you will get lost.

    I think, that you can make the image from side to side with 'object-fit: cover' property.

    The whole component should have the maximum width set on specific size. If you have large screen then the width is now set on 100% and it looks strange.

    The border radius is better to set with px or rem units.

    Happy coding 👍

    0
  • Tereza• 605

    @sirriah

    Posted

    Hello,

    I see in the code, that you put the blobs into the body background. I can't see them in a preview. I see in the develper tools, that the path to the blobs is broken.

    You can put them to the background like you do or you can use ::before and ::after pseudo-selectors.

    0
  • Aastha Anand• 345

    @aasthaanand123

    Submitted

    I would appreciate if you all suggest me ways to improve my code since I really faced difficulties in applying the background color and at last took a shortcut(not using css) and also I faced certain problems in media queries and I'm not really sure if its written in a correct manner.

    Html5, Css3(flexbox and media queries)

    2

    Tereza• 605

    @sirriah

    Posted

    Hello,

    Nice work. I have some suggestions:

    • Not everything should be in div tag. For example for paragraphs use p tag, etc. Look at some articles or videos - list of all tags and FreeCodeCamp - semantic HTML
    • Try to use BEM naming or another naming standard. This project is small, but If you will work on something bigger, you will get lost. [Video about BEM] (https://www.youtube.com/watch?v=SLjHSVwXYq4)
    • As josuke0227 mentions above - the responsiveness is not good. Try to add another breakpoint. I know that in the starter files are only designs for mobile and desktop, but It would be better, if the page will be visible in all devices. [Responsive design] (https://developer.mozilla.org/en-US/docs/Learn/CSS/CSS_layout/Responsive_Design) Your browser will help you with the media queries [Responsive design mode in Firefox] (https://developer.mozilla.org/en-US/docs/Tools/Responsive_Design_Mode)

    Have a nice day :)

    1
  • Tereza• 605

    @sirriah

    Posted

    Hi,

    • you can set border: none
    • I recommend you to watch this video about units.
    • try to use BEM naming. This is small challenge, but in bigger project you would get lost. Another video here. Happy coding!
    1
  • Mick32453• 350

    @nitrio346

    Submitted

    Colors are a bit more pale than the example one, but rest look pretty good. Feel free to propose some improvements to my code.

    Data storage CSS (only)

    1

    Tereza• 605

    @sirriah

    Posted

    Hello, nice work :)

    • the icons at the left are buttons, so you should use right tags. They are not simple images. :)

    Have a nice day, happy coding.

    0
  • P
    Nicholas• 205

    @fytrw

    Submitted

    Hi👋, here's my overdue project. I hope you guys like it. Feel free to ask questions and make comments.

    Thanks!

    Article preview component

    2

    Tereza• 605

    @sirriah

    Posted

    Hello,

    • are you sure, that there should be the h2 tag? I think, that simple p tag would be better.
    • try to make it mobile first
    • I see, that you are PRO, but shadow of the component doesn't match :) Figma or Sketch files will help you to make the design almost pixel perfect.

    Have a nice day, happy coding.

    1
  • Esteban Guzman• 20

    @Elridge2

    Submitted

    Im not very good with css. I tried the challenge and got it to kinda look like it, but I was not sure how to clip the background circles so the page wont scroll so far, and for some reason when I open the site on mobile the scaling is all messed up. Does anybody know how to go about fixing these problems?

    Basic profile card CSS+HTML

    2

    Tereza• 605

    @sirriah

    Posted

    Hello, I saw your code :) Here are some suggestions:

    • For the two big circles try to use pseudo elements ::before and ::after - tutorial here. These circles are only decoration and it is not the part of the content => move them into css. Try to use img tag only for content images - here is it the profile picture.
    • the part about "followers, likes, photos" is not well done. You have to think about screen reader - what it will read? 80k 803k 1.4k Followers Likes Photos um? Related data should be join together into the columns. Try to watch some tutorial about flexbox.
    • Do not use names like "img1". Add names which are related to the content. You can use BEM naming.
    • Try to keep formatting of the code. If you use VS Code (I recommend), try the right-click-mouse and there should be something like "formatting".

    Have a nice day! Happy coding :)

    0
  • Tereza• 605

    @sirriah

    Posted

    Hello, good work. I saw your code and I found a few things that could be improved.

    • please, don't use names like "item" - try to find names that better describe the component. You can use BEM naming.
    • write mobile css first
    • for the two big circles on background you can use pseudo elements ::before and ::after.
    • I recommend you Kevins tutorial about units. Happy coding :)
    2
  • Priyanka• 150

    @priyankalad

    Submitted

    1. The most difficult part for me was to adjust two background images "bg-pattern-bottom.svg" and "bg-pattern-top.svg". Initially I tried with "position:absolute", but in the final version, I used "background-position" property with unit percentage. I am still not satisfied with this implementation. I would like to know more sophisticated way to implement this feature.

    2. Also the designs are created for below widths: Mobile: 375px Desktop: 1440px So, I have created one media query for min-width:1440px . Want to know if it's a correct approach

    Responsive profile card using css flexbox

    1

    Tereza• 605

    @sirriah

    Posted

    Hello,

    I saw your code, and I think, that it is pretty cool. I used similar solution for background circles like you.

    I look forward do your next design. Happy coding!

    0
  • Tereza• 605

    @sirriah

    Posted

    Hello, I think that your solution is pretty cool :). The only thing that I am missing is nicer readme file and naming in english :). I look forward to your next challenge. Happy coding!

    0
  • Doniyor• 20

    @Doniyor-Programmer

    Submitted

    You can write issues here about this project

    This is awesome!

    3

    Tereza• 605

    @sirriah

    Posted

    Hello Doniyor, nice try. I think that it would be good to read complete tutorials from w3schools.com. See this for HTML, this for CSS and for JS. After that, you can try this challenge again. I recommend you to look to the solution from others. Reading the code of somebody else is good practise. Happy coding.

    0
  • Tereza• 605

    @sirriah

    Posted

    Hello, nice work :). First, look at the report - there are some issues: More than one main tag etc.

    • I see that images are stretch to the content, but it is not necessary - look at object-fit: cover.
    • Please, move the css part into the separate file. Make code mobile first
    • It is not necessary to write text with capslock, use css text-transform
    • Dont use % for everything - see this article
    • the animation script vanilla tilt causes error in console. Look into developer tools in Chrome or in Firefox. The animation is little bit weird.
    • You use backslash in file path, but it should be / not \

    Happy coding!

    1
  • Artur• 145

    @arturpawlowski5

    Submitted

    Hi,

    It's my 4th Challenge Here.

    I tried my best with Javascript in this challenge to make Form - email working. Let me know if you have any suggestions for this part?

    I tried to work a lot about making this Design Responsive as much as possible. I struggle with some parts because can't easily use here Flexbox or Grid. Let me know maybe you have some ideas on how to manage this Design with Flexbox or Grid?

    Happy Coding to everyone B-)

    Pod Request Access Landing Page HTML SCSS Javascript

    1

    Tereza• 605

    @sirriah

    Posted

    Hello Artur, nice work! I look at your code - I see you use different files for mobile and tablet view. I think that is better to use media queries under every tag separately. You should write mobile first, so you can start write css for mobile view and then you use min-width for tablet and then for desktop. It will work faster on mobile devices. Look at this nice tutorial for inspiration.

    I miss some container for desktop which is greater than 1440px. Your design doesn't stop stretch and it looks weird.

    Welcome to the PRO! Happy coding! I look forward to your next challenge.

    0
  • Aymin• 140

    @ayminahmed

    Submitted

    My first submission.

    Not proud of using magic px numbers.

    In professional life, are developers normally expected to deliver pixel perfect solutions when no figma / sketch are provided?

    Will be grateful ANY feedback.

    Flexbox, absolute positioning, translate

    1

    Tereza• 605

    @sirriah

    Posted

    Hello, it looks pretty cool. Instead of px, you can use rem units. I recommend you this tutorial - https://youtu.be/aoQ6S1a32j8

    Happy coding!

    0
  • Tereza• 605

    @sirriah

    Posted

    Hello, try to look at this article. https://moderncss.dev/complete-guide-to-centering-in-css/

    0