FREELessons: 26Length: 5.7 hours

Next lesson playing in 5 seconds

Cancel
  • Overview
  • Transcript

7.2 Conclusion

Finally we have to draw this course to a close. Let’s finish up by changing the `rel` attribute to `data-rel`, making it pass W3C validation.

Let’s also take a little while to reflect back on this course and see what we’ve managed to accomplish. Thank you all for watching.

7.2 Conclusion

Hi guys, welcome back to Getting Started with Semantic UI. And in this lesson I just want to put on a few finishing touches just to make sure that it passes W3C validation. So one of the problems was that we were using just the rel attribute on the body element. And the rel is only really there for links and so forth. And ideally this is metadata for the body element. So, ideally we wanna say data so that makes it metadata. And then hyphen, and then you can say whatever you want. So I've just said rel, and then we have the value. And then we have the script.js file that I needed to modify. And the only thing I needed to modify was this first line. Where I created the rel and I havent changed that at all and then I need to target the body element with the attribute of data-rel now and I need to look at that attribute's value, so I say .attr and then I am getting the value instead of rel, it's now data-rel. So I change those two right there. And that's it. The other line still works perfectly fine, and of course, then we still get the nice arrows that are indicating us which page we are on and the same goes for the mobile navigation as well. So there is our site finished and done and I really enjoyed working with the semantic UI and as I have gone long in this course, I found that the semantic UI has become easier and easier, because your mind sort of works manticly. So it knows this is the type of thing that we want, and especially when it comes to buttons, and other things like that, it saves you a ton of time in styling, and it's a very, very, good looking UI. And you can tell, the developer has focused very carefully, on the letting, on the overall style and I haven't had to do actually a lot of styling considering that this is a four page website. You know, you could consider this a full website. And I haven't had to do too much to get this to work right and how I want it to work. And so, you can see there's a lot of time been spend on the overall design and also, lots of thought on the implementation. For example, that form validation is just absolutely wonderful. I really enjoyed that form validation a lot. Now we also worked very closely with the documentation. Now yes, I can't convert absolutely everything. Within the scope of the semantic UI, because even though on the surface it looks very simple, the amount of combinations and all the different stuff you can do, it's just a plethora of things you could do. And it could be therefore, weeks and weeks and weeks with all these different combinations, it really is a fantastic UI that's very extensible. But that's also why I worked with the UI documentation, so that you could easily see how things relate to code, what the documentation is all about. The documentation is very clear and concise and you are able to now look at that documentation and understand how to implement the feature setting or whatever else it is that you'd like, by just looking at at the documentation. And that's why it's important to understand documentation not from a teacher's point of view, but from your own point of view as well, so that you can decide what you want and you can easily implement it yourself. So thank you for watching me throughout this entire course. I hope you've learned a lot. I hope that you get excited about this UI and I hope that you integrate it into some of your projects in the near future. And as always, thank you for watching.

Back to the top