All comments

• 

  P

  Daniel Basilio•420

  @danielbasilioSubmitted 9 months ago

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

  I'm very proud of the responsive layout made using CSS grid. In the future I would focus on improving the separation of components within sass

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

  I hadn't yet worked effectively with CSS Grid. It was quite interesting and fun

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

  I believe that in the implementation of itcss and functions within sass

  

  Responsive Meet Landing Page using sass and css flexbox

  #accessibility#itcss#sass/scss

  1

  30
  

  P

  Bamo-D-Abdallah•320

  @Bamo-D-AbdallahPosted 8 months ago

  It is almost pixel perfect.

  0
• 

  beowulf1958•1,630

  @beowulf1958Submitted 9 months ago

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

  This is version two. I added the missing box-shadow, fixed the font colors, and cleaned up the CSS

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

  I had a bit of trouble at first to get a card to span two rows. Eventually researched the problem and CSS tricks showed me how.

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

  None at the moment, but anything to improve will be appreciated

  

  Responsive page with CUBE and BEM vanilla html, CSS

  #accessibility#bem#cube-css

  1

  20
  

  P

  Bamo-D-Abdallah•320

  @Bamo-D-AbdallahPosted 9 months ago

  You added BEM hashtage which means you have used BEM class name style but I don't see any.

  BEM is block__element--modifier style.

  0
• 

  Carsten Körner•170

  @carstenkoernerSubmitted 12 months ago

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

  I am proud of my first project with grid. I don't know what I should do differently next time.

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

  I found some tutorials and especially a cheatsheet for Grid on the Internet. It helped me a lot.

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

  -/-

  

  Responsive four card feature section using grid

  #sass/scss#bem

  1

  40
  

  P

  Bamo-D-Abdallah•320

  @Bamo-D-AbdallahPosted 9 months ago

  Nice solution.

  0
• 

  AymaneOnline•330

  @AymaneOnlineSubmitted 9 months ago

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

  I took way more time than needed on this challenge, so inshallah I'll try to be faster next time.

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

  This was a good challenge, as it differs from the other challenges from the learning path with the presence of two images one for desktop and another for mobile. It took me some time to figure out how to make it work when I deployed it on GitHub.

  First, as I've been using the mobile-first design I put the mobile image on the HTML with the `` tag and then changed it with a media query, it did work locally but not on deployment. So to make it work, I've put both the desktop and mobile images on the html file, and using the media query I've changed the display property from "none" to "block" and vice versa and that resolved the problem.

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

  I've got a problem concerning the performance of this page on mobile devices as I couldn't surpass 93/100 score on Lighthouse. I tried to change the image format from .jpg to .webp which dropped the image size by nearly 50%, and I also changed the fetchpriority attribute of the images using both values "low" and "high" but it didn't work. I would love to get some help from you guys on that.

  

  Product preview card component

  #sass/scss#lighthouse

  1

  60
  

  P

  Bamo-D-Abdallah•320

  @Bamo-D-AbdallahPosted 9 months ago

  it is better to use rem instead of px.

  0
• 

  Mystique(Nyo)•20

  @Mystique9901Submitted 9 months ago

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

  I didn't know that I can use 100% height with html tag to center the card. I guess it become a little easier than before.

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

  It took me almost an hour to finish. I think I need to practice more.

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

  I always have trouble with deciding the width and height of the card. I don't know what percentage it should be.

  And if there is any advice you want to give me, warmly welcome.

  

  social-link-profile-solution

  3

  80
  

  P

  Bamo-D-Abdallah•320

  @Bamo-D-AbdallahPosted 9 months ago

  Block level elements have 100% width by default and I don't overwrite that, instead I use @media (min-width: some_screen_size) then inside it I will set max size the width can get for bigger screen sizes and always use rem:

  @media (min-width: 35rem) {
    .card {
      max-width: 15rem;
    }
  }
  
  @media (min-width: 45rem) {
    .card {
      max-width: 18rem;
    }
  }
  

  Never use height, min-height, and max-height on elements, it is the job of the browser desige what height they should have based on their content.

  Also you can give the links and the card itself some padding to make them more readable and look better.

  Marked as helpful

  0
• 

  Itoro (Celine) James•200

  @CelineJamesSubmitted 9 months ago

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

  i am getting better with using CSS, i am proud of that.

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

  i had the challenge of designing the links, could not quite decide if i should use buttons or just links, i used buttons and then wrapped the links inside the buttons however i had difficulty styling it. so i had to use just the links and style them like buttons.

  

  flexbox, media queries

  #accessibility

  3

  60
  

  P

  Bamo-D-Abdallah•320

  @Bamo-D-AbdallahPosted 9 months ago

  A button does some functionality on the web page.

  But link navigates you somewhere.

  In the project they are links leading you some other place so you made the right decision to use links.

  Some CSS notes:

  • avoid uisng px, use rem instead.
  • there is no need to set height on your elemets.
  • don't set fixed width in the normal design, set max-width in @media to control the width of the element in different screen sizes.

  Marked as helpful

  1
• 

  lewleu•10

  @lewleuSubmitted 9 months ago

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

  First project as I'm ;earning html and css

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

  Align the image and text into its block

  

  Flexbox model

  1

  80
  

  P

  Bamo-D-Abdallah•320

  @Bamo-D-AbdallahPosted 9 months ago

  Stay away from using px and use rem instead, especially for font-size because you are removing the ability of the users that can't see small text to increase the size through their browser.

  Why font-size must NEVER be in pixels

  Marked as helpful

  0
• 

  Abdallah Aboelsaoud•220

  @Saoud2021Submitted 9 months ago

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

  i learned alot during this project and i even add some tweaks in the learning tag and the profile picture of the author

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

  the challenge was in the text as i wasn't quite sure how to categories them but i was able to add the arrow which points to the child directly

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

  i think my projects are wide and it's scale is larger than the original designs and i am not sure how to scale it down a little bit

  

  Blog preview card with some tweaks

  4

  50
  

  P

  Bamo-D-Abdallah•320

  @Bamo-D-AbdallahPosted 9 months ago

  Doesn't look too wide to me, you shouldn't aim for 100% match.

  But I strongly advice avoid using id as CSS selector, the only time I use ID is when I target the element in JS, never in CSS, use class selectors intead.

  Marked as helpful

  1
• 

  RachelAbit•80

  @RachelAbitSubmitted 9 months ago

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

  I'm having trouble styling the table the way the example shows, I really don't have any idea.

  

  Recipe

  1

  50
  

  P

  Bamo-D-Abdallah•320

  @Bamo-D-AbdallahPosted 9 months ago

  For the table columns (td) set some padding so that the will be some space between the content and its border.

  Then set border-bottom for all the td s excep the last one:

  td:not(:last-child){
    border-bottom: solid %100 some_color;
  }
  

  Everything else looks excellent but avoid using px, instead use rem and em.

  0
• 

  arjumand07•40

  @arjumand07Submitted 9 months ago

  

  Blog Preview Card using HTML5, CSS3.

  1

  60
  

  P

  Bamo-D-Abdallah•320

  @Bamo-D-AbdallahPosted 9 months ago

  Avoid using height, let the browser provide the height for the element based on its content.

  Avoid using px, use rem and em instead.

  Marked as helpful

  1
• 

  Anja Teisman•130

  @DubbelteisSubmitted 9 months ago

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

  I'm proud of the change of pictures from a large screen to a small screen.

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

  It took me a lot of time to get the picture on the right size to fit the container. Again with some help of my son it turned out to be pretty easy.

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

  No specific help needed this time but comments for improvement are always welcome.

  

  product-preview-card

  1

  40
  

  P

  Bamo-D-Abdallah•320

  @Bamo-D-AbdallahPosted 9 months ago

  It is better to use rem and em than px.

  0
• 

  Gonzalo Marco•110

  @gmarco10Submitted 9 months ago

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

  First attempt, maybe some accessibility improvements must be added. I also have to check if it behaves correctly for every screen size. I'd probably use media-queries.

  Still have to publish the app

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

  Center the item properly

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

  accessibility, responsiveness

  

  First Challenge: QR component

  #accessibility

  1

  80
  

  P

  Bamo-D-Abdallah•320

  @Bamo-D-AbdallahPosted 9 months ago

  Using rem or almost anything other than px is a lot better, use rem especially for font-size.

  0
• 

  AReactDeveloper•340

  @AReactDeveloperSubmitted 9 months ago

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

  Yet again challenging myself to make it pixel perfect or as close as it can be thanks to my friend @DarkstarXDD I focused on responsiveness and made it look good in all devices

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

  box model figuring out how media queries work or at least basics of them

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

  if someone can tell me when its optimal to use rem and em and when to use plain old pixels

  

  Responsive Recipe App challenge (tried to get it as pixel perfect)

  #sass/scss

  1

  60
  

  P

  Bamo-D-Abdallah•320

  @Bamo-D-AbdallahPosted 9 months ago

  rem is good when you want your property size to increase or decrease based on the root element <html>, so things like font-size should definitely be in rem, and in general if you are not sure what to use you can always fallback to rem as it is more predictable than em and other units.

  Use em when you want your element to increase or decrease based on its own font-size property, so when you have an element that you want its margin to increase when you increase the font-size to make sure the content is still readable you can use em on the margin, or when you use letter-spacing and word-spacing you want the space to increase when the font-size is also increased, that way when you increase the size of the font everything around it will adjust themselves based on the font-size to preserve the original design.

  Never use px, I can't think of an example that you would ever need px, even for @media (min-width) use either rem or em (doesn't matter which one you use).

  Marked as helpful

  1
• 

  Ravikant Munda•80

  @ravikant717Submitted 9 months ago

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

  In the learning tag on the webpage, why am I not able to use the given yellow design color

  

  Blog Preview Card

  1

  70
  

  P

  Bamo-D-Abdallah•320

  @Bamo-D-AbdallahPosted 9 months ago

  You could remove the border property on the learning tag, and its color is rgb(244, 208, 78) but yours is set to rgb(228, 228, 0).

  Some other notes:

  • Avoid using px, start using rem more and also em, %, vw, vh.
  • Don't use height, let the browser determine the height your content needs.
  • Start using CSS resets or normalizers.
  • You can start using CSS variables it makes.
  • Use display: block and max-width: 100% on your img to make it responsive.

  Also using border-box is better than default which is content-box, you can set it up like this:

  html {
    box-sizing: border-box;
  }
  *, *:before, *:after {
    box-sizing: inherit;
  }
  

  Marked as helpful

  0
• 

  Aditya Rao•190

  @thisisadityaraoSubmitted 10 months ago

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

  Never got a chance to use table element, so I learned quite a lot about styling table, th and td.

  Another learning opportunity came with styling lists and list items.

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

  I was thinking about using CSS Grid or Flexbox for this, but it felt like an overkill. I know they are THE tools for such jobs, but all the elements when properly marked-up, were arranged one on top of other (that's how block level elements are stacked).

  So it was all about providing a proper vertical rhythm. So I went ahead with margin and padding, on and between elements.

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

  I would like to know a better way to implement a wrapper element. I used two wrapper divs, in this challenge, one for the image and other for the text content, to provide inline padding so that content doesn't touch the edges.

  I couldn't use one wrapper div for all the content including image, as the mobile design has image touching the edges of the viewport.

  

  Responsive Recipe Page using HTML & CSS

  #bem

  1

  30
  

  P

  Bamo-D-Abdallah•320

  @Bamo-D-AbdallahPosted 10 months ago

  Nice solution

  1
• 

  Youssef Ayman•20

  @youssefayman02Submitted 11 months ago

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

  It was finished easily

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

  I did not encounter any challenges

  

  Social Links Profile

  1

  40
  

  P

  Bamo-D-Abdallah•320

  @Bamo-D-AbdallahPosted 11 months ago

  Looks good I think it is a good idea to upload it to a public github repository and link it to the solution.

  0
• 

  Pedro Silva•140

  @pmcsilva90Submitted 11 months ago

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

  Only had to look up how to change the font size without media queries.

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

  Getting the card illustration to be responsive

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

  If there was a better way of implementing the card illustration.

  

  Blog preview card

  1

  50
  

  P

  Bamo-D-Abdallah•320

  @Bamo-D-AbdallahPosted 11 months ago

  It looks pretty good, I think it would be a lot better to have the hover effect only on the "HTML & CSS foundation" instead of the whole card.

  0
• 

  Sean•100

  @agoatnamedbearSubmitted about 1 year ago

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

  Proud Moments

  1. Getting flexbox to work
  2. Learn to add Google fonts to projects
  3. Setting up HTML structure to work with flexbox

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

  Challenges:

  • Learning flexbox again
  • Centering things

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

  Help:

  • Using flexbox to center things correctly
  • Better use of class names

  

  Basic HTML and CSS with FlexBox

  1

  40
  

  P

  Bamo-D-Abdallah•320

  @Bamo-D-AbdallahPosted 11 months ago

  The title inside the card is a bit too big.

  The solution is close enough to the challenge, but there is room for improvement.

  0