W3C error check question

Report · Nov 21, 2018

Good evening. I'm in the midst of error checking my pages one by one. I'm currently error checking my home page MICHAEL GUYDON PHOTOGRAPHY So far I've been able to clear out all but two errors. The logo on the top left shows up as an error.<img src="logo camera.fw.png" alt="" width="240" height="53" class="img-fluid"></a> The second error is this one. When I attempt to omit this, it enlarges my navigation menu font. <a class="navbar-brand" href="#"></a>↩ <link href="css/bootstrap-4.0.0.css" rel="stylesheet"><style type="text/css">↩. Is there any solution to this? Thanks in advance.

Report · Nov 22, 2018

Contact page, you have some unclosed <div> tags in your code.

Every <div> requires a matching closing </dov> tag. The same goes for matching <li>, <p> <h1> <h2> etc... This is why it's so important for you to learn proper document structure in HTML code, so you can fix your errors.

Nancy O'Shea— Product User, Community Expert & Moderator

Report · Nov 22, 2018

FASHION Page:

1) Move all of the swiper css out of the <body></body> section of the page and into the <head></head> section or put it in a linked stylesheet.

<style>

body {
margin: 0;
background-color: #000;
}
* {
box-sizing: border-box;
}
.swiper-container {
height: 100vh;
width: 100vw;
text-align: center;
}
@media screen and (max-width: 768px) {
.swiper-slide {
width: 100%;
}
}
img {
max-height: 100%;
max-width: 100%;
}
.swiper-button-prev, .swiper-button-next {
display: flex;
justify-content: center;
background-image: none!important;
color: #fff;
font-size: 35px;
height: auto!important;
}
@media screen and (max-width: 768px) {
.swiper-button-prev {
top: 100px;
background-color: #000;
border-radius: 4px;
padding: 0 9px 0 5px;
}
.swiper-button-next {
top: 100px;
background-color: #000;
border-radius: 4px;
padding: 0 5px 0 9px;
}
}
.caption {
color: white;
}
</style>

2) At the end of the swiper css, currently in the <body></body> section of your page, your have the below code - delete it

</head>

<body>

3) Ideally move all the linked files directly following your closing </nav> tag into the <head></head> section of the page.

4) All the below images need an alt tag to pass validation <img src="resize/Tyrie.jpg" alt="Image Description"> or you can leave the alt tag blank alt=""

1. <img src="resize/Tyrie.jpg">

2. <img src="resize/Jennifer.jpg">

3. <img src="images/Yolanda.jpg">

4. <img src="resize/Alice.jpg">

5) Ensure you only have one call to the Bootstrap css - at the moment you again have it in the page twice.

Report · Nov 22, 2018

if that works, I will correct the two otehrs ones... for now... dinner...

Report · Nov 22, 2018

I'll address this. Thanks.

Report · Nov 23, 2018

So, is this ok ?

Report · Nov 23, 2018

It's perfect. No errors. So what I need to do is a compare and contrast of the errors that were there before you corrected them, so that I can learn from this. I really do appreciate your time and the time that you've put into this. It's much appreciated. I'll use this code for the rest of portfolio pages. It just makes sense. The contact form works too, which it worked from the beginning. I just have to add an confirmation show up, like in the one Nancy sent in the other form. That way, the client knows that their message was sent.

Report · Nov 23, 2018

are you on windows... if so WinMerge will help you to compare files and you can see from there what change and where in between old and new file

personnaly I use Ultra Compare but it is not free as winmerge StackPath

Report · Nov 23, 2018

Yes, I'm using Windows. How do I add a email sent confirmation to this particular contact form?

Report · Nov 23, 2018

Legacys7 wrote
How do I add a email sent confirmation to this particular contact form?

The contact from I builti in Bootstrap 3.3.7 works as expected. You broke it when you pasted the form into a Bootstrap 4.0 document. BS 4 is not backwards compatible with BS 3.

OPTION 1: Revert your contact page to use BS 3.3.7

OPTION 2: Re-build the form yourself in BS 4.0 or higher.

https://bootstrapious.com/p/how-to-build-a-working-bootstrap-contact-form

As I recall, you wanted to learn to work with code. Option 2 might be a good learning exercise for you.

Nancy O'Shea— Product User, Community Expert & Moderator

Report · Nov 23, 2018

Thanks again Birnou..

W3C error check question

1 Correct answer