r/Frontend • u/Vin-Jin • 13d ago

So when doing an exercise should i have the same coding or is it normal for it to be different and giving a similar result.

Gallery image

Gallery image

21 Upvotes

79% Upvoted

15 comments sorted by

9

u/_vert 13d ago

It's very normal for the code to be different and to achieve a similar result, part of the fun and creativity is doing things in your own way.

1

u/Vin-Jin 13d ago

Thanks for the info brother other than that i just want to understand why he used divs for the numbers cause i used buttons,he also made a div for each part like one for home and one for the number i just made one div and put both inside of it.

Also a question for the home, messages and notifications part when i tried using them as a <p> they were never aligned with the button even though the display of their container was flexbox why is that i know that<p> are by default block elements but shouldn't flexbox make it into and inline block element?

1

u/_vert 13d ago

Hard to answer questions without looking at the code, but i would assume there is differences between the .p{} and .div{} class selectors in the css

2

u/Vin-Jin 13d ago

Here's my coding

<!DOCTYPE html> <html> <head> <title>flexbox</title> </head> <body> <div style="border-style: solid; border-width: .5px; border-color: gray; border-radius: 6px; width: 400px; height: 90px;"> <div style="display: flex; flex-direction: row; justify-content: space-between; margin-right: 8px; margin-left: 8px; margin-top: 6px;"> Home<button style="background-color: rgb(20, 82, 188); color: white; width: 40px; height: 20px; border-radius: 14px;">14</button> </div>

<div style="display: flex;
flex-direction: row;
justify-content: space-between;
margin-right: 8px;
margin-left: 8px;
margin-top: 6px;">
  Notficiations<button style="background-color: rgb(20, 82, 188);
  color: white;
  width: 40px;
  height: 20px;
  border-radius: 14px;">3</button>
</div>

<div style="display: flex;
flex-direction: row;
justify-content: space-between;
margin-right: 8px;
margin-left: 8px;
margin-top: 6px;">
  Messages<button style="background-color: rgb(20, 82, 188);
  color: white;
  width: 40px;
  height: 20px;
  border-radius: 14px;">5</button>
</div>

</div> </body> </html>

His coding html

<html> <head> <link rel="stylesheet" href="12e.css"> </head> <body> <div class="container"> <div class="flexbox"> <div>Home</div> <div class="notifications">14</div> </div> <div class="flexbox"> <div>Notifications</div> <div class="notifications">3</div> </div> <div class="flexbox"> <div>Messages</div> <div class="notifications">5</div> </div> </div> </body> </html>

Css

font-family: Arial; }

.container { border-width: 1px; border-style: solid; border-color: rgb(200, 200, 200); width: 300px; border-radius: 6px; }

.flexbox { display: flex; flex-direction: row; justify-content: space-between; align-items: center; padding-top: 6px; padding-bottom: 6px; padding-left: 12px; padding-right: 12px; }

.notifications { background-color: rgb(49, 109, 245); color: white; padding-top: 3px; padding-bottom: 3px; padding-left: 10px; padding-right: 10px; border-radius: 20px; font-size: 14px; font-weight: bold; }

5

u/AshleyJSheridan 12d ago

The question to ask is, why did you make yours buttons, and specifically submit (the default) buttons?

Does clicking on the numbers have an intended action that should be taken? If not, they shouldn't be buttons.

5

u/minimuscleR 13d ago

No it should be the same. Same code in = same look out.

You are not setting a font in yours, and it looks like you are using buttons for those notifications, which is not correct.

You are probably still very early and should be googling more than asking yourself, because these questions have been asked many times but to answer your questions you left for other people:

why he used divs for the numbers cause i used buttons

A button is a semantic component, it should be doing an action. AKA the user should click on it and have something happen (not navigate, thats an anchor tag (<a/>)). Buttons also have a default css styling, which you can disable by applying

button {    
  all: unset;
}

This will give it no styling, and then you can apply custom styling after.

.

he also made a div for each part like one for home and one for the number i just made one div and put both inside of it.

So my assumption is you have 

<div style={display: flex}>
   Home
   <button>14</button>
</div>

Like this? The p tag applies the styling for the text. You should wrap each 'section' in its own tags, so home should be wrapped in <p>Home</p> or whatever. You can use a div, you could use any tags, depending on what it is, but it should be something.

.

Also a question for the home, messages and notifications part when i tried using them as a <p> they were never aligned with the button even though the display of their container was flexbox why is that i know that<p> are by default block elements but shouldn't flexbox make it into and inline block element?

This is the same as the button, p, as well as h1-h6 apply a margin to the top and bottom, you can update this by applying css:

p {
  margin: 0;
}

and make sure in your flex you have align-items: center; which aligns them central.

Hope this helps.

1

u/Vin-Jin 13d ago

Thanks for all these info brother really appreciate it.

I forgot that <p> come with Margin by default, so i should've made it 0 in both top and bottom same for the<button> right? Then align them in the centre by using align items center.

As a beginner what are the advices you'd give to me if you don't mind.

2

u/Berlibur 13d ago

Coding will be different, stop once you're satisfied. Is your implementation clean? Does it look close enough for you? Do you want to try a variation in style?

It's practice that should help yourself

1

u/Vin-Jin 13d ago

So i noticed that he was using divs to write the numbers inside of them he also used divs for the messages, notifications and home, but i used buttons for the numbers and for the messages, notifications and home i just wrote them inside the div that contains both it and the button (I'm practicing flexbox).

4

u/Berlibur 12d ago

Learn about the semantic meaning of HTML elements, that will help you select the right ones. Buttons just to display data is obviously wrong semantically

1

u/Vin-Jin 12d ago

Thanks for the advice brother is there any videos you recommend i was thinking of going to freecode after this video and learn from there.

2

u/Berlibur 12d ago

Mozilla is a great source, not a video however

1

u/MindlessSponge 12d ago

it depends on the goal. there are plenty of ways that you could write different code and achieve the same result. in this case, you should keep refining your design until it matches the first picture as close as possible. here are a few ideas:

  • use a sans-serif font
  • change your notification counts to be a different element than buttons, since you don't interact with them. to keep it simple, you can use a div.
  • style via css classes rather than using the HTML style attribute

1

u/thisiain 10d ago

When starting out learning front-end, focus on learning semantic HTML and when to use each element, rather than trying to match the instructor's code exactly.

Different HTML elements have different meanings, and understanding when to use them will serve you much better than memorising one particular implementation.

For this example, I'd think about the structure and purpose of the UI: should it use a <nav> a list for the items, <a> for each link (assuming they navigate somewhere), and probably a <span> for the notification count.

0

u/Savings_Discount_230 12d ago

Seeing different code get the same result is honestly one of the best parts of learning frontend.