Add HTML & CSS to your Blog

Learning Competencies

By the end of the challenge, you should be able to:

• Set up a basic HTML page with the appropriate tags (HTML, head, title, etc.)
• Add paragraphs, headings, links, images, lists, and/or tables
• Divide content on a page using divs and spans
• Include a viewport meta tag in your HTML files
• Make your blog responsive so it can be easily used on different screen sizes
• Link an external stylesheet to an HTML document
• Position elements using CSS
• Modify element style (size, color, etc) using CSS
• Use classes and ids to manipulate elements

Summary

You learned a bunch of stuff in FreeCodeCamp. Apply that knowledge to transform your index page into something 'you'. The index page is the 'homepage' of your blog. You will need to factor in where and how to list your blog entries on your site.

To give you some choice in how you work, pick one of these three approaches:

1. From scratch: Design and build your own layout and styles from a blank index.html.
2. With an LLM: Use an AI assistant to help you plan, prototype, and refine your layout and CSS, then edit the code so you fully understand it.

3. From a template:

• Open your blog directory in your code editor.
• Open the index.html file inside your blog directory.
• Follow this this link, then copy and paste the template contents into your index.html.
• Add and commit your changes with a good commit message.
• Open the main.css file inside of your styles directory.
• Follow this this link, then copy and paste the template contents into main.css.
• Add and commit your changes with a good commit message.
• Push your changes.
• Run npx vite from your blog directory, then visit http://localhost:5173/ in your browser.
• You should now see a responsive blog template with basic styling. Spend time reading through the HTML and CSS, then customise the structure, colours, fonts and layout so it feels like your own blog.

Whichever option you choose, your final blog must demonstrate all of the learning competencies listed above.

Time Box

Planning

Ask yourself:

1. What is my site's primary purpose?
2. Who is my audience? (is it kids, adults, academics)?
3. How will I build my site to support their user experience?
4. Wireframe - can I draw my site layout on paper? Draw it!
5. What will my site layout look like on a mobile phone? On a tablet? On a desktop?
6. What other directories do I need (e.g. images)? Where do I put that directory?
7. Do I also want the style to be applied to all of my blog entries?

Application

Go forth and beautify your index.html page. You want to do enough playing to better comprehend the learning competencies and ultimately feel good about your finished product - be careful not to get lost down the rabbit hole! Use your Toggl/pomodoro timer to keep on track.

Include a link to your blog file te-houtaewa-template.html that you created in 'HTML & CSS Blog set up'. In most Sprints you'll be completing a technical blog post and a human skills blog post. You will then add a link for these blog posts when prompted to in this Handbook.

Your blog needs to cover all of these competencies:

HTML:

• HTML pages with the appropriate tags (HTML, head, title, etc.)
• Add paragraphs, headings, links, images, lists, and/or tables
• Divide content on a page using divs and spans
• Include a viewport meta tag in your HTML files
• Link all HTML files to an external stylesheet (i.e. your main.css).

CSS:

• Make it responsive so it can be easily used on different screen sizes (You could use flexbox, grid, or media queries for this. For a tip on media queries, check out the next section)
• Position elements
• Modify element style (size, color, etc)
• Use classes and ids to manipulate elements.

This Sprint allows you to get creative, but use the learning competencies as a checklist to focus your learning around and ensure that you have put each of these new ideas into practice. Check with your Facilitator if you are unsure about any of these.

Some tips on responsiveness

Our goal in this exercise is to demonstrate some form of code dedicated to making your website responsive to different screen sizes. As mentioned above, flexbox and grid are two good options, or you can use media queries. If you decide to go the media queries route, here is a good place to get started:

/* widescreen displays */
@media only screen and (min-width: 920px) {
  .container {
    /* some layout rules */
  }
}

/* tablets */
@media only screen and (max-width: 919px) {
  .container {
    /* some layout rules */
  }
}

/* phones */
@media only screen and (max-width: 400px) {
  .container {
    /* some layout rules */
  }
}

By putting this code block at the bottom of your main.css file, you can add any additional rules in here that you need to fix the parts of your website that break on different screen sizes. You can add as many different classes or IDs into these sections as you like. Responsiveness in CSS can be really frustrating! To test and see if it's working, open up your browser dev tools and click the little mobile view button:

By changing the target screen scale in the "Dimensions" section, you can see how it will look on tablets and phones. There are loads of different options in there, but you should be safe just checking it out on an iPad screen and an iPhone screen.

Helpful hints

If you don't know where to start, draw a wireframe (a black and white draft sketch). Grab a pen and paper and sketch what your index.html page could look like. If this is your first time creating with HTML and CSS, aim for something simple so you can cover the required competencies and keep within the timebox.

There's lots of helpful resources out there, but when you're starting it can be hard to know what you're looking for. A couple of good sites you can refer to:

• W3 Schools is a beginner-friendly resource for CSS (here) and HTML(here). You can easily look up what something does, and they often have a 'sandpit' where you can test how something works in the browser.
• MDN Web Docs is written by developers, for developers. HTML info is here, and CSS info is here.

Use DevTools to change your CSS and see how it looks before adding it to your stylesheet. This is also a good opportunity to learn about different CSS properties.

If you get really stuck for ideas, take a look at our Dev Academy example blog for some inspiration.

Keep in mind

If something isn't working, there's usually an error and you may need to carefully read your file to figure out what's going on.

• Check you've used the correct spelling e.g. CSS uses American spelling, so color instead of colour
• Remember most HTML elements need both an opening (<p>) and closing tag (</p>)
• Pay attention to any red squiggly lines in your code editor. Usually it's a helpful message that something isn't quite right and needs fixing.

Deploy Your Blog (Optional)

At this stage you can make your blog live! Follow the instructions from GitHub Pages to deploy your blog online.

Be aware: Some of your future blog posts will contain personal reflections about your identity, values, and learning journey. Consider whether you want to share these publicly before deploying. You can always deploy later or keep your blog private.

Reflect

Navigate to your my-reflections-sprint-2 file and add your reflections from this challenge. The questions are under Add HTML and CSS to your Blog Challenge in that file.

Stage, commit and push to GitHub.