All solutions

What challenges did you encounter, and how did you overcome them?

I did the bulk of this a month ago, and then got sidetracked. At the time all that was left to do was the spacing between sections, and inside the table. Also how to handle the header image using full width for mobile, and inside the card for desktop. (I think this was why I stopped at the time)

What are you most proud of, and what would you do differently next time?

"Proud" is a bit strong, but I was happy to make sizing fluid with clamp. Meaning then I don't need to use media queries.

What would I do differently, use some form of CSS naming scheme.

What challenges did you encounter, and how did you overcome them?

Mostly splitting up the CSS into separate files / layers, specifically what goes where.

What specific areas of your project would you like help with?

None, but any thoughts more than welcome.

No direct questions. Mostly a refresher as I haven't done CSS/HTML in ages (apart from a personal thing). Uses margin-inline but margin-bottom as in theory only the text would change direction not the location of the blocks, and I use clamp() for sizing the frame (327 mobile, 384 desktop) and the padding in the frame (24px at mobile, 40px at desktop).

Was trying to use a split CSS / @layout and struggling a bit with how to parcel out the bits into separate files.

I've done:

css/
    index.css (pulls in all the other files)
    reset.css (general resets)
    base.css (some base level styling, originally included setting font size/weight/color on body)
    properties.css (any properties i'm using ... well basically everything is a property, (bad?) habit I've gotten into)
    typography.css (imports the font face)

The others are currently empty while I tried to decide whether to split everything in properties.css into separate files and also break down social-profile.css out across those files too. Depends on if wanting to treat the thing as a component, or an actual page. If its a component then actually the css variables should be moved into social-profile.css

So in theory for page:

• font properties, h1/p/a styling would go into typography.css
• spacing / margin / padding properties & related styling into layout.css or spacing.css
• colour properties, h1/p/a/body/social-profile styling would go into theme.css or color.css
• then only specific styling would go into social-profile.css

But if treating it like a component I guess I really should:

• move specific properties from properties.css to social-profile.css
• setup general properties in properties.css (like --fw-400, --bg-color and so on)

Have submitted for now with the weird quasi mix of both styles. Will pick one and refactor later.

Only enhancement over the base design is that it will adjust the layout for mobile landscape. So that it profile part is on the left and links on the right. This is the only media query.

My last newbie project and still learning. Any feedback welcomed, particularly regards using img srcset

I tried to do a more complex img tag for the fallback for picture/source but couldn't get it to work. This was what I was trying to do

<img src="assets/logo-dark.svg" srcset="
        assets/image-hero-mobile.png 435w,
        assets/image-hero-tablet.png 695w,
        assets/image-hero-desktop.png 1046w" sizes="
              (max-width: 767px) 87vw,
              (max-width: 1439px) 83vw,
              (max-width: 2000px) 870px,
              1000px"
          class="">

in the end I just went with a simpler one with the mobile image at 1x and 2x.

No real questions, but if you have any feedback I'd love to hear it.

How best to handle the submit button and error image beside the text field? Originally I had the input in a form (class names still reflect that), but I could get a sensible layout. Then I swapped the input to being in a div, and using display flex for the input, error and submit button. The issue is that it truncates the textfield more than I'd like, particularly on the mobile size.

I tried to use position: relative and right: but couldn't get it working correctly.

So, I thought this was my first premium challenge, turns out it was my second. (I forgot the Pod Request Access Challenge

I realised as I was prepping for submission that I missed the middle section up. I built it around the red product card, and then used the psuedo ::before to add the image and the black square. On reflection, esp thinking about having the block centered for in between sizes, I think I should have done the black square as the main element, and then the image and red block in the psuedo ::before and/or ::after. Is that the correct approach?

I noticed that on the mobile and tablet versions that the design has the buttons and price block indented further than the header & block of text just above them. I followed the design here, but I was inclined to have them consistent across the three versions. If this was real life I feel I would have asked for clarity from the designer. Would that be a sensible descision?

Finally was the limited accessibility, particularly the aria-labels I added to the social links approriate or longer than necessary?

Don't know how to properly tag the light dark switcher for Aria. I assume best just to set to aria-hidden = true?

I already know some don't like the over use of CSS properties / variables that I do. My intention is to make it easier for just changing certain details without changing the structure of the CSS setup, and means for media queries I only update the variables rather than add repeat selectors. Something I find more irritating.

-- Added update 2022-10-10

Have made a minor update based on a comment from Grace in reply to someone else. Have swapped my pricing block to be a paragraph rather than a div, wrapped the old price in del tags, and I have added an aria-label to describe that it is the old price and what the price was.

No particular question, I found the placement of images difficult; particularly for the desktop version.

I had intended to try and make it a responsive build, but I've ended up basically using the mobile version till 900px, and then swap to the desktop design.

First attempt at doing a "premium" newbie challenge. I found handling the positioning of elements between the 3 forms surprisingly difficult. I ended up using fairly fixed positioning for the pod logo, the dots used in tablet and desktop versions, and for the width of the "main content box".

Would love suggestions on improving it.

Many things are tweaked using properties when swapping into media queries, although not as many as I could. Impatience got the better of me in the end.

The email format checking was handled in HTML/CSS, with pseudo classes used to show / hide the error.

Havent touched HTML/CSS in 7 months so rather rusty. Would love any feedback.

(I know I shouldn't have bothered matching the paragraph size different between mobile and desktop versions)

Would love feedback on avoiding the VW magic numbers for clamp. And also about my use of BEM. This is my first real attempt at using it and I'm stumped whether the price-plan area should be considered its own block, likewise the button area.

So then price-plan, with price-plan__icon, price-plan__plan-type, price-plan__plan-price, price-plan__change-button? Likewise button-area, button-area__payment-button, button-area__cancel-button? Not keen on it to be sure.

Outside of that, any other improvements I could make?

(There are two images in the design folder showing the diffs between design image and final, darker is mine)

Two questions:

1. What is the more ideal way to handle the top and bottom circles? On 1440px they look to match close enough, but on the mobile size, they don't go under the component in the same way.

2. Any suggestions for improving my HTML tags, and the CSS?

No real questions, but any tips or thoughts welcomed.

The mobile solution is pretty much identical, but desktop is off a bit. I chose not to try and chase it down through iteration.

I have 3 questions:

1. Desktop version: How do I fake click the tooltip away when I cross over into the mobile version?
2. Desktop version: I had to not use overflow: hidden in .artcilePreview because it would crop the tooltip/callout, which meant I had to apply a border-radius in .previewImage. Was there a way to have used overflow: hidden in .artcilePreview but had the callout go outside the bounds of the component?
3. Is there a way to have the value used for the media query and the javascript as the break point be read from file? I dislike hard coding it in both because then you would have to remember to edit both

Things I know I could do better:

• Comments
• less PX, more rem/em.
• sectioning CSS better

--- Edit

On the original submission I saw there was an error about using a div inside the button. This lead me to fixing a question I had previously asked. (why on my desktop solution the share button was jumping when the tooltip was visible)

Final diff https://github.com/tarasis/tarasis.github.io/blob/master/FrontendMentor/four-card-feature-section/notes/desktop-final-diff.png

I am aware I shouldn’t have used width to scale the images in the boxes. Forgot at the time what I should do. Leads to them scaling up which isn’t ideal.

Edit to remove no longer applicable comment

No questions. Just a note that my heart wasn't in this one (think more general mood). I feel I could have nudged it into place. The Sign-up button looks bad when resizing.

I plan to return to this at some point.

Is there a way to say use X width in small displays, and Y width on larger displays? I tried various combinations of width: clamp/min/max/min(max())/max(min()) in an effort to avoid doing it in media queries but couldn't figure it out (using width: 90vw for < 600px, 75vw for 600-1050px and 50vw above that).

—

Why does my input field for email turn blue when you start to enter something? AFAIK I don’t set that.

--

Slightly irked that despite having the desktop image match before submission, they don't here. I assume its because I used margin-top: auto for the footer section, rather than specifying a specific size.

—

Is there a better way to handle the hiding / showing of the error message? The input field, the error message and notify button are in a flex column (mobile) or row (desktop). The error message div is set to take up zero space so it doesn’t affect positioning of the other two items, and when in a row I use flex ordering to put the error message first in the row.

Then when an error occurs I apply a css class that moves the message’’s location down. (And when in column, I push the notify button down like the design shows). It works, but feels hacky.