Skip to content
OverviewSolutions
10
Comments
13
P

Jon

@jonmc89UK160 points

Web Developing is a relatively new hobby (one & off over the last 2 years). Since starting Front End Mentor it has made me really want to get better. I would like to be good enough to start freelancing.

I’m currently learning...

HTML, CSS & JS

Latest solutions

View more solutions

Latest comments

  • Patrick Cheruiyot Kirui•20
    @Pc-Kirui
    What are you most proud of, and what would you do differently next time?

    Did the projected as expected from me. Came up with a design that resembled the one I was given in the challenge. Purposing to go through hover and focus states use it to improve my design.

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

    Did not encounter any challenge.

    What specific areas of your project would you like help with?
    • Could you please help me in understanding how to use Figma files provided in the project description.
    • Have been provided with some fonts in the project but need some guidance on how to make use of them.

    Blog preview card using HTML and CSS

    2
    P
    Jon•160
    @jonmc89

    First of all, you have made a great attempt at this challenge. Regarding adding fonts, my method is to go to googlefonts, They have a method of adding them to your project with 1 line of code.

  • Fueren•10
    @Fueren19
    What are you most proud of, and what would you do differently next time?

    I'd do the table implementation differently the next time. I'm proud of almost everything because it's my first ever good looking HTML, CSS project :D

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

    Tables was hard and the mobile implementation took me some time to understand but i think it turned out good. I mainly used AI to overcome them.

    Simple Recipe Page using HTML and 2 CSS files

    1
    P
    Jon•160
    @jonmc89

    Great Job, I have a tip that I learned through the platform. Next time you take a challenge try starting with the "Mobile View" first. I find that its easy to scale up and will take less code to fit to other view ports.

    You can then the media queries like so:

    @media screen and (min-width: insert width here){}

    Give it a go :)

    Marked as helpful
  • P
    AEO•200
    @Jayfx24
    What challenges did you encounter, and how did you overcome them?

    Setting the shadow on success button hover was quite challenging. Initially i attempted using box-shadow but it did not turn out right, after some search i realized i could achieve it with ::after + blur , which did the trick :)

    Newsletter sign-up form with success message

    1
    P
    Jon•160
    @jonmc89

    Great Job!, nailed the design and form validation in all device views. What you could do to make it a full solution is add a screen re direct to the success page.

    Below is how I managed it.

    /* JS form main form page add this to the "If email is valid part of your code */
window.location.href = "./success.html";

/* Then on the success page adding this to the button to dismiss */
const dismissBtn = document.getElementById("dismissBtn");

dismissBtn.addEventListener("click", function (event) {
  window.location.href = "./index.html";
});
    Marked as helpful
  • BCEESAY10•200
    @BCEESAY10
    What specific areas of your project would you like help with?
    1. For desktops, positioning the share popup directly above the share icon
    2. Making the pop up better for medium screen sizes like tablets

    Article Preview Component

    1
    P
    Jon•160
    @jonmc89

    Solid start, i understand the trouble you were having with sizes of the image, what i did was to make an empty div and made the background img the Draws image. The displayed the tablet and desktop view as Grid. Was a Tricky one for me this one but I think you have made a good start.

  • P
    Jon•160
    @jonmc89

    Hey, Looks great from what i can view, i think there is something weird happening with the previewer. You code is imaculate love the organisation in your CSS.

  • P
    Jon•160
    @jonmc89

    Looks great nailed the layout and structure. Taken a look at your CSS too, definatley a few things I could learn from you.

View more comments