My first website!

Hi guys!
My name is Bruna and I’m a newbie and just started my way to coding. I’ve finished the Responsive Web Design Certification and built a website for my uncle’s business, a barbecue foodtruck.

Most people will access the page using a smartphone so I made it with small screens in my mind which I think brought me some trouble as the big version is quite ugly. It is responsive but ugly. I think the mobile version is way better. Or maybe both are ugly, you tell me lol
I will really appreciate any feedback!

The page is in Portuguese but it’s understandable I think. For this page I designed the logo, took the pictures, wrote the texts… Everything.

Thank you very much for taking the time to see this! :grinning:


Hey Bruna,

awesome work, I really like it! :clap:

My ideas:

  • when I decrease the width of my browser, I’m having a hard time to see the WhatsApp icon
  • I think customers would greatly benefit from a map that shows the current location on a map

Keep us posted and keep up the good work!


Your website’s sick!! :fire: :fire:

It is really big on a browser, but honestly that’s not the end of the world! I can easily read the text, which is more important since that’s the info I would want as a client, and it’s easily navigable.

You could have the menu on one page/section rather than spread over multiple ones and you can do this using tables/columns. Either way, I like it.

1 Like

Hey there!

Good job, I like the look, it is far from ugly. :smile:

I would not make the navbar collapse for the desktop version. It makes it pretty small and far from the content. I only checked with my mobile with desktop view activated. (Might not be exactly the same?).

Keep it up!

1 Like

Hey Bruna, this looks great on desktop too. I don’t know if FCC teaches this, but if you want to change the design for the desktop version you could use a media query which is added at the end of your css file:

@media screen and (min-width: 992px) {
  //add classes and styles here just like you would normally, for example:
  .logo {
    height: 200px;

min-width:992px could also be min-width:1200px depending on what screen size you want the mobile design to switch to desktop design.


Thanks man! I agree with you, a map would be awesome but I’m not sure how to do it. As I go further on my studies and learn it I come back to update this page.
About the Whatsapp icon, I set the div size in em, it should be proportional isn’t it? I don’t know what might be happening

.whats_icon { /* this is the div*/
    width: 3.4em;
    height: 3.4em;
    position: fixed;
    bottom: 2.5em;
    right: 1em;
    z-index: 2;

.whats_icon_link { /*this is the fontawesome icon*/
    text-decoration: none;
    color: green;
    font-size: 4.4em;

Once again thank you very much!
Have a nice day!

Thank you! Yeah, the menu is set to stay in the right so if the user has a screen with more than 1800px the menu is gonna be all the way to right far from the content which is set to have a maximum width of 1200px. I will change all breakpoints to em because I’ve learned is better and I for now I will just change the menu position to be on right within this 1200px max-width so it doesn’t go so far from the content in super big screens.
Thanks for the feedback!

Hi there! Yes, FCC teaches that but the problem is not with responsiveness but beauty since I don’t have much information to show on big screens.
And actually I’ve just learned that we should use fewer media queries as possible and when we do that, we should use em instead of px.
Thanks for taking the time to help me! I really appreciate that :smiley:

I don’t know if you are already familiar with JavaScript,
but I think you are able to add a Google Maps,
it’s literally ~5 lines of JavaScript code and some small additions in your HTML and CSS.

Let us know if you have some questions.

My fault. I meant especially on a small phone I’m having a hard time, because the icon overlays the content:


1 Like

But this map won’t be interactive right? It seems like it is the same thing as copying the link that provides for users, but instead of iframe the solution you presented uses JS which is a better solution I guess. The thing is, every week (or whenever my uncle wants to be in another place) I will have to manually change code. It would be cool to have a solution where he can set this up himself before going to work. But for now I will follow your suggestion! Thanks!

Oh man, you made me hungry!
Nice job on your first website! It looks really nice!

1 Like

Oh, you are right, didn’t think about his location change.

Do you have an idea in mind to solve this?

Well, he doesn’t change location that often so I don’t need a fancy “live location” thing like the one Whatsapp have. That feature is awesome and must be hard as hell to build!
I was thinking in a simple page with a form where he can type an address and press OK and that’s it, the map on the website is updated.

Hey Bruna,

great idea!

You could build a really simple API that connects to a small database for the location and your webpage fetches the location from this API.
Then your uncle could use a simple form to connect to this API to update the location.

1 Like

What a good advice! Thank you for showing me the way! :smiley:

1 Like

Nice Website looks great.

Thanks, glad it helps!

Looking forward to seeing your progress on that!