In this video you will learn how to replicate the core structure of the current BBC News website, as of releasing this video. On initial observation, the BBC website can look pretty basic in terms of design. What makes it such a work of art is how they have managed to fit everything dynamically, so that the website retains its integrity on every different kind of screen size imaginable.
It would be far too long and laborious to copy the entire website. That is why this video draw particular focus on the navbar which is a single strip navbar that is an eminent example of how to design a slick, responsive navbar. And the opening news cards which re-arrange themselves neatly based on the screen size that the website is currently being viewed through.
Even though, in reality, the content of a dynamic website such as this one, would be generated through a back end. This tutorial only uses the bare-bones front-end tools of HTML, CSS and JavaScript. That is because this tutorial is meant to be a front-end design tutorial. Therefore, bloating it out with cumbersome back end content would only detract from the focus of this video, hence why we have not done it.
📚 Materials/References:
- Completed Code Pen project: codepen.io/LFCProductions/pen...
🧠 Concepts Covered:
- Responsive nav bar
- Drop down nav bars
- CSS grids / CSS flexbox
- How to underline links in a navbar
💻 Technologies used:
- HTML
- CSS
- JavaScript
If you enjoyed this video then please consider liking 👍 and subscribing. You would be doing me a huge favour if you did this and it would be greatly appreciated ❤️ by me. Likewise, if you have any queries or comments that you want answered. Then please, don’t hesitate post them down into the comments box below. I would love to hear back from you and will answer all of your questions to the best of my ability.
Stay awesome guys. ❤️
#HTML#BBC#WebDev#WebDesign#CSS#JavaScript#JS#FrontEnd#ComputerScience#CS#Coding#Code#LearnToCode
27 май 2021
