zealous veldt
Hello,
can someone please help me change layout after clicking home link to display text and also shifting the image down below the header? Would I need to use javascript for this? I tried the visibility & display none technique but unable to get it to work. would appreciate any help or advice! here's my scrim
weak spindle
Hi @zealous veldt,
You didn't include your scrim.
zealous veldt
Hi <@1188596384274845728>,
You didn't include your scrim.
Hey Geoffrey! I had to make some tweaks https://scrimba.com/frontend-path-c0j/~0kv/s0n4g9idlh
weak spindle
I think I understand your problem. THis project requires multiple .html pages.
you will have index.html which is your main landing page. Then, you will need one html file per blog post (or at least, make one or two otherwise, it's a lot of work lol), for example blog-1.html, blog-2.html , and finally one about.html file for the About Us content.
This is the standard structure for a multipage site. You will not need javascript to navigate between the pages. Do you remember which HTML element we use to navigate to another page?
zealous veldt
oh these are 3 different pages! I assumed it was one but I needed to make it responsive. I'm guessing the href="blog-1.html" & target_blank would work for this to navigate between pages?
weak spindle
Yes they are!
You still need to make them responsive (i.e. it looks good on mobile and desktop)
I'm guessing the href="blog-1.html" & target_blank would work for this to navigate between pages?
hrefis an attribute for which HTML element?
target="_blank"opens the page into a new tab, which we typically do not want to do if we want to navigate withing the website. We usually use it when opening a page that belongs to another site (for example, when you make a link to a wikipedia page)
zealous veldt
for an anchor element?
Ok I understand how to approach this problem. You clarified it for me. Thanks Geoffrey!
weak spindle
You're welcome. Happy coding!
smoky seal
cool
zealous veldt
Hi @weak spindle I'm still struggling with this project. Do I use one css for all my html pages. If so how would I style it without affecting all my pages differently?
weak spindle
Hey @zealous veldt,
There are 3 ways you can approach this:
One large CSS file for all styles. You will have to keep it well organized with comments, and make sure there are no css conflicts. I don't recommend this approach as it's difficult to read and maintain when it's so large.
One css file per html page. In the <head> of each HTML page, you will link your stylesheet for this page.
This will lead to a lot of repeated CSS code across all the different files, but that's ok for now. The files will be smaller, easier to maintain. THis is the most straightforward approach for now.
A hybrid approach. There are DOM elements repeated across all pages right? Like the navigation bar. What if we made on file for this, and linked it on all HTML pages, and one CSS file for individual HTML pages. Each HTML page would like to two stylesheets then: for example
// on about.html
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="common.css">
<link rel="stylesheet" href="about.css">
</head>
<body>
<nav> Navigation is styled with common.css</nav>
<h1>This is the about page</h1>
<p>This is styles with about.css</p>
</body>
</html>
This third approach is closer to what you will experience later with modern frameworks.
zealous veldt
Ok I get it! I don't believe I've come across this before where Im tasks to style multiple pages with different css & html simultaneously. However I do enjoy the challenge as its nice to learn a new solution for this. Thanks! 😎
I did encounter some strange styling wiith my images. Not sure why they are not even. Ive checked many forums and even asked AI but no luck. Maybe you can help me?
weak spindle
Ok I get it! I don't believe I've come across this before where Im tasks to styl...
Yeah they kind of throw you in the deep end with this one lol
Regarding the image height.
So you know how to use devtools? If not it’s very important that you learn. It’s our best friend.
zealous veldt
I've seen it used briefly during some scrims but not confidant in using it lol
weak spindle
It’s a core skill. With it you can inspect and modify html and css in the browser to help you debug and test things.
Open devtools by pressing f12 or right click / inspect.
Select the inspect tool and check what classes are allied to your images. Maybe it’s missing height constraint.