
Starting from zero, learn HTML5 semantics and markup as you build a simple project template with navigation, sections, tables, images, and forms for improved SEO.
Adopt a growth mindset to master new tech and debug real development problems. Stay patient, recognize HTML is a markup language, and build independent problem-solving skills through practice and breaks.
Explore meta tags such as charset utf eight and viewport with device width and initial scale, showing how HTML and CSS comments and style blocks enable responsive design.
Explore the link tag to reference external css and google fonts, using relative hrefs to styles.css, applying the latto font with 400 and 700 weights.
Learn how the div element serves as a container to group content, style with CSS, and manipulate with JavaScript. Explore class and id attributes, dot selectors, 100 viewport height.
Explore HTML heading elements from h1 to h6, including default font sizes and browser differences, to establish document structure and improve accessibility and indexing.
Use the main element as the accessibility landmark to help assistive technologies navigate large sections, ensuring it remains unique and not nested in header, nav, article, aside, or footer.
Learn how to use the article element to create self-contained content. Identify blockquote, abbreviation, site attributes, and CSS styling to build multi-article layouts.
A quick reminder (tip): If you will be building actual sites for future clients, as much as possible don't use stock photos or free photos. It's better if you communicate with the client that having personalized photos is the best path to take to make their site look more professional.
Apply css to style a header with a background image from a relative path in the images folder. Understand relative versus absolute paths for reliable web deployment.
Apply CSS to style a blog post section, including image background, right-floating aside, linked styles, and block code layouts, while teaching box model concepts like padding and margins.
Learn how to structure data with HTML tables using thead, tbody, tfoot, tr, th, td, and table rows and cells, and apply basic styling to present tabular data clearly.
This crash course will be fit for total beginners in HTML5. We will be working on introducing the students to some of the elements that makes up a basic web document. The course hopes to guide students to learn how to build a very simple static site that they can add to their portfolio as a future web developer.
No prior programming experience is needed to take this course. I will guide you through the basics and demonstrate how you can start to create a basic static site with common features you would see from sites that aims to provide basic information. We will be working together in the development process step-by-step starting with the importance of creating your web document with semantic meaning in mind.
This course will cover the following:
1. Understanding what semantic elements means.
2. Build a very basic HTML static site with the following content:
· Header section
· About section
· Blog section
· Table section
· Form section
· Footer section
3. Basic CSS (This course is not focus on learning Cascading Style Sheet, however, we will tackle basic CSS so that we can apply a bit of aesthetics in our final project.)
4. You will also be able to practice skills in observation and debugging skills.