In his speech, at the Cop26 summit in Glasgow, Sir David Attenborough addressed world leaders to be “motivated by hope rather than fear” to avoid climate catastrophe. With Cop26 drawing to a close this week and with David Attenborough as the COP26 People's Advocate for the UK's Presidency of the UN climate change summit it felt appropriate to dedicate this page him.
There are many things I have learnt from breaking down the task into manageable smaller tasks, the HTML and CSS coding itself through to the design and layout of the tribute page.
- I started by completing the freeCodeCamp responsive web design course to learn the languages HTML and CSS to built the tribute page.
- The freeCodeCamp Learn HTML5 and CSS3 From Scratch was useful to help me get started with using VS Code. Emmet made coding much more efficient.
- For the page build I broke the page down into smaller tasks:
- I started with a very basic page that passed all the tests in CodePen so all user stories were achieved
- Once I knew I had the code to pass all the tests I sketched out my plan for the tribute page to break it down into three sections: header, main content and footer. I built on the CodePen content and design in VS Code.
With the exception of the School of Code application and MySpace (many years ago), I have never coded using HTML and CSS before. Using VS Code, learning HTML and CSS syntax is all new to me. As such, I am proud of what I have achieved.
Whilst my tribute page appears and functions how I expect it to, I am sure that there are areas of improvement and I would welcome feedback on my work - particularly constructive feedback. Whilst it is possible for there to be more than one way to code which achieves the same results I am keen to make sure I am using best practise - this is something I hope to learn during the School of Code course.
Regarding the tribute page itself my reflections are as follows:
- I tried to keep applied accessibility and responsive web design at the forefront
- I used a colour picker to pick two colours from the hero image (a shade of brown from David Attenborough's jacket and a shade of blue from his shirt) which provided a colour theme for the page. I think these colours work well ensuring the foreground is easily readable.
- I used two grids in the page, the first for the main contents and the second for the footer. I used media queries for both to rearrange grid areas to produce responsive layouts.
- I had difficulty creating a content grid with the margins and padding that created the visuals I was aiming for. I trialled various code but found it created a horizontal scroll as the content grid did not align with the header. I therefore achieved my desired outcome by creating two additional columns to the left and right of my main content grid. These columns were effectively 'dummy' cells which I left empty. I am sure there is a more efficient way of getting the same result but unfortunately I did not find it.
- I am not certain on the best practise regarding crediting and referencing the text and image sources in the tribute page itself. With David Attenborough being a public figure it is difficult to locate copyright free images. I have therefore listed and linked the references below.
Listed below are the websites and sources from which information and imagery was used to build the David Attenborough Tribute page
- David Attenborough's most recent awards and achievements - Wikipedia
- Introductory text on Davis Attenborough - Biography
- Hero image header - BBC - archives
- David Attenborough images - BBC - Newsround
- Little known facts about David Attenborough - Shortlist
- Full transcript of David Attenborough's speech at the COP26 Climate Summit Glasgow - Rev