All comments

• 

  P

  Mitali Shah•320

  @MitaliShahSubmitted 7 months ago

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

  I learned sass and implemented this landing page.

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

  Positioning the hero image. I used flow layout as well as element for changing the image based on the screen width.

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

  I am open to any suggestions/feedback! Also, this is my first time implementing Sass. Any suggestions on how I can improve?

  Thank you!

  

  e-learning-landing-page using Sass

  1

  30
  

  Charlie•300

  @XarlizardPosted 7 months ago

  As always, all your submissions are spot on.

  It looks just perfect, well done! 😄

  1

  This comment has received 1 replyShow
• 

  Charlie•300

  @XarlizardSubmitted 8 months ago

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

  .

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

  .

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

  .

  

  Responsive landing page using CSS Flex

  1

  40
  

  Charlie•300

  @XarlizardPosted 8 months ago

  Again, CSS is not showing properly on the showcase render; you can check the live version here and you'll notice it doesn't show any problems. 😄

  0
• 

  Charlie•300

  @XarlizardSubmitted 8 months ago

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

  .

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

  :focus did the trick here.

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

  .

  

  Responsive landing page using CSS Flex and JS

  2

  50
  

  Charlie•300

  @XarlizardPosted 8 months ago

  Native nested CSS is not working properly until they upgrade the browser that runs on the background of frontendmentor for the showcases. It is working fine at my Github Page live version.

  0
• 

  Charlie•300

  @XarlizardSubmitted 8 months ago

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

  .

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

  .

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

  Found no viable option to load JSON file from javascript without using FETCH or AXIOS and thus causing a CORS error on the browser (I had to convert the JSON file type to javascript .js to make it "work").

  

  Responsive landing page using CSS Flex and JS

  2

  30
  

  Charlie•300

  @XarlizardPosted 8 months ago

  Edit: Yep, turns out their internal browser is not updated to be compatible with the last CSS features, and they are working on implementing it;

  YOO why are fonts not correctly loading on this site's previews???😭

  Should I not nest my CSS elements within themselves / within parent elements?

  0

  This comment has received 5 repliesShow
• 

  Daniel 🛸•44,250

  @danielmrz-devSubmitted 9 months ago

  🛸 Hello Front-End Mentor Community! I'm Daniel and this is my solution for this challenge! 😊

  🛠️ Built with:

  • HTML 🧾
  • SASS 🎨
  • BEM Notation 🅱️
  • Mobile first workflow approach 📲🌓

  Very good challenge for those taking their first steps into HTML and CSS.

  Thanks to the Front-End Mentor team that create challenges that make us learn a lot from doing them. 💟

  If you have any suggestions on how I can improve this project, feel free to leave me a comment!

  Feedback welcome 😊

  

  Recipe Page built with SASS and BEM Notation

  2

  430
  

  Charlie•300

  @XarlizardPosted 8 months ago

  I cannot believe that I have spotted a tiny flaw on the code of our magnificent mentor, @danielmrz-dev! 🤩

  -Those unordered lists <ul> have their bullet color set by default as black, when they should be of that red-ish color, like the ordered list <ol> underneath

  Anyways, all of your submissions are really really spot on, good job man! 🙌

  Marked as helpful

  1

  This comment has received 1 replyShow
• 

  Charlie•300

  @XarlizardSubmitted 8 months ago

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

  I added an animation whenever the text panels appear, although I would prefer it to be different and smoother when the new div(s) is appearing (proper animation should look like it is gradually enlarging instead of it just suddenly being expanded)

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

  Accessing CSS properties from an in-line javascript block within the html file. I was kinda lost accessing the DOM

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

  Improving the animation

  

  Responsive landing page using CSS Flex and JS

  1

  50
  

  Charlie•300

  @XarlizardPosted 8 months ago

  <h1>'s font size is not showing properly on this page pre-render, but it is working fine on the live site. ¯_(ツ)_/¯

  0
• 

  Charlie•300

  @XarlizardSubmitted 8 months ago

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

  .

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

  .

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

  .

  

  Responsive landing page using CSS Flex

  1

  40
  

  Charlie•300

  @XarlizardPosted 8 months ago

  The colors seem way off on the preview here, but they show correctly if you open the page externally.

  0
• 

  P

  Mitali Shah•320

  @MitaliShahSubmitted 8 months ago

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

  Using grid-template-areas to align the cards

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

  I had fun building it!

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

  Any feedback is appreciated! Thank you!

  

  Testimonials grid section solution | CSS Grid

  1

  100
  

  Charlie•300

  @XarlizardPosted 8 months ago

  Woah, you nailed it! Well done 😄

  1

  This comment has received 1 replyShow
• 

  Cristian•60

  @CristianLichSubmitted 8 months ago

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

  Me siento mucho mas comodo con css grid, pude aprender y practicar bastante, me sirvio mucho el material de apoyo que da este sitio

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

  sigo batallando con intentar hacer codigo mas eficiente y legible, intentando utilizar las propiedades y atributos correctos al momento de hacer la maquetacion

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

  sigo necesitando ayuda con el layout de la pagina, cuando usar flex o cuando grid y como hacerlo de la manera mas eficiente

  

  Four-card-Section

  1

  40
  

  Charlie•300

  @XarlizardPosted 8 months ago

  Se ve perfecto, bien hecho!

  0
• 

  P

  Smaylen5•530

  @Smailen5Submitted 11 months ago

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

  I'm glad I've come very close to the original layout; definitely, now I would change all fixed measurements to relative measurements.

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

  Positioning the elements correctly was challenging; I used flexbox to position all the elements.

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

  Understanding responsive design fully is still a bit challenging for me.

  

  card completion with css and html

  1

  20
  

  Charlie•300

  @XarlizardPosted 8 months ago

  It looks awesome!

  It's only missing font-family: 'Fraunces'; for the green price and default text color: hsl(228, 12%, 48%); (gray) instead of that black.

  Overall it looks amazingly similar to the original design, well done!

  1
• 

  Jeff Gicharu•80

  @jeffgicharuSubmitted 8 months ago

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

  I'm mainly proud of the fact that I was able to finish this challenge despite being very confused when I started.

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

  As I was adding styles in the CSS, there was a element which was not behaving as expected when I tried to style it. I overcame the challenge by trying different possible solutions until I found one that worked.

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

  I would like help in knowing when to add classes to HTML elements and also in the organization of my CSS.

  

  QR code component

  3

  60
  

  Charlie•300

  @XarlizardPosted 8 months ago

  Heyo,

  I think that you've swapped body background-color with .para:last-child text color , other than that, really good man keep it up! 😉👍

  0

  This comment has received 2 repliesShow
• 

  Chard Largodizimo•270

  @chardlargodizimoSubmitted 8 months ago

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

  I'm most proud of the fact that I completed the challenge within 2 days.

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

  Setting the markers of the list element as a ::before pseudo-element. I overcome them with the help of mdn web docs.

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

  BEM naming convention

  

  Recipe page using pure CSS

  1

  40
  

  Charlie•300

  @XarlizardPosted 8 months ago

  Heyo Chard, it looks amazing!

  Just one tip:

  Instead of trying to construct a table using an unordered-list <ul> with flex enabled list-items <li> (what a trick you've accomplished with that by the way!), just use the <table> component, containing table-rows <tr> and table-data <td> ( = columns, if you may):

  <table>
     <tr>                  // <-- Example for the first table row
        <td>Calories</td>
        <td><b>277kcal</b></th>
     </tr>
  </table>
  

  You might need to specify the width of each <td> on your style.css file to for example max-width: 50%; or to a fixed pixel count, that depends on your preferences.

  Besides that, you only need to fix your "table's" second column text alignment, it should be aligned to the left with text-align: left; (you currently have it aligned to the right).

  Hope it helps, but anyways, I'm really impressed by your results, keep up the good work! 😉👍

  0