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
OverviewSolutions15Comments19

All comments

  • FocusCookie• 350

    @FocusCookie

    Posted

    Nice job! 👍 You linked github repo is not working :(

    1
  • Samuel Wahome• 20

    @samwahome

    Submitted

    What is the best way to create beautiful SVG backgrounds without hacks?

    Flexbox and JS

    1

    FocusCookie• 350

    @FocusCookie

    Posted

    On the .card-icon class you could also use

    background-image:url(...pathToSvgFile);
background-position: x y;
background-repeat: no-repeat;

    If you do it like this you need to give the class a height or a margin-top otherwise the height will be 0 because the div does not need the img in the inside anymore.

    Marked as helpful

    1
  • Elisa• 50

    @elisa-charrier

    Submitted

    At the beginning of each project, I am always undecided about which are the smartest names to give to the classes. Any suggestions? I'd be happy to check out any alternatives to the script I wrote: I'm not a pro in Javascript. Feel free to report me your solution! Thanks to who will answer.

    Time tracking dashboard: first time w/ css grid and js

    2

    FocusCookie• 350

    @FocusCookie

    Posted

    Your code and structure are awesome! A tip, the bottom corners of the smaller cards, you can see the other backgroundcolor. I transform and translateY the overlaying box by 1px ;)

    Marked as helpful

    0
  • Marcos• 95

    @marcosfsousa

    Submitted

    I wanted to start practicing with JSON and the Fetch API and with this challenge I got just what I wished for.

    What seemed another head scratcher at first with heaps of lines of JS code resulted in a quite simple few lines with a forEach() function. Nonetheless, I've seen here much more elegant solutions for this challenge.

    There is room for improvement as always!

    I appreciate your time to look at my code, critique and help in any way possible.

    Obrigado.

    time tracking dashboard app with local JSON, Fetch API, Async/Await

    2

    FocusCookie• 350

    @FocusCookie

    Posted

    If you change to daily the previous text should say "Yesterday - xhrs".

    In your script, you could write a high-level function like updateActivityCard(elements, values) and in there you use yours for a loop. The loop is repetitive within you script.

    I like the hover effect on the theme cards btw :)

    Marked as helpful

    0
  • FocusCookie• 350

    @FocusCookie

    Posted

    There is an issue with the centering on smaller screen than the one from the designs. Instead of using margin auto on left and right you should use

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

    Marked as helpful

    0
  • FocusCookie• 350

    @FocusCookie

    Posted

    Mhhh looks like the screenshot were taken faster than the style of the user card is applied... On the live page, everything looks fine.

    0
  • FocusCookie• 350

    @FocusCookie

    Posted

    Check out flexbox and grid to switch the layout in mobile (media queries). I like the animation of the arrow ;)

    1
  • FocusCookie• 350

    @FocusCookie

    Posted

    I really like the first search modal! Nice idea ;)

    Marked as helpful

    0
  • Nick Carlisi• 180

    @nickcarlisi

    Submitted

    Hey everybody, I would appreciate any feedback. There's a few things that I couldn't quite figure out.

    • How to change the color of the SVG images. In dark mode, they're supposed to be white. Also, when something is 'Not Available' (i.e. twitter handle) it's supposed to be greyed out. I can't figure out how to change the color at all, let alone how to programmatically change it when something is 'Not Available'.

    • Another thing that's driving me crazy is that when the screen width gets too small the button gets pushed out of the form. Even worse, when the 'No result' error is there, it pushes it even further and 'No result' goes to 2 lines, for some reason.

    • Also, I feel like I could definitely refactor some of my javascript. This is my first "junior" project, after doing a few "newbies".

    Thanks in advance for any help!

    Good practice using Sass, JavaScript, API and Grid

    4

    FocusCookie• 350

    @FocusCookie

    Posted

    You can change the color of an svg with the fill attribute of the svg path like this:

    .btn--text:hover > #theme-icon path { color: var(--btn--text-color--hover); fill: var(--btn--text-color--hover); }

    The Button issue within the search box can be fixed by applying a width of 100% to the input.

    Marked as helpful

    0
  • FocusCookie• 350

    @FocusCookie

    Posted

    Wow you did it without JS at all! Nice! But as Patrick noticed the Menue does not stay open :) but that is fixable for sure.

    0
  • Yudi Yoshida• 350

    @yudiyoshida

    Submitted

    Hello, front-end developers! How are you?

    So, this is my first project trying to use BEM methodology, I would really apreciate if you guys give some feedback if I did something wrong or anything that I can improve.

    Besides that, this project was really fun! I learned a lot about how to use grid-template-areas and pseudo-elements (::after) to create an arrow to my "tooltip" social media.

    Thank you! Keep coding!!

    First project using BEM methodology

    2

    FocusCookie• 350

    @FocusCookie

    Posted

    Very nice solution and the js part is very small too! Nice job!

    0
  • FocusCookie• 350

    @FocusCookie

    Posted

    You could also read out the width and height of the window in js with

    let windowWidth;
let windowHeight;
window.addEventListener("resize", function () {
  windowWidth = window.innerWidth;
windowHeight = window.innerHeight;
});

    With knowing the dimensions you can calculate the position of the initial share button and add some space to it.

    1
  • FocusCookie• 350

    @FocusCookie

    Posted

    I like the slide animation 👍

    1
  • FocusCookie• 350

    @FocusCookie

    Posted

    Hi Musha,

    first very nice that you did it without JS :)! I noticed that there is a tiny problem with the cube on the left side. If the window is above 1440px the cube moves out of position.

    I would also recommend you to use prettier or another code formater because the idents in your HTML are way to long (character-wise) :) the code is hard to read on a not-so-wide code editor window.

    0
  • FocusCookie• 350

    @FocusCookie

    Posted

    Hi Liltanie,

    you can use

    text-align:center

    on your form input to centered horizontally. Vertically would be doable with

    display:flex;
justify-content: center;
    0
  • FocusCookie• 350

    @FocusCookie

    Posted

    I think it is quite normal because the design is not evenly spaced between the elements. But what I noticed for myself is that sometimes it make sense to split the bigger groups and put them in a flexbox. Then you can start with the vertical distribution as space-evenly or space-between. It hits quite often multiple groups and the rest you can adjust with margins or padding :)

    1
  • FocusCookie• 350

    @FocusCookie

    Posted

    I really like how you utilized the CSS classes for the colors and fonts stuff! Also that you tried to use no pixel width and heights.

    I think with a little bit more time on adjusting some CSS properties you will reach a better match on the design :)

    0
  • Carl Wicker• 1,055

    @carlwicker

    Submitted

    Just finished my first challange on FrontEndMentor, I'm trying to relearn front end web dev after eight years out the game.

    I struggled a little with stats table at the the bottom of the card but got through it. It felt a little hackie getting the mobile version to display properly.

    I'm curious how long this project would take to build by a professional developer. It took me 7 hours (with a few short breaks).

    Responsive HTML/CSS Card Component

    1

    FocusCookie• 350

    @FocusCookie

    Posted

    Hey Carl 👋,

    instead of using the display flex you could use the css grid:

    .card-left-stats { display:grid: grid-template-columns: 1fr 1fr 1fr; }

    and the HTML side would be

    <div class="card-left-stats">
     <span class="text-class">10</span>
     <span class="text-class">314</span>
     <span class="text-class">12m+</span>

     <span class="text-class">companies</span>
     <span class="text-class">templates</span>
     <span class="text-class">queries</span>
</div>

    the text-classes would be separated in something like bold and subline.

    1
  • FocusCookie• 350

    @FocusCookie

    Submitted

    Did anybody else noticed that in the designs the middle box has rounded edges and because of that you see the orange background in the corners.

    CSS Flex, None breakable hyphen

    1

    FocusCookie• 350

    @FocusCookie

    Posted

    The middle box has rounded corners and with that you see in the corners which are connecting the two greenish boxes a tiny bit of the orange background.

    0