JWS Docs / Build Steps / Changing the Main

Changing the Main

Here is where the bulk of the changes to the page will be made so make sure you make regular commits we will be spliting it into smaller sections.

Here we have a div <div class="panel_full"> and inside that is a <div class="text_panel"> we are going to change the content inside this div.

Step 1

Let's start by adding a <h2> here as a sub-heading announcing where we are going on our day out.

I also want to split how the heading looks just by changing the font so I have added a <span> around the place name. A span is an inline element which has no predefined styling, so I have added a class name of "font_change" with styling in the CSS that makes the font italic and bolder.

<h2>We're off to the <span class="font_change"> National Railway Muesum</span></h2>

Step 2

For the moment we can ignore the content of the <h3 class="second_font">One Column Layout</h3> but we do want to move it below the third <p> on line 23

Step 3

Next line is already a <p> so we can just change its words

<p>This years club trip will be to the NRM in York.</p>

Step 4

To add a little bit more interest to this block of text lets next added a <blockquote>. There is one here already that we just need to move up a line you can either move it by cut and pasting or delete the <p> between our changed <p> and the <blockquote>

Explore stories, places and engineering marvels behind the railways

Step 5

We next want three more paragraphs it is important to split your text into <p> tags or else you will have just one long column of text which is neither pretty or easy to read.

<p>Travel through years of transport history from the earliest steam trains held in the Great & Station Hall's. To the latest in rail innovation showcased in the Innovation Platform.</p>

<p>See and explore iconic trains such as Stephenson's Rocket which kick-started the golden era of railway innovation & Sir Nigel Gresley's Mallard the worlds fastest ever steam train.</p>

The third <p> though has an added class "shouty_text" which in the CSS has a different font size, weight and style to make it standout.

<p class="shouty_text">Plus Much More besides!</p>

Step 6

Next we need to add new text to the <h3> that we moved previously this will now be the header to the list below

<h3>When & Where</h3>

Step 7

We now want a list <ul> which we already have ready with three list items <li> where you need to change the text. Putting this information in a list displays it in a column with each <li> preceded with a bullet point here I've left it the default disc but there are other preset options available e.g square or none at all.

<ul>

<li>Wednesday 15th September</li>

<li>10am - 3pm</li>

<li>Meet at museum main entrance</li>

</ul>

This is now all the content we want in this <div class="text_panel"> if you are following along with my Grand Day Out layout so we need to delete the next four lines that make up the example <details> element.

This should now make your next line the "text_panel" closing </div> tag followed on the next line by the "panel_full" </div> closing tag too. It is important that these div's are closed correctly after the text content or you will find your webpage behaving peculiarly.