A tanfolyamról
HyperText Markup Language (HTML) is a language that was originally designed to create interlinked documents that could be viewed using a web browser. HTML enables developers to define and incorporate the overall layout, hierarchy and elements such as text, images, tables, forms, video and sound among other things. HTML5, the most recent and current version of the language standard ups the ante by providing incredible and dynamic capabilities that can be utilized using JavaScript. These new abilities enable developers to build sophisticated web applications with JavaScript being used for implementing logic and behaviour. While HTML defines elements and layout, Cascading Stylesheets or CSS is like the paint, enabling developers to declare position, colours, typography, animation and several other visual properties of the elements in HTML. Together, HTML5 and CSS3 enable developers and designers to build beautiful looking websites and are the foundation for the world wide web.
At the core of creating applications for the web is a thorough knowledge of HTML and CSS. In this course, you’ll learn to display content on the web with HTML, leveraging aspects of front-end web development. Next, you’ll discover how to use Cascading Style Sheets and explore styling the web. Finally, you’ll discover how to make the web interactive and responsive.
When you’re finished with this course, you’ll have a foundational knowledge of HTML and CSS that will help you take your web development skills to the next level.
Who should attend this course?
- Web designers
- Front-end developers
- Web application developers
- Anyone looking to create an online presence
- Novices who meet prerequisites
What you will learn in the HTML and CSS training program
-
Forms
Understand various forms input elements and put together forms to capture information from the user. -
Forms and Input attributes
Validate form inputs using HTML form and input attributes. - Semantic tagsUnderstand how to organize HTML content meaningfully using semantic tags (an HTML5 feature).
-
Styles in CSS
Understand how styles in CSS are applied in a cascaded fashion and browser renders a page. -
Layout techniques
Layout various elements on a web page using powerful layout techniques like positioning and floats. -
Flex box and grid
Layout elements using cutting-edge CSS techniques like flex box and grid to create complex layouts. -
Responsive web design
Apply responsive web design (RWD) concepts to design pages that look good on all types of devices – mobile, tablet, desktop. -
Creating user interfaces
Apply transforms, transitions, and animation to create slick user interfaces. -
Build your Website
Implement your learnings in a comprehensive and realistic website project at the end.
Skill you will gain
- Create beautiful web pages
- Create meaningful mark-up for web pages
- Create forms with cutting edge features in HTML5
- Incorporate rich media elements - images, audio, video
- Apply CSS to set typography, colours, dimensions
- Master layout techniques including modern CSS3
- Design complex layouts, applying the most apt layout technique
- Apply advanced CSS features to create a compelling experience
- Style pages with pixel-perfect precision
- Organize CSS for large applications
We provide the course in English.
Tematika
Curriculum
1. Introduction to Web Development
Learning Objectives
Discover HTML and its purpose, and understand how CSS works with HTML to produce beautiful web pages. Learn about setting up a development environment including the use of a code editor like Microsoft VS Code and the use of utilities that promote efficiency by providing shortcuts and snippets to quickly produce code blocks and layouts. You then get to create your very first web page.
Topics
- What is HTML
- What is CSS
- Setting up the environment
- Hello World!
- Using VS Code with Live reload
- Using Emmet and online tools
- Using Chrome developer tools
2. Introduction to HTML
Learning Objectives
Learn about tags - the building blocks of HTML as you deep dive into different types of tags that help you craft the structure and content of a web page along with its attributes and their syntax before learning to work with images, hyperlinks, lists, and tables in HTML. Thereafter, take your first steps at writing CSS using the style attribute as you to proceed to work with colors. Finally, learn all about HTML5 semantic tags as well as audio and video tags as you build up a strong foundation for the more advanced features to follow.
Topics
- HTML elements and Tags
- Singular and Paired tags
- Structure of an HTML page
- Heading and Paragraph Tags
- Attributes in HTML
- Images
- Links - Internal and External
- Lists
- Tables
- The style attribute
- Colors in HTML
- HTML5 semantic tags
- HTML5 audio and video tags
Hands-on
- Basic HTML Tags and Attributes
- Image Tag and Attributes
- Links- Internal and External
- Lists - Ordered and unordered
- Tables in HTML
- The style attribute
- Colors in HTML
- HTML5 Semantic Elements
- HTML Audio and Video elements
3. Forms and Inputs
Learning Objectives
Learn to use forms to capture user data as you work with the form tag and various input elements. Then implement your learning to create a contact form.
Topics
- The Form tag
- Using the label tag
- HTML Input tag
- Select and TextArea
- Buttons
- Datalist
- Building a contact form
Hands-on
- Simple Form Element
- Labels and Inputs
- Basic HTML Tags and Attributes
- Selects and Options
- Email, Password Inputs, and buttons
- Datalists in HTML
4. Introduction to CSS
Learning Objectives
Discover Cascading Style Sheets (CSS) and its role in visually styling HTML documents. Learn about the use of CSS selectors to target HTML elements, creating external stylesheets for use across multiple pages, and the lowdown on overriding styles. You’ll work with CSS properties and rulesets including units for position and size, the ever-important box model, and its features and pseudo-classes.
Topics
- Using the style tag
- Targeting HTML elements
- Targeting nested HTML elements
- Using external stylesheets
- Overriding CSS Styles
- Common CSS Properties
- CSS units
- The CSS Box Model
- More CSS Properties
- CSS Pseudo-classes
Hands-on
- Using the Style element
- Targeting HTML elements in CSS
- Targeting nested HTML elements
- Using external stylesheet
- Styling using external stylesheets
- Common CSS properties
- More CSS Properties for CSS Box
- CSS Pseudo-classes
5. Advanced CSS
Learning Objectives
Step up with CSS as you learn about positioning elements followed by advanced features such as using pseudo-elements, variables, custom web fonts, and importing and composing stylesheets.
Topics
- CSS Positioning- Static, Relative and Absolute
- CSS Positioning - Fixed and Sticky
- CSS Pseudo-elements ::before and ::after
- CSS Variables
- Custom fonts in CSS
- Importing external stylesheets
Hands-on
- CSS Positioning
- CSS Positioning 2
- CSS Pseudo-elements
- CSS Variables
- Custom fonts in CSS
- Using the @import Keyword
6. Transitions and Animations
Learning Objectives
Learn all about CSS transitions and animation as you bring movement and life to your web pages. You’ll learn to work the transition property as well as create keyframe animation using CSS.
Topics
- What are CSS Transitions
- Basic Transitions and CSS properties
- CSS Animations and CSS properties
- Defining in Keyframes
Hands-on
- CSS transitions Properties
- CSS Animations
7. Responsive Web Design
Learning Objectives
Responsive web design allows you to design websites that visually adapt to a multitude of device screen sizes and layouts such as desktop, mobile phones, and tablets. Learn to implement media queries that target various screen sizes and work with CSS Flexbox to create adaptive layouts with ease. You will also learn about CSS Grid layout and its features before building a responsive image gallery.
Topics
- Media queries
- What is CSS Flexbox?
- Creating rows and columns
- More flexbox properties
- What is CSS Grid Layout?
- Rows and Columns in Grid
- Allocating cells
- Grid template areas
- Building a responsive image gallery
Hands-on
- Media Queries
- CSS Flexbox Properties
- More CSS Flexbox properties
- CSS Grid
- CSS Grid properties
- Grid areas in CSS Grid
Kinek ajánljuk
Előfeltételek
Prerequisites
There are no prerequisites to attend this introductory HTML and CSS course.