Introduction

This course is structured into three distinct parts, each featuring a unique small project to be completed within a week. Throughout these projects, we'll cover a wide range of essential skills and some intermediate techniques vital for everyday web page development.

For example, in our first project, we will work together to implement a page from mockup by designer Roman Zakhareko. It's a web design about game news and was published on Dirbbble. It was chosen because it contains many essential elements, such as the navigation bar, the hero banner, a list with images and text, etc. Understanding how these elements are implemented in HTML and CSS will help us to implement any other more complex pages in the future.

In addition, this mockup is relatively simple in general and contains a limited amount of elements. This allows us to intersperse the implementation of the page with an introduction to some useful tools. Such as how to select colours from the mockup, how to use icons in HTML, how to edit code in real-time. The use and configuration of these tools is also crucial to implementing our other two designs in the following two weeks.

Here is what we will also cover in this course:

• HTML & CSS 101: Gain fundamental knowledge in building simple static pages. Understand the basics of HTML for structuring web content and CSS for styling, setting a solid foundation for more advanced topics.

• Flex Layout in CSS: Dive into the flexible box layout, a powerful tool in CSS for designing complex layouts more easily and with less code. Understand how to control the arrangement of elements dynamically and create responsive designs.

• Grid Layout in CSS: Explore CSS Grid Layout, a two-dimensional layout system for the web. Learn how to create more sophisticated and precise layouts, enhancing your ability to design complex web pages.

• Box Shadowing: Master the technique of adding shadow effects to elements using CSS. This skill enhances the visual depth and emphasis of your web components, improving the overall aesthetics of your designs.

• Semantic HTML: Understand the importance of Semantic HTML for accessibility and SEO. Learn how to use HTML5 semantic elements to create meaningful, well-structured web content.

• Mobile First Approach: Embrace the mobile-first design philosophy. Learn to design websites for mobile devices initially and then scale up to larger screens, ensuring a seamless user experience across all devices.

• Responsive Design: Gain expertise in creating web pages that adapt to different screen sizes and orientations. Learn responsive design techniques, including media queries and flexible grid layouts, to ensure your websites look great on any device.

• CSS Variables: Discover the power of CSS Variables (Custom Properties) for maintaining and managing styles. Learn how to create reusable, dynamic styles that make your CSS more efficient and easier to manage.