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
OverviewSolutions11Comments261

All comments

  • P
    Emmilie Estabillo• 5,540

    @emestabillo

    Posted

    Hey @DanielleLensly, great job on completing your project! Some recommendations:

    CSS:

    • add a reset to your stylesheet
    • use relative units such as rem instead of px
    • lines 116 and 122 are identical as mentioned previously. So are lines 80 and 141.
    • For the width of the cards:
      1. set amax-width in rem on the main container and
      2. remove all widths and max-widths on the cards. Use padding to keep the content from touching the gutter
    • For centering the component on the page:
      1. Remove position: absolute from main and position: fixed from attribution. You don’t even need static since that’s the default
      2. use flex (or grid) on the body:
    body {
    min-height: 100vh;
    display: flex;
    
    flex-direction: column;
    
    align-items: center;
    
    justify-content: center;
}

    HTML:

    • a tags redirect users to another page/section of a site, which is what we need here. Instead of buttons which perform an action (ex. submitting information or hiding/showing divs)
    • div class="main” can be replaced by <main>
    • Write your markup as if you are writing a word document. There should only be one h1 (main heading) on a page. There’s no clear heading in the design, but you can add one with the sr-only class. Check out this article and here's another one for the headings.

    Hope this helps!

    1
  • P
    MELT• 170

    @MeltedGreenVelvet

    Submitted

    I notice throughout my solutions that there are very slight differences in typography (such as letter spacing) as well as margin/padding differences. I tried to tinker with these numbers in my code despite the Figma design, but I still struggled to find a solution. I do not want to overuse absolute positioning. I'd prefer to stick with flexbox/grid whenever possible.

    If anybody can help me with this or let me know what I'm doing wrong to not achieve pixel perfect, I'd super appreciate it!

    Responsive Landing Page Utilizing SCSS/SASS

    #sass/scss#animation

    1

    P
    Emmilie Estabillo• 5,540

    @emestabillo

    Posted

    Hi @MeltedGreenVelvet, congrats on completing this challenge! A few suggestions:

    • The challenge has 3 major parts: header, image, text with form. On mobile, they will naturally stack (no need for flex). On desktop, use grid. You can create a 2 column grid with template areas:
    header image 
text image
    • Why is the header tag empty? .logo-container must be placed inside it and its contents not absolutely positioned to the body.
    • There’s a duplicate link that goes to the homepage inside the logo-container
    • For the logo - Alt text are not used by svgs. Better to use the img tag and the logo as src, with proper alt text ‘Base Apparel logo’ or ‘Base Apparel | Home’.
    • For the woman image, look into the <picture> tag instead of duplicating img depending on screen width.
    • Avoid hardcoding height and width. It can lead to content overflow or elements getting cut off
    • JS: For every incorrect email entry, the document adds another error icon. Once the user input passes validation, only the last error icon is removed.

    Housekeeping tips:

    • Default font sizing for browsers is 16px. Line 8 font-size: 16px can be deleted. Line 9 box-sizing: border-box is usually grouped together with the reset styles at the top.
    • The default value for font-style is normal. No need to declare it each time unless you need to change value to italic or oblique.
    • Avoid nesting selectors to keep specificity low. Nest your selectors only when needed (usually it’s done to override a style declared previously). Keep them all at one level if possible.

    As far as pixel-perfection, it’s a myth :-) Instead, get as close as you can to the design while keeping your markup accessible. Check out this great article.

    Hope this helps!

    Marked as helpful

    1
  • P
    J Alex• 60

    @Jalex-Mc

    Submitted

    Took me around 8 hours to finish this one. This one was a doozie, getting the curved elements and positioning the images made me pulled my hair out. I originally had the top swirly images in a Flexbox with the middle blurb and phone image, but the right image made the page scroll right to reveal white space after spending an hour trying to figure out how to remove the white space without messing up the curved element and the phone overhang, I move the images to be parented to main instead of the hero section to escape the overhand property.

    I used z-index to get them back over the hero section. This would allow me to keep my curved element(which took many hours to figure out) and the swirly designs. Ending up getting white space again when everything was said on done the upper right swirl worked before and now it stopped even though I had overflow set as hidden, so I just downloaded the cut off version from figma.

    When working on the tablet design I noticed that the middle section was laid out differently so I have to add the h3 and paragraphs under the numbers into their own flexbox so I could get the mobile design down. A lot of trial and error. So in all, getting initial layout took only 90 minutes and getting the curve and swirls down took many hours :) Next time I'm just going to use a SVG.

    After this, I'm going to focus more on responsiveness of flex as the site works at the breakpoints, but not really in the in-betweens, so I believe I've been going about it in the wrong manner, going to mess around with max H and W values next time to see if that will be more responsive. Also going to try SCSS next so I can compartmentalize the CSS when dealing with the Media Queries so I can reduce the size as I was getting a little cross-eyed with all the lines of CSS.

    If anyone could give any tips on my CSS as I believe I went about the responsiveness in the wrong manner

    Workit Landing Page

    1

    P
    Emmilie Estabillo• 5,540

    @emestabillo

    Posted

    Hey @tbeagle2, congrats on submitting your project! Here are some recommendations.


    CSS:

    • Add a CSS reset before your custom styles
    • Use mobile-first approach. Easier to scale up elements rather than making large items fit small screens.
    • Use relative units such as rems instead of px.
    • Avoid hardcoding width and height as much as possible. It usually leads to overflows or content getting cut off. The .mid-section of the project doesn’t look right on mobile screens up to 1305px
    • Position the spirals absolutely to their nearest container. Right now, all of them are against the body
    • There’s no space between the footer logos and the end of the page

    Accessibility:

    • Apply for access should be an a tag since it links to another page. Avoid using ‘p’ tags for interactive elements.
    • Social logos are also meant to bring the user to another page.
    • Look into the use of the img tag vs pseudoelements. Example, the spirals are purely decorative and don’t really add anything meaningful to the document. Consider placing them as a :before or after pseudoelement.
    • Use more descriptive terms for the alt attribute. This text will be displayed if the image do not load. Example, logo-light doesn’t tell me anything, but WorkIt logo will tell me the meaning of the image
    • Sections are a a better substitute to divs for related content on the page.

    General:

    • Use one repo per project. A monorepo for all the challenges can get complicated very quickly.
    • Check out Kevin Powell's videos on YT as a resource for responsive layouts.
    • While you’re learning, focus on the quality of the output - the translation of design, accessibility, best practices, etc. - rather than timing yourself. Speed comes naturally later when you’ve had a number of projects under your belt.

    Hope this helps!

    Marked as helpful

    2
  • Nick Carlisi• 180

    @nickcarlisi

    Submitted

    As always, any tips, recommendations or suggestions are welcome. A few things...

    • Not sure how to change the color of svgs on hover for the footer social logos. I tried a few things, but nothing seems to be working. Any tips?

    • For the mobile menu, I have the initial state set to display:none and then on click I change it to display:block. The problem is that I want to add transitions such as opacity and scale, but to my knowledge we're still unable to add a transition to display, which negates the other transitions. I tried making it visibility: hidden, instead of display:none, but the problem there is that the menu is covering the clickable elements below and they become unable to click.

    • Random, but is it just me or does it seem like the images that we're provided with for these projects are low quality? I know we don't want to use large file sizes for web, but they seem to be particularly small and therefor blurry on larger screen sizes. I just feel if you're adding a project to your portfolio and the images look blurry, it's going to look bad to the user/viewer. This project in particular has copy on it that says, "Increase your credibility by getting the most stunning, high-quality photos that improve your business image", but the images on the actual site are low-quality.

    React and Next.js 13.4 landing page using sass, grid and flex

    #next#react#sass/scss

    1

    P
    Emmilie Estabillo• 5,540

    @emestabillo

    Posted

    Nick!!! Good to see you here! The project looks great!

    For your questions:

    1. Social logos - I would use svgs for this instead of img tags. That way, you can manipulate the fill property depending on the pseudoclass.
    2. Mobile menu - When using visibility: hidden, have you tried adding pointer-events: none to hamburgerContainer (which should be a button btw for accessibility)? I usually hide mobile menus with a combination of positioning, opacity, and then adjusting top/left/right depending on the design. This approach makes transitions possible.
    3. I see your point about the images 😄. Maybe I’ll have @mattstudert weigh in. My two cents is that a well-written readme with good UI and accessibility will often turn heads than the images in your project.
    4. A few more things:
    • Use one menu for both mobile and desktop, and adjust their UI with CSS. It’s best for accessibility and maintenance.
    • You could use the nav tag as a parent for Header contents, instead of nesting another div.
    • Learn More is most likely a link.
    • Images could use a more descriptive alt tag. The logo for example, could have Sunnyside logo, and the client images alt=“Jennie” for the Jennie block.
    • Client Testimonials is a section heading, so h2 is more appropriate. Use CSS classes to change text appearance.

    Hope this helps and lmk if anything!

    Marked as helpful

    1
  • Melaku Alehegn• 260

    @MelakuAlehegn

    Submitted

    I was able to make the mobile menu using javascript, but I couldn't come up with a way to add the scroll behavior on the cards section. Any suggestions on that is appreciated. Thanks

    Manage Landing page with mobile menu

    #accessibility#lighthouse

    2

    P
    Emmilie Estabillo• 5,540

    @emestabillo

    Posted

    Hi @MelakuAlehegn, congrats on completing your project! The toggle code works well. You can use a library such as Slick or Swiper.js to create the slider for the cards. You can even write your own code using vanilla js.

    A few other things I noticed:

    1. The page looks squished at 769px. The nav and the footer look particularly off at this breakpoint. I recommend increasing it to at least 1090px.
    2. The nav-links needs an a tag nested inside the lis
    3. The hamburger toggle should be a button
    4. Section tags could be used for major parts of the page instead of divs
    5. Use a more descriptive value for the alt tags. On the nav logo for example, I would name it 'Manage logo'
    6. On mobile, the nav links container needs centering. So does the the footer logos.
    7. Add transitions to your hover states

    Hope this helps!

    Marked as helpful

    1
  • P
    Emmilie Estabillo• 5,540

    @emestabillo

    Posted

    Hey @MarwanHassan22, looks like you have a typo on line 7 of your html file that's preventing your styles to load. Removing the slash before dist should do it. I also recommend restructuring your HTML to keep it semantic. Here's a good reference on how to do it.

    Hope this helps!

    0
  • Hendrick Manullang• 50

    @hendrickmanullang

    Submitted

    I used a mobile-first design approach for this challenge.

    Adding a border to the "learn more" button hover state without pushing other elements was quite interesting.

    I rely a lot on display: flex to lay out my content - I am looking to use grids for future challenges (if anyone has a good instructional resource that they can share, that would be awesome!).

    3-column preview Card Component Solution

    1

    P
    Emmilie Estabillo• 5,540

    @emestabillo

    Posted

    Hi Hendrick, looks great! Another way to do the hover state for the button is to add the white border from the get-go, and then just changing the background color + font color on hover.

    For your html, h1 should only be used once per page. I would use h2 for the car types and one h1 for the page with a sr-only class to keep the page accessible. You can read about it here.

    The platform has a lot of resources on CSS grid that should help you out with your future challenges. Grid Garden seems to be popular.

    Hope this helps!

    Marked as helpful

    1
  • Secre• 210

    @SecreSwalowtail

    Submitted

    The pop-out message thingy was very challenging, I thought it was just an image to implement...

    • Is using transform a good practice? I can't think a better way to position it.

    Responsive Fylo Data Storage Component

    1

    P
    Emmilie Estabillo• 5,540

    @emestabillo

    Posted

    Hi @SecreSwalowtail, great job here! Looks very close to the design.

    A few things I noticed that could be improved:

    • Repetition of elements - there are two versions of the storage indicators (white box), one for mobile and desktop. It also results in repetitive CSS -- lines 179-190 are the same as 255-267. I would try absolute positioning using only one of these elements to achieve the responsive layout.

    • Don't choose headings based on how large the text look in the design. h1 is a page-level heading and shouldn't be used for the number in 185 gb left. I would refactor to <p><span>185</span>gb left</p>

    • The background image gets cut off after 1440px. Change the background-size to 100% 50%

    • The buttons inside the first container should also be using the <button> tag. In a real app, they would likely be used for revealing a modal to upload different types of files.

    Hope this helps!

    Marked as helpful

    0
  • P
    Robert McGovern• 1,095

    @tarasis

    Submitted

    My last newbie project and still learning. Any feedback welcomed, particularly regards using img srcset

    I tried to do a more complex img tag for the fallback for picture/source but couldn't get it to work. This was what I was trying to do

    <img src="assets/logo-dark.svg" srcset="
        assets/image-hero-mobile.png 435w,
        assets/image-hero-tablet.png 695w,
        assets/image-hero-desktop.png 1046w" sizes="
              (max-width: 767px) 87vw,
              (max-width: 1439px) 83vw,
              (max-width: 2000px) 870px,
              1000px"
          class="">

    in the end I just went with a simpler one with the mobile image at 1x and 2x.

    skilled e-learning landing page Vanilla HTML & CSS

    2

    P
    Emmilie Estabillo• 5,540

    @emestabillo

    Posted

    Hi Robert, for your img fallback question, correct me if I'm wrong, but I think the <img srcset> isn't equipped to handle image changes. Quoting the spec definition on your article reference: "<img srcset="" sizes="" alt=""> is for serving differently-sized versions of the same image". The desktop and mobile versions look very different, and to me it looks like they fall under 'art direction'. Again, I'm taking a stab at the question and would also very much appreciate if anyone can validate.

    Project looks awesome as expected :-)

    3
  • Omer7_7• 100

    @omerkhan7210

    Submitted

    Can we change the color of the background image which was given as a svg format? because in the given design the background color was a little bit different, it got me a little bit confused.

    Order Summary Component Using Flexbox

    #cube-css#jquery#styled-components#webflow

    2

    P
    Emmilie Estabillo• 5,540

    @emestabillo

    Posted

    Hey @omerkhan7210, the trick here is to push the svg to the top of the page with background-position: top center and then giving the body background-color: var(--color-1). Other tips:

    • Use mobile-first when writing CSS. It's harder to scale down large elements to make them fit in smaller screens
    • It's ideal to keep all styles inside your css file instead of placing them inside html. It was not necessary in this case.
    • The document is missing an h1. Don't choose a heading tag based on how large the text appears in the design. Use classes to style the headings instead. Here's a resource
    • The link 'Change' should be an a or button tag since it is an interactive element
    • The woman image is not expanding to match the width of the card in medium sized screens. Use background-size: cover

    Hope this helps!

    Marked as helpful

    4
  • P
    Emmilie Estabillo• 5,540

    @emestabillo

    Posted

    @hebrerillo seems better, yes. It's best-practice, however, not to skip heading levels as stated in the resource I mentioned above. You can reuse the heading tag once it's been mentioned once, in order.

    For example, in the technologies page, you have h1> h4 > h3. The numbers are not in order. Ideally, it would be h1> h2 > h3. You can then reuse h2 and h3 elsewhere in the page as long as it has been mentioned in order once, ex. h1> h2 > h3 > h2 > h3 > h2. This semantic is common in designs that have multiple sections, since each of the sections will usually need the same headings.

    Another side note about the h1 on the homepage. I would keep the entire phrase 'SO, YOU WANT TO TRAVEL TO SPACE' in one h1 tag. I would write it as <h1>SO, YOU WANT TO TRAVEL TO <span>SPACE</span></h1>.

    Hope this helps!

    0
  • P
    Emmilie Estabillo• 5,540

    @emestabillo

    Posted

    Hey @hebrerillo, this looks visually solid, congrats!

    The only thing that I noticed is the use of semantics, especially headings, on each page. We're missing the h1s here and the heading levels doesn't seem to be in order (ex. h5 is mentioned first before h2). Use classes to style your headings (or anything for that matter), instead of looking at 'how large' they look on the design and assigning a heading tag. Here's a resource regarding the headings.

    Hope this helps!

    Marked as helpful

    1
  • P
    stephmunez• 435

    @stephmunez

    Submitted

    Hey everyone!

    I just completed another challenge. 🤘🏽

    In this challenge I decided to use Vanilla CSS for styling using BEM methodology just so I can practice CSS fundamentals. I also used Next.js as React framework.

    To generate dynamic routes/pages I used the built in getStaticProps() and getStaticPaths() functions and used the provided data.json file as basis.

    I also then used GSAP for animation as elements' animations are highly dependent on the changing of states rather than the rendering of each component.

    Feedback is always welcome. Please let me know of any issues you may find and/or how I can improve my code :)

    Happy coding!

    Planets fact site

    #gsap#next#react#bem

    1

    P
    Emmilie Estabillo• 5,540

    @emestabillo

    Posted

    Hey @stephjoseph, looks awesome! The only two things that I noticed is that

    1. There's 2 separate navs for mobile and desktop, which, I think can be accomplished by media queries instead, and
    2. The 3 tabs on the side should be buttons not divs, since they are interactive components

    Hope this helps!

    Marked as helpful

    1
  • James• 110

    @jte0711

    Submitted

    I tried to make it responsive according to the Figma file, but when I go for a smaller size for laptop size, it breaks (the picture especially). How do you manage the image used in the hero so that they can adjust according to the resizing?

    Meet Landing Page with ReactJs and TailwindCSS

    #react#tailwind-css#next

    1

    P
    Emmilie Estabillo• 5,540

    @emestabillo

    Posted

    Hey James, nice job! Have you tried object-fit: contain to control the stretch of the images?

    A few other things I noticed:

    1. The document is missing its top level heading. The large header text should be an h1
    2. Interactive elements should be a tags or buttons instead of divs
    3. I personally would increase the breakpoint for desktop. The 'What is it' button and the 4 images in the next section look like they're breaking layout at 1024px.
    4. The footer text should be left-aligned on desktop.

    Hope this helps!

    0
  • Petru Banceanu• 110

    @Petru14

    Submitted

    I have only one problem with this challenge, it's the mobile navigation, the value set for height isn't the best practice but I tried a few solutions but unsuccessfully. Any feedback it's more than welcome.

    Responsive layout using HTML / CSS.

    #accessibility#bem#contentful#lighthouse

    1

    P
    Emmilie Estabillo• 5,540

    @emestabillo

    Posted

    Hey Petru, good work here. For your question, I don't see a nav for this particular design, so I'm assuming the issue is setting an explicit height for the mobile view. If you remove the heights set for main_container and testimonials, the content will naturally stack, just like the mobile design.

    A few more thoughts:

    1. Use mobile-first for CSS. It's easier to scale up your contents than make large elements fit into smaller screens.
    2. I would remove the height and width styles for the html and body. You don't need them for this particular design. Let the content dictate the dimensions of the project.
    3. The layout looks really squished at 376px. Adjust the breakpoint so that it breaks into desktop view at an appropriate screen width, around 992px or above.
    4. main_container doesn't need a huge margin around it. Center the element with margin-inline: auto. It also doesn't need grid. It's children are div and section - both are display: block by default (will span the entire row) and will therefore stack.
    5. Add a README.md for us to get a peek at your process.

    There's a bit more to unpack here but I think more practice with flexbox and grid will help you improve on your next project. Hope this helps! :-)

    Marked as helpful

    0
  • Mark Angel Papio• 810

    @ExiviuZ

    Submitted

    I’m having a problem, there’s a line that seems to appear between the background color in the footer and the wavy line above it that seems to appear in some but not all browsers. Overall the challenge is easy to create, but as always takes a lot of time. Any feedback are welcome about the code, thank you.

    Huddle Landing Page with Curved Section

    #accessibility#sass/scss

    1

    P
    Emmilie Estabillo• 5,540

    @emestabillo

    Posted

    Hi Mark, looks good! Email validation works great. I might just play with the background position in this case, something like background-position: top, left bottom -1px;. Some buttons could've been <a> tags, but that's my opinion. Hope this helps!

    Marked as helpful

    1
  • P
    Emmilie Estabillo• 5,540

    @emestabillo

    Posted

    Hey @abhikr4545, looks good, congrats! Solving the issue with the background would involve removing overflow: hidden to the parent section, and then adding a higher z-index to the nav as follows:

    position: relative;
    z-index: 1;
    background-color: white;

    Just a couple more thoughts:

    • I suggest increasing the breakpoint because the layout looks tight at 768px. The hero paragraph is touching the phone image and the side by side columns have little breathing room. The text on the articles are also getting cut off and the images are stretched.
    • articles, footer list items, and social icons could be wrapped in <a> tags

    Hope this helps!

    Marked as helpful

    1
  • Anna Leigh• 5,135

    @brasspetals

    Submitted

    Hi, everyone! It has definitely been a minute, but after a very long coding break I'm back! 👋 I'm excited to be submitting my first premium challenge solution as a Pro member. Having the design files has been a massive time saver! 😄

    Since it's been so long, I decided to stick with plain, old CSS and JS for this project - bit of a "warm up". 😅

    While the project was pretty straightforward, I did run into a rather odd bug. In Safari, I noticed the podcast svgs were blurry. After some testing, it seems that svgs that have a filter and are also in an img tag are blurred. If the filtered svgs are inline, they display just fine. The only suggestions I found online were to add -webkit-transform: translate3d(0,0,0) or -webkit-filter: blur(0px);. Unfortunately, neither worked in this case.

    Since the grey filter on the podcast svgs in the starter code didn't quite match the color in the design files anyway, I ended up editing the svg files directly to remove the filter and manually change the color to match the design. However, if anyone has a simpler solution to the Safari svg blurring issue, please let me know! Have any of you ever encountered it before?

    Pod Request Access Landing Page - CSS Animations, JS

    6

    P
    Emmilie Estabillo• 5,540

    @emestabillo

    Posted

    Hey Anna! 👋🏼 Just wanted to say welcome back! Looks awesome as always and I love the subtle animations that just fits. The only suggestion I have is to center the content on much larger screens, say 1920x1080. Inspired me to do another project 🙂

    Marked as helpful

    2
  • 👾 Ekaterine Mitagvaria 👾• 7,640

    @catherineisonline

    Submitted

    Hello, Frontend Mentor community! This is my solution to the Base Apparel coming soon page.

    I appreciate all the feedback you left that helped me to improve this project. Due to the fact that I published this project very long ago, I am no longer updating it and changing its status to Public Archive on my Github.

    You are free to download or use the code for reference in your projects, but I no longer update it or accept any feedback.

    Thank you

    Base Apparel coming soon page

    8

    P
    Emmilie Estabillo• 5,540

    @emestabillo

    Posted

    Hey @catherineisonline, good job at staying true to the design. Just have a few thoughts:

    1. I would try increasing the breakpoint to 900px + or so. Still looks a little tight at 801px and the text is almost touching the gutter.
    2. On wider widths, the logo starts disappearing. Use an img tag or nest the svg in the header. The logo is such an important part of a page and shouldn't be used as a decorative background image.
    3. The error and success messages flashes a little too quickly and should probably stay until the user edits or submits again.
    4. The form submit is an interactive element, meaning it implies an action from the user, and therefore should be a button instead of a div. Great job on the hover, I'd add a transition to make it smoother.
    5. Minor: looks like input should have a transparent background and label be desaturated red with some opacity.
    6. I highly recommend going mobile-first. It's easier to make elements larger than to have them scale down to fit smaller screens. It also often results to less code.

    Hope this helps :-)

    Marked as helpful

    1
  • P
    Emmilie Estabillo• 5,540

    @emestabillo

    Posted

    Hey @Skidragon, looks cool! Interesting take on the portfolio project. Just have a couple of thoughts:

    1. I would apply a max-width to the header so that it doesn't span the entire screen when looking at the project on wide screens. Looks off while the main content terminates at 80ch.
    2. In the portfolio section, I think it's better to put the latest (and presumably, bigger and more complicated) projects on top of the list since those are projects that will likely get the user's attention first. Gives us an idea on where you're at with your skills currently. Just my two cents :-)

    Marked as helpful

    1
  • darryncodes• 6,410

    @darryncodes

    Submitted

    Hi everyone 👋

    I upped the ante again on this one and really had to persevere to improve my knowledge and experience with JavaScript.

    I'm really happy with the result and the styling. I also really appreciate the ui design on this challenge, it looks great 👏

    Any feedback that could help me to improve would be very welcome, with a focus on the following:

    • i'd like to learn a more elegant way to remove special characters on the inputs (perhaps some thoughts on RegEx)
    • is there a way to avoid leading zero's, for example at the moment you could enter 000100 into the inputs
    • finally I chose <button> for the tip inputs, is there some more suitable/accessible mark up

    Until next time, happy coding 🤙

    Tip calculator app - HTML, SCSS, JS, FlexBox, Grid, mobile-first & BEM

    #accessibility#bem#sass/scss

    3

    P
    Emmilie Estabillo• 5,540

    @emestabillo

    Posted

    Hi @darryncodes, looks pretty good! I personally might try radios for the tips, but that's just my preference.

    Here's a short article on how to deal with the leading zeros.

    Two things I observed is that the grand total for each person is not taking the tip amount, and any bill that has less than $100 would result to NaN . I haven't done this challenge so I don't know if that is intended behavior. There's an error on the console from the regex that might be causing it.

    Hope this helps!

    Marked as helpful

    1
  • Vueko• 160

    @Vueko1

    Submitted

    Hello ! Could you please take a look at my code to make sure there are no mistakes ? Also I would like to know how to control the color and ratio of svg images you provided using css ( I found filter property but it turned out to be troublesome for me :P )

    Advice API using SASS and BEM

    #bem#sass/scss#fetch

    2

    P
    Emmilie Estabillo• 5,540

    @emestabillo

    Posted

    Hi @Vueko1, looks good. Can't tell if there's an issue with the svgs because it seems ok! Just a few thoughts:

    1. Use rem in place of px
    2. .dice-frame requires user interaction, and thus should be an interactive element button in this case, rather than a div.
    3. I think .wrapper can do away with all the flex properties. Its contents would still look centered and would likely just need padding in between. Less code, if you will.
    4. Hover on the dice could use a smooth transition

    Hope this helps!

    0
  • P
    Katrien S• 1,070

    @graficdoctor

    Submitted

    I was struggling adding the header- and footer-images in my css-file instead of overcrowding the html-file. I looked into @dmitrymitenkoff solution for a suitable approach. I somehow ended up locking in the width of my image-container. I probably need to refactor the code to find out why. That has to wait. Happy I finished this. Learning to code while working is not that obvious.

    Responsive, mobile-first, flex & grid

    1

    P
    Emmilie Estabillo• 5,540

    @emestabillo

    Posted

    Hi Katrien, great job! Those images are indeed very tricky. For the header images in smaller widths, I would try adding something like min-height: 15rem to .tablet-hero so that it doesn't cut out around 400px. Another approach is to increase the height and set the background size as contain. And other stuff - it'd be nice to have hover transitions on the buttons. Hope this helps!

    Marked as helpful

    0
  • Volodymyr Balashov• 510

    @volod-one

    Submitted

    Hey there! Here I have one more solution. Well, I don't really like to make this accurate positioning for elements cuz it difficult to make really responsive. Maybe pixel-perfect is cool thing but I don't think it is reasonable. Anyways challenge is done.

    Let me know how I can impove my solution. Don't be afrait to leave your comment here and see you next time.

    Equalizer landing page

    #bem#sass/scss

    3

    P
    Emmilie Estabillo• 5,540

    @emestabillo

    Posted

    The beauty of webdev is there is more than one way to do things, so it's not about being wrong or right :-) Those are merely suggestions you may or may not implement. Keeping code maintainable is very important, and senior devs have told me to try and keep things simple. The more divs you use, the more you have to maintain. It really depends on the design and the scope of the given project.

    0