0


Frontend Web Development with HTML and CSS


Preview this course

Instructor Name

Gemechu Adeba

Category

Software Development

Reviews

0 (0 Rating)

Course Requirements

This course is beginner's friendly and does not have prerequisites, however, it will be good if you have the following:

  1. Basic computer literacy and familiarity with the internet and web browsing.
  2. A computer with a reliable internet connection and web browser.
  3. A text editor or integrated development environment (IDE) for writing HTML and CSS code.
  4. Willingness to learn and practice coding skills, including troubleshooting and problem-solving.
  5. Ability to work independently and collaborate with others in group projects or discussions.


Course Description

Are you interested in learning the fundamentals of web development? If so, our Frontend Web Development with HTML and CSS course in Amharic might be exactly what you need!
This course is perfect for beginners who want to learn how to create beautiful, responsive, and user-friendly websites. You'll learn the basics of HTML and CSS, as well as more advanced concepts to take your skills to the next level.
Our instructor Gemechu is an expert in web development and has created an engaging and easy-to-follow curriculum. By the end of the course, you'll have gained the skills and knowledge necessary to create stunning frontend designs.
So why wait? Signup now and start your journey into the world of web development!

In this course, you will learn the basics of HTML and CSS, as well as more advanced concepts to build beautiful, responsive, and user-friendly websites.

The course will cover the following topics:

  1. Introduction to HTML: Understanding the basic structure of an HTML document, creating HTML tags and attributes, and organizing content with HTML elements.
  2. HTML5: Learning about the new elements and features in HTML5, such as semantic markup, audio and video, and form controls.
  3. Introduction to CSS: Understanding how to use CSS to style HTML documents, including basic CSS syntax, selectors, and properties.
  4. CSS Layout: Creating responsive layouts with CSS, including working with grids, flexbox, and CSS frameworks.
  5. Advanced CSS: Learning advanced CSS techniques, such as animations, functions, variables, and transforms.


Course Outcomes

Upon completion of an HTML and CSS course, students should be able to:

  1. Understand the basics of HTML and CSS syntax, structure, and best practices for coding web pages.
  2. Use HTML tags and attributes to structure and organize content on a web page.
  3. Use CSS to style text, images, and other page elements, including font selection, color schemes, and layout design.
  4. Understand how to create responsive web designs that adapt to different devices and screen sizes.
  5. Troubleshoot common issues in HTML and CSS code.
  6. Continue learning and improving their web development skills by exploring more advanced HTML and CSS techniques and other related technologies.
  7. Create a website that demonstrates their understanding of HTML and CSS.

    Gain the skills and knowledge necessary to continue building and designing websites on their own.


Course Curriculum

1 Course Overview
Preview 7 Min

HTML (Hypertext Markup Language) and CSS (Cascading Style Sheets) are the foundation of every website. In this course, you will learn the basics of HTML and CSS, as well as more advanced concepts to build beautiful, responsive, and user-friendly websites.


2 Environmental Setup
Preview 10 Min

We are going to Download and install VS Code: Go to the official website of VS Code (https://code.visualstudio.com/) and download the installer for your operating system. Follow the instructions to install it on your computer.


1 HTML Overview
8 Min

HTML (Hypertext Markup Language) is a markup language used to create web pages. It provides a standardized way to structure content on the web, allowing web browsers to interpret and display that content consistently. HTML uses a system of tags and attributes to define different elements of a web page, such as headings, paragraphs, links, images, and forms. Tags are enclosed in angle brackets (< >) and mark an element's beginning and end. Attributes provide additional information about an element and are added to the opening tag. In this lesson, we are going to see an overview of HTML.


2 HTML Structure
18 Min

HTML documents have a specific structure that consists of the following elements: These are just some of the basic elements of an HTML document. There are many more elements available for use in HTML, each with its own specific purpose and syntax.


3 Typography
8 Min

Typography in HTML refers to the use of fonts, sizes, and styles to create visually appealing and readable textual content on a web page. Here in this lesson, we are going to discuss some common HTML tags used for typography.


4 HTML Semantic Section
Preview 7 Min

In HTML, a section is a logical grouping of related content within a web page. It is denoted by the <section> tag and can be used to help organize and structure the content of a web page. Here are some examples of how sections can be used: Grouping of content: Sections can be used to group together related content on a web page, such as a list of articles, a group of product features, or a set of testimonials. Navigation: Sections can be used to define the different sections of a web page and create a navigation menu that allows users to easily jump between them. Accessibility: Sections can be used to improve the accessibility of a web page by providing structure and context to the content, which can be helpful for users who rely on screen readers or other assistive technologies.


5 HTML Link
15 Min

In HTML, a link is a clickable element that directs the user to another web page or resource. It is denoted by the <a> tag, which stands for "anchor," and can be used to create both internal and external links.


6 Advanced Text Formatting
8 Min

Advanced text formatting in HTML is typically achieved through the use of CSS. Here we are going to discuss some examples of advanced text formatting that can be achieved using CSS


7 HTML Image
8 Min

In HTML, images can be added to a web page using the <img> tag. Here we are going to see how to add an image.


8 HTML Multimedia
10 Min

HTML supports various multimedia elements such as audio, video, and images. Here we are going to see how to add multimedia elements to an HTML page.


9 HTML Table
10 Min

HTML tables allow web developers to arrange data into rows and columns.


10 HTML Form Element
23 Min

The <form> HTML element represents a document section containing interactive controls for submitting information.


11 HTML5 Tags and HTML References
10 Min

Here in this lesson, we are going to discuss different new elements added in HTML 5. We are also going to discuss HTML reference documents.


12 Final Project for HTML
44 Min

Here, we are going to build a simple website only with HTML. This will help you use different concepts we have discussed in this course, to build a website.


13 Introduction to Git
12 Min

In this lesson, we are going to see basic commands in Git and we are going to push our code to GitHub repository.


1 Nintex workflow and Form Helpful hints.pptx


2 CSS Overview
12 Min

CSS is used to define styles for your web pages, including the design, layout, and variations in display for different devices and screen sizes. This lesson introduces you to CSS and How to include them in HTML.


3 CSS Selector Part I
9 Min

CSS selectors define the pattern to select elements to which a set of CSS rules are then applied. Here in this lesson, we are going to discuss different ways of selecting HTML elements to apply a style to them.


4 CSS Selector Part II
15 Min

CSS selectors define the pattern to select elements to which a set of CSS rules are then applied. Here in this lesson, we are going to discuss different ways of selecting HTML elements to apply a style to them.


5 CSS pseudo Class and Element
23 Min

A pseudo-class is a selector that selects elements that are in a specific state. and A CSS pseudo-element is used to style specified parts of an element. For example, it can be used to: Style the first letter, or line. In this lesson, we are going to explore different pseudo-elements and classes available in CSS.


6 CSS Inheritance, Cascading and specificity
27 Min

In CSS, some styles are inherited down the HTML document tree while others are not. If multiple CSS rules conflict with one another, the most important or specific selector is the one that will apply. This is called Specificity. In CSS, style sheets cascade by order of importance. If rules in different style sheets conflict and they have the same level of specificity, the rule from the most important style sheet wins. In this lesson, we are going to explain these concepts.


7 CSS Box Model
31 Min

The CSS box model is essentially a box that wraps around every HTML element. It consists of margins, borders, padding, and the actual content. Everything in CSS is Box. in this lesson we are going to discuss Box Model in CSS.


8 CSS Layout Part I - Position
15 Min

CSS helps you to position your HTML element. You can put any HTML element in whatever location you like. You can specify whether you want the element positioned relative to its natural position on the page or absolute based on its parent element.


9 CSS Layout Part II - Float
11 Min

The float property specifies whether an element should float to the left, right, or not at all. In this lesson, we are going to discuss the use case for float property.


10 CSS Layout part III-Flex
26 Min

The Flexible Box Layout Module makes it easier to design a flexible responsive layout structure without using float or positioning.


11 CSS Layout Part IV-Grid
35 Min

The CSS Grid Layout Module offers a grid-based layout system, with rows and columns, making it easier to design web pages without having to use floats and positioning.


12 CSS Layout Part V-Zindex
Preview 7 Min

The z-index property specifies the stack order of an element. An element with greater stack order is always in front of an element with a lower stack order.


13 CSS Color
19 Min

The color property in CSS is used to set the color of HTML elements. Typically, this property is used to set the background color or the font color of an element.


14 CSS Sizing Units
13 Min

There are two general kinds of units used for length and size in CSS: absolute and relative.


15 CSS Media Query
16 Min

Media query is a CSS technique introduced in CSS3. It uses the @media rule to include a block of CSS properties only if a certain condition is true.


16 CSS Mini Project
55 Min

We are going to build a simple website to apply what we have learned so far.


17 CSS Typography
23 Min

Typography is all about style, proportions, and spacing. Good typography is not only imperative for aesthetic appeal, but it also improves site usability when text legibility and readability concepts are applied.


18 CSS Background and Border
10 Min


19 CSS Functions
17 Min

Like any other programming language, CSS has functions. They can be inserted where you’d place a value, or in some cases, accompanying another value declaration. Some CSS functions even let you nest other functions within them!


20 CSS Animation
14 Min

CSS animations make it possible to animate transitions from one CSS style configuration to another.


21 CSS Methodologies
11 Min

When you work on large projects you have to follow the proper method to manage your CSS. In this lesson, we are going to discuss BEM and Utility based methodologies.


22 CSS Capstone project part I
1 Hour 13 Min

In this lesson, we are going to build a Facebook interface clone. This will teach you how to approach large CSS projects.


23 CSS Capstone project Part II
57 Min

In this lesson, we are going to build a Facebook interface clone. This will teach you how to approach large CSS projects.


Instructor

Gemechu Adeba

I am educator, programmer, who is into JavaScript based Web development.

0 Rating
0 Reviews
4 Students
1 Courses

I am an Educator, and freelance developer, based in Ethiopia. I have built different websites with React and Laravel as well as different Mobile apps with React Native. If you want to check some of my work, you can visit my GitHub here

Student Feedback

Frontend Web Development with HTML and CSS

0

Course Rating
0.00%
0.00%
0.00%
0.00%
0.00%

No Review found

Sign In or Sign Up as student to post a review

Reviews

Shopping Cart

Loading...