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
OverviewSolutions31Comments2258

All comments

  • P
    Sydโ€ข 20

    @SydBrain

    Submitted

    Hello, this is my first time working on "real projects" after enduring a useless 12 month Front End Face-To-Face Course that didn't prepare me for the job.

    Here's a few questions I'd like to ask to the community:

    • Am I using HTML5 elements well?
    • What's a better way to organize SASS foldering? Did I overdevelop the page by choosing to use SASS?
    • I'm having trouble with making optimal responsive layouts, I find myself constantly tweaking dimensions and positioning. Could you point me to some resources that could make me improve?
    • I reeeeally don't like using absolute positioning in my projects. Is there a better way to layout decorative and/or overlapping elements?

    Thanks in advance!

    Mobile First Workit Landing Page using HTML & SCSS

    1

    P
    ApplePieGiraffeโ€ข 30,425

    @ApplePieGiraffe

    Posted

    Hey, Syd! ๐Ÿ‘‹

    Congratulations on completing your first Frontend Mentor challenge! ๐ŸŽ‰ Nice job on this one! ๐Ÿ‘

    A few things you can do to improve your HTML would be,

    • Turning the features section into a list using the ul and li tags (since that is a list of features).
    • I don't think the word "tailored" in the page heading needs to be a link, as it probably only has that underline for decoration.
    • Not adding any alt text to images you don't want screen readers to notice and read (such as decorative images, which aren't important to the content of the page).
    • For the above reason, it might be worth removing the alt text on the social media icons in the footer of the page and adding an aria-label to the links that wrap them instead.

    I don't think using Sass for this project was overkill. Sass has lots of great features that are easy to get used to and using it here is great practice for larger projects where it comes in very handy. ๐Ÿ˜‰

    Making layouts responsive and using absolute positioning are two things that become much easier to do (and think about in general) with practice! ๐Ÿ˜‰ Something that really helped me become better at the two is inspecting other websites and reading other people's code to see how they did things. Use the dev tools to inspect and poke around professional websites or browse this platform and the read the code of high quality solutionsโ€”this will show you ways of doing things that you might not have thought of before and give you a chance to explore new ideas. ๐Ÿ™‚

    Hope this helps. ๐Ÿ˜Š

    Keep coding (and happy coding, too)! ๐Ÿ˜

    Marked as helpful

    1
  • Cristinaโ€ข 370

    @cr1deg0

    Submitted

    Hi,

    Can anyone provide guidance on how to control the tab navigation inside the lightbox, to make the focus move to the "Close" lightbox button from the tumbnails?

    Thanks, Cristina

    E-commerce product page with React, Typescript and Sass

    #react#sass/scss#typescript#vite#react-testing-library

    1

    P
    ApplePieGiraffeโ€ข 30,425

    @ApplePieGiraffe

    Posted

    Hi, Cristina! ๐Ÿ‘‹

    Great job on this challenge! ๐Ÿ‘ Your solution looks good and works well. ๐Ÿ‘

    It sounds like you might want to look into using a focus trap for when the modal is open (to "trap" the user focus to the interactive elements in the modal). I'm not very familiar with building one from scratch, but since you are using React you can probably find a package to help you with this or with building modals in general. One package for building modals with React I'd recommend is react-a11y-dialog since it has a great focus on accessibility (and it includes the focus trap in its functionality).

    Hope that helps a bit. ๐Ÿ™‚

    Keep coding (and happy coding, too)! ๐Ÿ˜

    Marked as helpful

    0
  • P
    Katrien Sโ€ข 860

    @graficdoctor

    Submitted

    I'm not really a newbie anymore, but I didn't code for quite some time. I selected this exercise as a warming up. By pushing it to the website, it made me want to properly finish the exercise. As I did. Feel free to comment if you caught me doing odd things.

    Product Preview Card Component

    1

    P
    ApplePieGiraffeโ€ข 30,425

    @ApplePieGiraffe

    Posted

    Hello, Katrien S! ๐Ÿ‘‹

    Just wanted to say hi as I remember you from a while ago. ๐Ÿ™‚ Nice to see you back and coding again!

    As far as your solution goes, everything looks great! ๐Ÿ‘Œ

    Happy coding! ๐Ÿ˜

    1
  • Antoni Siekaล„skiโ€ข 100

    @sutaC

    Submitted

    • I had some difficulties with positioning the images. In the end I did it the hard way (translate/pos absolute). I'm curious about a better solution, but I couldn't find anything more sensible.

    • Additionally, is there any better way to do mobile layout?

    FAQ accordion card - SvelteKit & CSS

    #svelte

    1

    P
    ApplePieGiraffeโ€ข 30,425

    @ApplePieGiraffe

    Posted

    Hey there, Antoni Siekaล„ski! ๐Ÿ‘‹

    Nice job on this challenge! ๐Ÿ‘

    The images in this challenge can be tricky to position!

    For the images that don't overflow their container, I would suggest adding them using CSS background images. You can add both of them to the container of the component and just be sure to create space for them in the mobile and desktop views.

    You can use absolute positioning for the cube (as you have done), but I would position it relative to the container of the component, as that is more robust than positioning it relative to the body (in case the size of the component and the body change in different ways).

    Besides that, it would be worth looking into making the accordions in your solution accessible. Currently, they cannot be used with a keyboard, and their markup isn't very semantic. Using button elements or the native details and summary elements instead should help you take care of those issues and make your solution more accessible. ๐Ÿ˜‰

    Hope this helps. ๐Ÿ˜Š

    Keep coding (and happy coding, too)! ๐Ÿ˜

    Marked as helpful

    0
  • Bรกrbara Damascenoโ€ข 220

    @barbaradamasdev

    Submitted

    Hi. I've some questions about the best way to code. I've done the challenge, but I feel like I'm not doing in the best way. For example: the reset in "*" and "body":

    I used this, and worked:

    • { margin: 0; padding: 0; box-sizing: border-box; }

    In the body I put this: height: 100vh;

    Worked, but is the better way to do this?

    Other question is about centralize the content. In all my projects I put the content box in position absolute, but when we change to mobile version I needed to change a lot of things. In this challenge I just needed to change "top", but I was in doubt if was the better way to do.

    Please give me your feedback, it'll help a lot. Thank! :)

    Huddle landing page with single introductory section

    1

    P
    ApplePieGiraffeโ€ข 30,425

    @ApplePieGiraffe

    Posted

    Hello, Bรกrbara Damasceno! ๐Ÿ‘‹

    Nice effort on this challenge! ๐Ÿ‘

    There is nothing wrong with using the styles you referenced to reset your CSS. I use those styles all of the time in my projects, too. You may want to look into using a more complete CSS reset for your next project. Here's a decent article on that if you're interested. ๐Ÿ™‚

    I'd also suggest looking into making your solution more responsive. Currently, things look good in the desktop and mobile layouts, but not everything is visible in-between (meaning users may have to horizontally scroll to see all of the content of the page). Using tools like flexbox or CSS grid over absolute positioning will help you with this. You can center things will flexbox pretty easily with the following styles:

    display: flex;
align-items: center;
justify-content: center;

    If youโ€™d like to learn more about how to make your site responsive, check out this helpful course.

    Hope you find these suggestions helpful. ๐Ÿ˜Š

    Keep coding (and happy coding, too)! ๐Ÿ˜

    Marked as helpful

    1
  • Bรกrbara Damascenoโ€ข 220

    @barbaradamasdev

    Submitted

    Hi!

    In this challenge I was thinking if I use flexbox too much (:D). I was thinking that sometimes I can use margin to give the space between things, but use "gap" looks like work better.

    Is it a "problem" or maybe can be considered a bad code if I use this a lot? Is better just use margin for exemple even though I use just margin-top and look ugly when you inspect the element?

    Other question about a clean code. In the line 95 (style.css) I prefered to use the code just inline, for some cases is ok? Or it's considered a bad practice?

    Please give me your feedback, it'll help a lot. Thank! :)

    Single price grid component

    1

    P
    ApplePieGiraffeโ€ข 30,425

    @ApplePieGiraffe

    Posted

    Hi there, Bรกrbara Damasceno! ๐Ÿ‘‹

    Nice job on this challenge! ๐Ÿ‘

    Haha I don't think you can use too much flexbox unless you are using it the wrong way or there is another tool that is better for the job. ๐Ÿ˜„ I definitely prefer using flexbox gap over margin in most cases.

    Related to your questions about your styles, I would recommend looking into using a code formatter such as Prettier. It'll help you format your styles nicely at the click of a button and you won't have to spend time doing that yourself. ๐Ÿ˜‰

    Also, you may want to wrap the content of your page in a main element as that is considered a best practice and will help to clear a lot of the issues in your solution report.

    Hope you find this helpful. ๐Ÿ˜Š

    Keep coding (and happy coding, too)! ๐Ÿ˜

    Marked as helpful

    2
  • xyzeezโ€ข 300

    @xyzeez

    Submitted

    Hello There! ๐Ÿ‘‹๐Ÿฝ

    Here is my solution for this challenge!

    Built Usingโš’๏ธ :

    • Flexbox
    • SASS/SCSS
    • BEM
    • Animation
    • Custom Scrolltab

    Upgrade ๐Ÿš€ :

    • Skip-To-Content button on the header (visible on focus)

    Feedbacks on how I can improve my code would be highly appreciated! ๐Ÿ™๐Ÿฝ

    Thank You, and Keep coding! ๐Ÿ‘จ๐Ÿฝโ€๐Ÿ’ป

    Responsive Fylo-landing-page-with-two-column-layout [BEM + SASS]

    #accessibility#animation#bem#sass/scss

    1

    P
    ApplePieGiraffeโ€ข 30,425

    @ApplePieGiraffe

    Posted

    Greetings, xyzeez! ๐Ÿ‘‹

    Awesome job on this challenge! ๐Ÿ‘ Your solution looks great, is responsive, and has great semantics and accessibility! ๐Ÿ‘

    I don't have much to suggest to you except to keep up this great work! ๐Ÿ˜‰

    Keep coding (and happy coding, too)! ๐Ÿ˜

    1
  • Lesley Wesleyโ€ข 295

    @LesleyWesley

    Submitted

    Hi guys!

    This was my first time working with radio buttons in any substantial way, and I tried to make the whole thing as accessible as I knew how, but let me know if there's any way I could improve it!

    Also, I added an error message if the user tries to submit the form before choosing a rating, because I felt like it needed it. The user is also able to choose the rating using the UI or number keys and the "Enter" key.

    As usual, any feedback is welcome! :)

    Interactive Rating Component

    #accessibility

    1

    P
    ApplePieGiraffeโ€ข 30,425

    @ApplePieGiraffe

    Posted

    Hi there, Lesley Wesley! ๐Ÿ‘‹

    Excellent work on this challenge! ๐Ÿ‘ Your solution looks great and the form works very well! ๐Ÿ™Œ Great job thinking about the functionality of the form and adding an extra validation error message. ๐Ÿ‘

    One thing is that I wouldn't add any alt text to the icons in this component since they are mostly there for design and we don't really want them to be noticed and read by screen readers.

    Also, make to sure validate the form when the user hits the 'Enter' key since currently the thank you screen shows regardless of whether an option has been selected yet. ๐Ÿ˜‰

    Hope you find this helpful. ๐Ÿ˜Š

    Keep coding (and happy coding, too)! ๐Ÿ˜

    Marked as helpful

    0
  • P
    Clem FRontendโ€ข 20

    @vivitare

    Submitted

    Hello everyone ๐Ÿ‘จโ€๐Ÿ’ป

    This is my first solution on Frontend Mentor ๐ŸŽ‰

    ๐Ÿ› ๏ธ Build with :

    • React JS

    ๐Ÿ“ƒ My questions :

    • It's a good way to split CSS into multiple files like I did or it's better to put all the css in one file ?
    • It's a good way to validate the form like I did ?
    • What can I add to the index.html ?

    Don't hesitate to tell me what can I improve (and i'm sure there are a lot of thing to say ๐Ÿ™„), it will be very useful for me !

    Thanks ! ๐Ÿ‘‹

    Interactive Card Details Form

    #react

    2

    P
    ApplePieGiraffeโ€ข 30,425

    @ApplePieGiraffe

    Posted

    Hey, Clem FRontend! ๐Ÿ‘‹

    Your solution looks great! ๐Ÿ‘ Good job with the semantics, accessibility, and functionality of the form, as well! ๐Ÿ‘

    I wouldn't make the credit card number the h1 of the page since it isn't a very meaningful heading and doesn't describe the content of the page to users. Instead, given that the design of this page doesn't have a visible heading, you can add an invisible heading for semantics (as every page should have at an h1) and screen readers. Check out this helpful read on the topic.

    And one minor thing in terms of designโ€”it would be good to add a max width to the form in the tablet view so that its controls don't become too wide when the layout first changes from desktop to tablet.

    Also, as @eng-milan mentioned, splitting your CSS into separate files is a good practice moving forward since it makes things easier to organize and work with (especially in large projects). ๐Ÿ˜‰

    Hope you find this helpful. ๐Ÿ˜Š

    Keep coding (and happy coding, too)! ๐Ÿ˜

    Marked as helpful

    1
  • visualdennisโ€ข 7,505

    @visualdenniss

    Submitted

    In this challenge, i've tried to build it as dynamic as possible. JSON Data is hosted online for free, which includes links to image assets that are hosted on Cloudinary CDN Platform. In my app, i'm fetching the data using axios library. Finally, i've added some little animation using framer-motion. Hope you guys like my solution! :)

    Responsive Notifications in React + Cloudinary + Animation + Axios

    #animation#fetch#framer-motion#react#axios

    1

    P
    ApplePieGiraffeโ€ข 30,425

    @ApplePieGiraffe

    Posted

    Greetings, visualdennis! ๐Ÿ‘‹

    Awesome job on this challenge! ๐Ÿ‘ Your solution looks great and I like the onload animation that you added to the notifications! ๐Ÿ‘ It's great that you used a variety of tools to create your solution, too. ๐Ÿ™Œ

    Small noteโ€”all of the bolded words in the notifications should be links. Even though they do not actually go anywhere in this challenge, in a real-life application they would most likely navigate the user to another page, so using link tags for those elements would be best for semantics and accessibility (especially considering you have already given them a hover state). ๐Ÿ˜‰

    I also noticed that you used px for the values of many things such as font-size, margin, and padding. It is a best practice to use a responsive unit such as em or rem instead because those units are based on the font-size of the document and allow users to increase/decrease the size of text (and the overall design, if you use those units correctly) by changing the font-size of their browser (which is important for accessibility reasons). If you'd like to learn more about those units in CSS and how all of this works, check out this helpful video.

    Hope this helps. ๐Ÿ˜Š

    Keep coding (and happy coding, too)! ๐Ÿ˜

    Marked as helpful

    1
  • P
    ApplePieGiraffeโ€ข 30,425

    @ApplePieGiraffe

    Posted

    Greetings, Melvin Aguilar ๐Ÿง‘๐Ÿปโ€๐Ÿ’ป! ๐Ÿ‘‹

    Just wanted to drop in and say amazing work on yet another challenge! ๐Ÿ‘ The card component looks great and you've paid great attention to detail in making your solution accessible! ๐Ÿ‘

    I also love the little attribution that you can click on in the corner of the page! ๐Ÿ˜Š

    Keep coding, my friend (and happy coding, too)! ๐Ÿ˜

    2
  • P
    Adrianoโ€ข 33,860

    @AdrianoEscarabote

    Submitted

    ๐Ÿ‘จโ€๐Ÿ’ป Hello everyone.

    It is with great satisfaction that I express my gratitude for having completed this project. It was a very comprehensive and successful initiative, which involved the creation of a four-page website and represented an excellent test of my skills in building responsive layouts. The site in question is a complete marketing tool, which has personalized form validation.

    I have a strong desire to start larger projects, perhaps exploring different technologies.

    Any feedback is extremely important

    Thanks! ๐Ÿ˜Š

    PayAPI multipage website w/ (Typescript + React + StyledComponents) ๐Ÿ‘พ

    #lighthouse#react#styled-components#typescript#accessibility

    1

    P
    ApplePieGiraffeโ€ข 30,425

    @ApplePieGiraffe

    Posted

    Hello there, Adriano! ๐Ÿ‘‹

    Excellent work on this challenge! ๐Ÿ‘ You've paid great attention to detail and your solution is clean and responsive! ๐Ÿ‘

    I love that you also wrote a great, informative README. ๐Ÿ™Œ

    Small tipโ€”you don't need to add aria-hidden="true" to images that have no or an empty alt text, since that will already cause them to be ignored by screen readers. ๐Ÿ˜‰

    And you may want to disable the default behavior of the form that collects the user's email in the hero section of the home page, since the submit button inside of it currently refreshes the page when clicked (skipping any validation on the form).

    Keep coding, my friend (and happy coding, too)! ๐Ÿ˜„

    Marked as helpful

    1
  • Myro Joy Leeโ€ข 120

    @myrojoylee

    Submitted

    After a month learning the basics of JavaScript, I have come back to see if I still remember my HTML/CSS for this :).

    Any and all feedback is appreciated. Thank you.

    Huddle Landing Project - vanilla HTML/CSS

    1

    P
    ApplePieGiraffeโ€ข 30,425

    @ApplePieGiraffe

    Posted

    Hey there, Myro Joy Lee! ๐Ÿ‘‹

    Great work on this challenge! ๐Ÿ‘ Your solution looks good! ๐Ÿ‘

    One or two small suggestions I have are,

    • Making sure the content of the page is centered at large screen widths (currently, it sticks to the left side of the page).
    • Turning the social media icons at the bottom of the page into links (and either including an aria-label or some invisible text inside the link for screen readers).

    Hope this helps. ๐Ÿ˜Š

    Keep coding (and happy coding, too)! ๐Ÿ˜

    Marked as helpful

    0
  • P
    Ahmed Abdelaalโ€ข 220

    @shrki416

    Submitted

    Hi there ๐Ÿ‘‹, Iโ€™m Ahmed and this is my solution for this challenge.

    Any suggestions on how to improve this would be grand.

    I have not included any animations into this app. I wasn't sure how to incorporate animation into this application. Any suggestions or resources would be fantastic.

    Thank you so much in advance. ๐Ÿ˜Š

    Interactive Rating Component

    1

    P
    ApplePieGiraffeโ€ข 30,425

    @ApplePieGiraffe

    Posted

    Hello, Ahmed Abdelaal! ๐Ÿ‘‹

    Great job on this challenge! ๐Ÿ‘ Your solution looks good and works well! ๐Ÿ‘

    Adding animations to this challenge isn't necessary but it certainly does spice things up a bit! If you're just getting started with animations, I would suggest digging into CSS transitions and the animation property. Here's a nice article from web.dev to help you get started. ๐Ÿ™‚

    Also, check out Animate.cssโ€”it is a very nice library for adding some simple but eye-catching animations using CSS classes. It is quite easy to use and provides lots of fun!

    Hope this helps. ๐Ÿ˜Š

    Keep coding (and happy coding, too)! ๐Ÿ˜

    Marked as helpful

    1
  • P
    Abilio de Assisโ€ข 40

    @abilioassis

    Submitted

    I invested a lot of time in solving this challenge.

    And the presented solution is the desktop version only.

    My knowledge of image manipulation and absolute positioning was very poor. I learned a lot from this challenge.

    My doubts are:

    • I converted the .svg images to .png. Is there a problem with that?
    • I've used and abused relative/absolute positioning. I couldn't fit the images into the normal flow of the page. I took the coordinates from the Figma file and positioned the images in the code using x/y coordinates. This is causing me problems when making the mobile version. Any suggestions on how I could make this positioning of the images better?

    Equalizer landing page (for now desktop version only -- no frameworks)

    1

    P
    ApplePieGiraffeโ€ข 30,425

    @ApplePieGiraffe

    Posted

    Hello, Abilio de Assis! ๐Ÿ‘‹

    Nice effort on this challenge! ๐Ÿ‘

    Your site currently isn't responsive. The desktop view of the site is usable, but I'm afraid the layout is quite broken in the mobile/tablet views. I would suggest choosing a simpler challenge and focusing on learning responsive design before tackling a larger challenge such as this. Here's a great resource from web.dev to help you get started with responsive web design.

    As for positioning those tricky elements that overflow their containers, it's important to make sure to understand absolute positioning and the concept of the offset parent (the element that an absolutely positioned element is positioned relative to) well before attempting to tackle a layout like this. You may have to use media queries to make several adjustments to the layout to ensure that it looks good on all screen sizes. ๐Ÿ˜‰

    Hope you find this helpful. ๐Ÿ˜Š

    Keep coding (and happy coding, too)! ๐Ÿ˜

    Marked as helpful

    0
  • P
    Jeanco Volfeโ€ข 460

    @engsofjvolfe

    Submitted

    Struggling a lot with positioning, i don't know how to make a consistent container that puts all my elements together without "distorting" them and keeping the space they have while using responsiveness behavior. I need any information to help me with that .

    For example, how should i put the padding? For body or for the container-body? ?r i should put on each individual element (look to my footer and header on this project)? If i define my padding on body, sometimes my elements with defined margins or widths or paddings, like the .cards, overflow the body or it's container...

    I wished i could have a standard way to write my initial setup on css, and guarantee that all the elements will fit inside it or it's containers and that the container will grow with my elements all together.(BTW i learn this languages by myself so its hard to find consistent content that teach systematically to achieve autonomy).

    Even if you guys could teach me just a way, an approach, i will be tremendously thankfull

    About those images "floating", how can i put them (any kind of image that overflows the body" on screen without the odd behavior while responsiveness is used. Please, anyone help me.

    Well, i will keep trying. See you around.. Thx so much

    Skilled elearning landing page

    #accessibility

    1

    P
    ApplePieGiraffeโ€ข 30,425

    @ApplePieGiraffe

    Posted

    Greetings, Jeanco Volfe! ๐Ÿ‘‹

    Well done on this challenge! ๐Ÿ‘

    Building responsive layouts with clean code can be tricky to figure out when you are first starting. ๐Ÿ˜… You will learn most by building lots of components/sites and trying out different approaches, but one or two helpful things for you to keep in mind are,

    • If you want to add space between an element and its children, use padding on the parent element. This is better than adding margin to each child because you only have to specify the padding in one place and won't have to worry about margin collapsing (which can be confusing).
    • If you want to add space between items in a row or column, use gap. Once again, you'll only have to specify this in one place and the browser will take care of adding space between items if/when they wrap.
    • If you can use flexbox to center things/add space between items, I would do so instead of using margin (once again, mostly because of margin collapsing). And also because I find flexbox much easier to understand and work with.
    • Margin may be helpful when you need to add different amounts of space between items in a column/row (since using gap would set the same amount of space between everything). I would choose a direction to apply margin in and stick to that for all of the elements in that column/row (e.g., use margin-bottom on each element that needs space between itself and the next item, not use margin-top on some elements, margin-bottom on others, and both on some, etc.).

    I would advise going to several well-built sites (or even high-quality solutions that you find on the platform) and inspecting their layout and structure with the dev tools. You will be able to see where their developers have decided to use containers for things, apply margin or padding, lay out elements in a certain way, etc.

    Ahmad Shaheed also has several great articles on creating layouts with CSS that you may find worthwhile reading. Pay attention to the examples and how a pro web developer thinks when approaching a layout.

    The Art of Building Real-life Components

    Inside the mind of a frontend developer: Article layout

    The Guide To Responsive Design In 2023 and Beyond

    Hope you find this helpful. ๐Ÿ˜Š

    Keep coding (and happy coding, too)! ๐Ÿ˜

    Marked as helpful

    1
  • P
    ApplePieGiraffeโ€ข 30,425

    @ApplePieGiraffe

    Posted

    Hi there, Sebastian! ๐Ÿ‘‹

    Nice work on this challenge! ๐Ÿ™Œ Your solution looks good and is responsive! ๐Ÿ‘

    A few suggestions I have for you are,

    • Using ul and li elements for the list of statistics at the bottom of the card component to make your HTML more semantic.
    • Not using h2 tags for the numbers in the statistics section, since even though they have a larger font-size and heavier font-weight, they aren't headings for anything. A simple span element should work for styling them. ๐Ÿ˜‰
    • You don't need to add aria-hidden="true" to an image if you leave it's alt text empty, as that will already cause screen readers to ignore that image.
    • You can use the picture element to switch between the mobile and desktop versions of the image in the card component. You can also just specify the image in one place and reverse the order of the image and the rest of the content of the card component by placing both of them in a flex container and using a media query to change the flex-direction property between mobile and desktop views. ๐Ÿ˜‰ If you'd like to learn more about the picture element and how to use it, check out this article from MDN. ๐Ÿ™‚

    Hope this helps. ๐Ÿ˜Š

    Keep coding (and happy coding, too)! ๐Ÿ˜

    Marked as helpful

    0
  • Yeison Hernandezโ€ข 10

    @Yeison2017

    Submitted

    I wanted to implement the BEM methodology, but I'm not sure if I applied it correctly?

    Is there a better way or methodology in naming the variables I use in :root?

    QR code component

    2

    P
    ApplePieGiraffeโ€ข 30,425

    @ApplePieGiraffe

    Posted

    Hi, Yeison Hernandez! ๐Ÿ‘‹

    Congratulations on completing your first Frontend Mentor challenge! ๐ŸŽ‰ Well done on this one! ๐Ÿ‘

    Your BEM looks good! ๐Ÿ‘ One small suggestion I have is to set width: 100% on the card component instead of giving it a fixed width. Then, you can set a max-width of a specific value (like max-width: 19.5rem) to ensure that the card component doesn't become too wide. This will ensure that the width of the card can shrink in the space around it ever gets too small. ๐Ÿ™‚

    As for naming things, it's really up to you and the people you are working with for what names you choose for things. The main thing to keep in mind is to find and use names that are easy to read and understand so that your code will be easy to read and understand, as well. The names you've chosen in your project look good to me! ๐Ÿ˜‰

    Hope you find this helpful. ๐Ÿ˜Š

    Keep coding (and happy coding, too)! ๐Ÿ˜

    Marked as helpful

    1
  • Alberth Ruadoโ€ข 580

    @alberthruado

    Submitted

    Profile Card Component Challenge Code Solution I'll update it later because there are so many things that need updating, including the responsiveness.

    My experience while building this challenge was that it was responsive when you ran it into the Mozilla browser developer's live server, but when you ran it into another browser, the design was broken.

    Can I get some feedback on how to make the background bubble responsive?

    Profile Card Component

    1

    P
    ApplePieGiraffeโ€ข 30,425

    @ApplePieGiraffe

    Posted

    Hi, Alberth Ruado! ๐Ÿ‘‹

    Well done on this challenge! ๐Ÿ‘

    The background circles in this challenge can be tricky to position! ๐Ÿ˜… I think using CSS background images is a good method for adding them to the page. That's what I did in my solution to this challenge, I experimented with using percentages and viewport units to position the circles so that they more or less remain in their place when the screen is resized.

    If you'd like to learn more about CSS background images and how to use them, this article from MDN is a good place to start.

    Besides that, a tip I have for you to make your HTML more semantic is to use a ul element for the list of statistics at the bottom of the page. Also, even though the statistic figures are larger in size and have a heavier font weight, they are not actually headings, so there is no need to use a heading tag for them. ๐Ÿ˜‰

    Hope you find these tips helpful. ๐Ÿ˜Š

    Keep coding (and happy coding, too)! ๐Ÿ˜

    Marked as helpful

    0
  • Angga Anugrah Pratamaโ€ข 60

    @anggaanugrah

    Submitted

    Hello guys ๐Ÿ‘‹, here is my solution for the Interactive card details form Challenge.

    I replaced some of the validations and views of the challenge examples given, because I think there are some things that are better replaced, so that some functions can run more effectively ๐Ÿ˜„.

    Let me know if you like it or have better ideas for me to write much better & efficient code . Please help me to improve my skills by giving your feedback. Thanks ๐Ÿ™๐Ÿ™Œ

    Interactive Credit Card with Form Validation (HTML, Sass, Javascipt)

    #sass/scss

    1

    P
    ApplePieGiraffeโ€ข 30,425

    @ApplePieGiraffe

    Posted

    Greetings, Angga Anugrah Pratama! ๐Ÿ‘‹

    Well done on this challenge! ๐Ÿ‘ The form in your solution works great! ๐Ÿ™Œ

    One thing I'd like to suggest is to take another look at the responsiveness of your site. Currently, things look good in the mobile and desktop views, but much of the content overlaps each other in the tablet view, making elements difficult to differentiate and text hard to read. You might want to switch to a mobile-friendly layout sooner or decrease the size of the credit card illustration so that the form can be clearly seen. ๐Ÿ˜‰

    Hope you find this helpful. ๐Ÿ˜Š

    Keep coding (and happy coding, too)! ๐Ÿ˜

    0
  • Orton Brightโ€ข 180

    @ortonb110

    Submitted

    Hi there ๐Ÿ‘‹, Iโ€™m Orton and this is my solution for this challenge.

    Built With:

    TailwindCSS npm - prettier React.js. Any suggestions on how I can improve and reduce code are welcomed!

    Thank you. ๐Ÿ˜ŠโœŒ๏ธ

    Intro Section with a Dropdown Navigation

    #react#tailwind-css

    1

    P
    ApplePieGiraffeโ€ข 30,425

    @ApplePieGiraffe

    Posted

    Hi there, Orton Bright! ๐Ÿ‘‹

    Great effort on this challenge! ๐Ÿ‘ I really like the transition you added to the mobile menu! ๐Ÿ˜Š

    A few things I'd like to suggest are,

    • Making sure all of the content is centered in the mobile/tablet views, as the illustration and paragraph below the heading are sticking to the left side of the page.
    • Making sure that all the direct children of ul elements are li elements (that will help clear up a few errors on your solution report).
    • You do not need to add aria-hidden="true" to an image if you set its alt text to an empty string, as that will cause it to be ignored by assistive technology, anyway. ๐Ÿ˜‰

    Hope you find these tips helpful. ๐Ÿ˜Š

    Keep coding (and happy coding, too)! ๐Ÿ˜

    0
  • P
    ApplePieGiraffeโ€ข 30,425

    @ApplePieGiraffe

    Posted

    Hello there, metamusk! ๐Ÿ‘‹

    Nice work on this challenge! ๐Ÿ™Œ The card component looks great! ๐Ÿ‘

    Here are a couple of things I'd like to suggest,

    • Writing some more meaningful alt text for the image in the card component, as "Illustration" doesn't really describe the purpose or content of the image very well.
    • Labeling the button that opens up the social media share menu in some way, either by using an aria-label or by including some invisible text inside the button for screen readers to read. This is important because sighted users can easily tell what the button does by looking at the icon inside of it, but users navigating the web using a screen reader currently won't have any information that tells them what the button does. ๐Ÿ˜‰

    Hope you find this helpful. ๐Ÿ˜Š

    Keep coding (and happy coding, too)! ๐Ÿ˜

    Marked as helpful

    1
  • P
    ใƒใƒฌใƒณใ‚ฟใ‚คใƒณ ๐Ÿ˜ˆโ€ข 64,290

    @vcarames

    Submitted

    Straight forward challenge and a great way to practice dealing with elements that have the same properties.

    The majority of the layout was built ๐Ÿ›  (mobile first) using,

     display: flex;
  flex-direction: column;
  align-items: center;

    All feedback is greatly appreciated! โ™ฅ๏ธ

    Clipboard [Landing Page]

    1

    P
    ApplePieGiraffeโ€ข 30,425

    @ApplePieGiraffe

    Posted

    Hi, ใƒใƒฌใƒณใ‚ฟใ‚คใƒณ ๐Ÿ˜ˆ! ๐Ÿ‘‹

    Awesome work on this challenge! ๐Ÿ‘

    Your solution is just about pixel-perfect! ๐Ÿคฉ

    It's also very responsive and you've paid great attention to detail in making your markup semantic and accessible! ๐Ÿ‘

    Something I was thinking about is asking whether you've tried using a CSS preprocessor such as Sass before. It has some great features that will add superpowers to writing your styles, but mainly I was thinking about how it allows you to split your styles into separate files (which is very helpful for organization and development) since your CSS file is over 600 lines long! ๐Ÿ˜…

    It may be something worth trying out for your next project! ๐Ÿ˜‰

    Of course, keep coding (and happy coding, too)! ๐Ÿ˜

    2
  • Sameer Singhโ€ข 480

    @SameerJS6

    Submitted

    Hi Frontend Mentor Community, this is my solution for the Interactive Card Detail Component.

    • I saw this challenge a really long time ago, back when I was starting with CSS, and today I completed it using React.

    • I had fun making this one and also added some extra animations to it to make it more interesting.

    Thank you, Feedback is welcome, Sameer

    Interactive Card Detail Component - REACT & TAILWIND CSS

    #react#tailwind-css

    1

    P
    ApplePieGiraffeโ€ข 30,425

    @ApplePieGiraffe

    Posted

    Hi, Sameer Singh! ๐Ÿ‘‹

    Awesome job on this challenge! ๐Ÿ‘ Your solution looks great and works well and I really like the animations you added to give your solution an extra touch! ๐Ÿ‘

    Only very small suggestion I have for you is to make sure the gradient background on the left side of the page in the desktop layout fills up the entire height of the screen (as it stops short on larger desktop screens). ๐Ÿ™‚

    Keep coding (and happy coding, too)! ๐Ÿ˜

    0