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

Submitted

Tiny Component With Vanilla JS

P
ApplePieGiraffeβ€’ 30,105

@ApplePieGiraffe

Desktop design screenshot for the Article preview component coding challenge

This is a solution for...

  • HTML
  • CSS
  • JS
1newbie
View challenge

Design comparison

SolutionDesign

Reports

Accessibility report (1)
error

A title should be provided for the document, using a non-empty title element in the head section.

<head>
    <meta charset="UTF-8">
   ...</head>

ApplePieGiraffe’s questions for the community

Hey, everybody!

This is my first challenge with JS, and it was fun! πŸ˜ƒ

The JS was easy, but the CSS took me a little longer to code than I initially thought. πŸ˜…

Feedback on both the design and code is welcomed and appreciated! 😊

And as always, happy coding! πŸŽ‰

Community feedback

P
Lucas πŸ‘Ύβ€’ 105,260

@correlucas

Posted

This comment was deleted

0


P
ApplePieGiraffeβ€’ 30,105

@ApplePieGiraffe

Posted

@correlucas

Hey! I haven't actually tried to make this challenge without JS, but it might be possible given that you can use the "checkbox hack" to create the popup menu for the card component (which I see is what you did in your solution to this challenge) and that you can style the desktop popup menu to look different in the mobile view (which is what I did in my solution to this challenge). Check out lines 155-187 in these styles. You'll have to use a media query to adjust the size and position of the popup menu and the items inside it. πŸ˜‰

Even though creating these challenges without JS is fun, nowadays I do not recommend it so much because it is often simpler to use a little bit of JS to accomplish the same thing and often times it is much more accessible. Have fun, though! πŸ‘

1

Aditya Singhβ€’ 460

@adityas24

Posted

Hey in your design i saw that the size the of the card remains the same, i mean that it looks like that you had set some fixed width and height. And also it shifts to mobile design quite early at around 1000px. I want to ask that is it OK to do it like that. I am a newbie here. I am trying to make it responsive for every possible point and shift to mobile design atleast after 500px . But its a mess for me that way. Please help me out.

1


P
ApplePieGiraffeβ€’ 30,105

@ApplePieGiraffe

Posted

@aadigit

Hi, aadigit! πŸ‘‹

It's fine to set a fixed width and/or height for certain elements in your siteβ€”I usually like to allow elements to be sized by their content so that there isn't too little or too much space. But don't worry too much! For this challenge, you could set a fixed width for the card component and simply change it with a media query when the width of the screen becomes small (you can allow the height of the card to be determined by its content, though).

When I was beginning web development, I tried to make things responsive by setting lots of dimensions in percentages, but that doesn't work out so well for me all of the time because then it's hard to predict how things will look at certain screen sizes and things sometimes become a little messy.

I think setting fixed dimensions for elements is okay as long as you take into account how they will look or affect the layout of the site when the screen is small/medium/large. Sometimes, percentages will work better. It depends on the element and the context and the elements around it. But with practice, you'll be able to choose which elements of your page should have a fixed width/height and which ones should have a variable width/height based on something else like their parent container or the viewport.

Hope that helps. πŸ™‚

0

P
Cassidyβ€’ 555

@Darknessflowers

Posted

Amazing job at getting this pixel perfect to the design! It looks so slick.

1


P
ApplePieGiraffeβ€’ 30,105

@ApplePieGiraffe

Posted

@Darknessflowers

Thank you very much!

0

Danielβ€’ 75

@LaBoiteDeCarton

Posted

Like tarasis said, you nailed it. I think the only thing missing, is the btn design when you click on it. For me the background color should change and stay fixed even when unhovered, and the same for svg color. I learned a lot from your CSS. (and felt stupid when saw your js, so clean)

1


P
ApplePieGiraffeβ€’ 30,105

@ApplePieGiraffe

Posted

@LaBoiteDeCarton

Thanks for the feedback and the tip! I'll certainly look into that!

0

P
Robert McGovernβ€’ 1,025

@tarasis

Posted

πŸ‘‹ ApplePieGiraffe

You absolutely nailed the design. Especially that pesky image!

Visually the only quibble is the mobile design on a iPad screen using Compact Width (can’t remember the dimensions ottomh). The share button is right up on the Pinterest icon.

Need to learn from your CSS. Curious about the setting font-size in html to 50%, why that than an explicit figure?

1


P
ApplePieGiraffeβ€’ 30,105

@ApplePieGiraffe

Posted

@tarasis

Thanks for the feedback! πŸ‘

I've heard that setting the font-size to a percentage rather than an explicit value gives the user a little more control over how the page appears. This is because although the default font-size for most browsers is 16px, sometimes, users set their own default font-sizes. Setting the font-size to a percentage means that the design will scale to the font-size the user chooses.

I haven't actually really tested it out or anything, but I just do it as a good practice, I guess. πŸ˜‰

0

Carl Summersβ€’ 45

@CSumm

Posted

Looks great!

1


P
ApplePieGiraffeβ€’ 30,105

@ApplePieGiraffe

Posted

@CSumm

Thank you!

0

Please log in to post a comment

Log in with GitHub
Slack logo

Join our Slack community

Join over 180,000 people taking the challenges, talking about their code, helping each other, and chatting about all things front-end!