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
OverviewSolutions27Comments53

All comments

  • abbos• 460

    @shomurodovabbos

    Submitted

    any feedback is welcome

    Flexbox

    1

    Sky• 945

    @Skyz03

    Posted

    Hi @abbos, Great work on completing the challenge. It is a great working solution. Few things that could improve your site would be .. could you add a smooth transition for the open and close case.Cause that doesn't seems like sudden open close right now. Also you could look at the generated report to improve your solution. Other than that keep up the good work. 👍

    0
  • Sky• 945

    @Skyz03

    Posted

    Great work @Old Really like your solution on how you approached it. Its a good solution. Just one suggestion is that the border of email is appearing while hover on btn..I tried z-index on yours solution but doesn't seem to work. If you find a way to resolve it please drop back in the comment. Keep up the great work.

    1
  • Mariane Felix• 60

    @marianefelix

    Submitted

    I'm still learning about CSS Grid Layout concepts, so I had some difficulties building the page to match the layout of the design. So, is there an easier way to do the layout desktop (using css grid or not)?

    Time tracking dashboard using grid layout

    3

    Sky• 945

    @Skyz03

    Posted

    Hi Mariane, Great work on completing the challenge. There a some other ways to achieve same thing in grids as bunee mentioned about grid template areas. Here is another official resource from MDN web docs I would like you to refer where all available methods with video explanations plus. A quick go around grid template area is available. Have a look its a good place to start. Link: https://developer.mozilla.org/en-US/docs/Learn/CSS/CSS_layout/Grids

    Marked as helpful

    0
  • Sky• 945

    @Skyz03

    Posted

    Hi Mahmoud, Great Solution for this challenge. I really liked your solution on how it works. Just a quick suggestion is that you can disable the hover effect of cards on mobile devices and tablets sizes as well as it does not work. Other than that good job. Keep up the good work in future challenges.

    Marked as helpful

    1
  • Kirin• 40

    @jhsanchezm

    Submitted

    I found really difficult the Hover state in the main image, because I had to deal with two elements. I took me almost half day to complete the code. I would like to receive some recommendations on how to ease the hover state over the texts. And any feedback is welcome to learn some clean code. Thanks to the community ;)

    Flexbox, Position, Hover and PureRef

    1

    Sky• 945

    @Skyz03

    Posted

    Hi Kirin, Great work on completing the challenge. I had a quick look at your code. Your solution works perfectly. In case you want to improve further I would recommend this W3schools possible way as well: here is the link for similar case: https://www.w3schools.com/howto/howto_css_image_overlay.asp

    Marked as helpful

    1
  • Ruandv• 40

    @Ruandv

    Submitted

    How can I get the blackDiv (Mobile View) to also be 100% of the view width? I seem to miss something but I don't know what.

    First attempt

    #sass/scss

    1

    Sky• 945

    @Skyz03

    Posted

    Hi Ruandv 👋, I had a quick look at your code. The problem in black div for mobile version is you are using paading: 0 10px which is causing the problem. So that a quick way to fix if you using media queries to target those. Plus i would recommend more to focus more on mobile design like your footer section and other to make it better. Keep up the good work 👍!

    0
  • Sky• 945

    @Skyz03

    Posted

    Hi Daniel 👋, Really like your CSS grid with it's responsiveness. It pretty cool. Keep up the good work. I think if you use SCSS and BEM. You could really improve your naming in CSS. Here is a quick cheat sheet on BEM: https://9elements.com/bem-cheat-sheet/

    0
  • Thiago Moreira• 320

    @othiagomoreira

    Submitted

    Hello, this is my second project using SASS and BEM 👀

    • I have a lot of difficulty naming the classes 🥺

    Any feedback will be appreciate. 😁💕

    Huddle landing page (First Mobile)

    #bem#sass/scss#gulp

    2

    Sky• 945

    @Skyz03

    Posted

    I would also recommend this naming BEM cheet sheet to you. link: https://9elements.com/bem-cheat-sheet/ Hope you find it useful .. Keep up the good work.

    Marked as helpful

    0
  • DekiDex• 290

    @DekiDex

    Submitted

    Hello, everybody, this is the new project that I have done, if you can leave a suggestion.

    CSS, HTML, Flexbox

    1

    Sky• 945

    @Skyz03

    Posted

    Hi dekidex, Nice work on completing the challenge. I really like your solution along with its responsiveness. But i saw a small glitch with changing the width size from 900 which increases its size dramatically rather than being smooth. I would recommend some media breakpoints use from the Bootstrap size to consider then while applying them. Keep up the good work!

    Marked as helpful

    1
  • Sky• 945

    @Skyz03

    Posted

    Hi Dwi 👋, Great work on completing the challenge. Really like the way you created a responsive design. Just a quick note, you could start implementing BEM convention to start naming your Css classes plus learn about SCSS from their website.

    Marked as helpful

    0
  • Sky• 945

    @Skyz03

    Posted

    Hi vikrant 👋, Great work on completing the challenge, I really like how made things responsive and it works great on most of the devices. My suggestion is it would be better if you name your css using dash "-" or underscore "_" rather than camelCase. Keep up the great work !

    Also you could have a look at the report section to improve further.

    0
  • Sky• 945

    @Skyz03

    Posted

    Hi Candra 👋, Great work on competing the challange, it looks great but I think you might have submitted for the wrong solution. I thing I found was you can make your background to no repeat. Keep up the great work!

    0
  • Sky• 945

    @Skyz03

    Posted

    @Tyson I really liked your solution to the challenge, plus I learned a lot from your solution ... during that time I found something you can improve on your code.. In the tablet version of your solution the overflow : hidden blocks the text side of the code so I would recommend overflow-x: hidden in that side which will make it a better site. Thanks again and keep the level up!

    0
  • Ahmad Syafiq Aqil Wafi• 170

    @Syafiqjos

    Submitted

    Hi! This is my first javascript challenge on this website. This also my first time using SASS and SCSS but I already using BEM Style for a while.

    I have a question about Input text. The text seems to be cropped from inside, I tried to enlarge the padding on the input text field, but it didn't change at all. As example try to write number 1, the top of 1 will be cropped. Is there any idea how to fix this ?

    By the way, any feedback is appreciated!

    Responsive Mini Calculator using SASS and BEM

    2

    Sky• 945

    @Skyz03

    Posted

    Hi Syafiqjos👋, Great work on completing the challenge ... I check the tip of no 1 as you said but the problem is not with input fields its the font ... the font style: Space Mono you are using has the same 1 style which appears to be cut ... But i Found another major issue in your calculator ... For instance 100 is total bill and tip % is 5% so the total should be $105 but yours appears 1005 (the no of people is 1 always). I have attached the screenshot link: https://i.imgur.com/2GX3mkO.png

    Marked as helpful

    1
  • claydson• 20

    @sicklex

    Submitted

    i'm new to this so be patient xD.

    i did my best but i need to improve more so if you have any tips to help me it'll be welcome

    Flex box

    2

    Sky• 945

    @Skyz03

    Posted

    Hi Claydson 👋, Great work on completing the challenge, Your solution looks great on the desktop version ... you could improve by adding the mobile version by adding @media queries Like @media (max-width: 380px) ... Keep up the good work ... If you have any question do comment back .. Cheers !

    Marked as helpful

    1
  • Sky• 945

    @Skyz03

    Posted

    Hi @FaBs51👋, Really liked your effort to make this design it looks perfect in the Dektop and Tab version ... I would recommend the use of @media queries to improve your mobile version like @media(max-width: 380px) ... you can also find more info on https://developer.mozilla.org/en-US/docs/Web/CSS/Media_Queries/Using_media_queries

    Marked as helpful

    0
  • Sky• 945

    @Skyz03

    Posted

    Great Solution @avatarfreak .. I really liked your approach ... going to bookmark this up so that I can also debug my solution. Thanks👍

    0
  • Sky• 945

    @Skyz03

    Posted

    Hi Kingsleyham, Great work on completing the challenge, I really liked your solution and the use of Vue.js. Keep up the good work !👍

    1
  • Sky• 945

    @Skyz03

    Posted

    Hi KaliRodri, Great work on finishing the challenge, I can clearly see the images in your solution. Keep coding. If you have any other question leave a comment below. Thanks👍

    Marked as helpful

    1
  • Sky• 945

    @Skyz03

    Posted

    Hi 👋, Great work on completing the challenge, I really liked your solution plus the end result after submission. Keep up the great work. I just spotted a typo in one input where if last name is error it shows *list name error not last name error. Thanks again and keep up the good work !

    0
  • Ashley McDaniel• 70

    @CoderOfArtMagic95

    Submitted

    Attempt 7... Trying to work a bit on the responsive part right now.. the code for the responsive hasn't been added yet.. Any advice on what I can do about it? I thought about adjusting the width of the document to 20% or something but that didn't work out as I hoped...

    stats-card-preview-card-component

    1

    Sky• 945

    @Skyz03

    Posted

    Hi Ashley 👋, Great work on completing the challenge. Regarding to make it responsive I would recommend applying media queries with respective width. I hope it helps. If you have any more questions feel free to comment down below. Keep it up.

    0
  • Gastón• 10

    @gastonmirande

    Submitted

    Hi! I am new working on CSS and HTML, and this is my first challenge. I done this challenge and i saw a tutorial video to support me. Here is the link , it is so helpful ;) Thanks!

    https://www.youtube.com/watch?v=Xe_qNR1mmCg

    Card-solution

    1

    Sky• 945

    @Skyz03

    Posted

    Great work on completing the challenge, Your Site is responsive plus looks perfect on all screen. Keep it up👍!

    Marked as helpful

    0
  • Hdev• 215

    @hemanuela

    Submitted

    I know that this a Newbie Challenger, but as a newbie, I did a lot of messing trying to adjust some details. I don't get how to put de bg-patterns yet. Maybe in another attempt. I will be back!

    Profile card component (first attempt)

    3

    Sky• 945

    @Skyz03

    Posted

    Hi hemanuela, Great work on completing the challenge. I can see to implement the background, you can use ::pesudo elements where you can then use the background: url() plus position: absolute and content: "" with addition to z-index. If you have any question feel free to drop some comments.

    Marked as helpful

    0
  • Bogdan-Mihail Pavel• 585

    @codeguy9

    Submitted

    Hi guys!

    First of all I'm having a problem centering the main div vertical. I tried "align-items: center" or "justify-content: center" but it does not work. I tried even to put a margin but nothing happens.

    Second, I am having scrollbars on my bottom circle. Don't know why and how to solve this.

    The Victor's image is not in center. I placed it with "position: absolute" and it's stuck like I can't even give it a width because it's not working.

    Please help I want to make it perfect. Thanks!

    HTML, CSS, FLEXBOX

    2

    Sky• 945

    @Skyz03

    Posted

    Hi Bogdan-Mihail Pavel👋, Great Work on completing the challenge. As per you mentioned to make your margin work like margin: 0 auto; to center the elements you need to give it a width property plus I think you need to wrap you elements in different div element rather than main. Here is my repo solution which i did in the past: https://skyz03.github.io/Front_Profile-Card-Boot/

    For your second question.... I think overflow hidden which i recently learned to eliminate spaces.. will work

    Finally, Inline css doesn't work how you have written it need to be inside style element.

    I hope it helps plus if you have any questions let me know

    Marked as helpful

    0