The Front End - Project: HTML/CSS


#1

I have been trying to build my first webpage for a couple of days now, it is very frustrating even though I have done everything mentioned both on TOP and FCC courses. I just don’t remember all the syntax so I need to go back and look for what I need, or check the page source that some other student has submitted, or some video on YT that teaches you how to do something. I guess this is normal, if not, well, I can’t with so much information.

Thing is, now I’m stucked. Whatever I do on my index.html does not affect my main.css, I’ll copy and paste both sources below and provide a screenshot for the output.


index.html:

<html
<head
    <titleDuckDuckGo</title
    <meta content="/images/google"
    <link rel="stylesheet" type="text/css" href="/opt/lampp/htdocs/duckduckgo-homepage/css/main.css"
</head

<body>
    <header class="header">
        <div class="container">
            <nav class="header-content">
            <ul class="menu">
                <li class="Images"><a href="#">Images</a></li>
                <li class="Settings"><a href="#">Settings</a></li>
                <li class="Support"><a href="#">Support</a></li>
                <li class="Mail"><a href="#">Mail</a></li>
            </ul>
            </nav>
        </div>
    </header>

    <div class="main-content">
        <img src="/opt/lampp/htdocs/duckduckgo-homepage/images/googlelogo.png" alt="duckduckgo-logo">
        <form id="search" type="text" action="/search">
            <div class="search-bar">
                <img class="mag-glass" src="" alt="magnifying-glass">
                <input class="input-field" type="text" name="search-bar">
                <button class="k-button"></button>
            </div>
            <div>

            </div>
        </form>
    </div>
</body>
<footer>

</footer>

main.css:

body {
margin: 0;
background-color:black;
font-family: Arial, Helvetica, sans-serif;
font-weight: 300;
}

.container {
width: 80%;
margin: 0 auto;
box-sizing: border-box;
font-family: Arial, Helvetica, sans-serif;
font-size: 16px;
background-color: blue;
}

.main-content {
align-content: center;
}

header {
bacnd: ;
}


Screenshot:

https://upload.vaa.red/GLwgW#954c76abcd54b2723247aa52b9e45bb3


#2

If none of your css file is show up, that means that your path to find your css file is not correct or maybe because you don’t have a end > at the end of the link tag. Also, you shouldn’t need the full file path to where your HTML file and CSS file is located. You just need to reference where the CSS file is compared to your HTML file. It looks like you’ve placed your css file in a folder. If your HTML file is in the same folder as the CSS folder, then you should be able to reference it href="css/main.css"

If you need additional help, google “how to link your css to html” and you will find tons of helpful resources. You’ll need to understand this set-up step, because you’ll need it for every project.


#3
  1. Close your html tag at the top it is currently <html and needs to be <html>
  2. All content HTML wise needs to be within your body tag so move the footer you have after the body tag to right above </body>.
  3. Not sure about your directory structure, but maybe you need a “.” in front of your forward slash for the relative path to the css?

Hope this helps!


#4

I do have “>” at the end of every tag, but for some reason TOP forum wouldn’t show anything inside them if I left them, sorry for not clarifying that.

My .html file is in a folder called “duckduckgo-homepage”, within that folder is another one called “css” where the main.css file is located. Should I only reference it in this way?

href=“duckduckgo-homepage/css/main.css”

Will do, thanks a lot, still I think everything is okay?


Every tag is closed on my .html file, it’s just that TOP forum wouldn’t show anything if I close them for some reason.

Thanks, I’ll modify it right now!

So it would be like this?

src="./opt/lampp/htdocs/duckduckgo-homepage/images/googlelogo.png" alt=“duckduckgo-logo”

Is it better that way or do I modify it as @rlmoser99 said?

href=“duckduckgo-homepage/css/main.css”


Sorry for taking so long to answer, I hope someone could still help me.


#5

You should be able to reference your css file href="css/main.css"

I would take the time to figure out relative path files, because you will need to know how to do this step every time you link an external file - like CSS or images. Here is a link I found, but there are countless other resources to teach it to you. https://www.w3schools.com/html/html_filepaths.asp


#6

No worries, no need to apologize :slight_smile: so yes that is how the relative path would be referenced, but based on your comment for sure reference the css file css/main.css since your html file is outside the css folder you need to do /css/… to enter the css folder then css/main.css to reference the stylesheet.


#7

I will check that URL, thanks!

It works now, thanks both of you!


#8

:tada::confetti_ball: