Skip to content
OverviewSolutions
31
Comments
16
BT738844
@BT453567

All comments

  • BT738844•700
    @BT453567Posted 4 months ago

    Hello there

    The "preview site" link does not appear to be working if you are not aware?

    Regards

    0
  • Yejin Han (한예진)•270
    @Yejin-HanSubmitted 4 months ago
    What are you most proud of, and what would you do differently next time?

    It took too much time because there was something unexpectedly blocked in the small areas. I'm proud to have implemented it similarly.

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

    I've been struggling with the background behind the illustration, so I'm barely close to it, but from now on, I'll have to look at how to mark up and start from the beginning.

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

    Anything you have found. How long will it take to finish normally?

    Bookmark landing page

    1
    BT738844•700
    @BT453567Posted 4 months ago

    Hello

    Excellent solution. There are many parts I like about this solution.

    I have identified a small issue where the logo is not visible in the mobile menu.

    If you uncheck the text indent the logo is visible in the menu.

    Rather than re-creating the facebook and twitter logo for the mobile menu, you could manipulate the DOM from Javascript, by using the following commands (This is taken from my solution):

    footerSocialsContainer.remove(); mobileMenuFooterContainer.appendChild(footerSocialsContainer);

    I like how you calculated the distance of the graphic to edge of the screen and also how you implemented the tab buttons.

    I also found it took longer than expected to code.

    Hope that helps

    Marked as helpful
    0
  • BT738844•700
    @BT453567Posted 4 months ago

    Hello

    Good effort.

    In desktop view, have a look at implementing the solution with grid as currently there are some overlap issues when re-sizing the window:

    https://css-tricks.com/snippets/css/complete-guide-grid/

    On the image container try adding overflow: hidden because at the moment when you press the next image button, you can see the image swipe across other parts of the page.

    With regards to the arrow buttons, try adding cursor: pointer to them and also a hover function to change the background colour.

    In mobile view, Try using position: absolute on the arrow buttons, with the container as position: relative so that you can position the buttons in the bottom right of the image.

    Regards

    1
  • Filip Juszczak•690
    @filipjuszczakSubmitted over 1 year ago

    Hi!

    Any feedback/best practices appreciated! :)

    P.S. Is there a better way to implement the "our creations" section?

    Loopstudios landing page

    1
    BT738844•700
    @BT453567Posted 5 months ago

    Hello there

    With regards to the VR section ("The leader in interactive VR"), this could be implemented with grid.

    At the moment when you reduce the window size, the VR text box goes out of alignment with the image.

    To implement with grid, if you setup 4 columns, where the image spans columns 1-3 and the text box spans columns 3-4.

    Ensure the text box has a higher z-index, is positioned at the bottom of the column and the background colour is transparent so you can see the image around the text box.

    Grid is the best way to implement "Our Creations" in my opinion. Try adding support for mobile screen with the following in CSS:

    @media only screen and (max-width: 767px) { .. }

    You can also change to the mobile image when the screen reduces by the following in HTML:

    <picture> <source srcset="./assets/images/mobile/image-pocket-borealis.jpg" media="(max-width: 767px)"> <img class="creations-section__grid-image" src="./assets/images/desktop/image-pocket-borealis.jpg" alt=""> </picture>

    Hope that helps

    0
  • BT738844•700
    @BT453567Posted 5 months ago

    Hello there

    Good effort

    Another way to center the solution in the middle of the page would be the following:

    body { display: grid; place-items: center; min-height: 100vh; }

    Also your image appears to have lost its aspect ratio. Try changing the height to auto:

    .pic img { width: 100%; height: auto; border-radius: 10px; }

    Hope that if of some use

    Regards

    Marked as helpful
    0
  • Achara Chisom Solomon•490
    @AcharaChisomSolomonSubmitted 7 months ago
    What are you most proud of, and what would you do differently next time?

    I am super proud of the whole app, particularly the javaScript section where I had to do some validation to ensure only numbers are accepted and making them not to be more than 2 decimal places as most currencies are

    Heres my js validator

    const inputChecker = el =&gt; {
    el.addEventListener('input', function() {
        const twoDecimalPlaces = /^\d*\.?\d{0,2}$/;

        if (!twoDecimalPlaces.test(this.value)) {
            this.value = this.value.length &gt; 1 ? this.value.slice(0, this.value.length - 1) : '';
        }
    });
}
    What challenges did you encounter, and how did you overcome them?

    Working with regex was unfamiliar but google and gpt helped, also making the code DRY was a little bit of a challenge.

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

    None, but any feedback is welcome!!!

    Tip calculator app

    1
    BT738844•700
    @BT453567Posted 7 months ago

    Hello

    I like your solution, it looks fantastic and I like the subtle details such as the no entry cursor when you hover over the de-active reset button.

    Your validator is also very good. I like when you press an invalid key it does not appear in the input.

    However, I have noticed a small issue with this. If a user decides to edit at the front of an input and puts a letter there, then a digit at the back will be removed. For example, if a user inputs 1234 and then changes the 1 for g, then the 4 will be removed and the g will remain.

    I have expanded on your solution to the following where if an input does not pass the test, the input field (this.value) will be updated with the previous input value:

    billAmount.addEventListener('input', function() {

    const twoDecimalPlaces = /^\d*\.?\d{0,2}$/;

if (twoDecimalPlaces.test(this.value)) {

    billAmountValue = this.value;
    canTipBeCalculated();

} else {

    this.value = billAmountValue;
}

    });

    Regards

    Marked as helpful
    0
  • Jordan Davenport•970
    @jjdavenportSubmitted 7 months ago
    What are you most proud of, and what would you do differently next time?

    First time using fetch, I built the site mobile first and would do the same next time.

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

    I had an incorrect fetch path, found the solution in the discord help section.

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

    Feedback regarding my JS, to me it looks overly complex for what i wanted to achieve.

    Time tracking dashboard with JS

    1
    BT738844•700
    @BT453567Posted 7 months ago

    Hello

    Great looking solution, well done.

    A couple of small issues I noticed:

    When you reduce the window size, the first column becomes difficult to see. Perhaps add a min-width to the first column?

    The values for Weekly Exercise and Social last week are wrong, you have placed the values for current there.

    You have the wording "Last Week" for Daily and Monthly.

    With regards to reducing code:

    I have noticed in your HTML you have duplicated the top part of the card for daily, weekly and monthly.

    As a suggestion create a function called for example fetchData(period) { }

    Then add a listener to the buttons as follows:

    buttonDaily.addEventListener("click", function() { fetchData("daily"); });

    buttonWeekly.addEventListener("click", function() { fetchData("weekly"); });

    Within the fetchData(period) function you could then add the following:

    switch (period) { case 'daily': displayMessage = "Yesterday - ";

    and so forth.

    When you update the HTML, you could then use this variable for example:

    document.getElementById("work-previous").textContent = displayMessage + workData.timeframes.weekly.current;

    Regards

    Marked as helpful
    1
  • Sebastien•60
    @bisol84Submitted 7 months ago
    What are you most proud of, and what would you do differently next time?

    I am proud of understanding the grid system. Was not easy at all !

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

    Align and padding was difficult to manage, I have taken things from the ground.

    Newsletter module

    1
    BT738844•700
    @BT453567Posted 7 months ago

    Hello

    Good Effort

    Here's a couple of suggestions that may improve your solution:

    1. To centre your solution in the page:

    body { display: grid; place-items: center; min-height: 100vh; }

    1. At the moment, when you reduce the window size of your solution, you'll notice that the content does not stay within the container div.

    Try using Flexbox rather than grid to display the main content:

    #container { background-color: var(--white); border-radius: 20px; padding: 10px; display: flex; flex-direction: row; }

    .left-col { padding: 0 40px; max-width: 30rem; }

    .right-col {

    }

    Regards

    1
  • BT738844•700
    @BT453567Posted 7 months ago

    Hello

    Great job, I like your solution, particularly your use of JavaScript when the mouse moves away the popup disappears, I will make note of that.

    One very small issue that I think may improve the page is that when the share button is pressed and then the mouse moves away and the pop up links disappear, the button remains in a pressed state, perhaps you could add to the JS to change the button back to its original state.

    Regards

    0
  • lij110397•230
    @lij110397Submitted 8 months ago
    What are you most proud of, and what would you do differently next time?

    1. How to use grid to layout a design

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

    Opacity setting of the font color seems not working for me. Just don't know why?

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

    Opacity setting of the font color seems not working for me. Just don't know why?

    Responsive testimonials grid section

    2
    BT738844•700
    @BT453567Posted 8 months ago

    Hello

    With regards to the following:

    color: rgba(var(--color-primary-very-dark-grayish-blue),0.7);

    I do not believe this is working because the rgba function does not accept variables defined in hsl.

    You could try and define the colour as follows with the opacity an use that:

    --color-opacity70-very-dark-grayish-blue: rgba(72, 85, 106, 0.7);

    Regards

    0
  • plantpirate•170
    @plantpirateSubmitted 8 months ago
    What are you most proud of, and what would you do differently next time?

    Most proud of using grid and placing objects within grid areas. I'm not sure I did it correctly, but the layout looks similar.

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

    So many. Most of it came from font sizes at different screen sizes, working with widths for different elements. I just used methods that seemed to work.

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

    I feel like I just patched this all together. I was having issues with the grid, plus width and max-widths. If you take the time to look at my code, please give me feedback on best practices for grid placement if this was all wrong, or help with the widths if i was coding incorrectly.

    Four card feature section using grid

    2
    BT738844•700
    @BT453567Posted 8 months ago

    Hello @planpirate

    Excellent job looks great.

    Couple of small things that could improve the solution.

    1. You could try adding a max-width to your card div (ai-role) as the cards look a bit stretched when in views below 1000px.

    2. You could argue that "Reliable, efficient delivery" should be a p tag rather than a h1 tag as this appears to be more of a descriptive text rather than a heading.

    Regards

    Marked as helpful
    0
  • Paul Michael E.•150
    @mellinghSubmitted 8 months ago
    What are you most proud of, and what would you do differently next time?

    My first website that works, responsive!

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

    Responsiveness/media query

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

    Tips in General

    Product Preview Card with HTML and CSS only

    2
    BT738844•700
    @BT453567Posted 8 months ago

    Hello

    Looks excellent.

    To improve this I have a couple of small suggestions:

    1. In the mobile view, add a margin at the top of the screen so there is a gap between the top container and the top of the screen.

    2. At the moment in mobile view, the container width remains fixed regardless of the size of the users screen. Here you could experiment with flex containers / width: 90%; for example to make the container shrink and grow with the screen size.

    Regards

    0