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
OverviewSolutions9Comments24

All comments

  • P
    Jessica• 880

    @perezjprz19

    Submitted

    A question that came while I was starting to build this, is:

    • If all sections have the same importance, how do you determine what heading to use since having multiple H1 headings is frowned upon, but in context, it doesn't make sense to have more than one level of heading or have a different type of tag that's styled the same as a heading?

    • I felt like using margin at the bottom of the paragraph to create the spacing was a bit of hack. Is there a better way to do that?

    • I wanted the buttons to remain in the same place regardless of the space taken up by the paragraph. Is there a way to achieve that without using absolute positioning?

    • Any tips to improve the legibility of my code would definitely be helpful.

    Responsive 3-column layout using grid and flexbox

    2

    Siege• 520

    @idesmar

    Posted

    Hi Jessica! I think you did a great job with this challenge and you have very valid questions.

    Here are my personal opinion regarding your questions?

    • Multiple H1: In this challenge/design, there isn't a clear level one heading. There is, however, a way to resolve it. It's by making your own level one heading and applying an sr-only class to it to hide it visually but available to screen-readers and web crawlers for SEO. I've seen some web apps that used that approach. The BBC web page is one that I've seen recently. Side note: Please don't use display: none; to hide elements that you want screen readers to detect.
    • Spacing between paragraph and button: Using padding-bottom on the container as oppose to margin could be an option. The padding should be of enough size to cover the button, plus some allowance so the <p> and button will not touch.
    • Absolute position on button: There may be other solutions out there but an absolute position combined with padding from the container is the best I can think of right now.

    Thanks for reading my thoughts on your questions. Happy coding!

    Marked as helpful

    1
  • Siege• 520

    @idesmar

    Posted

    Hi Elvinas! I think you just encountered a collapsing margin issue on your web app. There's a blank space above and below your <body> element caused by margin-top from .logo and margin-bottom from <main>.

    Quick fix for this issue is to use display: flow-root on your <body>.

    If you want to read more about collapsing margin, this is going to be a good read from CSS-Tricks.

    Happy coding!

    0
  • Fernando• 145

    @Faerk77

    Submitted

    Hi!, I've just finished another challege. This one take a lot more time that the others, the elements were very hard to style but i think it's a great job.

    I use BEM for the first time, so pls be nice haha...

    I got some problems position backgrounds so if you got some advice about this let me know pls :c

    like always, thanks for any feedback, and see you soon.

    Grettings.

    HTML, CSS && BEM

    1

    Siege• 520

    @idesmar

    Posted

    Hi Faerk! How was your experience with BEM? I hope you had fun with this challenge.

    The approach that I've thought of in this project is to use 2 primary containers. 1 at the top which contains 2 inner-containers side by side (I believe you had that as .header and .rate). You can use display: flex; to control the position of those two inner-containers. Then the 2nd primary container would be .comment at the bottom. Oh! and you can use the <footer> as a 3rd primary container if you opt to include the .attribution.

    If ever you refactor your code and it works well for you, let me know. Cheers!

    Marked as helpful

    0
  • Siege• 520

    @idesmar

    Posted

    Hey Ali! Your solution looks good!

    For Accessibility and sematics though, please look into tags like <header> <main> <section> <article> and <footer>. MDN is always a good source.

    Marked as helpful

    1
  • Siege• 520

    @idesmar

    Posted

    Hi Rogelio!

    Nicely done! Nothing much to say but keep doing what you're doing.

    Happy coding!

    1
  • Guillermo Ochoa• 40

    @GuillermoOM

    Submitted

    I was wondering about whether I did right for any kind of display size, just to be sure if its correct to use px sizes from time to time (for padding and margin for example)

    First try with plain css

    1

    Siege• 520

    @idesmar

    Posted

    Hi Guillermo! How was your first challenge with FEM? I hope you had fun.

    On using px for sizes, I normally just use rem for most sizes even padding and margin. Some uses em on the latter two but then again that comes down to your preference. I might use px for very small details like outline or borders.

    Regarding accessibility issues, you may want to look into using container tags like <header> <main> <section> <article> and <footer>. MDN is always a good source.

    Marked as helpful

    2
  • Shikhar Vohra• 60

    @Shikhar0411

    Submitted

    Hi, this is my solution to the Order Review webpage challenge, please take a look. Any general feedback would be appreciated. The following are the main problems I faced, 1 - How to lighten a colour given its hsl, other than just directly using VS code features 2 - Should the main font size also be changed when going from web to mobile, as I have done it, and it did make things slightly better. Answers to these would be highly appreciated Thanks

    Order Review Web page design using HTML,CSS

    2

    Siege• 520

    @idesmar

    Posted

    Hi Shikhar! I hope you had fun with your first challenge on Frontend Mentor.

    Regarding your questions:

    1. How to lighten colors using HSL? The easiest would be to adjust the third value which pertains to lightness. HSL stands for Hue, Saturation and Lightness. There are other ways like filter: brightness() but the first option would be enough in most cases.

    2. Font-size change when on mobile? In almost all cases, yes, unless specified by the design. You don't want to have large fonts on mobile where the user has to scroll more just to read a few lines of text. You did great in adjusting the font.

    Regarding accessibility issues, you may want to look into using container tags like <header> <main> <section> <article> and <footer>. MDN is always a good source.

    Marked as helpful

    1
  • Yazzybandyham• 120

    @yazzybandyham

    Submitted

    Hi!

    This is my first ever project that I did without a tutorial, and I know there are a million ways I could have simplified it. I would love feedback on how I could have positioned elements using less code, and if there is a better way, I could have tackled the responsive web design using Media Queries. Thank you in advance for taking the time to look!

    Responsive Order Summary Component

    2

    Siege• 520

    @idesmar

    Posted

    You did great! Putting what you learn from tutorials to solving frontend mentor challenges makes you improve your personal technique and approach on web development.

    If you want to shorten your code a bit, you could use shorthands for margin and padding, or using flex-box to center items. Shorthands are great but you don't have to use them everytime. There are cases that shorthands could make your code too complicated and hard to debug. What those cases are... you'll learn on the journey to improving more. :)

    Happy coding and happy new year!

    Marked as helpful

    0
  • Siege• 520

    @idesmar

    Posted

    Congratiolations in completing this challenge, Nate!

    • I assume you were trying to develop the site mobile first, however, I saw a few media queries with max-width. For simplicity, you can uniform it to min-width.
    • Also, since you're using SCSS. You can assign a variable for each screen size you want to work on (ie. $mobile: 500px, $mid-screen: 800px, ...).
    • For easier positioning of the cards, you can separate the #title_card from the grid so it will only contain the 6 info cards. That should allow you to easily create transitions when the screen resizes (eg. 1 column on $mobile, 2 columns on $mid-screen, 3 columns on $full-screen)
    • Simplify grid-gap by shortening it to gap

    I hope I was able to give you good feedbacks that could help improve this challenge. Happy coding and happy new year!

    1
  • Siege• 520

    @idesmar

    Posted

    Hi Jaycee, regarding your border-radius problem, you can set it on the parent container. That would be on .class__container if I read your code correctly. In the event you encounter problems with contents going beyond your container, you may want to look into overflow: hidden;. Hope I was able to help you with that problem.

    Happy coding!

    Marked as helpful

    3
  • Michael• 160

    @Minard-NG

    Submitted

    This was quite a daunting challenge...Learnt a lot from this challenge.

    Kindly review, feedbacks are very welcome!

    URL Shortener | vanillaJS

    #sass/scss

    4

    Siege• 520

    @idesmar

    Posted

    Some additional container tags to suppliment @Aakash suggestions are <header>, <section> (section will require a heading tag inside: h1-h6) and <footer>.

    Happy coding!

    Marked as helpful

    1
  • Siege• 520

    @idesmar

    Posted

    Hi Ronel, Congratiolations in completing this project! The site looks great on mobile and desktop view. Your code looks clean and understandable.

    Just a few feedback on HTML that wasn't covered by the report generated by FEM regarding <small>. Although this is allowed, it goes against the principle of separation of concern. So even if it's allowed, taking SOC into consideration is always a good thing to bear in mind. Click here to read more about the <small> tag.

    Regarding landmarks, you may want to use <header> to contain the logo and <main> for the rest. That should fix some of the landmark concerns on your page.

    For JS, perhaps, create a return where if output is NaN, it won't change textContent or something similar.

    Great work and Happy coding!

    Marked as helpful

    0
  • Udochukwu Amaefule• 570

    @UDsGitHub

    Submitted

    Any Feedback Would be appreciated, and any suggestions for how to make this into a more user usable app would also be appreciated. At the moment I am thinking of learning about user authentication and login/signup stuff to be able to allow users to login into the app and edit the variables based on their information in a later time though. For now this is what i have. Thank you once again Frontend Mentor.

    Responsive MERN Stack Application with Heroku backend

    #express#mongodb#react#redux#node

    2

    Siege• 520

    @idesmar

    Posted

    Awesome work! This is actually something that I am trying to re-create since it would be fun to make a real-world working app with this design.

    Your code looks really neat and very nice to read; and learn from. If there's one thing I can think of improving is the time-frame inside UserProfile.js. It would be great if the <li> can change state so it is highlighted (color: #ffffff perhaps) when clicked for better user experience. Love the work still and will be reading through more of your code!

    Marked as helpful

    0
  • Valentin• 290

    @cheepmanzee

    Submitted

    All feedback is highly appreciated! How can I improve validation so password and name couldn't contain symbols, foreign charcaters etc. Also, how can I change the error text with js depending on error issue? Like if there are spaces in password - show text 'Password can not contain spaces' and similar. Thanks in advance!

    Intro component Validation form HTML/SCSS/JS

    2

    Siege• 520

    @idesmar

    Posted

    For extra validation on name, password, etc.:

    You may want to dive in on Regular Expressions.

    Here's an example on evaluating a name value if it has an invalid character

    const notAWordCharacterRE = /[^a-z]/ig;
let nameValue = "name$";
let invalidNameFormat = notAWordCharacterRE.test(nameValue); // result: true for "name$"
if (invalidNameFormat) {
// code here for adding error message
};

    Additional reading: Regular expression syntax cheatsheet

    Regular Expressions or RegExp can be a bit overwhelming sometimes but it's going to be a great help moving forward.

    Always be hungry for more learning and happy coding!

    0
  • Valentin• 290

    @cheepmanzee

    Submitted

    All feedback is highly appreciated! How can I improve validation so password and name couldn't contain symbols, foreign charcaters etc. Also, how can I change the error text with js depending on error issue? Like if there are spaces in password - show text 'Password can not contain spaces' and similar. Thanks in advance!

    Intro component Validation form HTML/SCSS/JS

    2

    Siege• 520

    @idesmar

    Posted

    Great work! Your app was responsive and passes all the project's requirement!

    On the question on custom error message, you can create a nested "if statement" or a "switch statement" that adds a more specific error message. I made a slightly similar error handling process on my project that focuses on the email. There are 2 possible error message on the email field; either empty or invalid email. Here's a link to the web app I made.

    I hope that was of help. Happy coding!

    0
  • Siege• 520

    @idesmar

    Posted

    The desktop view looks great and you used css grid very well. The mobile version is missing, though. In some cases (and some may argue - most of the time), building the mobile first can be better because it's easier to imagine how the elements will transition to its positon on desktop view.

    0
  • Siege• 520

    @idesmar

    Posted

    Great work using flexbox on this project and a bit of grid work too.

    There seems to a bit of problem with the hover state of the icons cause it's not activating unless you hover on it directly instead of relying on it's parent element. You can remove the .icon:hover{ } style and inject the code block below, instead.

    .border:hover .icon {
  color: hsl(300, 69%, 71%) ;
}

    What happens there is that the .icon color will change if the user hovers on its parent element (.border). You can even move it up to the parent element above it, the <a> tag. a > .border > .icon.

    I hope I was able to explain that clearly and it helps you moving forward.

    EDIT: Markdown fixed.

    Marked as helpful

    1
  • Siege• 520

    @idesmar

    Submitted

    Hi everyone!

    This is my second attempt on this project. I did not submit the first one becuase it was not mobile-friendly. If you're using a mobile/touchscreen device to view this and you find any bugs, please let me know. Thank you!

    A feedback on how I structured the Javascript on this project and how I can make it better is also very much appreciated!

    Vanilla JS, Mobile-first, Simple Animation

    2

    Siege• 520

    @idesmar

    Posted

    Click on the SPLITTER logo at your own risk. :)

    0
  • Siege• 520

    @idesmar

    Posted

    Great job! Especially with creatively making the shapes needed to form the phone details and using radio buttons.

    I noticed there were 3 containers that only had a dot in it to form some details. This is just a personal preference, I usually use pseudo elements for that (::before and ::after). That's another way to make the other details. Also, if you need more pseudo-elements, you can enclose the container in another container and use its pseudo-elements.

    Hope I was able to give you some good advices. :)

    Marked as helpful

    1
  • Siege• 520

    @idesmar

    Posted

    animation-duration: 6s;

    Yup, animation may be a little too long but other than that, everything looks good on the mobile end. I'm on mobile, right now.

    0
  • Siege• 520

    @idesmar

    Posted

    But in the end... Linkin Park! Lol

    display: flex; is going to make your layout much better. https://www.w3schools.com/css/css3_flexbox_container.asp

    I would also suggest using min-height: 100vh; so you can easily center your main div regardless of the size of the window.

    Setting all margin and padding to 0; and using border-box will make it easier for you to style all elements. You can use the code block below to do that.

    *, *::before, *::after {
  padding: 0;
  margin: 0;
  box-sizing: border-box;
}

    Always have fun coding. :)

    Marked as helpful

    1
  • Kublick• 50

    @Kublick

    Submitted

    This one was interesting, still I have to check how to handle positioning multiple images... right now it works at requested sizes but its far from being responsive on that part

    HTML / CSS / JS

    1

    Siege• 520

    @idesmar

    Posted

    From what I've learned doing this challenge, you have to be creative with positioning the images. I can see that you got the idea on how to solve the problem and a few more attempts will definitely lead you the solution.

    My solution here is using outer containers (enveloping the main container) set as postion: relative and attached pseudo elements (::before, ::after) set at position: absolute. I'm sure you can get a perfect solution to this challenge.

    It's quite tricky but definitely fulfilling once you get it. Happy coding!

    Marked as helpful

    0
  • Soumye Agarwal• 20

    @soumye6297

    Submitted

    This was an interesting challenge just like the last one. But this was particularly interesting as it allowed me to learn something new. I learned how to use flex-layout as I had never used it before(used grid for most of my work). But I would ask if somebody could recommend some links for more information regarding flex-layout and its uses as well where I could find the syntax for its code. That would be very appreciated.

    Thanks

    I used CSS and HTML for this challenge.

    2

    Siege• 520

    @idesmar

    Posted

    Looks good. Probably could need a better transition from desktop to mobile since the stats class gets too squished and ends up being buried behind the overlay class.

    For syntax and better understanding of Flex box, you could check the documentation at https://developer.mozilla.org/en-US/docs/Web/CSS/flex

    Best source for documentation in my opinion to get to know the basics are developer.mozilla.org, w3schools.com and a couple of YouTube channels. Look up Kevin Powell on YouTube. He teaches pretty much everything about CSS.

    0
  • P
    Patrick• 14,305

    @palgramming

    Submitted

    This is a really fun project. I think also doing the challenges on CSS Battle really helped me be able to knock this project out this time.

    Chat App CSS Illustration (HTML & CSS)

    2

    Siege• 520

    @idesmar

    Posted

    Great work! I didn't exactly know if I should make a real form at the bottom of the phone. I ended up making it as one. LOL!

    Big props on your code, by the way. Very clean and understandable.

    I might be wrong here but was it supposed to be an arrow or a phone icon at the left of the profile photo? If it was an icon, using an SVG either inline or using a library like fontawesome would be the way to go. That would also work for the dots at the right hand side.

    1