Worcestershire

The jumbotron,sorry.

I currently re-doing my site and taking a 'storytelling' approach to it. For the intro text, I'd like to do something fancy with the text. I'd like to do some animated text. I'd also like to have the '3D' be an actual 3D object that the viewer can rotate themselves, with other words like 'animator' and 'passionate' having some kind of animation, perhaps animated hearts within the word 'passionate' with a border for readability. But I'm unsure how to go about any of this. http://tympanus.net/codrops/ has so much cool stuff going on but when I attempt to implement it myself, it doesn't work. I find it tricky to use other people's code. Anyone got any tips for animation?

Well; for a start, something to realize is a lot of the effect you're seeing there is achieved with CSS, not so much HTML. It's actually structured rather nicely IMO. So you have your nav bar, horizontal, then your header image which has a scrolling effect, then the main content section has a gallery section that has been placed at a negative pixel measurement to get it to overlap. WIthin the gallery each thumbnail leads to another page. The only particularly fancy part to this website is at the bottom, the categories section. Worth repeating again, much of the fanciness of this site is established with CSS and JS, not HTML.

Hmm. I searched 'px', and couldn't find any number that is close to the size the header probably is. What is it called?

Ah, so the header isn't defined with pixel units? I suspected as much...

Bootstrap's CSS being split up over several different files, and bafflingly constructed CSS to boot makes it very hard for me to alter templates as much as I would like. I'm mostly writing my own sites but want to include a Bootstrap and Wordpress site in my portfolio to show I've some experience with these platforms as well. Does anyone have any tips for working with Bootstrap? Even Bootstrap 4 has barely improved the issue of understanding how things are constructed. Take this template; https://graygrids.com/item/engage-free-bootstrap-4-template/ I tried for a long time today to find the controls for the header's height, to no avail. Can anyone find it? Any other general tips for cracking Bootstrap readability and editing? Thanks in advance.

I had not. Nor did I know GIMP even had animation support. Thanks, I'll look into those two.

Trying to find a free tool that is simple to use. Been unsuccessful so far. Tried all the usual suspects, Flash, Premiere, and they're as user friendly as I remember (not at all). Premiere's export has a horrible dithered look despite hitting maximum quality. Flash and their symbols nonsense, pass, thank you. There are converters out there for image sequences (that's what I got) but I also need to add a logo on top, so I need a tool that has layers. Most of the simple free tools out there are leagues ahead of Adobe in terms of simplicity of use but that's the one point I'm falling down on. Anybody got any suggestions?

Pretty much no one in my class likes it either. When I started the site I figured learning how to use it would be another feather in the cap. Rookie mistakes and that. Do you mean Intuit? I can't find a web design tool called Inuit.

Awesome to hear Pascal! Yeah, but the point of the exercise was to create a portfolio piece to show that I can use Bootstrap if needed (if studios look for that sort of thing). I'd be less comfortable with using another individuals template Thanks though!

I've been studying CSS3 and HTML5 in an in-house course full time for months, I understand that Bootstrap isn't to be used as a cop-out. I have built several fluid frameworks. I just figured it could streamline the process; however I've found it to be an obstacle at every corner. Shame. The devs badly need to name snippets in a human friendly fashion, and to stop depending on !important declarations. The latter in particular just seems so amateurish. Ah well. Maybe in version 5.

Set myself a little challenge of getting to know Boostrap and style it to the standard I wanted. Straight away find it very very difficult to style with my own CSS. !importantX100 at the bottom of their css document overriding everything. Z-Indexes not being respected. HTML flow not being respected. Very poorly thought out construction (like in the following, those thumbnail images squash and stretch when they shouldn't but I have no idea where to edit in a background:cover line.) Here's what I have so far. The orange star should be on top of the nav not behind. Tried giving it a Z-Index Value; nada. That orange bar? If I want to duplicate it, have another one running under the first three thumbnails, that doesn't work, even though the div is under the third thumbnail in the code. The second bar will bunch up towards the first one, behind the thumbnails. I thought Bootstrap would be great to use. Automatically constructing my nav/sandwich mobile version made it seem like a godsend. But its quickly turned into a nightmare. Hope someone has some advice. Cheers!

Well a lot of that went well over my head haha, hopefully that's because I'm only a few months in. I swapped out all id's that control style for classes. And that padding tip worked perfectly, menu's working beatifully now, thanks guys I'll try and get the whole site up in the next few days and I'll post a link here

So not quite a newbie, I've been studying HTML and CSS full time since September, but one of the very basic things that never truly sank in were navigation bars. How they're visually constructed confuses me. Where does the width go? Where does the padding go? etc. So I'm wondering if I could get someone to have a look at my code. I building a vertical navbar, and I'm almost there; I'd just like the text to appear in the centre of the 'button' that appears on the hover state. I've attached a picture of the site and the code too. What do I need to put in where? Thanks in Advance.