Skip to content
OverviewSolutions
8
Comments
9
Chris Andrews
@ChrisAndrewsDev

All comments

  • Chris Andrews•170
    @ChrisAndrewsDevPosted over 2 years ago

    Hey @isayaexavery, nice work on your first challenge!

    There's a few small HTML warnings that are easy to remedy:

    • Using semantic landmark HTML tags <main> <section> in place of standard <div> tags to divide sections is best practice and helps with accessibility for screen-readers.
    • You typically want to start with an <h1> on a page and work your way down to smaller headings for less vital content: <h1> to <h2> to <h3> and so on.

    One small thing I noticed when compared to the design brief is that your paragraph should be text-align: center

    You should definitely look into custom CSS variables if you're working with vanilla CSS, especially when doing the challenges here, they make life so much easier when working from a design brief!

    Other than that, your CSS was solid, I could see you experimented with some styles and methods to get a preferred outcome, there are a couple of smaller tweaks I would have made, but you're on the right track for sure!

    Nice one!

    Marked as helpful
    0
  • Natasha Williams•10
    @NATiiCODESSubmitted over 2 years ago

    This is my first project with FrontEnd Mentor.

    I used alot of W3school and google to figure out some of what I was missing.

    I am having difficulty with the paragraph I am trying to get it like the before but I cant seem to figure it out. I am sure it is right in my face the whole time but I am drawing blank at the moment. Especially on the spacing between the description and picture.

    If anyone could give me some feedback that would be greatly appreciated.

    Thank you!

    product preview card component

    5
    Chris Andrews•170
    @ChrisAndrewsDevPosted over 2 years ago

    Howdy @NATiiCODES!

    There does seem to be some spacing weirdness going on with the solution, my assumption (and hopefully a more experienced developer can correct me if I'm wrong) is that it's because you're using article elements for the majority of the HTML.

    From my understanding, the <article> tag serves a super specific role and generally doesn't get used for the bulk of the structure of a document.

    I would suggest trying to change the <article> tags to <div> tags, or preferably semantic tags, like <section> for larger containers, followed by <div> tags inside.

    I've got a feeling this should help with the elements being all scrunched together and allow you to apply styles easier!

    Good luck and let me know if it works at all!

    2
  • Kate•30
    @unic0rnKateSubmitted over 2 years ago

    Please don't judge me hard, i am completely beginner, have some mercy ok? :) i found difficult to make a boarder-radius of my image and description div, because they will change their border-radius separately and not gonna look as one box with rounded corners.

    HTML CSS BEGINNER

    3
    Chris Andrews•170
    @ChrisAndrewsDevPosted over 2 years ago

    Howdy @unic0rnKate!

    Don't worry, everyone seems very friendly on here (I am new too!) and usually give really good feedback.

    I did notice that your styles don't seem to be applying to your solution, and it looks to me that your relative linking is slightly incorrect:

    <link rel="stylesheet" href="css/styles.css">

    Should be changed to

    <link rel="stylesheet" href="styles.css">

    Typically the "/" denotes a parent folder - "parentFolder/itemInsideFolder" and since you don't have a "css" folder, you shouldn't need to use that!

    Once you've fixed that small issue we can have a look at the design implementation! Good luck :)

    1
  • Chris Andrews•170
    @ChrisAndrewsDevPosted over 2 years ago

    Hi @MahmoudKasrawy!

    It seems like your screenshot does not look the same as the deployed solution, I will just assume it's an error on this site, as the actual live solution looks much closer!

    Very solid first effort 🎉🎉

    You do have some HTML and accessibility issues that shouldn't be too hard to remedy.

    Firstly, you should have meta attributes in your markup boilerplate, it would look something like this:

    <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    
</body>
</html>

    If you are using vsCode as your text editor, I think you can use "! + tab" to generate the default boilerplate markup which contains most (if not all) of the things you would need to avoid those errors!

    When using an image, it's best-practice to provide an "alt" tag, to help with screen-readers and web-crawlers:

    <img src="../source/image" alt="a text description of the image">

    A really solid effort so far though!

    1
  • Chris Andrews•170
    @ChrisAndrewsDevPosted over 2 years ago

    Howdy @abidoyeIbukun!

    It seems like something has broken when deploying your solution, did you perhaps deploy the wrong build?

    It might be an issue with your HTML filename, does the live site look different to the screenshot displayed on here?

    Marked as helpful
    0
  • Chris Andrews•170
    @ChrisAndrewsDevPosted over 2 years ago

    Hey @lee-fentress!

    It seems like your relative link path is a bit off in your HTML (where you are linking the .css stylesheet) - <link rel="stylesheet" href="/stats preview card/actual project/images/styles.css">

    It should be something like this: <link rel="stylesheet" href="./styles.css">

    Typically when you link things from the same general directory or workspace:

    • "./" means the same level (or directory) as the current file
    • "../" means go up one level (or directory) from the current file
    Marked as helpful
    0
  • Chris Andrews•170
    @ChrisAndrewsDevSubmitted over 2 years ago

    Hey guys!

    The finished solution gave me some issues, mainly to do with the offset button;

    Is there a better way to implement that button offset compared to the hacky way I've done here?

    Thanks in advance!!

    Advice Generator | Sass + JS

    1
    Chris Andrews•170
    @ChrisAndrewsDevPosted over 2 years ago

    It turns out the API call isn't happening on first page load too! Any ideas?

    0
  • Chris Andrews•170
    @ChrisAndrewsDevPosted over 2 years ago

    Hey Esteban!

    Your solution is really solid, but as Lucas mentioned, you have a couple of accessibility issues (they are really easy to fix, Lucas explains how in his response! ^.^)

    As far as the design goes, there's only a couple of small differences I can spot (I am fairly new to coding so if anyone else can correct me that would be great!)

    -The price font weight is slightly heavier on the prices elements in the design brief, from memory it's font-weight 700 -Same goes for the button element text

    Your responsiveness is spot-on, much better than my attempt >.< !

    Nice job!

    1
  • Chris Andrews•170
    @ChrisAndrewsDevSubmitted over 2 years ago

    Hey guys! Just decided to try a speed-run of this challenge, please let me know if I can increase the efficiency of the code or any other helpful tips!

    Loving these challenges so far ^.^

    Vanilla CSS/Minimal Code

    1
    Chris Andrews•170
    @ChrisAndrewsDevPosted over 2 years ago

    As it turns out, I wildly misjudged the proportions on this little project!

    Is there a good way to measure the sizes and proportions without the design files? Or is this something that is hard to do without them?

    Thanks in advance!

    ^.^

    0