DEV Community

Cover image for Finished week 1 Scrimba Fullstack path!
Fredrik Berg
Fredrik Berg

Posted on

Finished week 1 Scrimba Fullstack path!

Then I have finished one week of Scrimba

With 1 kid, work, 2 dogs and a girlfriend and training everyday it is difficult to find time, but I can manage to sit down on the computer here and there during some open timeslots almost every day, but I would say I haven't used more then 4 hours this week unfortunately (just a guess).....
Which is way below my ambition of 7-10 hours during a week, but at least I have had some progress.

Currently I have gotten to the first Solo Project (Hometown), where I should make a landing page for my hometown, that should consist of a hero-section, introduction/tourist activities section, and a "business"-card introducing myself as a guide.

We have been "tasked" with a requirements during this task.

Scrimba Solo Project requirements

  • Requirements for the task -

and some stretch goals:

Scrimba Solo Project Stretch Goals

I am from Trondheim, Norway, so therefore I want to create a site about my hometown. I am not too creative at this point, because of the level of my skills.

I am struggling with the hero-section (embarrassing), I want to have a picture of Trondheim in the hero-section with title-boxes as overlay on that picture. I wrapped the hero-section in a div and gave it a class (perhaps an ID would be more correct?), but I am not sure how to set the picture to full width without cutting a piece of the picture.

I used CSS for setting the background image, and tried using background-size: cover; but that didn't work. I have also tried setting the width to everything from 400px to 1200px, but when it exceeds 900px it cuts out a part of the picture (height is 400px), so I am a little bit stuck here unfortunately..

Right now it is sunday evening, I have a baby that is sick with fever, and tomorrow is work so I have to log off but I will continue the troubleshooting. If I am not able to solve it within a decent amount of time I will either continue, or ask ChatGPT (if I can't find anything on Google)..

Attached is how it currently looks..

Current version of solo project, hero section only

HTML code

CSS code

Top comments (0)