Frontend Mentor | Andrew Ezeani's profile

@jen067Submitted 2 months ago

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

I am proud that I solved the small gap issue between the photo container and the text container caused by the div line break. The solution was to set the font-size of the image to 0, which prevented errors from appearing on the bottom left and right corners when applying border-radius to the image.

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

The difficulty lies in not being sure about the appropriate size for the cards—whether to allocate them based on screen size or set a fixed width. As a result, in the first design, I ended up creating a very peculiar RWD (responsive web design) setup. After reviewing my peers' examples, I realized that using max-width to set the maximum width is sufficient, without needing to use media queries to differentiate font sizes across different screen sizes.

QR-code-component

2

Andrew Ezeani•370

@ezeaniiandrewPosted 2 months ago

Hi, congratulations on completing this challenge. You did a terrific job on it. A little tip that could make it better—especially on mobile screens—is adding a little bit of padding on the body element to prevent the card from looking cramped.

1

Aishat Iyowun•10

@Kareem1470Submitted 2 months ago

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

I was first disoriented because I thought that I will have to create to the qr-code from scratch, was really relieved when I realized that that wasn't the case.

I will take my time analyzing what I am to create before rushing into it.

Was really happy to finish this challenge with bare minimum help.

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

Had issues with committing, staging, generally github .

Went back to the video links that's located in the 'setting up your development environment' path

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

The best property to center items using both CSS and HTML?

Is responsive text really adviceable to use?

A better guide on PIXELS [px] ?literally guessed the ones I used for this challenge.

An easy way to use Github for dummies?

Thanks for the feedbacks in advance, your correction will go a long way.

Prettier to beautify the code, Gitlens to ease my commit.

3

Andrew Ezeani•370

@ezeaniiandrewPosted 2 months ago

Hi, congratulations on completing this challenge. Here are a couple of things that could improve your solution:

The qr-code image is not displaying. I took a quick look at your code and found the culprit:

<img src="images/image-qr-code.png" alt="image-qr-code"/>

Removing the images/ should fix the problem.

To style your project in a deterministic way, you need to reset the default styles applied by the browser. You can do that by adding the following resets to your stylesheet:

* {
  padding: 0;
  margin: 0;
  box-sizing: border-box;
  }

You can read more about it here

You already have a good understanding on how to align items centrally. The only issue with your code is it's organization. The grid-container element is redundant. Simply remove it from your HTML and move the class to your body element and everything should work fine.
Most times, the width value in PX usually comes from the design provided by the designer. But in the absence of a design, we usually guess and tinker with it to see what looks best — just as you've done.
Based on the fact that you've successfully pushed your code to GitHub, I believe you already possess some basic knowledge on how it works. To help you further, you'll need to expatiate on the difficulties you're having when using GitHub.
You can improve the responsiveness of your solution by reading about CSS min function.

Overall, you've done a good job on this challenge. Keep it up

Marked as helpful

1

Om Yadav•200

@OmYadav3Submitted 8 months ago

Responsive page of news-homepage-main

1

Andrew Ezeani•370

@ezeaniiandrewPosted 8 months ago

You did a fantastic job on this project 👏. I do think that adding a small transition effect when opening and closing the mobile menu will improve the user experience greatly.

Marked as helpful

1

luca joglidze•390

@joglidzeSubmitted over 2 years ago

if you have suggestions text me it took so much time. and I dont like way media query is written but it works.(comment suggestions plss)

Huddle landing page with alternating feature blocks

1

Andrew Ezeani•370

@ezeaniiandrewPosted over 2 years ago

Great design, You were able to reproduce the design and that is an important step. The next step is to make your code better and here are some suggestions to guide you:

I noticed that all your images on each section were enclosed in a parent container. I don’t think it’s necessary as the other contents of the sections are already enclosed in a parent container, so setting a display flex on the common parent container will still give you the same results.
Your use of labels to separate the different content in your footer section is not good, labels are used with input fields for accessibility reasons. A div tag will best serve for that purpose.
The phone number should be in a link tag because we would like a potential customer to be able to call the company when they click on that number.
Using descriptive names when naming classes and ids is a core part of the job because it not only helps maintaining the code easier but it also helps you when you want to review your work sometime in the future and apply the new things you have learnt to make it better. If you’re are not using a css framework (I’m not familiar with frameworks naming conventions because I only write vanilla CSS), I will advice you read about BEM naming technique and apply them in your future projects.

Marked as helpful

0

Iseoluwa Osho•180

@theCephasSubmitted over 2 years ago

Hello community of devs, I will appreciate feedbacks. Had to delete the first type I made due to lots of inconsistencies, feed back for this won't hurt. Cheers.

Product Preview card using Flexbox and srcset

2

Andrew Ezeani•370

@ezeaniiandrewPosted over 2 years ago

Nice Design. Just three corrections:

I noticed in your README file, you had problems when when adding margin and padding to your work. It’s good practice and saves you a lot of time in debugging your code when you add these code at the beginning of your css file:

{ box-sizing: border-box; margin: 0; padding: 0; }

Try and place the card in the middle of the page. You can use add the below code to your body tag:

display: grid; Place-items: center;

3)There is no need to add pixels when specifying the width and height of an image in HTML cos it’s already in pixels

Marked as helpful

0

Nneoma Njoku•1,210

@SatellitePeaceSubmitted over 2 years ago

I encountered some problems with the logo. The logo SVG image was showing but after

closing the browser my live server was using the logo image stopped showing and each time i tried to reload it my live server (i use VS code) kept popping up this error message

"Live Reload is not possible without body or head tag."

Any help on how to fix this will be appreciated