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
OverviewSolutions13Comments176

All comments

  • Roc Tanweer• 2,500

    @RocTanweer

    Posted

    Hello 👋

    I used your app and found a couple of bugs and would like to suggest some best practices and some helpful resources

    Bugs

    • Custom tip field is not working expectedly
    • The app is not well responsive as the logo gets cropped on my mobile (moto g52)
    • When you select tip before any other field, either throw error or do nothing. Your app is showing NaN

    There maybe other bugs, so please thoroughly test your app ☺️

    Best practices

    • <h1> is meant to contain the title of the whole web page and section must contain a heading to represent the title of that particular section
    • In SCSS, use maximum of 3 level nesting
    • For alt text of an image, make sure it properly describe the image to screen reader can read it to people with visual impairment.

    Resources

    I would suggest you to learn the fundamentals of HTML5 to fully grasp when to use which element and why exactly that matters. I learnt it from MDN doc and it's really very helpful.

    Seems like I've added quite a lot 😅 But I hope it helps you grow as a web developer 😉

    Have a great day 👋

    0
  • Dushyant Goyal• 260

    @goyal-Dushi

    Submitted

    Hi, I have created this web application in React. The application is very simple though.For state management , particularly here, I have made use of Context API and useReducer.

    I won't say that I have utilised the most optimised approach to handle state updates and functionality expected from the design. So, I would really appreciate if someone can help me optimise the re-renders of component.

    Hope you enjoy my work ! Let me know of any bugs or enhancements you would like to have :)

    URL : Website

    Find my Other Designs here : Frontend Designs

    Other Social Platform where you can connect or help me

    1.Github

    2.Instagram

    React SPLITTER web application

    #react#web-components#accessibility

    1

    Roc Tanweer• 2,500

    @RocTanweer

    Posted

    Hello 👋 Congratulations on completing this challenge.

    Everything works well and the app is also responsive.

    1
  • Raymart Pamplona• 16,090

    @pikapikamart

    Submitted

    Hi, this is my 22nd challenge here and my 2nd react challenge as well here.

    The challenge was really good especially if you are learning a framework like me because there are lots of repetitions and dynamic changes.

    I added a pagination so that it won't bombard data. A loading screen would be nice in here but I just realized it just by now typing this comment. I tried my best to focus on different content of the page so that screen reader will function properly.

    Would be really glad for other proper way in react on my solution, really need that.

    Thank you for checking out the solution!!

    Mobile first, React

    5

    Roc Tanweer• 2,500

    @RocTanweer

    Posted

    Hello 👋

    Your work is mind blowing..!

    I am also learning react and looking at your code really making me happy and enthusiastic to learn with even more passion...

    You have also been a great coder here on this platform and I hope you know who I am too LOL

    anyway, I would appreciate if you could tell me some tips about your approach to such projects with react or in general 😊

    And lastly...Here's your LightHouse score

    • Performance -> 67
    • Accessibility -> 98
    • Best Practics -> 100
    • SEO -> 100

    Hope my words encourages you..

    See you next time 👋

    PS : It's good to see you using Gulp, But I believe we don't need to. Just importing the main app.scss file in App.js should also work. You can then use sass and it's partials normally without concerning about the compiled css file

    Marked as helpful

    0
  • Raymart Pamplona• 16,090

    @pikapikamart

    Submitted

    Hello!! This is my 21st challenge and my first challenge using React!!

    I have been studying React right now, mostly google-ing things out since I don't have any course about it hahaha but managed to learn even in small increments.

    This challenge was fun to create, I want to add other animation but useEffect really did make my head hurt a lot, so yeah, didn't add other but managed to add like in the design. But as I go coding this challenge, useEffect keeps making more sense and so yeyy.

    Also, why does it keeps prompting that it needs the props that I used inside it, as well as the other functions that I used. It would be counterintuitive to include them in the dependency array since I am not firing the effect from those, but it keeps telling me put them inside. Then if I put the props inside, it says now it needs to be destructured, then when I desctructured it in the component, it now needs to be inside a useCallback. I have a lot to test.

    I also implemented my own drag and drop, didn't want to use other modules because it is my first time creating a drag and drop, it is beneficial to first create it as much as you can before jumping to other solution. I got it right :>>

    There would be a lot of improvements to be done and if you can point other things, I would really appreciate it. Thank you for checking it out!!

    First challenge with React^

    5

    Roc Tanweer• 2,500

    @RocTanweer

    Posted

    Hello 👋 been a long time since we talked

    Nice seeing you doing react..! I started react too

    I love the way you coded and there were a lot of things to learn for me 😊

    The way you worked for accessibility was impressive..!

    Hope we all learn react and other framework by heart

    And Good Luck for your react journey..!

    See ya..! 👋

    PS: You may create a custom hook to deal with LS. Web development simplified explained it very well at YT

    0
  • Wallnuts• 110

    @WallNutss

    Submitted

    I'm kinda confused when building this. Like when I add an event listener for user input, I can't instantly update the value that the user inputting, so that's why I call function instead reassign the variable each time event started. Mind tell me why is that? any feedback are welcome

    Tip Calculator App Main

    3

    Roc Tanweer• 2,500

    @RocTanweer

    Posted

    I would use buttons instead of divs for percentage options

    0
  • Mike Anthony• 120

    @mikeanthony23

    Submitted

    I tried to apply what I learned from tutorials way back, This app also accepts a valid domain name also made some custom errors like losing connection and incorrect IP and domain names. It also uses your IP at initial page load :)

    I'm just new to MVC and JS so I don't know if I wrote both correctly :( and also tried to use OOP xD.

    I did not follow the design much coz I want to be responsive as it can especially on mobile version coz the IP details takes too much space, So I decided to tweak it a little bit.

    Any suggestions will be appreciated. Thanks ;)

    Built with SCSS, JS and MVC architecture

    1

    Roc Tanweer• 2,500

    @RocTanweer

    Posted

    Seems like you got MVC from Jonas at udemy...hello mate 🙃

    1
  • Roc Tanweer• 2,500

    @RocTanweer

    Posted

    I saw the code now....

    You should use semantic HTML5 tags and not just divs

    Always avoid using var and start using let or const

    Reasons to not use var...

    • it is hoisted, mean you can use it before it's declaration
    • create property on window object
    • It is function scope and not block scope, mean you can manipulate the variable inside of a for-loop or if-else block from outside

    Marked as helpful

    0
  • Roc Tanweer• 2,500

    @RocTanweer

    Posted

    Hello 👋 bhai Have a heart for the dark theme 🤣

    0
  • Roc Tanweer• 2,500

    @RocTanweer

    Posted

    Hello 👋 @Sayantani

    I noticed you had difficult time making the layout with pixel-perfect measurement....So start using "Irfan View", an image viewer, that will help you measure the layout or else you could buy the membership...

    Do learn fluid typography at csstrick to make font-size, width, height, margin, padding, etc fully responsive for your next project

    Good luck

    Marked as helpful

    0
  • David Rhyne• 270

    @davidrhyne

    Submitted

    I found styling the images to be trickier than expected due to their inconsistent shapes. For example, Belgium is fairly square and American Samoa is pretty rectangular by comparison. I masked this on the main page, but allowed the flags to be their normal shapes on their "featured" pages. Are there any CSS properties for managing images of various shapes?

    And this is my second React app from scratch, so I would greatly appreciate any overall feedback on the React and styled-components coding.

    Thank you in advance and Happy Coding!

    REST Countries API - React, styled-components, grid, flexbox, and CSS3

    2

    Roc Tanweer• 2,500

    @RocTanweer

    Posted

    Hello 👋

    Can I make this with just vanilla javascript?

    I am just facing problem with url handling...

    1. I will make ajax call right when a user visits and display all the countries
    2. When user clicks on any card, then I can change the url and make another ajax call and display the details of that country by changing the content of the homepage
    3. User can also come back to home page by clicking on either back button of app or browser
    4. But If user shares a modified url to someone else and that person paste it in his browser then he will get error, right?

    My question is how you managed it? Since it is an SPA, you can't have multiple page and thus user can't make a request on any page other than the homepage

    Please help....🙏

    0
  • Roc Tanweer• 2,500

    @RocTanweer

    Posted

    Hello 👋

    Can I make this with just vanilla javascript?

    I am just facing problem with url handling...

    1. I will make ajax call right when a user visits and display all the countries
    2. When user clicks on any card, then I can change the url and make another ajax call and display the details of that country by changing the content of the homepage
    3. User can also come back to home page by clicking on either back button of app or browser
    4. But If user shares a modified url to someone else and that person paste it in his browser then he will get error, right?

    My question is how you managed it? Since it is an SPA, you can't have multiple page and thus user can't make a request on any page other than the homepage

    Please help....🙏

    0
  • Roc Tanweer• 2,500

    @RocTanweer

    Posted

    Hello 👋

    Are you changing the content of homepage after making every ajax call?

    Cause your url is not changing as clicked on any country card...

    Please explain cause it's hard to read that 500+ line of js file 😅

    0
  • Roc Tanweer• 2,500

    @RocTanweer

    Posted

    Hello 👋

    I suggest use dart-sass instead of node-sass because dart-sass get the update first and then you can use the new module system in sass which will make your whole workflow DRY

    I used that and I love it 🙃

    Hope it helps and happy coding 😉

    0
  • Jun• 220

    @JunYuHuang

    Submitted

    1. Is there a way to create a Styled-Component with nested selectors that apply TailwindCSS classes?
    2. Did I use the best practices for implementing Redux in this project? If not, what can I improve on?

    Todo app w/ React, Redux, TailwindCSS, Styled-Components

    1

    Roc Tanweer• 2,500

    @RocTanweer

    Posted

    Hello 👋 @Jun

    I saw you created manifest.json file in public directory...but when I am visiting your web app, there is no pop-up saying install this app on your home screen.why?

    I heard that adding manifest.json provides that feature.

    I think I know why that is not working...maybe because you put that file in public directory instead of root directory of your project?

    I am not sure myself, please explain 😅

    0
  • Roc Tanweer• 2,500

    @RocTanweer

    Posted

    Hello 👋

    Great work 👌

    Using svg as images in social links is quite unique and even changing their color on hovering is also very new to me..! I will try that too...! Really learnt a lot from you..!

    Keep it coming and happy coding 😉

    0
  • Roc Tanweer• 2,500

    @RocTanweer

    Posted

    And about aria...

    You have used aria-describedby quite often but you may have got confused and did everything opposite of how it was suppose to be...

    Lemmi explain...

    Describedby simply mean something is described by something else

    When you put that aria on an element, then it will take the id of another element that is describing that element and you have been doing the opposite...

    A paragraph will describe a heading and not the opposite...So

    You should put aria-describedby="id of paragraph" on heading...

    Good luck

    You can visit MDN for more info

    1
  • Roc Tanweer• 2,500

    @RocTanweer

    Posted

    Hello 👋

    Great work 👌 and quite extensive use of arias...

    I just reviewed you index.html file and it was really impressive..! I also made the same project but your work is too good...

    But I wish to point out some things...

    • In feature tab section, the tab changers are suppose to be buttons and not h tags... Because users are clicking on them and something is happening

    • When you put an icon in a link, you should put a span in the link with text describing the icon and adding sr-only class to that span. All these for accessibility purpose.

    <a><span class="sr-only">Facebook icon</span>icon here...</a>

    You can download sr-only class from Google...

    Hope it helps and happy coding 😉

    1
  • Roc Tanweer• 2,500

    @RocTanweer

    Posted

    Hello 👋

    Wherever "2" should be, there is "two" present.

    Like on calc key and at theme toggle switch

    One more thing, I guess the font size of numbers in input field seems a bit bigger on my mobile...and you should limit like upto how many digits a user can calculate...or else it will just go off-screen

    Hope it helps and happy coding 😉

    0
  • Roc Tanweer• 2,500

    @RocTanweer

    Posted

    If you wish your code to be DRY, then I would suggest learning SCSS and avoid using css

    1
  • Gilang Aditya• 385

    @madegilangaditya

    Submitted

    I used display grid to make the column and add position:relative; top: -50%; If there any best practice to do it, please kindly add in comment. Thank your

    Mobile first Workflow, CSS Grid

    3

    Roc Tanweer• 2,500

    @RocTanweer

    Posted

    You did really good, Almost pixel perfect 🎉 there are multiple ways to do the same job...

    Every developer has their own way to complete a task

    Good luck 😃

    1
  • Vinay• 125

    @foolhardy21

    Submitted

    I have made the changes mentioned below in comments. Feel free to critique further. Thanks.

    HTML, CSS

    4

    Roc Tanweer• 2,500

    @RocTanweer

    Posted

    I would recommend you learn SCSS to make your whole code absolutely reusable 👍

    Good luck 😃

    1
  • Bonrey• 1,130

    @Bonrey

    Submitted

    Hello, everyone! 😃

    I decided to take a short break from CSS frameworks and deepen my SASS knowledge a little. And this challenge was a perfect opportunity to do that! I focused only on Dart SASS. It is a specific implementation of SASS that gets all the bells and whistles first. ✨

    In brief, here is the list of Dart SASS tools I used for this challenge:

    • variables, mixins, placeholders;
    • built-in modules, such as sass:color and sass:map;
    • @use, @forward keywords instead of @import, which is getting deprecated.

    As regards the challenge itself, it was pretty fun. I got a kick out of positioning the curved parts. 😄 And resizing images depending on the screen width was quite enjoyable, too! Finally, it's worth mentioning that I used Font Awesome icons for social media.

    As usual, any feedback is very welcome! Probably the only question I have is this: should I avoid extra media queries, or is it okay to use as many as I need?

    P.S. I went with the default form validation this time simply because I didn't want to clutter my project with an extra js file. 😏

    P.P.S. You can also check out the README.md file on my github page for extra links.

    My first fully responsive landing page, using Dart SASS.

    2

    Roc Tanweer• 2,500

    @RocTanweer

    Posted

    Hello 👋 @Bonrey

    Very nice work 👍 man..!

    For your answer,

    Learn fluid typography... It will let you use media queries only a few time when changing the layout and that's it..!

    Hope it helps and happy coding..!

    1
  • Bonrey• 1,130

    @Bonrey

    Submitted

    Hello, folks! 🎉

    Once again, I decided to try out something new, and this time my choice was another CSS framework — Bulma.

    At first, this tool seemed very useful to me. There was nothing complex and it helped me add basic styles in no time. However, as I went on with the project, I needed my site to be more responsive and some of the predefined classes didn't suit my needs. That's why I ended up writing lots of @media queries and other styles.

    Anyway, I enjoyed working with Bulma way more than with Bootstrap, especially, when it came to responsiveness. I think it has something to do with its simplicity. However, if someone asked me whether I'd prefer writing my own styles or using one of the CSS frameworks mentioned above, I'd most likely go for the former.

    I'll probably try out a couple more CSS frameworks before making up my mind, though 😁

    Landing Page built with SCSS & Bulma (CSS Framework)

    2

    Roc Tanweer• 2,500

    @RocTanweer

    Posted

    Another great 👌 project from you @Bonrey

    You worked quite a lot on this project as it seems...

    I would like you say something, may I?

    • You are the second one I saw using placeholder classes, I am really happy..! You are quite interested in SCSS
    • Why not using a mixin for all those media queries... DRY should be followed, no?
    // conversion from pixel to rem
@function rem($var) {
    $result : $var / 16;
    @return $result * 1rem
};

// responsiveness 
$breakPoints : (
    'extraSmall' : rem(320),
    'small' : rem(375),
    'large' : rem(768),
    'tab' : rem(1024),
);

@mixin responsive($size) {
    $breakPoint : map-get($breakPoints, $size);

    @media screen and (max-width : $breakPoint){
        @content
    }
}

    • I would suggest learn dart-sass and use scss modules and stop using import as the higher developer are suggesting because import will be deprecated see this article

    • I see people using css framework but I don't know why but it doesn't feel important to me...any suggestions?

    Hope these helps you and happy coding 😉

    1
  • Daniel• 280

    @ddaniel27

    Submitted

    I really need help with widths. I put an early @media query to avoid weird behavior, so, how do you do it in general?

    Responsive three columns cards

    2

    Roc Tanweer• 2,500

    @RocTanweer

    Posted

    Great 👌 work ☺️ @Daniel

    I am on mobile so I can't inspect your project but I am giving some suggestions 😊

    • when the button is hovered then you are giving it a border which is moving elements around it which is not good for UX, so you may do this
    .btn {
    border : 2px solid blue;
};
.btn : hover {
    border-color : #ffffff;
}

    This way you are already giving it a border of same color as background but when hovered, the color of border gets white or as per the design and not actually creating a border

    • Use Irfan view to measure the layout from the design image they provide

    Hope it helps and happy coding 😉

    0