Skip to content
OverviewSolutions
4
Comments
4

ChrisTariah

@ChrisTariah80 points

I’m a mysterious individual who has yet to fill out my bio. One thing’s for certain: I love writing front-end code!

Latest solutions

Latest comments

  • TheRoboRobin•160
    @TheRoboRobin
    What are you most proud of, and what would you do differently next time?

    I very much like the solution I came up for working with the lists. They're reusable across the component and a little more versatile than just the list-style.

    Next time I may use more custom properties to make it easier to change off the bat.

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

    The only issue I ran into was the recipe image. I wasn't sure how to make it fit the whole screen without moving it outside of the container at first. Eventually, instead of restructuring my html, I found scaling up the image and adding margin to the bottom helped a ton.

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

    Is my code clean, responsive, and readable?

    Recipe Card Component

    1
    ChrisTariah•80
    @ChrisTariah

    Very detailed and excellent solution design! Yes your code is clean,responsive and readable although on your table there is a very minuscule mistake which I made as well,you have four lines while the design has three.

    Marked as helpful
  • P
    Ben Schwartz•60
    @bmschwartz
    What are you most proud of, and what would you do differently next time?

    Nothing much new in this challenge

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

    The font weights in the Figma don't exactly match the image from what I can tell but I stuck to those anyway.

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

    The CSS almost seems a little verbose because of the use of variables and I wonder how it can be slimmed down.

    Social Links Portfolio

    1
    ChrisTariah•80
    @ChrisTariah

    To solve the fonts issue, try using google fonts to get the particular font used in the design, In google fonts you have an option to either download the font unto your computer, or get the font embedded in code(this gives you the link to the font which you will putin your header tag, and the font-family name for your css) the second method ensures that the font is available for whichever system the design is being viewed on hope this helps.

    Marked as helpful
  • P
    Aakash Dasgupta•360
    @a-d14
    What are you most proud of, and what would you do differently next time?

    I am proud of how responsive I made the project in the first try this time.

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

    One thing I could not figure out is how I can send the footer to the bottom of the page. Would appreciate some help with that.

    One thing I noticed is when I set the height of the image as per the figma specifications, the border-radius disappears. It reappears when I set object-fit to cover. Would love an explanation as to why that is happening.

    I had an issue with maintaining all the different font types and their sizes and would often get confused. How can I better deal with fonts?

    Responsive Blog Preview Card using Flexbox

    2
    ChrisTariah•80
    @ChrisTariah

    what are the different ways to align every element on the page,to achieve the layout.

  • Rodney-Mokenyu•270
    @Rodney-Mokenyu
    What are you most proud of, and what would you do differently next time?

    I am proud of my color picking for the backgrounds

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

    i found it hard to set the background to exactly the same color as specified.

    • I finally used Adobe photoshop to upload the sample image for the project so that i can copy its color code and paste into my css. I also had difficulties in arranging the container with the image within to fit to the screen when reduced to mobile vie.
    • I still think my final solution did not really get the job done.
    What specific areas of your project would you like help with?

    i would like help in the css particular with setting the container, so that it gets really centered as shown in the sample. in all screen sizes

    QR code with HTML and CSS

    2
    ChrisTariah•80
    @ChrisTariah

    The QR-Code card is very nicely done, although the design is not centralized vertically on the page, this can be accomplished by using Flexbox/Grid → If you want the easiest & most modern way. Absolute Positioning → If the element has a fixed size.