Skip to content
OverviewSolutions
6
Comments
6
Tanner Kopel
@tankop1

All comments

  • Lance Martija•185
    @lancemartijaSubmitted about 3 years ago

    It's been a while since I've done some challenges here on Frontend Mentor. I have to admit, I'm getting kinda rusty with my JavaScript and CSS game. I'm really not that confident with my skills when it comes to JS, but I'm still getting the work done pretty nicely actually. In this project, I kinda didn't know how to create an image carousel, so I just tried to do it my way instead. I'm not proud of it, but hey, it works. Honestly though, I didn't know what I was doing and it's kind of embarrassing to share my code this way. Anyway, it would be awesome if you were to leave some insights on how I should've made the image carousel. I would highly appreciate any form of criticisms or helpful insights you'd like to share.

    Thank you in advance. Keep on coding! ^^

    Responsive Room Homepage using Sass, JS, and HTML5

    2
    Tanner Kopel•320
    @tankop1Posted about 3 years ago

    Here's a good example of an animated image slider made with just HTML and CSS, no JavaScript: https://codepen.io/Schepp/pen/WNbQByE

    The trick to building an easy animated image slider is to have a main container with overflow: hidden, an image container inside of that with display: flex, and then your images inside that. Make sure the main container is the same size as each image, and because the overflow is hidden, you should only see the first image. Then, attach an event listener that uses transform: translateX(-LENGTH_OF_IMAGEpx) to move the flex container to the left, therefore showing the next image.

    Good luck!

    Marked as helpful
    1
  • Josh•110
    @JoshMoonerSubmitted about 3 years ago

    This is my second serious code on HTML+CSS. I would want how to use filter properties, because the color filter who cover the image is not the enough dark like the design. In my solution the filter color is a little more clare. In other hand, I would I want how to place the footer and the attribution without affecting the rest of the page. Any feedback would be welcome, I really appreciate

    Easy Solution. Stats Preview Card Component Main

    2
    Tanner Kopel•320
    @tankop1Posted about 3 years ago

    To place elements without effecting the rest of the page, use absolute positioning:

    You can use absolute positioning with the position: absolute command in CSS. This allows you to position the element relative to the nearest positioned ancestor, allowing you to place an element 0 pixels from the bottom with the command bottom: 0px. This also makes it so the element's position does not effect the position of other elements on the page.

    More info on absolute positioning

    Marked as helpful
    1
  • Jordan•60
    @jordy-whiteSubmitted about 3 years ago

    Hello good ppls

    I tried using CSS grid template areas for this one, since it seemed convenient for rearranging the layout at different screen sizes (was this a good choice?)

    I also used Gulp and SASS after watching a tutorial about it, and split my SASS files up. I'm aware I'm using the depreciated @import here, but I haven't learned the replacements yet.

    The form and button is very clumsy. There's a lot to clean up there.

    JS is a big weakness of mine, and you'll see I had trouble with it here. I'm not quite understanding the 'click' event listener. I don't consider this part of the challenge to be finished - any feedback or tips on how to fix it up would be appreciated!

    Base apparel

    1
    Tanner Kopel•320
    @tankop1Posted about 3 years ago

    A couple tips:

    1. Your event listener may not be working for a couple reasons. First of all, you should either use the onclick attribute in your HTML, OR the .addEventListener('click', eventHandlerFunction);, not both. Also, make sure to attach the event listener to the button itself, not the image inside of the button. Lastly, because the button is inside the form element, the browser automatically reloads the page every time the button is clicked, which will remove your error message. To stop this from happening, you can use e.preventDefault(); at the top of your "validateEmail" function to avoid the browser's default behaviors (e.g. reloading the page) when a form button is clicked.

    2. Instead of using type="text" in for your inputs, it would make much more sense to use type="email". This code is more semantic, and also lets you use tools such as the :valid pseudo-class to change the styling of the input based on if the email is valid.

    Marked as helpful
    0
  • Tanner Kopel•320
    @tankop1Posted about 3 years ago

    You can use absolute positioning with the position: absolute command in CSS. This allows you to position the element relative to the nearest positioned ancestor, allowing you to place an element 0 pixels from the bottom with the command bottom: 0px

    More info on absolute positioning

    Marked as helpful
    2
  • walid ghenaiet•150
    @walidghtSubmitted about 3 years ago

    Hello, I'm new to react and I'm not sure how am I supposed to style my components, is it better to use multiple CSS files for each component or just a big one for the entire page. also is there any best practices I should know? any tips? or things I could do better? and thanks in advance.

    Responsive landing page with React and CSS

    2
    Tanner Kopel•320
    @tankop1Posted about 3 years ago

    For styling in React, I personally suggest using different CSS files for every major component.

    It is also good practice to use components wherever you can to reduce the amount of code. For example, in your Gallery.jsx file, you should make the gallery-image divs inside the Gallery component its own component so you minimize your code even further.

    Great Job!

    1
  • Tanner Kopel•320
    @tankop1Posted about 3 years ago

    I would suggest adding some transitions on your hover effects, which is really easy to do and can make an animation or effect 10 times better. Click here for the documentation on CSS transitions

    It's also good practice to add the CSS cursor: pointer; to any clickable button or link, this way the user knows it is an interactive element.

    Great job on your website!

    Marked as helpful
    2