Skip to content
OverviewSolutions
19
Comments
4
P

Jeff Lang

@jefflangtech340 points

Jumping into the big tech pool. Learning HTML, CSS, Javascript, Python. On the search for tech tips and jokes.

Latest solutions

View more solutions

Latest comments

  • P
    Jeff Lang•340
    @jefflangtech

    Hey Jonfernando, nice work! I wanted to respond to your note about rem's and em's vs pixels because I went through the same thought process. Lately I've been only using rem's and here's how I set it all up:

    • Find out what the base font-size should be (in px) and set that in my :root. This size in pixels will often be a very common denominator of all the other sizes used in the design.
    • Create a spreadsheet where I can calculate the rem's for other elements based on my root font-size

    I personally like the idea of rem's because I know that everything will be relative to the :root font-size.

    And I checked out your CSS and the only thing I noted was you have a lot of separate rules with:

    font-family: 'Montserrat', sans-serif;

    Maybe throw that into the body and only change the font-family on the other elements as needed? Just a thought to save you some typing.

    Happy coding!

    Marked as helpful
  • P
    Jeff Lang•340
    @jefflangtech

    Hey Joshua 👋

    Looks like there is at least an extra "." in your image address. Here's an example:

    <img src="../images/icon-reaction.svg" alt="reaction icon">

    Starting from the file location of your index.html, the first "." is going to move to the parent folder, then the next "." is going to move outside that parent folder, then look for the images folder.

    Maybe you have your folders set up differently on your local machine.

    So just take out one "." in each image address in your github repo and it should work (I tested in chrome dev tools), like so:

    <img src="./images/icon-reaction.svg" alt="reaction icon">

    Or, simply:

    <img src="images/icon-reaction.svg" alt="reaction icon">

    If that's the solution then maybe just try exactly mirroring your folder structures on your local machine as well as when deployed.

    Hope that helps! Cheers

    Marked as helpful
  • P
    Jeff Lang•340
    @jefflangtech

    Hey Jose! 👋

    What I tried with this challenge was using background-image on the div or section versus a specific image element.

    Background-image gets you access to these other properties: background-position background-repeat background-size and more!

    On my project I got a bit more specific using background-position-x and background-position-y to place that image exactly where I wanted it on (or off) the page. And by making those dynamic in media queries the image could move around a bit during resizing.

    Let me know what you think of my solution! E-learning landing page

    Nice job! Hope you have fun coding!

    Marked as helpful
  • P
    Jeff Lang•340
    @jefflangtech

    Hello!

    One way you could approach this is to keep all your information and structuring in the HTML file, and use CSS for all styling. Personally, for me, that's an easier way of thinking about how to make it all work well together.

    Here's a way to get the strike-through with CSS (using your HTML):

        del {
        text-decoration: line-through;
    }

    Have fun! 😁

    Marked as helpful