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

This content originally appeared on DEV Community and was authored by Rammina

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.

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!

Resources/Recommended Readings

Cover Image

laura adai on Unsplash

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!

This content originally appeared on DEV Community and was authored by Rammina

Print Share Comment Cite Upload Translate Updates

APA

Rammina | Sciencx (2021-11-15T11:29:49+00:00) Day 38 of 100 Days of Code & Scrum: Styling Next.js <Image> With a Wrapper. Retrieved from https://www.scien.cx/2021/11/15/day-38-of-100-days-of-code-scrum-styling-next-js-image-with-a-wrapper/

MLA

" » Day 38 of 100 Days of Code & Scrum: Styling Next.js <Image> With a Wrapper." Rammina | Sciencx - Monday November 15, 2021, https://www.scien.cx/2021/11/15/day-38-of-100-days-of-code-scrum-styling-next-js-image-with-a-wrapper/

HARVARD

Rammina | Sciencx Monday November 15, 2021 » Day 38 of 100 Days of Code & Scrum: Styling Next.js <Image> With a Wrapper., viewed ,<https://www.scien.cx/2021/11/15/day-38-of-100-days-of-code-scrum-styling-next-js-image-with-a-wrapper/>

VANCOUVER

Rammina | Sciencx - » Day 38 of 100 Days of Code & Scrum: Styling Next.js <Image> With a Wrapper. [Internet]. [Accessed ]. Available from: https://www.scien.cx/2021/11/15/day-38-of-100-days-of-code-scrum-styling-next-js-image-with-a-wrapper/

CHICAGO

" » Day 38 of 100 Days of Code & Scrum: Styling Next.js <Image> With a Wrapper." Rammina | Sciencx - Accessed . https://www.scien.cx/2021/11/15/day-38-of-100-days-of-code-scrum-styling-next-js-image-with-a-wrapper/

IEEE

" » Day 38 of 100 Days of Code & Scrum: Styling Next.js <Image> With a Wrapper." Rammina | Sciencx [Online]. Available: https://www.scien.cx/2021/11/15/day-38-of-100-days-of-code-scrum-styling-next-js-image-with-a-wrapper/. [Accessed: ]

rf:citation

» Day 38 of 100 Days of Code & Scrum: Styling Next.js <Image> With a Wrapper | Rammina | Sciencx | https://www.scien.cx/2021/11/15/day-38-of-100-days-of-code-scrum-styling-next-js-image-with-a-wrapper/ |

Please log in to upload a file.

There are no updates yet.
Click the Upload button above to add an update.

You must be logged in to translate posts. Please log in or register.