DEV Community 👩‍💻👨‍💻

Cover image for Day 38 of 100 Days of Code & Scrum: Styling Next.js <Image> With a Wrapper
Rammina
Rammina

Posted on • Updated on

Day 38 of 100 Days of Code & Scrum: Styling Next.js <Image> With a Wrapper

Greetings, everyone!

Today, I started to gain some momentum for working on my company website. I finished setting up AWS SES, Lambda, and API Gateway for my email contact form. Now, all there is left to do is to actually code the frontend contact form with proper styling.

What really grinds my gears is Next.js' <Image /> which has a really weird inline styling effect. the workaround is really annoying, which is to wrap a <div className> around it to add custom CSS styling. I don't like this, because it adds up an extra node/element for every <Image /> I need to style in my application.

Messed Up Styling

Yikes...

Oh, and I still don't have my Internet back. However, I will make do with whatever bandwidth I have.

Anyway, let's move on to my daily report!

Yesterday

I planned out what I will be doing for this week, and I noticed that I am being overwhelmed by various interesting things that I want to learn and work on. I decided to prioritize my main objective first, which is the website MVP.

Today

Here are the things I learned and worked on today:

Next.js

  • coded my services section for the homepage.
  • finished the mobile styling for the skeleton layout.
  • the desktop version is also okay, but could use some size changes.
  • had to fix a lot of my <Image /> and wrap them around with <div> so I could add styling.

AWS

  • finished setting up AWS SES, Lambda, and API Gateway for my email contact form.

Scrum

  • I did some practice flashcards for Scrum.
  • reviewed some of the things I've learned before.

Have a great start to your week, everyone!

Thank You Banner

Resources/Recommended Readings

Cover Image

DISCLAIMER

This is not a guide, it is just me sharing my experiences and learnings. This post only expresses my thoughts and opinions (based on my limited knowledge) and is in no way a substitute for actual references. If I ever make a mistake or if you disagree, I would appreciate corrections in the comments!


Other Media

Feel free to reach out to me in other media!

Rammina Logo

Twitter logo

Github logo

Top comments (0)

Visualizing Promises and Async/Await 🤯

async await

☝️ Check out this all-time classic DEV post