Seu primeiro código HTML - @Curso em Vídeo HTML5 e CSS3
Creating Your First Project in HTML5 and CSS3
Introduction to the Course
- The instructor welcomes viewers to a new lesson on HTML5 and CSS3, emphasizing the importance of hands-on practice in learning web development.
- Viewers are encouraged to actively engage with the material by practicing alongside watching the videos, rather than passively observing.
Free Resources from Hostnet
- The instructor introduces Hostnet as a sponsor providing free resources, including playlists for digital marketing basics, WordPress site building, and online store creation.
- These courses are accessible without needing a subscription, making them available for anyone interested in learning.
Setting Up Your Project Environment
- The first step is creating organized folders for exercises: one for HTML and another for JavaScript. Organization is highlighted as crucial for good programming practices.
- A practical tip is shared about using keyboard shortcuts to open file explorer quickly, enhancing productivity during setup.
Creating Folders and Files
- Inside the "Documents" directory, a folder named "Estudos" (Studies) will be created to house all project files.
- Within this folder, subfolders will be established specifically for HTML/CSS projects and later JavaScript exercises.
Initializing Your First Exercise
- An initial exercise folder named "Exercício 001" (Exercise 001) is created within the HTML/CSS directory to contain project files.
- Instructions are provided on how to open this folder directly in Visual Studio Code using right-click options enabled during installation.
Creating Your First HTML Document
- A new file named "index.html" should be created within the exercise folder; it must be all lowercase without spaces.
- Upon creating this file, Visual Studio Code offers syntax highlighting features that enhance code readability.
Generating Basic HTML Structure
- To create a basic structure of an HTML document quickly, typing an exclamation mark followed by pressing enter generates boilerplate code automatically.
HTML Document Structure Overview
Introduction to HTML
- The speaker emphasizes the importance of reviewing the provided PDF material, stating it is very useful for understanding HTML.
- The first line of an HTML document indicates that it is an HTML5 document, which is the current version being used in this course.
Understanding Tags
- Tags are introduced as essential components of HTML; they typically have opening and closing formats (e.g.,
<tag>and</tag>).
- The
langattribute within the<html>tag specifies the language of the website, with a recommendation to use "pt-BR" for Brazilian Portuguese.
Document Structure
- An HTML document consists of two main sections: the head (
<head>) for configurations and the body (<body>) for content.
- UTF-8 encoding is highlighted as crucial for supporting special characters, preventing issues with accents in languages like Portuguese.
Setting Up Viewport and Title
- The viewport meta tag ensures that the website occupies 100% of the available screen space on devices.
- A title for the webpage can be set within the
<title>tag; in this case, it's suggested to name it "Meu Primeiro Exercício".
Creating Content with Tags
- The speaker demonstrates how to create headings using
<h1>tags, explaining that H1 signifies a level 1 heading rather than just large text.
- To create paragraphs, one uses
<p>tags. The example given includes a simple message about creating their first HTML document.
Viewing Your Work
Saving and Opening Files
- After coding, files are automatically saved. Users can navigate through folders to find their index file created during exercises.
Testing in Browser
- Instructions are provided on how to open files in Google Chrome by right-clicking and selecting "Open with".
Observing Output
- Upon opening in Chrome, users can see their site’s header area (from
<head>) and body area (from<body>), confirming successful rendering.
Clarifying Headings vs. Text Size
How to Organize Your Coding Environment
Setting Up the Workspace
- The speaker demonstrates how to adjust the browser window by dragging it to create a larger workspace, emphasizing the importance of having both the browser and code editor visible.
- Instructions are given on how to "stick" the browser window in place, allowing for easier navigation between coding and web browsing.
- Tips are provided on resizing windows to maximize coding space, suggesting that users experiment with their own setups for optimal organization.
Creating and Managing HTML Elements
- The speaker discusses creating new paragraphs in HTML, highlighting the need to click specific buttons or use keyboard shortcuts for visibility.
- A demonstration is made on inserting horizontal lines using
<hr>tags in HTML, explaining that some elements do not require closing tags.
Understanding HTML Tags
- The concept of HTML being based on "tags" is introduced, with an emphasis on understanding what constitutes a tag within documents.
- The acronym HTML stands for Hypertext Markup Language, which signifies its function as a markup language used for structuring content.
Community Engagement and Study Tips
- The speaker encourages viewers to follow them on social media platforms like Instagram to foster community growth and support content creators.
- Emphasis is placed on organizing study materials effectively; keeping files structured will aid future learning endeavors.
Final Thoughts and Encouragement
- Viewers are reminded of the importance of taking notes during lessons and utilizing tools like Visual Studio Code (VS Code) while programming.
- A motivational message is shared about engaging with course materials actively rather than passively watching videos.