O ERRO DE CSS QUE FAZ SEU PROJETO PARECER AMADOR

Making Our Website Responsive

Introduction to Responsiveness

• The video focuses on making a previously coded project responsive for both computers and mobile devices.

• Rodolfo Mor welcomes viewers and introduces the topic of responsiveness in web design.

• Viewers are encouraged to subscribe for more programming content, including live sessions every Monday.

Project Overview

• The project involves a café website that has received high viewer engagement, prompting requests for a mobile version.

• The session aims to teach viewers about responsiveness, its importance, and how to adapt projects for mobile devices.

Understanding Responsiveness

• Responsiveness is defined as adapting web systems for various devices like phones, tablets, and computers due to the increasing use of mobile browsing.

• Different CSS units (pixels, percentages, rem, em) are discussed; pixels are fixed while percentages and relative units allow fluidity across screen sizes.

Tools for Responsiveness

• Utilizing CSS Flexbox and Grid can enhance responsiveness; these tools simplify layout adjustments across different screen sizes.

• Media queries act like conditional statements in CSS (similar to if/else), applying specific styles based on screen size thresholds.

Implementing Media Queries

Practical Application of Media Queries

• The tutorial will demonstrate creating a hamburger menu using media queries to ensure proper adaptation on smaller screens.

Coding Session Begins

• Rodolfo starts coding by focusing on the end of the CSS file where media queries should be placed last in order of precedence.

Creating Responsive Styles

First Media Query Example

• A media query is created with a max-width condition set at 700 pixels; styles within this query will only apply when the viewport is below this width.

Visual Demonstration

• As the viewport size decreases below 700 pixels, changes such as background color alterations are demonstrated live.

Designing Mobile Menu

Hamburger Menu Creation

• A hamburger menu will be implemented that appears only on smaller screens using additional media queries.

Adjusting Header Elements

• Existing header elements will be hidden on small screens while new menu functionality is introduced through JavaScript interactions.

JavaScript Integration

Connecting HTML with JavaScript

• A new JavaScript file (scripts.js) is created and linked at the bottom of the HTML document to manage dynamic interactions like opening/closing menus.

Event Listener Setup

• An event listener is added to monitor clicks on the hamburger button which toggles visibility of navigation links within the navbar.

Finalizing Functionality

Active Class Management

A class named "active" is introduced that controls display properties; it allows showing or hiding elements based on user interaction with links in the navbar.

Closing Menu Upon Link Click

• When any link in the navbar is clicked, an event listener removes the active class from navbar items ensuring they close after selection.

Enhancing Layout Design

Improving Iframe Responsiveness

• Instead of fixed dimensions for an iframe element used in displaying Google content, it’s adjusted to occupy 100% width allowing better adaptability across varying screen sizes.

Conclusion & Next Steps

• Before concluding, Rodolfo plans a recap covering viewport concepts and deploying their site online as final steps towards completing their responsive design project.

How to Launch Your Website with Hostinger

Importance of Showcasing Your Portfolio

• Emphasizes the necessity of making your website visible to recruiters by showcasing it on platforms like LinkedIn.

• Highlights Hostinger as a reliable partner for launching websites quickly and affordably, with plans starting at R$ 11.99.

Getting Started with Hostinger

• Provides a link to access all Hostinger services, specifically focusing on website hosting options.

• Describes the process of adding a new site through the Hostinger dashboard, including selecting a domain name.

Uploading Your Website Files

• Walkthrough of setting up a custom site and preparing files for upload using the file manager in Hostinger.

• Details the steps for uploading files and images to make the website operational.

Verifying Site Launch

• Confirms that the website is live after completing uploads, demonstrating ease of use with Hostinger's platform.

Understanding Viewport and Responsiveness

What is Viewport?

• Introduces viewport concept as crucial for responsive web design, allowing sites to adapt to various screen sizes.

Meta Tag Significance

• Explains how the meta tag <meta name="viewport" content="width=device-width, initial-scale=1.0"> instructs browsers to consider device width when rendering pages.

Impact of Missing Viewport Tag

• Demonstrates that without this tag, media queries may not function correctly, leading to poor display across devices.

Final Thoughts on Responsiveness

• Reiterates importance of viewport settings in ensuring websites are visually appealing and functional on all devices. Encourages viewer engagement through comments and feedback.