Fraser Jubb

Latest comments

• 

  Katherine Lim•80

  @katherin467Submitted 23 days ago

  What are you most proud of, and what would you do differently next time?

  I'm proud of getting my solution to look close to the design goal and using various HTML classes. Next time, I would perhaps add more div sections in my HTML.

  What challenges did you encounter, and how did you overcome them?

  Formatting the bullet points the way I wanted was a new challenge, but I was able to find solutions on the internet.

  What specific areas of your project would you like help with?

  I'd love to get feedback on the table in particular and see if there is a better way of styling it in the CSS! Also, how to decide between using table and grid?

  

  Recipe page (HTML, CSS)

  2

  20
  

  P

  Fraser Jubb•150

  @fraserjubbPosted 22 days ago

  Awesome job on the recipe challenge! 🥳 I’ve found the projects get a lot more interesting from here on out!

  For improving this particular table:

  • Adding th elements, this defines headers of groups. In this case: calories, carbs etc. Note: This might change the default appearance of the text so might need additional changes in your CSS.
  • Wrapping all the rows into one tbody element. This simply indicates that they are all related and part of the same body of table.

  For deciding between a table and CSS Grid, the easiest way is to ask yourself if a table would have any significant meaning. Normally a table is only wanted if it is related to a table of statistics. Otherwise, if it is just layout related, then stick with Grid as it is much easier to work with and customize.

  Other suggestions:

  • As you mentioned divs in your solution, I would suggest looking into more semantic elements as well - you only want to use divs if it is purely for style. I will post a link to useful resources below.
  • Use classes for pretty much everything. Ideally you never really want to be using simple html selectors on their own as they are the lowest form of specificity and can cause issues down the line.
  • I would also really recommend starting BEM naming conventions for classes. Personally I’ve found it so much faster to come with class names and remember them in future. It also makes it easier for getting back into projects if you ever have a long break.

  Useful Resources:

  • A nice breakdown of more semantic html containers to use w3schools link
  • Table Body Element mdn documentation
  • Table Header Element mdn documentation
  • BEM Tutorial (first 12 minutes only) YouTube Video

  Hope something here is of use to you! I’m at a similar level so take what I say with a grain of salt as I am still very much in the learning process too! 🙂

  Marked as helpful

  1
• 

  Katherine Lim•80

  @katherin467Submitted 3 months ago

  What are you most proud of, and what would you do differently next time?

  I'm pretty proud of how close my solution came to the goal. Next time, I would try to focus on one thing at a time in my CSS file so I don't constantly jump around.

  What challenges did you encounter, and how did you overcome them?

  I mostly ran into trouble figuring out the text resizing and making the profile image fit the constraints I wanted, but looking up resources online helped me figure it out.

  What specific areas of your project would you like help with?

  I would love to know if there are alternative/more efficient solutions regarding the font resizing!

  

  Blog preview card (HTML, CSS)

  2

  20
  

  P

  Fraser Jubb•150

  @fraserjubbPosted 3 months ago

  Your final result is great! I am also guilty of jumping around my CSS code a lot but I don't think we are alone there!

  With resizing in general, it gets a lot easier if you do a global reset when you start your CSS. That way you can remove all default padding and margins made by browsers, but it also makes it consistent across all browsers as they have to follow your CSS rules. Plus when you begin your own styling, it means that there are less headaches as there are no hidden margins/paddings that will cause an unwanted affect. (There is more to it than padding/margins, I'm just using them as examples).

  With font-sizing, I have had a look at your code and I'm a little unsure what it means). You either want to use px or ideally rem (which means that user preferences are respected and it will scale depending on the root/html element which everything is a child of). Example:

  HTML:

  <p>"I used to be an adventurer like you, then I took an arrow in the knee."</p>
  

  CSS:

  p {
    font-size: 20px;
  /*   font-size: 1.25rem; */
  }
  

  I have commented out the rem unit, but if you copy this to your coding editor and comment the 20px line instead, you will not see a difference.

  I highly recommend this video for more details on how to work with font sizes and how rem works.

  I would also recommend looking into:

  • Short video explaining more about global resets.
  • I've seen a few people on here use this website. Some of it I personally think is a little too much or things I personally wouldn't use at this stage but there is enough here for you to delve deeper into if you wish.
  • box-sizing - personally I think setting it to border-box makes it a lot easier to figure out sizes for elements.

  I hope something here is of use to you. I look forward to seeing your coding journey continue! I'm at a similar stage on here myself 😄

  Marked as helpful

  1
• 

  P

  Karolina•60

  @KarolinaMasSubmitted 3 months ago

  What are you most proud of, and what would you do differently next time?

  I managed to make the page pretty close to the Figma design only using plain CSS and HTML. Also digged deeper into how to style lists.

  What challenges did you encounter, and how did you overcome them?

  I was having hard time working with lists in this project. With help of AI I came up with solution, but I am not sure it is the best option. Also, first time working with Figma, I did not use Dev mode. Finaly, I guess, the transition between different screen sizes could be smoother.

  What specific areas of your project would you like help with?

  I would like some feedback on list styling and media queries the most. Also, any other insights would be helpfull too. Thank You.

  

  Responsive Recipe page with semantic HTML.

  1

  10
  

  P

  Fraser Jubb•150

  @fraserjubbPosted 3 months ago

  Final result looks good! 😄

  With your lists, I would suggest removing the <p> tags within the <li>’s. Whilst there isn’t anything semantically wrong with having them there (that I am aware of), it just adds more complexity when reading and writing. For instance, with the following code:

  HTML:

  <ol>
    <li class="list__item">Cat</li>
    <li><p>Dog</p></li>
    <li class="list__item"><p>Turtle</p></li>
  </ol>
  

  CSS:

  .list__item {
    color: hotpink;
  }
  
  p {
    color: green
  }
  

  If you try writing this up, you will see the issues this causes due to specifity.

  Hope this helps! I'm at a similar level to you.

  0
• 

  JP Felicia•60

  @HiraeightSubmitted 7 months ago

  What specific areas of your project would you like help with?

  I would like to know if there is a better way of coding the output. Are there best practices that I could have applied or are there unnecessary elements, classes, or CSS that I added that will have the same result if those are removed? I will greatly appreciate your opinions and suggestions. Thanks

  

  Blog preview card

  2

  51
  

  P

  Fraser Jubb•150

  @fraserjubbPosted 7 months ago

  Nice work! I'm also working on the "Newbie" challenges atm, so take what I say with a grain of salt as I am still learning too.

  Small suggestions I would try to implement:

  • I think had you opted for flexbox instead of CSS-grid, it would require less HTML containers, which would also lead to more concise code. You really only want to use containers for grouping. I've not watched this particular video yet, but this has been a good channel for me in the past, it looks like in this video, there will be more detail on when is best to use each one.

  As for your CSS:

  • You have a typo on line 80: height: fi;. At least I think it is a typo 😅
  • With your font sizes, try and replace px with rem as this makes your code more responsive. This video should help explain this all in better detail and give better examples as to when to use each unit.
  • Finally, more just for this website, make sure to update your screenshot so that it is the default browser state - it just helps for seeing an easy comparison between your solution and the initial design 🙂

  Marked as helpful

  1
• 

  Ataize Feitosa•260

  @AtaizeSubmitted 7 months ago

  What are you most proud of, and what would you do differently next time?

  I used CSS Variables for colors that simplifies project maintenance and customization, which is a good practice.

  What challenges did you encounter, and how did you overcome them?

  I learned how to use box-shadow to add subtle depth to elements, which enhances the design visually. I also used some aspects of BEM (Block Element Modifier)

  What specific areas of your project would you like help with?

  I intend to continue improving and applying suggestions. For example, in this project I used BEM in the CSS class names and used rem in the fonts instead of pixels. In the next project I also intend to start with a CSS reset.

  

  Blog preview card made with HTML and CSS.

  2

  20
  

  P

  Fraser Jubb•150

  @fraserjubbPosted 7 months ago

  Well done on this project! I've also just learned CSS variables and it does make it SO much easier!

  Small suggestions I would try to implement:

  • With your BEM, try giving it a more specific name. For example, instead of main__description, change it to card__description. This makes which element it is more clear and will make the jump to bigger projects (which will have many more components) easier.

  • In CSS, when using the height property, ask yourself "Do I really need to set height here?" If yes, use a min-height. You want to avoid heights on container/text elements when you can and let the content do the work there (unless there is a background color on that element, in which case height might be needed depending on various factors).

  • Finally, try and replace px with rem as this makes your code more responsive. This video should help explain this all in better detail and give better examples as to when to use each unit.

  As you mentioned you'll be implementing CSS resets next. Make sure this is the first piece of CSS you apply before anything else and it will make styling a lot easier!

  Hope this helped, I look forward to seeing your progress 🙂

  Marked as helpful

  0
• 

  Diego Taglialegami•20

  @Hikken98Submitted 7 months ago

  

  QR Code with simple HTML and CSS

  1

  10
  

  P

  Fraser Jubb•150

  @fraserjubbPosted 7 months ago

  Just wanted to let you know I think you accidentally posted the wrong link for the preview site solution.

  If you go to: your profile > click on the solution > click on the button with three dots (top right) > click on edit solution ...

  This will allow you to change the link to the correct one so that you can get feedback 🙂

  0