Well, this is my first attempt at coding everything.
I did all the modules in the lesson (Responsive Web Design Certification) and then started the Tribute page.
I immediately realized I had no idea what I was doing… I was trying to make sense of all the things I had to do. “id=main” and so on. I am now “finished” with the page. I am not happy with the way it looks, but it fulfills all the “required” criteria. However, I still do not know the significance of everything I have done.
Anyway, if you have time have a look. I put all the required elements in, but they do not serve a purpose on my page except to pass requirements. If you see something that I need to understand (and obviously do not), please feel free to call me out.
I am not sure if I should submit it. I had to use some code I found in several places to get the look I was trying to get. I don’t know if I am overloaded with unnecessary code now…??
Congratulations upon completing that project. In my opinion, you are doing great if it is your first attempt at coding. I suggest you go over your code line by line, removing and adding things. Breaking the already existing code at the same time paying attention to the effects of doing that to your page. It will help you understand what the code is doing there.
In addition to what @codely pointed out, I suggest you take note of the following.
In codepen, there is a section to your left labelled HTML where your HTML code is supposed to be, another one in the middle labelled CSS where your CSS code is and the last one on the right for JavaScript code. Codepen takes care of linking the three for you. Avoid inline styles. I don’t think it is good practice.
In codepen, anything which goes inside head tag should be placed under settings. Click Settings then copy and paste what is in your head tag inside Stuff for <head> textarea. The link tag should also be inside head tag.
Similary you don’t need body tag in codepen. HTML section only needs what is supposed to be in your body tag.
@nibble Great advice thanks. It is my first attempt at coding. But I have used WP and a page builder for a while so I do understand a couple of minor things through that. I used Dreamweaver ages ago, then fell out of any type of web work, and now am back with a goal.
I am not good with codepen yet but it is starting to make more sense.
I guess I will submit my finished project and move on to No.2.
One thing I am a bit confused about: I put the “id=???” in where I was supposed to. Like I needed an “id=div-img” and an “id=title” and a few more. So I just put them in. I made a couple “live” so the “id” actually had a purpose, but the others were just unnecessary code (except being necessary to pass the test, they have no other function AFAICS). I put them in cause I HAD to, but I dont see a “purpose”. I guess it is to get us used to using those code commands, but I am not sure. I always like to know WHY I am doing something.
I wasnt sure if I should use a table for my < ul > or just use CSS to center it. I wanted my list centered on the page, but also text-align center or left, so ALL text in the page middle but some aligned left and some centered. I was not sure the best way to approach this.
Atleast for the test to passes you have to put the ids. If you are doing you own project, then i recommend you to remove the unwanted ids, some times they make slow the page or website you are working on.
Your page looks good @studiofletch. Some things to revisit;
Codepen provides the boilerplate for you. It only expects the code you’d put within the body element in HTML. (No need to include the body tags). For anything you want to add to the <head> element click on the ‘Settings’ button, then HTML and add it into the ‘Stuff for <head>’ box.
The link to the font goes in the box labeled ‘Stuff for <head>’
