Skip to content
OverviewSolutions
7
Comments
48
jemeneradev
@jemeneradev

All comments

  • kristi•130
    @kristiingcoSubmitted almost 3 years ago

    Hello, Frontend Mentor community! I would love to gain feedback for this specific project.

    I have the following questions:

    • How would one best structure their components? What is the best way to be able to know what components to construct?

    • What are best practices for clean CSS/SCSS code?

    • Are there any pros and cons to other CSS preprocessors?

    • If you could do this project with a React framework (such as Next.js, Gatsby, etc) , what would you choose?

    Thank you so much! This project was a blast to do.

    Planets fact site w/ React and SCSS

    1
    jemeneradev•580
    @jemeneradevPosted almost 3 years ago

    Personally, I find css preprocessor quite useful. With scss, for example, you can nest css definitions. That makes things logical and neat. You can also have modules and mixins that act a type of style inheritance, so you don't have to repeat common styles. Not to mention loops in css.

    For clean css, you'll just have to look at different approaches. For instance, nowadays, tailwind css is all the rave. I tend to stay away from that because it makes the markup too cluttered. You could also checkout bem (http://getbem.com/introduction/).

    As far as I know, gatsby is content management system, so between the two, I would opt for nextjs.

    Regarding component structure. One rule I follow is, if I find myself repeating code, more than likely it can be group logically.

    Marked as helpful
    0
  • Wissem•180
    @WissemhSubmitted almost 3 years ago

    I had to add the Calculate button , I would love to know some other ways to fix that problem and after clicking the Reset button the app doesn't seem to work i have to reload the page each time and couldn't figure out the problem. Also, is there a tool that can help me figure out the right fonts to use ? Thanks in advance!

    Tip Calculator App

    1
    jemeneradev•580
    @jemeneradevPosted almost 3 years ago

    console.log() is your friend. You should log out values that you know should be true when you do an action.

    For example: if I press the reset button, bill amount should be 0, log it out in the reset button click event handler.

    0
  • jemeneradev•580
    @jemeneradevPosted almost 3 years ago

    The animations add to the awesomeness of the app! Great job! I am guessing the opponent chooses at random, right?

    1
  • Arturo Sánchez•10
    @zentykSubmitted almost 3 years ago

    I have a strange issue: my responsive code stops when changing from 'col-sl-#' to "col-xm-#" in desktop and mobile browsers but in codepen my code it's O.K, what could be my error?

    Responsive QR Component

    2
    jemeneradev•580
    @jemeneradevPosted almost 3 years ago

    You need rounder corners, the font type is correct, and the paragraph has to be aligned center.

    For a second I thought you were wearing fpv googles.

    Marked as helpful
    0
  • jemeneradev•580
    @jemeneradevPosted almost 3 years ago

    https://cssgradient.io/

    When in doubt, look it up.

    Marked as helpful
    1
  • Aneta•180
    @anetaanetteSubmitted almost 3 years ago

    <I need JS advice> 😅 Hey everyone! This challenge was satisfying to complete because I simply really like the design. I know I could have improved a few details and make it more semantic but I just couldn't be bothered to spend more time on it as I keep thinking I should already code with Javascript. But at the same time I don't know how to start 🤣 This is a bit off topic but this website is great to meet people with similar experiences. I know the basics of JS and I feel stuck. It's like completely different things when it comes to using it for an actual project. Do you have any tips on this? Any advice will be useful 🙏 Thanks Aneta

    Fylo Data Storage Component

    2
    jemeneradev•580
    @jemeneradevPosted almost 3 years ago

    Js is most often used to pull or push data to a server, complex user interactions/animations, and html dom manipulations (this is more true if you are using a framework).

    With this project, I guess you could mock pulling the storage amount from a mocked api.

    You could check out :

    https://developer.mozilla.org/en-US/docs/Learn

    to learn more about web development.

    1
  • Gretel Rodriguez•20
    @The-Fat-CatSubmitted almost 3 years ago

    Hi guys! I'm a fairly new coder and wanted to get feedback on my code. Something I struggled with was margin and padding properties. I found that for the most part I was doing guesswork to position my image using the dimensions of the screen. I also wanted to see if there's ways I can make my code smaller and cleaner (i.e achieving the same results using less code). Additional question regarding the position property. I noticed that another way to position my elements were setting the position property to absolute and defining the margins but that wasn't ideal for responsive websites (ex if you resize the window) so if anyone could give me tips on what scenarios the property values are best used for that would be amazing! :)

    QR code webpage using CSS and HTML

    2
    jemeneradev•580
    @jemeneradevPosted almost 3 years ago

    Basically, if you want to have a responsive layout, avoid position: absolute.

    Now, I am not saying it's not useful. Try this out:

    <div class="designspec" style="position:absolute; left:0;top:0;background-image:url(pathtodesignimage.jpg); z-index:-1;opacity:0.5)"></div>

    pathtodesignimage = image location, usually "./images/.../design.jpg"

    This is a reference onto which you can lay on top your design implementation. It takes out the guessing of margin and padding.

    Marked as helpful
    0
  • Nicolás Herrera•70
    @herreranicolasSubmitted almost 3 years ago

    Hello everyone!

    Here I'm sharing this challenge solution to you all.

    I can say that I learned a lot. I almost lost my mind trying to solve the background position.

    I want to solve a few more challenges and start to apply Bootstrap, any advice you could give me with it? How should I start?

    Please feel free to give me your feedback.

    Thanks in advance!

    Profile Card Component using HTML and CSS

    2
    jemeneradev•580
    @jemeneradevPosted almost 3 years ago

    Regarding the markup, I feel like the followers, likes and photos should be a list. They share the same structure - h2, and p.

    I think you should avoid using bootstrap if you have not learned about the different placement techniques. If you can't look at a design and say, "oh, I will use flex for these parts and grid for that. Let me center this...this menu should be positioned relative left 10px."

    Bootstrap hides things from you with its convenience. It's a great tool, but you also have to have the knowledge to bend it to fit your needs. Stick with css for now, maybe learn scss, maybe.

    https://codepip.com/games/

    https://codepip.com/games/flexbox-froggy/

    1
  • jemeneradev•580
    @jemeneradevPosted almost 3 years ago

    Let me begin my sharing this tip with you - it will help you with matching the design closer. Take the design image and make it the background of a div and give it an absolute position.

    <div class="design-spec" style="position:absolute;top:0;left:0;z-index:-1;opacity:0.5"><img src="projectdesignpath"/></d>

    This will serve as a reference to your layout implementation. Since the div is absolute and has a negative z index, whatever you add, it will be on top of it. The margin and padding will be easier to determine, as well as the line-height and word spacing these project often call to adjust.

    Also, you should browse https://developer.mozilla.org/en-US/docs/Learn

    Like when reading a book, you often pick grammar tricks or metaphors, reading code more often than not, it gives you hints into more efficient ways of doing things.

    Case in point: you used a lot of repeated code. Hey, if it works, it works, but I bet it seemed strange to do so to you too.

    0
  • Rapha445•100
    @Rapha445Submitted almost 3 years ago

    Hi everyone ! :) This was my first attempt at using CSS Grid. I feel more comfortable with Flexbox so I found myself to fall back on it quite a lot. Any suggestions on my code?

    Also a few questions:

    • For this challenge I couldn't figure out how to get to background position right. Any tips?
    • How can I reduce the amount of media queries that I am using?

    Thank you for helping!

    Grid and Flexbox Responsive Design

    1
    jemeneradev•580
    @jemeneradevPosted almost 3 years ago

    Check out: https://cssgridgarden.com/

    It's a great, fun grid practice game.

    To be honest, grid might have complicated things a bit.

    <img src="images/icon-star.svg" alt=""> <img src="images/icon-star.svg" alt=""> <img src="images/icon-star.svg" alt=""> <img src="images/icon-star.svg" alt=""> <img src="images/icon-star.svg" alt="">

    That's a lot of stars. Consider playing around with background-repeat and the width of a star container to get the right amount of stars.

    https://css-tricks.com/almanac/properties/b/background-repeat/

    Marked as helpful
    0
  • jemeneradev•580
    @jemeneradevPosted almost 3 years ago

    I would round up the corners a bit more, maybe 15px or bigger. The design calls for rounder corners. Also, you might consider reducing the "line-height" property of the paragraph. Good job!

    0
  • jemeneradev•580
    @jemeneradevPosted almost 3 years ago

    Maybe you could scale up the dimensions of your implementation. Compared to the design, the components are smaller.

    <div class="functionalities"> <input type="button" class="item-functionalities document" > <input type="button" class="item-functionalities folder" > <input type="button" class="item-functionalities upload" > </div>

    I am not too sure if input is the best choice; there's not form or calculations that required a user input. As far as I am aware of, those are just for display.

    Maybe it would be best to use a list:

    <ul class="functionalities"> <li> <input type="button" class="item-functionalities document" > </li> <li> <input type="button" class="item-functionalities folder" > </li> <li> <input type="button" class="item-functionalities upload" > <li> Then you could inline the ul, and styli the li elements.
    Marked as helpful
    1