Learn to code “BBC .COM” website landing page using HTML5, CSS3 and Jquery
β±οΈ Length: 5.2 total hours
β 4.12/5 rating
π₯ 3,183 students
π October 2022 update
Add-On Information:
Get Instant Notification of New Courses on our Telegram channel.
Noteβ Make sure your ππππ¦π² cart has only this course you're going to enroll it now, Remove all other courses from the ππππ¦π² cart before Enrolling!
- Course Overview
- Master the art of reverse-engineering complex professional layouts by breaking down a high-traffic media portal into its fundamental structural components.
- Adopt a professional workflow that prioritizes clean code organization, ensuring that your projects remain scalable and easy to maintain over time.
- Explore the architectural logic behind news-heavy websites that manage diverse content types, including breaking news tickers, image galleries, and feature articles.
- Develop a deep understanding of content hierarchy, learning how to prioritize information visually to guide the userβs eye across a dense landing page.
- Gain insights into the “box model” philosophy by visualizing nested containers before writing a single line of code, reducing layout errors and bugs.
- Experience the transition from a blank text editor to a fully functional replica of a world-renowned digital asset through a step-by-step logical progression.
- Learn how to manage white space and padding effectively to replicate the professional “breathability” found in premium corporate web designs.
- Study the intersection of aesthetics and functionality, understanding why specific design choices are made for global audiences with varying internet speeds.
- Build a mental framework for troubleshooting layout breaks that occur when content scales or changes, a vital skill for any professional front-end developer.
- Engage with project-based learning that emphasizes doing over watching, ensuring that every concept is reinforced through immediate practical application.
- Requirements / Prerequisites
- A functional computer or laptop running Windows, macOS, or Linux with the ability to install modern software tools and utilities.
- Installation of a high-quality, lightweight code editor such as Visual Studio Code, Sublime Text, or Atom to facilitate efficient typing and syntax highlighting.
- A modern web browser like Google Chrome or Mozilla Firefox to utilize advanced built-in developer tools for real-time styling and debugging.
- Basic computer literacy, including the ability to manage file directories, create folders, and save different file extensions like .html and .css.
- An internet connection stable enough to stream high-definition video lessons and download necessary project assets or external library links.
- A genuine curiosity for how the internet works and a willingness to spend time “poking under the hood” of existing websites to see their structure.
- No prior experience with programming languages is required, as the course starts from the ground up, though a creative mindset is highly beneficial.
- Skills Covered / Tools Used
- Leveraging Semantic HTML tags to ensure that web crawlers and screen readers can accurately interpret the meaning and importance of your content.
- Mastering CSS Selectors and combinators to target specific elements within a complex DOM tree without affecting the rest of the layout unintentionally.
- Utilizing External Stylesheets to keep your project organized and separate the visual presentation layer from the core content structure.
- Implementing Browser Developer Tools to inspect element properties, test live CSS changes, and measure pixel distances between different layout components.
- Working with Web Typography including the integration of external font libraries to match the iconic branding of high-profile international news agencies.
- Exploring Absolute and Relative Positioning to place overlays, badges, and navigation elements exactly where they need to be on the digital canvas.
- Managing Color Palettes using Hex, RGB, and RGBA values to achieve the exact brand colors and transparency effects seen on premium websites.
- Applying Reset CSS techniques to eliminate default browser styling inconsistencies, providing a consistent starting point across all viewing platforms.
- Developing Interactive Navigation menus that respond to user actions, improving the overall user experience and site accessibility.
- Integrating Asset Management skills by optimizing images and icons to ensure the website loads quickly without sacrificing visual clarity or quality.
- Benefits / Outcomes
- Walk away with a high-caliber portfolio piece that proves your ability to replicate industry-standard designs used by top-tier global corporations.
- Bridge the gap between theoretical coding knowledge and practical execution by finishing a complete, tangible project from start to finish.
- Cultivate a Developerβs Eye that allows you to look at any website on the internet and mentally map out the code required to build it.
- Increase your coding speed and efficiency by learning keyboard shortcuts and professional patterns that streamline the development lifecycle.
- Gain the confidence to apply for junior front-end developer roles or freelance gigs by showcasing your ability to handle complex layout challenges.
- Understand the nuances of Modern UI/UX Design by recreating a site that has been optimized for millions of daily users across the globe.
- Prepare yourself for more advanced frameworks like React or Vue by first mastering the fundamental building blocks of the modern web ecosystem.
- Enhance your problem-solving capabilities by identifying and fixing common CSS “gotchas” such as float clearing or margin collapsing issues.
- Establish a solid foundation for responsive design, learning how to think about fixed versus fluid layouts in a professional production environment.
- Receive a significant boost in professional credibility by demonstrating that you can meet the rigorous design standards of the British Broadcasting Corporation.
- PROS
- Focuses on a highly recognizable, real-world project rather than abstract, boring exercises that lack practical context.
- Provides a comprehensive look at the front-end stack without overwhelming the learner with unnecessary back-end complexities.
- The 5.2-hour duration is perfectly optimized for a weekend intensive study session or a deep dive over a few evenings.
- High student satisfaction and a 4.12/5 rating ensure that the instructional quality has been vetted by thousands of peers.
- CONS
- The course focuses strictly on front-end replication and does not cover the server-side logic or database integration required for a dynamic news site.
Learning Tracks: English,Development,Web Development
Found It Free? Share It Fast!