HTML & CSS 2022: Hands-on No-nonsense Guide

Focused View

Dr. Artur Karczmarczyk

11:59:27

135 View

1. Introduction

1. Course Promo Video.mp4

04:30

2. Pre-Tests and Post-Tests.html

3.1 resources.zip

3.2 vendor.zip

3. Downloading Source Code.html

2. HTML - Images, Links, Lists, Tables, Forms

1. HTML Section Introduction.mp4

00:59

2.1 010-html-files.zip

2.2 Post-Test.html

2.3 Pre-Test.html

2. HTML files. Creating and displaying. Basic syntax..mp4

13:19

3.1 020-basic-text-tags.zip

3.2 Post-Test.html

3.3 Pre-Test.html

3. Text formatting in HTML. Basic tags and text styles..mp4

19:55

4.1 030-images-inserting.zip

4.2 Post-Test.html

4.3 Pre-Test.html

4. Inserting and basic positioning..mp4

17:07

5.1 040-images-acquiring.zip

5.2 Post-Test.html

5.3 Pre-Test.html

5. Acquring and copyright..mp4

14:23

6.1 050-images-formats.zip

6.2 Post-Test.html

6.3 Pre-Test.html

6. File formats and optimization..mp4

22:25

7.1 060-images-positioning.zip

7.2 Post-Test.html

7.3 Pre-Test.html

7. Positioning and transforms..mp4

27:06

8.1 070-hyperlinks.zip

8.2 Post-Test.html

8.3 Pre-Test.html

8. Links.mp4

11:33

9.1 080-lists.zip

9.2 Post-Test.html

9.3 Pre-Test.html

9. Lists.mp4

08:54

10.1 090-tables.zip

10.2 Post-Test.html

10.3 Pre-Test.html

10. Tables.mp4

14:59

11.1 100-forms.zip

11.2 Post-Test.html

11.3 Pre-Test.html

11. Forms.mp4

35:04

12. HTML Section Summary.mp4

00:34

3. CSS and Responsive Web Design (RWD)

1. CSS Section Introduction.mp4

00:53

2.1 110-css-basics.zip

2.2 Post-Test.html

2.3 Pre-Test.html

2. Basics of CSS.mp4

32:32

3.1 120-css-pseudo-media.zip

3.2 Post-Test.html

3.3 Pre-Test.html

3. CSS for Responsive Design.mp4

27:21

4.1 130-layout-div.zip

4.2 Post-Test.html

4.3 Pre-Test.html

4. HTML layout using divs and semantic tags.mp4

11:48

5.1 140-layout-flex.zip

5.2 Post-Test.html

5.3 Pre-Test.html

5. HTML layout using Flexbox.mp4

22:08

6.1 150-layout-grid.zip

6.2 Post-Test.html

6.3 Pre-Test.html

6. HTML layout using Grid.mp4

30:09

7.1 160-media.zip

7.2 Post-Test.html

7.3 Pre-Test.html

7. HTML media. Video and audio.mp4

12:19

8.1 170-transitions.zip

8.2 Post-Test.html

8.3 Pre-Test.html

8. CSS transitions. Animations in HTML.mp4

15:21

9.1 180-web-fonts.zip

9.2 Post-Test.html

9.3 Pre-Test.html

9. CSS web fonts.mp4

12:49

10.1 Post-Test.html

10.2 Pre-Test.html

10. Can I use HTML and CSS features support level.mp4

12:58

11.1 Post-Test.html

11.2 Pre-Test.html

11. HTML and CSS resources.mp4

04:03

12.1 210-less-install.zip

12.2 Post-Test.html

12.3 Pre-Test.html

12. Less Installation.mp4

23:26

13.1 220-less-features.zip

13.2 Post-Test.html

13.3 Pre-Test.html

13. Less Features.mp4

31:51

14.1 230-less-watchers.zip

14.2 Post-Test.html

14.3 Pre-Test.html

14. Less Watchers - Continuous CSS Compilation.mp4

13:12

15.1 Post-Test.html

15.2 Pre-Test.html

15. Less Resources.mp4

03:25

16. CSS Section Summary.mp4

00:36

4. CV Zen Garden Capstone Project Initialization

1. Project Initialization Section Introduction.mp4

00:45

2. Capstone Project Introduction.mp4

06:28

3. Inspiration and reference.mp4

13:10

4. Concept of the Layout.mp4

11:09

5.1 c3-structure.zip

5. Project Initialization.mp4

08:59

6.1 c4-semantic.zip

6. Semantic HTML.mp4

25:58

7. Project Initialization Section Summary.mp4

00:24

5. Modern Layout - CV Zen Garden Capstone Project

1. Modern Layout Section Introduction.mp4

00:34

2.1 a1-grid-colors-typography.zip

2. Grid. Colors. Typography - Modern Layout.mp4

22:58

3.1 a2-header.zip

3. Header - Modern Layout.mp4

20:36

4.1 a3-about-me.zip

4. About Me Section - Modern Layout.mp4

10:42

5.1 a4-education.zip

5. Education Section - Modern Layout.mp4

06:42

6.1 a5-work.zip

6. Work Experience Section - Modern Layout.mp4

08:54

7.1 a6-languages.zip

7. Languages Section - Modern Layout.mp4

05:47

8.1 a7-skills.zip

8. Skills Section - Modern Layout.mp4

08:34

9.1 a8-hobbies.zip

9. Hobbies Section - Modern Layout.mp4

04:29

10.1 a9-contact-address.zip

10. Contact and Address Sections - Modern Layout.mp4

09:25

11.1 a10-rwd.zip

11. RWD Mobile Version - Modern Layout.mp4

17:19

6. Newspaper Layout - CV Zen Garden Capstone Project

1. Newspaper Layout Section Introduction.mp4

00:34

2.1 b1-grid-colors-typography.zip

2. Grid. Colors. Typography - Newspaper Layout.mp4

18:17

3.1 b2-job-and-address.zip

3. Job and Address Sections - Newspaper Layout.mp4

10:55

4.1 b3-aboutme.zip

4. About Me Section - Newspaper Layout.mp4

06:46

5.1 b4-photo.zip

5. Photo Section - Newspaper Layout.mp4

05:50

6.1 b5-education.zip

6. Education Section - Newspaper Layout.mp4

03:39

7.1 b6-work.zip

7. Work Experience Section - Newspaper Layout.mp4

10:00

8.1 b7-languages.zip

8. Languages Section - Newspaper Layout.mp4

04:13

9.1 b8-skills.zip

9. Skills Section - Newspaper Layout.mp4

07:58

10.1 b9-hobbies.zip

10. Hobbies Section - Newspaper Layout.mp4

11:53

11.1 b10-rwd.zip

11. RWD Mobile Version - Newspaper Layout.mp4

09:41

7. Summary

1. Capstone Project Summary.mp4

00:36

2. Course Summary.mp4

00:33

Description

Build online CV in two completely different templates. Includes modern Responsive Web Design (RWD) with Flexbox and Grid

What You'll Learn?

Create basic and advanced HTML pages with images, lists, tables, forms, audios and videos
Create responsive web design (RWD) layouts using divs, semantic tags as well as modern flexbox and grid mechanisms
Style the HTML pages with the use of CSS stylesheets and modern CSS features such as transforms, transitions, flexbox, grid layouts
Know how to balance between cutting-edge technologies and supported devices maximization
Create a complete capstone project - an online CV page in two completely different layouts.

Who is this for?

Beginner Web developers with technical mindset.

What You Need to Know?

No programming experience needed. You will learn everything you need to know.

Some technical background might be helpful.

Join me if you like to learn in an agile, hands-on, no-nonsense manner.

More details

Description
This course is now fully-subtitled with English human-made subtitles. Other language subtitles are coming soon!
Hello and welcome to HTML & CSS for Engineers Udemy Course. This beginnerâ€™s course will guide you through the process of learning and practicing modern websitesâ€™ creation with HTML5 and CSS3.
My name is Dr. Artur Karczmarczyk and I am a Full-Stack Web Developer and Software Engineer with 16 years of commercial experience. I am also an Associate Professor at a well-known Technical University in Poland and have taught IT and web development skills to hundreds of students.
By the time you finish this course, youâ€™ll be able to create basic and advanced HTML pages with images, lists, tables, HTML5 forms, audios and videos. You will know how to create responsive layouts using divs, semantic tags as well as modern Flexbox and Grid mechanisms. You will be able to style HTML pages with the use of cutting-edge CSS and LESS features.
In the next 12 hours I will take you through all the important steps in creating HTML5 web pages. We will start by creating your first Hello World web page in a free code editor that I will show you how to install and configure. Then I will guide you through some basic text formatting. You will learn about acquiring, inserting and positioning images on your pages. I will show you how to legally acquire images and photos for your commercial projects. Then, we will dive into the common HTML structures â€“ links, lists, tables and forms, including modern HTML5 inputs and validation methods. After that, in Section 3, we will introduce CSS and use it to create responsive web design (RWD). We will use divs, semantic tags, Flexbox and Grid, always to create a layout that works great on both mobile and desktop devices. We will also introduce LESS, so you can create CSS stylesheets easier and more efficient. In the final three sections I will guide you through a capstone project. Inspired by CSS Zen Garden website, we will create an online CV page using semantic HTML and then use CSS to create two completely different themes for it.
This course is for you if you have some technical skills but are completely new to web development. If you want to know modern up-to-date HTML5, CSS3 and LESS technologies, use this course to learn them in an agile, hands-on, no-nonsense manner.
So, feel free to take a look through the free previews and then join me as we create your first HTML5 web pages and solve tens of HTML and CSS challenges together!
Who this course is for:
Beginner Web developers with technical mindset.

User Reviews

Rating

average 0

Total votes0

Focused display

Hi! My name is Artur. I am a Doctor of Engineering in Computer Science. I have been commercially creating web systems and applications since 2008. First working at various levels of a corporate software house, and then managing my own company IdeaSpot, I have learnt in depth how to be a Full-Stack Web Developer and Software Engineer.In 2017, my extensive commercial experience allowed me to become an Assistant Professor, and currently Associate Professor at a well-known technical university in Poland. I teach here some very popular courses on web development, project management, design patterns.I love programming and I love teaching people how simple programming is. Therefore, I have decided to start creating online MOOC courses, so that more people can join me in finding joy in web and software development.

Udemy

View courses Udemy

Students take courses primarily to improve job-related skills.Some courses generate credit toward technical certification. Udemy has made a special effort to attract corporate trainers seeking to create coursework for employees of their company.