The purpose of this project was to recreate a Harry Potter Website using CSS Flexbox and what we had been taught.
The class was given a pdf with a image of how the website should turn out with various intructions.
These were as follows:
-
The banner image is a background (applied via CSS).
-
The banner background image should take up the whole of the webpage.
-
The banner height was 80vh.
-
The width was 100%.
-
The nav height was 25px.
-
The first section had a suggestion for achieving the structure in html. This would be 2
<div>inside a container<div>- flex was used. -
Repeat
📝 We were told we would learn how to make it more responsive going forward. This is something I intend to add once learned.
This one was tricky, but I knew going in CSS eluded me.
However after having an extra session with my mentor I was able to see what my problems were.
-
My Approach:
I was all over the place, making changes to one element and when I couldn't get it to adjust anymore, I would just move onto the next element I fancied trying to style. My mentor taught me how to change my approach for the better.
I needed to take the document from top to bottom and split screen my html document and CSS style sheet.
Starting from the <body> element, I worked my way down the document, I didn't move onto new elements until I had applied all the styles I could to it.
-
My Focus:
Again I was focused too much on trying to manipulating the containers and I was also forgetting to manipulate the box model for each element In short my view was too wide and I needed to narrow it. Again my mentor was the one who helped me see this and reign my focus back to all of the element I was manipulating e.g, content, padding, margin, border.
Once I was able to do this, I found the task straightforward, with alot less frustration and a more formulaic method.
I also added the lighthouse report for the site, I'm quite happy with the result.
I also look forward to increasing its responsiveness.
React
Typescript
Django
Laravel
Facebook
Microsoft
Google
Alibaba
D3
Tencent