Skip to content
OverviewSolutions
10
Comments
22
Joshua Hellard
@jhellard

All comments

  • Jeff Guleserian•480
    @jguleserianSubmitted almost 2 years ago

    Dear Fellow-coders:

    This was an interesting challenge for me for a couple of reasons. First, the layout was not too difficult, at least until I had to construct the social icon "bubble." If there was an .svg for this somewhere, I certainly did not find it. I ended up using the Figma illustration for my model. The second reason I found this interesting was that it gave me time to work more with the JavaScript and jQuery. Consequently, I decided to add on some personal challenges just for practice. In addition to the FM challenges, there were my personal goals:

    • Have the date of the post update so it always displays the current date.
    • Create hover effects for the share button and the individual links plus the social media channels
    • Have the share "bubble" animate/transition in and out at a controlled rate
    • Have the share "bubble" disappear when the share button is clicked a second time (especially helpful at the media query @375px).

    Probably my biggest challenge was trying to put hover effects on the "share arrow" plus the <div> it sits in (after making it a circular button) so they both changed to opposite colors at the same time. While I could get them to do it separately with CSS, I had to resort to JavaScript/jQuery to get them to do it at the same time. If someone has a way to do this with CSS alone, I would be so appreciative if you would share it with me.

    Anyway, if you get a chance to take a look at my solution, I'd sure love any constructive feedback - positive or negative. If you peruse my README file on the repository, you'll see some of my areas of concern and focus. Otherwise, I could use feedback on what you think of:

    • The way I organized my CSS
    • The structure and organization of my HTML (sometimes I should practice more restraint on creating containers, lol!)
    • A shorter method of getting the current date formatted as DD-MMM-YYYY either using jQuery or JavaScript

    Thank you ahead of time for taking a look at my solution. I am always so appreciative for any comments you could offer. I learn so much through this process.

    Best wishes, All!

    Jeff

    Article Preview Component: jQuery/JS & Extra Challenges

    1
    Joshua Hellard•545
    @jhellardPosted almost 2 years ago

    Hey Jeff! The solution looks great, I like the drop-down (or drop-up? 😂) menu a lot.

    The CSS is very well structured, I will say the selector approach used is not one I see often. I gravitate towards the Block, Element, Modifier (BEM) approach myself, It's a more concise way of writing class names that I believe makes it easier to maintain in the long run, especially using something like Sass for nested selectors. Native CSS nesting is a thing now but it still very early, I'd take a look at THIS video for more information.

    HTML structure looks good, great use of semantic tags. There are a few containers that aren't necessary but nothing excessive.

    If you are not opposed to importing libraries, there is a great one called Moment.js that I often use for getting dates formatted, it is super simple to work with.

    As for the CSS hover question, you could change the 'fill' on the SVG to 'currentColor' and when you modify the 'color' in CSS it will change accordingly. You could then use a custom CSS class to modify the div and the svg on hover to the desired colors. Here's an ARTICLE more about this. I'd be happy to throw a CodePen together for you to demonstrate this if you'd like, I know it can be a bit confusing.

    Keep up the great work! Happy coding!

    Marked as helpful
    1
  • Imtiaz Raqib•10
    @imtiazraqibSubmitted almost 2 years ago

    • What did you find difficult while building the project? — I had no difficulty in building the project but when it came to deploying it, I struggled to find an optimum solution there since I created my solution using React. Learning Netlify to deploy my site was interesting and helpful in understand that the front-end development also includes launching a SPA >.<

    • Which areas of your code are you unsure of? — None, code works as intended.

    • Do you have any questions about best practices? — Maybe when it comes to prop data as long description and long headings. Is it best to make it a variable and pass as prop data from parents?

    React QR Code Component using CSS Grid, React Props & Components

    1
    Joshua Hellard•545
    @jhellardPosted almost 2 years ago

    Hey Imtiaz! Storing the prop data in variables is a good idea, for this app it's not a big deal but if you were rending multiple cards you could have an array of data and map over it to easily pass the different values to the component.

    Great solution, happy coding!

    1
  • Mariana Freire•20
    @marisfreireSubmitted almost 2 years ago

    How can I make this more accessible? I feel as if working with SVG files takes away the opportunity for me to add that alt attribute to images, and I really don't know how to do that when using them as background images. Any thoughts? All feedback is welcome.

    Order Summary Card made with custom variables

    1
    Joshua Hellard•545
    @jhellardPosted almost 2 years ago

    Hi Mariana, great solution!

    You can use a img element and pass in the svg as the src, that would allow you to set an alt tag for your images. Utilizing this approach you could change your container-image from a div to an img and just apply the same CSS.

    Here's an article that describes this in more detail. Happy coding!

    Marked as helpful
    1
  • Joshua Hellard•545
    @jhellardPosted about 2 years ago

    Hi Wilson! It looks like your images aren't loading properly, if you can get that fixed I'd love to give some feedback!

    2
  • Javier Tamez•20
    @ProwlingLynxSubmitted about 2 years ago

    Challenge #02 complete! ^.^

    It's refreshing having to build something with a clear finish line. I'm happy I watched Kevin Powell's YT channel and the recommendation to this site. Hope everyone is having a nice day.

    I'm avoiding using frameworks for the first three challenges mostly to help myself learn better habits. I can appreciate how much easier react makes things.

    Somethings I had problems with were planning for the mobile implementation, CSS development, and CSS testing.

    The questions I'm asking are such:

    • What is a good approach to plan for mobile views? I personally built for desktop without planning for mobile. This lead to adding more classes and lots of media queries.

    • What is a good rule of thumb for committing CSS work? When I work with JS I feel confident in committing after creating new functions, updating a feature, or debugging something. When it comes to CSS I don't have that instinct yet.

    • Somewhat related to the previous. Are there better ways to test CSS than observing their behavior via chrome tools? This one might be worded a bit weirdly. I find it a bit awkward having to observe the changes and then mouse the element to confirm changes. In JS I can use jest to test functions or HTML, but I'm not sure where to look for CSS testing.

    Thanks to everyone reading this :]

    Interactive rating - Javascript, CSS, HTML. No frameworks

    1
    Joshua Hellard•545
    @jhellardPosted about 2 years ago

    Generally most people do a 'Mobile First' approach, styling out the page for mobile viewports and then adding breakpoints when scaling up as needed. Some frameworks have preset breakpoints you could look at to get some ideas of what to use.

    Not sure if it's the best practice but I'll generally get my full page looking good and committing that CSS, with a commit message of like 'Mobile design completed'. Of course, you never catch everything the first time so I'll add minor updates to design with future commits as a side-note.

    Testing CSS can be tedious, you can edit the CSS properties in dev tools and get it right then change it in your editor once you get your desired effect.

    I hope I could provide some insight :) Keep on coding!

    Marked as helpful
    1
  • Ignacio Andrés Molina•300
    @StrocsSubmitted about 2 years ago

    Hi coders!

    I was learning React and decide to use it in this challenge to keep practizing, also added a functionality for 'read' a notification clickin it. If you know React I'll be gratefull for some feedback!

    Keep coding! cheers

    Notification Page | Reactjs, hooks.

    1
    Joshua Hellard•545
    @jhellardPosted about 2 years ago

    Looking good! I'd suggest refactoring your handleCounter function to check if the message is read, it will continue to run even when the message is marked as read. Good use of useState, this is a good challenge for learning React for sure!

    A fun challenge for this one I'd say is to make your data rendered dynamic, maybe pulling in from a .json file and mapping over it with your Notification component.

    Keep on coding! ✌️

    Marked as helpful
    0
  • Joshua Hellard•545
    @jhellardPosted about 2 years ago

    Looking good NIÑA! For your img-dashboard class I'd suggest not setting a fixed size, allowing images to adapt to the screen size and still look great can be one of the trickiest things to do. Try something like :

    width: min(100% - 2rem, 800px);

    You can read more about the min() function here but what it's doing in that example is setting its minimum width to 100% of the parent - 2rem (Gets averaged to 1rem each side) and the 800px is setting the maximum width it will grow to. Give it a go, it's a super handy function!

    0
  • y4rb0w•260
    @YavanhaSubmitted about 2 years ago

    Hello everyone,

    Finally my first intermediate project, it was very instructive.

    Please if you want to give me any feedback, I would appriciate if you mainly focus on HTML & CSS. That's what I'm currently working on.

    The JS I did something very quickly to make it work, can be improve a lot :).

    Thank you

    Mobile first CSS HTML pure JS training layout management (grid & flex)

    1
    Joshua Hellard•545
    @jhellardPosted about 2 years ago

    Hey y4rb0w! Your solution looks great! The HTML looks good, great use of the semantic tags. Everything looks super close to the design, the lightbox functions very well. I love the animated shopping cart, really nice touch. I did notice when scaling down the screen size the header starts to overlap before hitting the mobile breakpoint, I'd take a look at that.

    The carousel-thumbnails div wraps before hitting that breakpoint causing one of those images to take full width.

    Awesome work, keep on coding!

    Marked as helpful
    1
  • Joshua Hellard•545
    @jhellardPosted about 2 years ago

    Hey Joshua! For something with a simple layout like the QR code if you find there is no need for the breakpoint I'd just go without it as long as the content is displayed properly at all screen sizes.

    Marked as helpful
    0
  • Hibiscuit•30
    @Hibiscuit0Submitted about 2 years ago

    Hi,

    I'm a newbie to front-end dev. For this challenge, my main question is about how to vertically center the card ? Is my way doing that efficient enough ?

    Thanks for your advices

    Hibiscuit0 Newbie QR code component

    4
    Joshua Hellard•545
    @jhellardPosted about 2 years ago

    Assuming your container is 100% of the height/width you can use display: grid and place-items: center to center is all very easily. The method you used is not bad however, there is just better ways now.

    Marked as helpful
    0
  • Joshua Hellard•545
    @jhellardPosted about 2 years ago

    I can't get the website to work on my end, when I load the page I get 'An error occurred! Input correct IPv4 or IPv5 address or check your internet connection.'

    I believe it's meant to say IPv4/6, possibly a typo?

    If you can get it fixed I'd love to take another look but right now it's not functioning properly.

    Marked as helpful
    0
  • Jeremy•140
    @Duck322Submitted about 2 years ago

    Fun and challenging project for me! I tried using @import for my fonts and icons, but I'm wondering if this is acceptable or if there is another way that would be considered best practice? The shopping cart icon does seem to lag a little when the page loads.

    Responsive preview card using a CSS flex container

    1
    Joshua Hellard•545
    @jhellardPosted about 2 years ago

    You can use either @import or simply have a link tag in your index, both work the same. I will say I don't generally see people using @import in their CSS files, I'd recommend placing them solely in your index file.

    Marked as helpful
    0