Blog Preview Card - Animation and Custom CSS Variables

Community feedback

• 

  Uche Ofatu•260

  @Macnelson9Posted 5 months ago

  Your solution is super cool! Wow! I'd love to connect with you. I like your animation, I don't know how to animate yet, but I'm looking to move into that next. I would like to be able to get some tips and tricks from you especially with the semantics part and the readme notes, if that's okay by you. thanks!

  Marked as helpful

  1

  ---

  

  SaruMakes•160

  @SaruMakesPosted 5 months ago

  Thank you so much, @Macnelson9! I don't use social media sites these days, but I'd be more than happy to connect with you here on the platform and answer any questions you might have in the comment sections. I've given you a follow on the site too. :-)

  I'll try to share some of what I know, but first and foremost I'd like to refer you to some of the great sources I found, as I believe they'd be able to explain the concepts to you far better than I can:

  Animation

  For animation, there are two core concepts that I've used in this challenge, they are CSS Transforms and CSS Transitions. Joshua Comeau created some fantastic guides on the topics, which I highly recommend you read if you want to learn more about CSS animations.

  The CSS transforms are the changes we make to an element. It's the position/form/etc. that we want the element or styling to take at the end of the animation. The CSS transition is the animation itself. We use it to ensure that the element doesn't just instantly snap from one position/shape/etc. to the next, but instead smoothly animates between the two states.

  In the case of my solution to the challenge, I had the box-shadow double its distance to the preview card (in the X and Y axis) when you hover over it. At the same time, I move the preview card itself half of that distance in the opposite direction, to give the impression that the card is moving closer to the viewer and "lifting" off of the background.

  Semantic HTML

  I'm very new to this topic still, and I mostly use the Accessibility scan that Frontend Mentor does, after you've submitted your solution. I then follow the links that explain the issues in more detail, to understand why these things can be/are a problem and how to avoid them.

  If I had to explain my general approach, however, what I do is try to think of my HTML code as a scientific article. When writing an article, there needs to be a logical structure and flow to the page. You'll have an H1 header for the main content on the page, then a body of content which can be split into <section>'s with <article>'s inside, each with their own <h2...h9> headers inside and paragraphs of text or other content. I try to use <div>'s only when there isn't a different type of element that more accurately describes what it is.

  Additionally, I also try to think of <div>'s as "invisible" to assistive technology. I'm not sure if they are in all instances, but the idea is to make sure that the entire site would make as much sense as possible, without having any styling at all.

  README notes

  For README notes, I looked into what the proper formatting and syntax are for this type of document. As it turns out, the .md file type refers to a code language called Markdown. There seems to be many versions of Markdown out there, but I simply used the basic ruleset from the Basic Markdown Syntax Guide to create the README file for the project. I also downloaded a lightweight windows program called Ghostwriter, which allows you to write .md files with a preview window next to it, to see how it will render in HTML.

  I hope some of all this is helpful to you or others :-)

  0