Vandivier / ladderly-3

the home site for the ladderly ecosystem
https://ladderly.io
13 stars 9 forks source link

redo trial by fire #20

Closed Vandivier closed 9 months ago

Vandivier commented 1 year ago

is this it...? or is there another link

need to edit it down. the first minute and more doesn't need to be there https://www.youtube.com/watch?v=V7yeF9AaBxM

Vandivier commented 10 months ago

v2 is here! https://github.com/Vandivier/trial-by-fire-v2

let's blog homework and update the checklist.

homework is making the Trial by Fire personalized to you and better in every way (HTML, CSS, JavaScript, Other):

  1. HTML Homework: Make the HTML better. How? Here are a few ideas but don't limit yourself to this:
    1. The Trial by Fire ignores basic HTML boilerplate like the DOCTYPE tag. Make your web page better by including these appropriately.
    2. Change the name of the blog and the hardcoded article to reflect your own taste. Hardcode a blog based on your learning journey, background, or things you are learning. Pick any topic you like. Here are a few suggested topics:
      1. Why am I learning to Code?
      2. What I did and did not like about Ladderly's Trial by Fire
      3. My Current Favorite CSS Trick (feel free to do this after your CSS Homework).
    3. Add an image to your HTML page
    4. Make your HTML form more complicated by adding form fields for "Author Name" and "Date Published"
    5. Add a Favicon
    6. Include your name on the page with a button that plays an audio recording of the pronunciation
    7. Add a footer to the page that includes links to your GitHub Portfolio and LinkedIn.
  2. CSS Homework: Change the style of the website to your taste. A few examples:
    1. Change the page background and blog article backgrounds to different colors, with margin on the article elements, showing visually distinct blog articles.
    2. Change the font and font colors to express your personal style.
    3. Change the row-like CSS default rendering for sections into a column layout.
    4. Sprinkle some span tags into your blog articles that use bold or italic style for emphasis and visual variety.
    5. Try adding some web page gutters
    6. Add a border that separates your site header, footer, and main area.
  3. JavaScript Homework: Add some custom JavaScript functions.
    1. Previously you added the ability to add an article, now add the ability to remove an article.
    2. Make a function that will change article heading font colors to a color the user picks.
    3. Make a new form that lets the user upload and download CSV or JSON files of blog articles for the page.
    4. Add three or more articles to the page with different titles and content, then make a search form which lets the user search for a word and it hides the articles that don't have that word in them.
    5. Add three or more articles to the main page. Now add "Up" and "Down" buttons to each blog article. When a user clicks one of these it changes the order of articles, moving an article up or down the page.
  4. Other improvements:
    1. Improve the README file
    2. Instead of a single page, let your site have a few pages. You can make an About Page, and FAQ Page, or simply give different blog articles their own URLs instead of putting them all on the main index page.
    3. Start building in public! Make social media posts about your site. This will improve your ability to do technical communication and it will also help you grow your social network, which will pay dividends later during the job search!
    4. Ask a friend or online contact about one thing they would like to see improved or changed on the website and try to implement that.