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
OverviewSolutions44Comments45

All comments

  • MarieG41• 180

    @MarieG41

    Submitted

    What specific areas of your project would you like help with?

    I'd like some help with the theme switcher for the data in the Dashboard the first data stays as the light version and I don't know how to fix that.

    Social media Dashboard with theme switcher

    #accessibility#sass/scss

    1

    P
    Jake Godsall• 1,340

    @jakegodsall

    Posted

    Hi 👋

    I've taken a look at your source code and narrowed it down.

    The reason this weird behaviour is happening with the first element not changing colour in dark mode is to do with how you are using CSS selectors in your SASS.

    Right now you have the following selector for selecting each of the cards individually in dark mode:

    .fb-resume-data + .dark-cards-resume,
.twitter-resume-data + .dark-cards-resume,
.ig-resume-data + .dark-cards-resume {
  background-color: var(--Dark-Desaturated-Blue-card-bg);
}

    However, the + operator does not select an element which has both the class preceeding the + operator and that following the operator. Rather, this is the adjacent sibling selector. A more general example is:

    a + b selects element b if and only if it is the immediate sibling that directly follows element a. It won't select any other b elements that are not directly preceded by a. In your case, this means all elements except the first are selected, because the first is not preceeded by any sibling.

    Hope this makes sense, these selectors can be quite confusing.

    To select an element that has both classes, you just need to concatenate the classes in the selector:

    .fb-resume-data.dark-cards-resume,
.twitter-resume-data.dark-cards-resume,
.ig-resume-data.dark-cards-resume {
  background-color: var(--Dark-Desaturated-Blue-card-bg);
}

    Otherwise great work! Happy coding 😁

    Marked as helpful

    1
  • Akshita 👩‍💻• 340

    @Shanvie

    Submitted

    What are you most proud of, and what would you do differently next time?

    Hey, guess what? I just successfully tossed in some JavaScript for the first time! 😂 It looks like I've stumbled upon a new talent. Better start cranking out more JS projects, 'cause apparently, that's where my hidden genius lies! 🚀

    What challenges did you encounter, and how did you overcome them?

    So, picture this: the first two hours of me diving into the wild world of JavaScript code hunting. Yeah, I know, pretty lame, right? But hey, gotta start somewhere! 😅

    What specific areas of your project would you like help with?

    Sure thing! I'm open to suggestions, even if they're as welcome as a pineapple pizza at an Italian family reunion! 🍍🍕 But hey, variety is the spice of life, right?

    FAQ accordian-main

    #accessibility

    1

    P
    Jake Godsall• 1,340

    @jakegodsall

    Posted

    Hi 👋

    Great work with this project. It looks really great 😊

    Just thought I'd share a slice of pineapple pizza 🍕😁

    To improve the user experience you could introduce a expand/collapse animation on the toggles to remove this layout shift. You can refer to this codepen I've made if you're interested in how to do that!

    Hope this helps! Keep up the good work 😁

    Marked as helpful

    1
  • Kenn-eth• 40

    @Kenn-eth

    Submitted

    What are you most proud of, and what would you do differently next time?

    The highlight of this project is using flexbox and minimal media query to make the page responsive. I designed for desktop first because the task looked a bit complex at the beginning.

    What challenges did you encounter, and how did you overcome them?

    The biggest challenge was aligning the two middle vertical cards. It was dicey to manage because I kept them in a different container from the two cards on the side.

    What specific areas of your project would you like help with?

    I would appreciate comments on any part of this project.

    CSS Flexbox

    1

    P
    Jake Godsall• 1,340

    @jakegodsall

    Posted

    Hi 👋

    Great work on this project!

    It really looks great at both mobile and desktop layouts 😁

    The main issue I see is with larger viewports. I think it would make sense to talk about the width and height of the cards separately.

    Width:

    Right now you are using a vw-based flex-basis to determine the width of the columns in your flex container. This is fine for standard viewports, but with wider viewports the cards grow indefinitely, leading to lots of empty space within the card. I would recommend adding a max-width with a fixed pixel value to each of the cards to stop this behaviour.

    .card {
    flex-basis: 20vw;
    max-width: 300px;
}

    Height:

    Something similar is happening with the height becase of the vh-based value for height. Although the problem is the same, the solution is not. generally, it is best practice to not apply a fixed-value height, because it can lead to content overflow, especially when our containers have dynamic content. CSS is responsive by default and will determine the correct height for your component based on the size of the content, as well as padding, border etc, depending on the box-sizing property you use.

    I would recommend to leave the default height: auto on your cards and use a padding-bottom to add the desired whitespace below the content.

    Hope this helps! 😁

    Marked as helpful

    0
  • Musie Misgun• 30

    @Natty-tech

    Submitted

    What challenges did you encounter, and how did you overcome them?

    The challenges I encountered is how i should center my elements, and also how to make the qr responsive.

    What specific areas of your project would you like help with?

    I would like to know if there is a better way to make the qr more responsive

    Margin of auto for the wrapper to center it

    1

    P
    Jake Godsall• 1,340

    @jakegodsall

    Posted

    Hi 👋

    Great work with this component.

    I can make a few comments regarding responsivity. I'd recommend changing the way you're thinking about defining the width in the desktop view. From what I understand you're deciding on how you want the component to look at full width, which is approximately 15vw.

    The problem with this is that at smaller viewports (approx width: 450px) the component ends up with a width of around 100px which really is too small.

    You'd be better to use a much wider width for the component, let's say 90% and then add a max-width with a fixed-value for the larger screen size. That way you'll have a more appropriate width across a range of viewport widths.

    .qrwrapper {
    width: 90%;
    max-width: 300px;
}

    Thanks

    Marked as helpful

    0
  • Rahul Kumar• 370

    @rahulkumar215

    Submitted

    What are you most proud of, and what would you do differently next time?

    Hello, Frontend Mentor community 🙋‍♂️.

    This is my solution ✅ for the Social Links Profile

    This was a fun project, and I am thinking to include it in my future projects. I am currently working on my Frontend Developer Portfolio, So this gave me a good idea about some of the things that I want to add.

    I had some trouble with resizing the image. So I would appreciate it if I get a feedback on that.

    Follow me in my journey to finish all Free 🆓 and Free + challenges (61 left 🎯)! Gotta Catch ’Em All

    That's all.

    Have Fun Coding!

    What specific areas of your project would you like help with?

    I would like help with the use of images in flexbox.

    How should we define an image size in a flexbox, along with flexbox width.

    Social Links Profile 🎯. [BEM]

    1

    P
    Jake Godsall• 1,340

    @jakegodsall

    Posted

    Hi 👋

    Great work with this!

    I've cloned your repository and played around with the code a little. You're approach to styling the image and creating the layout is mostly just fine in my opinion.

    Just a couple of minor points:

    • The <div> around the profile picture is kind of unnecessary. Wrapping the image and then adding a border-radius to the container leads to you needing to apply overflow: hidden on the container. You could actually remove this container and just apply the border-radius directly to the <img> element. That way you don't have to worry about overflow.

    • You're having some problems with the layout of the image because you are combining both fixed-value width and height with transform: scale() to define the size of the image. width and height are part of the box-model, and therefore inform the rest of the document where elements should be placed. transform: scale() is not. That means when you increase the size with the transform: scale() function, the image becomes bigger, but the space allocated for it does not increase. I'd recommend just using width and height exclusively and then adding a margin-bottom to the image to create space below.

    Hope this helps 😁

    Marked as helpful

    1
  • Lebogang Phoshoko• 10

    @PhantomLeii

    Submitted

    What are you most proud of, and what would you do differently next time?

    Considering it is my first time working on any front-end project the way I did with this one, I think following the design files (*.fig) guide lines when it comes to dimensions is going to have to be one of my religious methods. After being confused by the many, but informative read me files, I am proud of the way I managed to handle this in such less time than I had expected.

    What challenges did you encounter, and how did you overcome them?

    While working on the mobile display, I realized that the styles I had would not work for those same mobile devices in landscape orientation. finding a way to target the screen widths while not altering the original display on desktops and tablets proved to be troublesome.

    Off to StackOverflow I went...

    Their answer didn't exactly work for my situation but it got me close enough to figuring out what I had to do. There, initially, @media (max-device-width: 767px) was explained but after modifying, I found that @media (max-device-height: 480px) worked perfectly for my situation.

    What specific areas of your project would you like help with?

    Not, just with my project but with my knowledge entirely when it comes to working with responsivity. I struggle to understand what to use between max-width: ; and width: ; css rules. The same with the height. And then in addition, I have problems with @media queries and then basic concepts of how @keyframes work.

    Responsive QR code component with HTML5 & CSS3. Everything vanilla!

    #semantic-ui#vanilla-extract

    1

    P
    Jake Godsall• 1,340

    @jakegodsall

    Posted

    Hi 👋

    Just thought I would share my two cents about the purpose and difference between using width and max-width.

    It is not recommended to provide a fixed-value for the width property of compoents. The reason for this is that at viewport widths less than this value, the content will overflow the visible area of the page.

    A better solution is to use a %-based value, which will be calculated dynamically according to the width of the parent container.

    This means that the component will grow and shrink with the width of the screen.

    Let's say we set width: 90% on the component, then it will grow at 90% of the screen width. This is not ideal at larger viewports, and we therefore want to specify some maximum value so that the component doesn't spread too wide. This is where max-width comes into play. We can set a fixed-value for this property to make sure the component never gets too wide.

    .container {
    width: 90%;
    max-width: 360px;
}

    With respect to height: Generally it's not recommended to set a fixed-value for this property. CSS is dynamic and responsive by default and it will calculate the necessary height of the component according to the content it contains. If we set a fixed-value height, then if the content for some reason becomes larger, it will overflow the component, leading to an ugly user experience.

    I'd recommend leaving the default value of height: auto and using padding or margin on the internal elements of the container to define whitespace within the container.

    Hope this helps 😁

    Marked as helpful

    0
  • Quân• 120

    @Kwun7826

    Submitted

    What are you most proud of, and what would you do differently next time?

    Need more practicing

    What challenges did you encounter, and how did you overcome them?

    Need more practicing

    What specific areas of your project would you like help with?

    Found multiple ways to deal with shopping cart image/svg/icon Using different ways to resize the image/svg/icon

    Product Card

    1

    P
    Jake Godsall• 1,340

    @jakegodsall

    Posted

    Hi 👋

    I've cloned your repository and it seems that you haven't added the image to the repository.

    That means the file cannot be found during deployment and is leading to a HTTP 404 response.

    Also, there is an extra $ sign in the discounted price.

    Hope this helps 😁

    1
  • P
    Jake Godsall• 1,340

    @jakegodsall

    Posted

    Just one more thing.

    It might be useful for you to take a look at the toggle() method on the element.classList to toggle classes on and off an element.

    That way you wouldn’t need to implement separate functions for adding classes and then for removing those same classes.

    element.addEventListener(“onclick”, (event) => {
    event.target.classList.toggle(“hidden”);
}):

    Just removed a bit of redundancy from the JavaScript 😌

    Marked as helpful

    0
  • P
    Jake Godsall• 1,340

    @jakegodsall

    Posted

    Hi 👋

    Well done with this. It looks really good in both mobile and desktop viewports! However, with very large viewports the three columns become very spread out. I would recommend adding a fixed-value max-width to the <main> element that wraps the entire layout. That way you won't have this spread.

    .main {
    max-width: 1600px;
}

    Hope this helps 😁

    Marked as helpful

    1
  • P
    viktorhristov0• 40

    @viktorhristov0

    Submitted

    What are you most proud of, and what would you do differently next time?

    What challenges did you encounter, and how did you overcome them?

    The the container border was really hard to do and I feel like there is too much white space below the profile picture icon and the "Greg Hooper" text. I also feel like the picture isn't big enough so I think I got the padding wrong.

    What specific areas of your project would you like help with?

    Picture padding and the white space below the profile pic.

    HTML/CSS preview-card

    1

    P
    Jake Godsall• 1,340

    @jakegodsall

    Posted

    Hi 👋

    Great work with this project!

    A quick note about that space below the profile picture. This is caused by the fixed-value height: 565px on the .preview-card-container element. This is generally ill-advised as it can lead to overflowing content if the content its too big to fit in the container.

    CSS will calculate the appropriate height for the component with its default value of height: auto and so you can control the appropriate space below the image by applying a margin-bottom to the image itself.

    .preview-card-container {
    height: auto;
}

.profile-icon {
    margin-bottom: 20px;
}

    Hope this helps! 😁

    0
  • P
    Jake Godsall• 1,340

    @jakegodsall

    Posted

    Hi 👋

    Great work with this form. The validation works great.

    A couple of points if you want to keep working on this 😁

    • I'd recommend increasing the viewport width at which the media query is applied for switching the layout, as at ~400px viewport width there still isn't really enough space for a column-based layout. Perhaps it would be better to apply this at around 1000px?

    • The appearance of validation messages causes a layout shift which can be a little jarring for some users. Perhaps implementing a expand/collapse type animation would help. Refer to this codepen I have created if you're interested in implementing this kind of animation for form validation.

    Hope this helps! 😁

    Marked as helpful

    0
  • Kacper• 230

    @rembiszkacper

    Submitted

    What are you most proud of, and what would you do differently next time?

    👋Hello Front-End Mentor Community! This is my solution for this challenge!

    What challenges did you encounter, and how did you overcome them?

    🏋️ The project was not demanding and there were no major problems

    What specific areas of your project would you like help with?

    ✍️ Feedback welcome!

    Single price grid component

    1

    P
    Jake Godsall• 1,340

    @jakegodsall

    Posted

    Hi 👋

    Great job with this component. It's super responsive and looks great at all viewports I've tested out!

    One point of improvement would be to add a pointer: cursor to the Sign Up button as it is a clickable element.

    .sign-up {
    cursor: pointer;
}

    Keep up the good work! 😁

    0
  • austin• 50

    @austin11183

    Submitted

    What are you most proud of, and what would you do differently next time?

    product-preview-card

    What challenges did you encounter, and how did you overcome them?

    product-preview-card

    What specific areas of your project would you like help with?

    product-preview-card

    product-preview-card

    1

    P
    Jake Godsall• 1,340

    @jakegodsall

    Posted

    Hi 👋

    Great work with this project! It looks really great.

    One point is that you have applied a fixed-value width: 344px on the card-container element. This means that when the viewport width is smaller than this the container will overflow and you won't be able to see it all without scrolling.

    A solution to this problem would be to apply a percentage-based width along with a fixed-value max-width for larger viewports.

    For example:

    .card-container {
    width: 90%;
    max-width: 350px;
}

    Hope this helps! Happy coding 😁

    0
  • ZMB• 720

    @ZMBAIG

    Submitted

    What are you most proud of, and what would you do differently next time?

    Hello everyone,

    Any comment or feedback with respect to this project will be highly appreciated.

    With regards,

    ZM. Baig

    Stats Preview Card Component

    1

    P
    Jake Godsall• 1,340

    @jakegodsall

    Posted

    Hi there 😁

    Great job with this!

    Just a couple of notes on making it more responsive:

    This part's sticking out of the screen, making you scroll to see everything. It's happening because of the set width. A slick way to fix this for a responsive design is to use a percentage for the width and then add a max-width in pixels for how big you want it on a desktop screen.

    .card-container {
    width: 80%;
    max-width: 1110px;
}

    Also, about stuff overflowing, it's usually not a great idea to lock in the height. When you set a fixed height, it won't adjust if your content grows or shrinks. That could mean your content ends up spilling out of its box or disappearing, depending on your overflow setting.

    CSS is pretty smart and can figure out the height based on what's inside. Best to just let it do its thing 😎

    .card-container {
    height: auto; /* this is the default value */
}

    Hope this helps! 😁

    0
  • Valchali• 70

    @Valchali

    Submitted

    What are you most proud of, and what would you do differently next time?

    I actually strugled with the u/i, cos at first my design didn't look anything close to the sample image. So i deleted the defualt html file content and started writing the code from scratch the way i best understand html later proceded to css had a couple of time i even have to go look at another project i had worked on just to get around css. It's really good stuff that this path of learning comes with challenges. What i'll do diferently next time is dependant on the honest reviews and contributions i'll be getting from the cummuninty.

    What challenges did you encounter, and how did you overcome them?

    I was faced with difficulties tring to get my user interface look just like the sample i was given, so the image wasn't redusing at a time , but afetr couple of twist i had a heads up from a friend that actually worked. He pointed me to an in-lne styling(css) to the html file, code line that targeted had image and it worked i was then able to resize the imge to fit.

    What specific areas of your project would you like help with?

    I know my work is not very much good as per the user interface, so i'll appreciate honest contributions pointing me to where i would have done better with the styling, my css file to this work is available at my git profile provided aabove

    QR Code Components Built With Just Html And Css

    3

    P
    Jake Godsall• 1,340

    @jakegodsall

    Posted

    Hi 👋

    A suggestion regarding the rounded corners of the image.

    The best approach to applying this effect is to actually apply the element containing the image, in your case a <section>. By applying a border-radius to this container, and setting the overflow to be hidden, you can achieve this rounded corner effect.

    .image-container {
    border-radius: 10px;
    overflow: hidden;
}

    Also, I would recommend to switch this container from a <section> to a <div> for accessibility reasons. Using a <section> element to create structure around an image like this does not make sense semantically.

    Hope this helps! Happy coding 😁

    Marked as helpful

    0
  • Poum• 40

    @Poumdg

    Submitted

    What are you most proud of, and what would you do differently next time?

    I am proud of my first working javascript code, since I only started learning it 1 month ago, being able to write this amount (although quite redundant and easy) without too much trouble felt nice!

    What challenges did you encounter, and how did you overcome them?

    I forgot how to target a specific css attribute (in this case visibility and display) in js and had to look it up on google.

    What specific areas of your project would you like help with?

    I would like to know of a way to make my Javascript less redundant and more maintainable, but I am just a beginner so a beginner friendly advice would be best.

    I also cannot resize the star image next to the FAQ heading below 40px in @media (max-width: 400px); so I kept it at 40px. no matter how hard I tried. Is there a specific reason why? Any insight would be much appreciated. Thank you!

    Frontend mentor FAQ accordion challenge using basic js css and html.

    1

    P
    Jake Godsall• 1,340

    @jakegodsall

    Posted

    Hi 👋

    After taking a quick look at your code, it seems that the reason you can't resize the star image is because there are still max-height properties being applied to the image from the larger viewport media queries. This property is being overwritten with each media query decreasing in width, but in the @media (max-width: 400px) media query, you want to ignore this. A way to do this would be to set:

    @media (max-width: 400px) {
    .star_image {
        max-height: none;
        /* add width and height here */
    }
}

    The sizing should work then.

    Taking a look at the JavaScript, there's a couple of things I would mention to reduce redundancy.

    The first thing would be to use classes that can be added and removed from the elements. For example:

    .hidden {
    visibility: hidden;
}

    Then, you can use JavaScript to add or remove the class when the element is clicked:

    myElement.addEventListener("onclick",  function(event) {
    event.target.classList.toggle("hidden");
});

    This will apply the CSS visibility: hidden property when clicked, and then remove it again when clicked again.

    Using this approach you don't need to have separate logic for applying styles and then removing them again.

    Hope this helps 😁

    Marked as helpful

    1
  • Ojonimi182• 20

    @Ojonimi182

    Submitted

    What are you most proud of, and what would you do differently next time?

    I am proud that i was able to finish the challenge within a short period of time.

    What challenges did you encounter, and how did you overcome them?

    The challenge i encounter during this project was displaying the show icon over the picture when hovered on. And I overcome it with the help of of youtube videos.

    What specific areas of your project would you like help with?

    i will need help in arranging my HTML code in the proper HTML standard.

    nft-preview-component

    1

    P
    Jake Godsall• 1,340

    @jakegodsall

    Posted

    Hi 👋

    Congratulations on this project. It looks pixel-perfect to me!

    A few ways you could improve what you've done here would be to:

    • Apply classes to the <img> elements representing the large image and the image that appears on hover and style using those.

      Generally, inline styling of the type `style="height: 50px; width: 50px" is not recommended. A better approach would be to apply the classes:

      <img class="image-main" src="./images/image-equilibrium.jpg" />
<div class="icon">
    <img class="image-overlay" src="./images/icon-view.svg" />
</div>

      That way you could then style accordingly:

      .image-main {
    width: 260px;
    height: 260px;
    ...
}
.image-overlay {
    width: 50px;
    height: 50px;
}

      One of the benefits of this approach is that all of your styling will be within your `

    1
  • Harsh Kumar Dwivedi• 740

    @Harsh-Kumar-Dwivedi

    Submitted

    What are you most proud of, and what would you do differently next time?

    I learnt how to use flexbox and relative measurement units for creation of much smoother web pages.

    I am proud that to some extent I was able to complete this project as I am a beginner.

    I would try to use a shorter approach by which I mean to use an approach which consumes lesser lines of code and produce much better design next-time.

    What challenges did you encounter, and how did you overcome them?

    Essentially, I encountered the challenge to place background patterns, but was able to resolve it to a certain extent by utilizing "position" CSS property. Secondly, I encountered the challenge of using units which are relative and in that Chrome Dev Tools helped a lot.

    What specific areas of your project would you like help with?

    I would like to know what could be the simplest approach to place background patterns in this project to achieve the required design?

    Checkout my solution ! Feedbacks are welcome ! Thanks ! Stay Happy & Well !

    Flexbox based Profile Card Component

    1

    P
    Jake Godsall• 1,340

    @jakegodsall

    Posted

    Hi 👋

    The way you solved this problem with the background images using CSS pseudo-elements is the same way that I would go about it. Other options would be creating position: absolute <div>'s or using plain old <img> elements to represent the images.

    For almost every problem we encounter in frontend development there are different approaches, each with their own set of advantages and disadvantages. The trick is to understand the tradeoff's associated with each one for the specific problem.

    I guess the best approach is to trust your instincts but always be in a position to explain and justify your choice of solution A over solution B.

    Keep up the good work! Hope this helps 😁

    Marked as helpful

    0
  • Jordan Davenport• 270

    @jjdavenport

    Submitted

    What are you most proud of, and what would you do differently next time?

    getting the majority of the layout and styling correct.

    What challenges did you encounter, and how did you overcome them?

    the mobile layout was difficult, it might have been better to use grid instead of flexbox for this site.

    What specific areas of your project would you like help with?

    using the correct html elements and creating a flexable layout adapated to any device.

    Results summary component with Flexbox and Grid

    1

    P
    Jake Godsall• 1,340

    @jakegodsall

    Posted

    Hi 👋

    Congratulations on this project. It looks really great at both the mobile and the desktop viewport!

    One thing I noticed however is that at the size immediately after switching from your mobile layout the the desktop layout, there is a lot of content not visible. This is due to the way you are defining your sizing in the desktop view. Your <main> element has a width: 50% which looks great as the viewport gets larger, but it doesn't give enough room for the content below let's say 1000px.

    A way of solving this problem would be to give the width of the container a much higher value, for example 90%, and then providing a max-width property so that it doesn't get too big when the screen reaches desktop size.

    main {
    width: 90%;
    max-width: 900px;
}

    Hope this helps, and keep up the good work! 😁

    Marked as helpful

    1
  • Halalisani Sibisi• 10

    @HalalisaniSibisi

    Submitted

    What are you most proud of, and what would you do differently next time?

    What I'm most proud is being able to gain more experience when it comes to the div elements, in most cases I tend to make mistakes if I have to do another div inside the div, which can confuse me when I style them.

    What I can do differently is centering the div, I had a problem doing that especially since the qr code was in the the middle of the page so, I will try to improve on that.

    What challenges did you encounter, and how did you overcome them?

    When it comes to css, there are many elements you need to take into consideration especially when it comes to widths, margins etc, so that gave me a huge problem especially when I had to move the picture in the middle. I did a bit of some research on the Internet and that kind of helped to see where I went wrong.

    What specific areas of your project would you like help with?

    • How can center it in the middle
    • How can I get I get the margins right without making everything complicated and confusing.
    • how can I make my layout be more responsive.

    QR code solution using technologies of HTML and CSS

    3

    P
    Jake Godsall• 1,340

    @jakegodsall

    Posted

    Hi 👋

    Just a note regarding the smaller viewports. There seems to be an issue with hard-coded width values on the container set at viewports smaller than 375px. One for 370px and one for 1440px. This is causing the content to overflow at smaller viewports.

    A common approach for dealing with this would be to set a width using % values, and then setting a max-width for larger viewports. For example:

    .container {
    width: 90%;
    max-width: 370px;
}

    Hope this helps 😁

    Marked as helpful

    0
  • BirushaNdegeya• 60

    @BirushaNdegeya

    Submitted

    What are you most proud of, and what would you do differently next time?

    • I am proud of using SCSS syntax while styling my webpages, and I believe that in the near future, I will become more comfortable using this tool. However, some areas of my code, especially the background behind the card, are not clean.

    What challenges did you encounter, and how did you overcome them?

    • The challenge was quite tricky when it came to setting a good background image behind the card and ensuring the card's responsiveness. I used the width property to address the responsiveness issue.

    What specific areas of your project would you like help with?

    • I would appreciate someone helping me fix the background problem and set dimensions without using pixel measurements.

    Reponsive Profile Card Component

    #sass/scss#accessibility

    1

    P
    Jake Godsall• 1,340

    @jakegodsall

    Posted

    Hi 👋

    I see you've been struggling with these background images. It's very difficult to get the positions right when you have to think about so many different screen sizes. I can see you've put a ton of work into it to get the result you've got and I think it really looks great.

    I'd recommend in the future if you have one or two images to form a background image to use pseudo elements on the <body>.

    body::before {
   content: "";
   position: absolute;
   width: 978px;
   height: 978px;
   top: -50%;
   left: -30vw;
   background-image: url('../assets/bg-pattern-top.svg');
}

body::after {
   content: "";
   position: absolute;
   width: 978px;
   height: 978px;
   bottom: 50%;
   right: 30vw;
   background-image: url("../assets/bg-pattern-bottom.svg");
}

    Hope this helps 😁

    This adds the background images and treats them as separate elements that can be styled and positioned individually without altering the semantics of the page, as would be the case adding two <img> elements for example.

    Marked as helpful

    0
  • Lamidi Morufat• 140

    @Ehmkayel

    Submitted

    What are you most proud of, and what would you do differently next time?

    This is my first time of working on a project with two dropdowns, I'm glad I was able to do it

    What challenges did you encounter, and how did you overcome them?

    I encountered some challenges with the dropdown but I was able to debug it with the use of my elements in inspect

    What specific areas of your project would you like help with?

    I will be glad if anyone can go through my project and suggest what I need to work on

    Responsive dropdown intro-section landing page

    #accessibility#animation#bem#semantic-ui#progressive-enhancement

    2

    P
    Jake Godsall• 1,340

    @jakegodsall

    Posted

    Hi 👋

    Great work on the project. It looks like you've really nailed the sizing for the content of the page and the dropdowns look great.

    In terms of responsivity there is a couple of issues you could work on:

    • The content of the page is not centred on larger viewports. As I understand it you have a max-width: 1440px set on your <body> tag. This would be better located on this outermost <main> containing the content and then centring the <main> within the <body>. There is a number of ways to do so:

      body {
    display: flex;
    flex-direction: column;
    align-items: center;
}

      or simply:

      main {
    margin: 0 auto;
}

      You just need to remember to set that max-width on the <main> element to make sure it doesn't spread the full width of the parent.

    • Your mobile menu switches to the desktop menu at viewport width 768px but the login and register buttons don't come into the viewport until around 1050px, meaning there is around 300px where these buttons are not visible on the screen. Just a bit of playing around with the layout should fix that.

    Hope this helps 😁

    Marked as helpful

    0
  • Garf228• 90

    @Garf228

    Submitted

    What are you most proud of, and what would you do differently next time?

    I didn't implement the theme selector, but I figured out all of the JS logic myself which I am proud of.

    Calculator app - theme 3

    1

    P
    Jake Godsall• 1,340

    @jakegodsall

    Posted

    Hi 👋

    Great work on this!

    One thing I noticed is that when the calculator displays very large numbers the number will overflow off the screen.

    In terms of solutions, there are a few.

    You could introduce a scrollbar to see the full number, dynamically reduce the font-size as the number reaches 16 digits (currently the full width of the calculator). The second option looking something like this:

    function adjustFontSizeForDisplay(number) {
    const displayElement = document.getElementById('calc-output');
    let fontSize = 56; // Default font size in pixels
    const maxLength = 16; // Max length of number before adjusting font size

    if (number.toString().length > maxLength) {
        const overflowLength = number.toString().length - maxLength;
        fontSize -= overflowLength * 2; // Decrease font size based on overflow length
    }

    displayElement.style.fontSize = `${fontSize}px`;
}

    You could then apply this function everytime the value in the calc-output changes.

    Hope this helps at all 😀

    Marked as helpful

    0
  • Ahmed Hamdy• 100

    @AhmedHamdy146

    Submitted

    What are you most proud of, and what would you do differently next time?

    Hello everyone,

    I'm thrilled to share my solution for the [Project Name] challenge from Frontend Mentor! 🎉 After spending couple of hours working on this project, I'm excited to showcase my coding skills and seek feedback from the community.

    Technologies Used: HTML, CSS, JavaScript

    I would greatly appreciate any feedback, suggestions, or constructive criticism on my solution. Whether it's regarding code structure, design choices, or overall functionality, your insights will be immensely valuable in helping me improve as a developer.

    Conclusion: Thank you for taking the time to review my solution for the [Intro-section-with-dropdown-navigation] challenge. I'm excited to continue refining my skills and tackling new challenges in the world of frontend development. Your feedback and support mean a lot to me as I strive to grow as a developer.

    Feel free to explore my solution and share your thoughts in the comments below. Let's keep coding and learning together!

    Happy coding! 🚀✨

    Best regards, [Ahmed Hamdy]

    Intro-section-with-dropdown-navigation

    1

    P
    Jake Godsall• 1,340

    @jakegodsall

    Posted

    Hi 👋

    Great work on this page. It looks great 😁

    I'd suggest adding a max-width and centring on the main container of the page because on wide viewports the <header> component looks very spread out.

    With this challenge its not too much of a problem because the content of the page is really all centred but it can become a bit of a problem when the entire content of the page is spread across thousands of pixels. I tend to use a max-width: 1600px or something around that size.

    A nice addition if you're looking to expand the project would to be to add expand/collapse animations for the dropdown menus in the mobile menu. An example of what I mean can be seen in the following codepen.

    Hope this helps 😁

    Marked as helpful

    0