EDWINTOAPANTA02

Latest comments

• 

  P

  David Lemvigh•200

  @dlemvighSubmitted about 1 month ago

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

  Figured out to use live-server to get hot-reloading. Nice to have a live preview, without having a javascript framework.

  

  Testimonial Grid Section - Plain HTML + CSS

  2

  10
  

  EDWINTOAPANTA02•120

  @EDWINTOAPANTA02Posted about 1 month ago

  good job

  0
• 

  whosadik•180

  @whosadikSubmitted about 2 months ago

  

  Grid task

  2

  10
  

  EDWINTOAPANTA02•120

  @EDWINTOAPANTA02Posted about 2 months ago

  interesting your solution, good job.

  Marked as helpful

  0
• 

  kiishi-code•80

  @kiishi-codeSubmitted 2 months ago

  

  Dr

  #accessibility

  1

  10
  

  EDWINTOAPANTA02•120

  @EDWINTOAPANTA02Posted 2 months ago

  xd

  0
• 

  Sanjaysammathew•20

  @SanjaysammathewSubmitted 10 months ago

  

  Recipe page using HTML and CSS Box Model

  #accessibility#airtable#angular#animation#angular-material

  1

  30
  

  EDWINTOAPANTA02•120

  @EDWINTOAPANTA02Posted 2 months ago

  I recommend you use the div, the flex, @media queries, the measurements like vh vw, 100% rem, make it as similar as possible to the example

  0
• 

  Hassan Aziz•60

  @bauerceptorSubmitted 2 months ago

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

  It was quick this time around. I would like to use SASS next time.

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

  It was a smooth experience overall, nothing was particularly challenging. It was same as last challenge with minor changes.

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

  I thought vh, vw, and % are responsive units. I used them to dictate the width and height of the container. But on smaller screen sizes, everything broke so I switched width and height to use 'rem', which surprisingly, made everything responsive automatically and nothing broke on smaller screen sizes as well.

  I don't know how, when and where to use vh, vw and %, and would appreciate some help in understanding these units better.

  Danke

  

  03 - Social links profile

  #accessibility

  1

  40
  

  EDWINTOAPANTA02•120

  @EDWINTOAPANTA02Posted 2 months ago

  (Viewport Height) What does it mean? It represents a percentage of the height of the viewport (the visible browser window).

  100vh = Full height of the viewport. 50vh = Half of the height of the viewport. What does it mean? It represents a percentage of the width of the viewport (the visible browser window).

  100vw = Full width of the viewport. 50vw = Half of the width of the viewport. When to use it?

  When you want an element to dynamically adjust to the width of the screen. Very useful for elements like images, containers, and fluid typography. What does it mean? The percentage is always relative to the immediate parent container.

  width: 50%; means that the element will take up 50% of the width of its container. height: 100%; means that the element will take up the full height of its container. When to use it?

  For elements that need to adapt to the size of their container (parent). It is ideal when working with flexible and grid layouts.

  0
• 

  Aliza Ikram•100

  @AlizaIkramSubmitted 2 months ago

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

  I'm most proud of clean code and well structure of my code. I will practice more so i can get comfortable writing clean code by myself.

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

  I encounter one problem when i added <a> tag in the h1 tag. The decorations were visible though i tried to make it none. Also, all the stylings were not implementing on the h1 tag. So i searched and found that i should style the a tag first when writing like this :

  • .card-content > a > h1 { .. }
  • Also, separately i wrote: .card-content > a { text-decoration: none; color: inherit; }

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

  I just need feedback on my code for well strcuture approach and responsiveness. I would appreciate it.

  

  Blog Preview Card

  #accessibility#pure-css

  1

  30
  

  EDWINTOAPANTA02•120

  @EDWINTOAPANTA02Posted 2 months ago

  Code Comments

  Add comments in your CSS to describe the purpose of specific styles, making it easier for others to understand. Lint Your Code

  Use tools like CSSLint or Prettier to ensure clean and consistent formatting.

  Marked as helpful

  1