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

HTML Sass Vanilla JavaScript Vs Code

Roc Tanweer 2,500

@RocTanweer

Desktop design screenshot for the Easybank landing page coding challenge

This is a solution for...

  • HTML
  • CSS
  • JS
3intermediate
View challenge

Design comparison


SolutionDesign

Solution retrospective


Hello there,

Any learner who wish to learn and guide may see a brief note here of making this site.

Anywhere you see 'rem()' function, it's a function made in _variables.scss in Sass folder to convert pixels into rems. And there is also a mixin named responsiveness to handle media queries in an awesome way!

Any feedback is appreciated!

Community feedback

Anna Leigh 5,135

@brasspetals

Posted

Hi, RocTanweer! 👋

  • The layouts at specific media queries look great, and you’ve clearly put in a lot of thought into them. Ideally, however, your solution would look good on all screen sizes, not just a handful of set widths. I would suggest in future projects to focus on responsive design. I see you’ve used a bit of Flexbox, which is great! I encourage you to dig deeper into it, as it’s great for responsiveness. Grid is also really good, but I’d learn one at a time as to not get yourself too confused in the process. Here’s a really nice resource for Flexbox that also has some great links at the bottom of it. For image responsiveness, I’ve found a width percentage combined with a max-width usually works pretty well. The object-fit property can also be really useful. There’s also picture and figure elements, although I still have a lot of learning to do about those myself. 😄

  • Another great resource is this admittedly long article on semantic html. I refer back to often, and I’ve found it really helpful for my projects.

  • For the errors in your report, adding title tags inside the svg of your social icons should clear them up. Here’s an example:

<a href=“#”
      <svg…
        <title>instagram</title>
         <path>…

I realize this feedback isn’t picking out specific elements, but I hope it’s still helpful! Happy coding!

2

Roc Tanweer 2,500

@RocTanweer

Posted

@brasspetals I really appreciate your words.... It's really helpful 😉 I will try learning as many resources you have given as possible! Happy coding

1
Roc Tanweer 2,500

@RocTanweer

Posted

@brasspetals Would you please show code snippet here relating to image responsiveness please....I couldn't understand what you said up there 🙏

1
Anna Leigh 5,135

@brasspetals

Posted

@RocTanweer I’ll see if I can explain the responsiveness a bit better or at least show some examples.

Let’s look at the hero image on my Easybank solution . On the desktop version (800px and above) the .hero__img img has a width: 119% and a max-width: 767px (that’s what the weird rem value works out to, and is the width of the image-mockups.png). This allows the width of the image to be responsive, but stops it from getting larger than 767px. That’s what I meant by using a combination of width with a percentage and a max-width.

You could also take a look at the hero image of my Insure solution. For the mobile layout, I used the following code (I used the class “intro” instead of “hero”):

.intro__img img {
width: 100%;
max-height: 45.1rem;
object-fit: cover;
object-position: 50% 43%;
}

This was a rare instance when I wanted to limit the height of the image. It’s a good illustration of what object-fit: cover can do. I suggest playing around with all the properties and values in the dev tools to see what each does.

On the desktop layout, the parent div (.intro__img) gets absolute positioned, and I used a width percentage (width: 40% and then width: 48.75% in a later media query) to allow the image to respond with the page.

I know this probably wasn’t a good explanation, but hopefully playing around with the code in these examples will help a little.

2
Moses 65

@consolexyz

Posted

The mocks up is not positioned well oj Mobile devices 375px

1

Roc Tanweer 2,500

@RocTanweer

Posted

@Mosesobike Arigatou for your concern, I will fix that soon! Any other mistake please? I will gladly listen to your words..

1

Please log in to post a comment

Log in with GitHub
Discord logo

Join our Discord community

Join thousands of Frontend Mentor community members taking the challenges, sharing resources, helping each other, and chatting about all things front-end!

Join our Discord