New to Codecamp/ first Project

Hello everyone.

I’m new to codecamp, I’m also fairly green to coding in general. In high school I had the opportunity to play with hypertalk (hypercard language for anyone who may remember what that was) and a bit of HTML. Recently I decided that my current career path was not working for me and was causing me more harm then good (an 8 year commitment in commercial/ industrial plumbing). After talking to a friend of mine that lives in the L.A. region he convinced me to give coding a shot as people who are able to code seem to be in short supply. So here I am.

I just completed my first project, I tried to make it look as close to the original example as I could with the very limited knowledge that I have. I must confess I did examine the source code but ONLY because I could not figure out for the life of me how to make the gray box thing was or what to search for. Now I know it’s called Jumbotron. Originally I thought it might be button class=“btn btn-default target” because that’s the only thing that came close to the gray box thingy. obviously i was wrong and that only works with buttons. :relaxed:.

Anyways, I’m not sure how to link my codepen project so I’ll link my profile. I’m sure if it doesn’t work or if there is a better way of doing this someone will correct me. https://codepen.io/Arktos/ I reference back to the first part of the course on responsive design with bootstap and used W3School for the stuff i couldn’t find there. Looking forward to your responses.

Cheers
Joel

Oh, on another note, is there an online community/ study group. I live in a very remote place or kind of I guess. I live in Whitehorse, Yukon Canada, about 2 hours away from Skagway Alaska for those of you who aren’t familiar with Canadian geography or 24-29hr drive to Vancouver depending on road conditions and depending on how much of a baller you are.

Hi @JoelLM,

  • Do not use lower levels to decrease heading font size:
<h2 class="text-center">The man who invented tomorrow.</h2>
...
<h4>A Time line of Nikolas Tesla</h4>

MDN documentation:
<h1>–<h6>: The HTML Section Heading elements - HTML: HyperText Markup Language | MDN

Do not use lower levels to decrease heading font size: use the CSS font-size property instead.Avoid skipping heading levels: always start from <h1>, next use <h2> and so on.

HTML Standard

h2–h6 elements must not be used to markup subheadings, subtitles, alternative titles and taglines unless intended to be the heading for a new section or subsection. Instead use the markup patterns in the §4.13 Common idioms without dedicated elements section of the specification.

Common Idioms
HTML Standard


---
  • line 17 a stranded anchor ( </a> ):
<img ... /></a>
  • Is better not use the style attribute:
<ul style="list-style-type:disc">

MDN documentation:
style - HTML: HyperText Markup Language | MDN

The style global attribute contains CSS styling declarations to be applied to the element. Note that it is recommended for styles to be defined in a separate file or files. This attribute and the <style> element have mainly the purpose of allowing for quick styling, for example for testing purposes.


---

Cheers and happy coding :slight_smile:

2 Likes

I have been using headings wrong the entire time :stuck_out_tongue: Thanks for the links.

2 Likes

@Diego_Perez

Thank you very much for your feedback. still figuring it out a bit.

I made changes in accordance to your advice, would you be so kind as to look over my changes and let me know if you would have done anything differently?

Your last bit of advice “Is better not use the style attribute:” confuses me so I just removed it and it hasn’t made a difference. Is it because it was a redundancy that you would not use a style attribute?

Cheers
Joel

Hi Joel,

Thanks for sharing. Initially, it looks good to me! Consider a couple points of feedback:

  • Consider changing the font to make it more appealing.
  • Instead of this line: p class=“para”>A Time line of Nikolas Tesla /p with CSS styling of “.para { }” I would instead use h2 A Timeline of Nikolas Tesla/h2 with CSS styling of “h2 { }”. To me, that just fits better as a heading and you wouldn’t need to separately style your p’s if you were to continue to add them throughout the page.

Thanks again for sharing.

1 Like

Hi @JoelLM,

Because, you have multiple styles sources (That’s make the page more difficult to review.):

  • The CSS tab
  • Every element on the html with the style attribute

Also:

  • it is recommended for styles to be defined in a separate file or files.
  • This attribute and the <style> element have mainly the purpose of allowing for quick styling, for example for testing purposes.

Cheers and happy coding :slightly_smiling_face: