Skip to content
OverviewSolutions
18
Comments
15
Charlie
@Xarlizard

All comments

  • Mitali Shah•320
    @MitaliShah
    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

    #sass/scss
    1
    Charlie•300
    @Xarlizard

    As always, all your submissions are spot on.

    It looks just perfect, well done! 😄

  • Charlie•300
    @Xarlizard
    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
    Charlie•300
    @Xarlizard

    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. 😄

  • Charlie•300
    @Xarlizard
    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
    Charlie•300
    @Xarlizard

    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.

  • Charlie•300
    @Xarlizard
    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
    Charlie•300
    @Xarlizard

    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?

  • Charlie•300
    @Xarlizard

    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
  • Charlie•300
    @Xarlizard
    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
    Charlie•300
    @Xarlizard

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

  • Charlie•300
    @Xarlizard
    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
    Charlie•300
    @Xarlizard

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

  • Mitali Shah•320
    @MitaliShah
    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
    Charlie•300
    @Xarlizard

    Woah, you nailed it! Well done 😄

  • Cristian•60
    @CristianLich
    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
    Charlie•300
    @Xarlizard

    Se ve perfecto, bien hecho!

  • P
    Smaylen5•600
    @Smailen5
    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
    Charlie•300
    @Xarlizard

    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!

  • Jeff Gicharu•80
    @jeffgicharu
    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
    Charlie•300
    @Xarlizard

    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! 😉👍

  • Chard Largodizimo•270
    @chardlargodizimo
    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
    Charlie•300
    @Xarlizard

    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! 😉👍

  • ABÊ•70
    @Abe-isCharlie
    What are you most proud of, and what would you do differently next time?

    nothing

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

    media screen

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

    I would really like to know if there is anything I can improve.

    Social Links Profile

    1
    Charlie•300
    @Xarlizard

    Perfect

  • Martin Bagnall•40
    @martinbagnall
    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?

    .

    VS code editor

    1
    Charlie•300
    @Xarlizard

    It is the same, well done

  • Charlie•300
    @Xarlizard

    The QR image 'alt' (alternative text) attribute is empty; Other than that, it looks great overall!