Skip to content
OverviewSolutions
21
Comments
6
HK273
@HK273

All comments

  • HK273•530
    @HK273Posted 8 months ago

    Nice Work! Check this out for formatting your tailwind classes. Little video example here

    Marked as helpful
    1
  • Md Mizanur Rahman•240
    @webmmrSubmitted over 1 year ago

    Lots of issues,

    1. couldn't complete the tabbed functionality without destroying the task array
    2. couldn't implement the drag & drop functionality
    3. couldn't implement the dark/light mode

    Any help will be highly appreciated.

    To Do List

    1
    HK273•530
    @HK273Posted over 1 year ago

    Nice work! For a good overview of light/dark mode check out this. You'll want to use a theme context as well, so check this. For drag and drop there are a few different approaches but I found react-beautiful-dnd to be pretty good. It can be a bit fiddly at first but there's also a good tutorial here. Hope that helps!

    Marked as helpful
    0
  • jmanprojects•130
    @jmanprojectsSubmitted over 1 year ago

    I don't know why, when I put 100 vw and 100 vh to the main container, it creates the scroll bars

    NFT card responsive

    2
    HK273•530
    @HK273Posted over 1 year ago

    Nice job! Chuck this on the body tag to get rid of the scroll bars....

    body {
overflow: hidden;
}

    This will drop your footer out though so you may want to re-configure your html / other styles a bit if you want to keep the attribution div

    Marked as helpful
    0
  • Kamil Wiater•230
    @WiaterKaSubmitted over 1 year ago

    I have problems with the proper centering of the content on the page (there's more space on the left) and adding quotation mark.

    Also I think that CSS could be more condensed - any ideas how to make it more understandable and shorter?

    Thanks in advance for all suggestions!

    Happy coding!

    Testimonial Grid (no RWD)

    3
    HK273•530
    @HK273Posted over 1 year ago

    Good job! Liked your comments in the HTML to split up your grid sections. Quick tip for your centre issue. Use fractional units (fr) rather than percentages on your main tag (gird-template-columns)

    main {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  grid-template-rows: 50% 50%;
  gap: 30px;
  margin: auto;
}

    For the responsive side of things, the biggest tip I can give is to approach the design as mobile first. This does take a while to get used to but once you grasp the concept, you'll be writting much less code and having a much easier time with media queries etc.

    The best way to think about it is if you just write the HTML without any styles, it will automatically be in a mobile state (everything stacked on top of each other). Then rather than worrying about positioning and gird at first you can add the design element styles to the text, containers etc.

    Then you can think about adding gird, flexbox etc. and then use a min-width media query to set the desktop styles. Check out Kevin Powells video on mobile first for a good intro to this.

    Hope this helps! Keep up the good work!

    Marked as helpful
    1
  • rockdoginafog•710
    @rockdoginafogSubmitted over 1 year ago

    This js is horrible I know, but is there any easier, or better way to do it? If you know let me know!

    Happy Coding! :D

    Time Tracking Dashboard

    1
    HK273•530
    @HK273Posted over 1 year ago

    Nice job on the design of this and getting it all working! I feel your pain with the JS on this one aha - I remember doing it myself as one of the first JS based challenges I tried. Firstly, you're going to be much better off actually using the data.json file included, rather than hard coding the values directly in the HTML. Take a look at the fetch API (https://www.w3schools.com/jsref/api_fetch.asp) and map function (https://www.w3schools.com/jsref/jsref_map.asp) for this. What this will allow you to do is render the entire HTML strucutre for each card element and include all of the data (much less code in the long run!). You could then use a similliar method to what you've already implemented to toggle between each data point. You'll also want to take a look at using the forEach method (https://www.w3schools.com/jsref/jsref_foreach.asp) to manage the event listeners assigned to the buttons. Not saying my method is the perfect soltuion for this, but check out my code (https://github.com/HK273/time-tracking-dashboard/blob/main/script/script.js) for this challenge if you want more of a clearer idea on what I'm talking about. Hope this helps!

    1
  • Alex Hamsterson•20
    @pirozhmeisterSubmitted over 2 years ago

    Hello! I'm Alex. This is my first experience of building a web page after finishing 5 sections of "Web Development Bootcamp" on udemy.com, so please cut me a little slack. I only made a page for desktop and it is not adaptive yet. I just wanted to practise my skills I had got at Bootcamp. As for difficulties - I can not understand how to position .attribution class - it overlaps the other block while scrolling and follows the scroll. You can see it if you change the scale of the page. I also cannot understand how to make blocks of reviews adaptive according to scaling (perhaps I need to use percent instead of rem, I tried but failed the calculations), but I'm sure I'll find the answer later. If you give me the answer - I would really appreciate it.

    HTML, CSS

    1
    HK273•530
    @HK273Posted over 2 years ago

    Nice solution Alex! Quite a tricky one to attempt first time. I would suggest looking into Grid and Flexbox as float-based layouts are somewhat dated now. You'll find it much easier to make it responsive and get more flexibility with Grid than using float. Check out Kevin Powell’s video on this exact challenge for a great introduction to Grid. https://www.youtube.com/watch?v=rg7Fvvl3taU&t=14s

    Marked as helpful
    1