As a definite beginner, I followed the DevTools for beginners tutorial. I had fun playing around with the different changes I could make and I felt proud when the code worked out. That being said, I did have a couple troubles while following along. Throughout typing everything in the HTML editor, I found that I kept switching letters around. Fun facts, the code won’t work if if the letters aren’t in the correct order! Another issue I had was placing commands in the wrong places, which also doesn’t work. The largest issue I had that I couldn’t figure out how to work was the link to formatting that corked on index.html didn’t work on contact.html.
I found that I was unable to get the “Contact Me” page to take the formatting of the blue box surrounding the home and contact links or change the font of contact me, despite my code appearing to match the tutorial.
The link tags worked perfectly on the home page, but would not work on the contact page. If anyone can see what went wrong I would love to know! I managed to get everything else to work and learned how to insert an image in a webpage! I have a feeling I will be taking baby steps for a while.
Yeah I can’t really help you with that last bit of code. It all looks pretty good to me! Anyway, I agree that this would be pretty tough to pick up. Other than editing stuff with F12 I think I would have to use some kind of reference guide for a while!
I definitely agree on how important the guide is! Even with the guide it could be easy to get lost… And how specific the commands need to be sometimes can definitely be a problem. And last but not least, troubleshooting also requires a lot of time… Nice job and good luck!
Hi Emily, glad you were able to get going — no shame in using a guides when you’re just starting out, or have been doing it for years, for that matter! As for your question, the issue is not the link to bootstrap but the tags around contact me. The bootstrap framework adds a bunch of preset CSS rules that target specific elements and classes — in this case, you need to wrap the “Contact Me” h1 tags with the
<header class="jumbotron jumbotron-fluid">...</header>
I feel you on the title of this post. I struggled a lot while creating, I had to take a break and come back to it otherwise I would have been more frustrated.
Looks great Emily! A thought on your problem: in one screenshot it looks like you have anchor elements wrapped by a div tag with class “nav,” while in the other screenshot the anchor elements are wrapped by a nav tag itself. Perhaps in CSS you are only using a type selector or a class selector, and not both?