repl.it

.. _html-me-something: Assignment #4: HTML Me Something ================================ You’ve learned a bit of HTML and some CSS as you added or modified content in exercises or pre-existing files. In this assignment, you are going to take the next step by building an entire page from scratch! There are two parts to this assignment, one focused on HTML and another on CSS. HTML makes up the *structure and content* of web pages, while CSS sets the *visual style*. As a best practice, developers often keep the content and style as separate as possible. With this in mind, you will build the HTML portion of your page first. In the second half, you will add styling to the page with CSS. .. admonition:: Tip Try to avoid using HTML tags to change the general appearance of your pages! For example, what if you want all of your section headings to be *red*? You can either add this style one time in the CSS file, or you must include ``style="color:red"`` in EVERY ``h2`` tag. Especially for large websites, CSS provides the best way to control the overall appearance of a page. Sections -------- #. :ref:`Getting Started ` #. :ref:`Part 1: HTML ` #. :ref:`Part 2: CSS ` .. _getting-started: Getting started ---------------- Login to your `Trinket `__ or `repl.it `__ account. Open a new HTML/CSS project and call it ``HTML Me Something``. Repl.it Users ^^^^^^^^^^^^^ When you open a new HTML project, repl.it gives you some standard code in the ``index.html`` file: .. sourcecode:: HTML :linenos: repl.it This is a good starting place, but you should make some minor tweaks before diving into Part 1. #. Change the text in the ``title`` element to describe the page you want to build. #. Remove the ``script`` element from line 10. #. You can also delete ``script.js`` from the file tree on the left hand side of the workspace. You're good to go! Trinket Users ^^^^^^^^^^^^^ After naming your new HTML project, you will see an empty editor. Before starting Part 1, do the following: #. Paste in the same repl.it code shown above. Also, make the first two minor tweaks. #. In the toolbar above the editor panel, click the ``+`` button to add a new file. Name this file ``style.css``. You're ready to go! .. _html-me-part1: Part 1: HTML ------------ In Part 1, you will build the structure and content for your webpage. All of your work for this part will go inside the ``body`` element of the ``index.html`` file. Requirements ^^^^^^^^^^^^ Your mission is to build a page that: #. **Tells a story**. This can be personal or impersonal, funny, serious or neither. You can do whatever you like, but it must be school appropriate. Here are some ideas you can consider: a. Describe a trip you took. b. Talk about one of your hobbies or passions. c. Provide an alternate ending or plot twist to a book you read. (For example, now's your chance to change Prim's fate in *Mockingjay*). .. admonition:: Tip Check out this `example page `__ created by a member of LaunchCode. #. Includes 3-10 total paragraph elements. The page should also contain at least 4 different sections. .. admonition:: Example A section is a set of HTML elements nested inside block-level tags like ``

,