Web Design : Coding in HTML and CSS

Course overview -Create any website layout you can imagine -Support any device size with a Responsive (mobile-friendly) Design -Add tasteful animations and effects with CSS -Use common vocabulary from the design industry

Beginner 5(4 Ratings) 106 Students enrolled English
Created by Marcus Israeli
Last updated Wed, 07-Jun-2023
+ View more
Course overview

You can launch a new career in web development today by learning HTML & CSS. You don't need a computer science degree or expensive software. All you need is a computer, a bit of time, a lot of determination, and a teacher you trust.

Don't limit yourself by creating websites with some cheesy “site-builder" tool. This course teaches you how to take 100% control over your webpages by using the same concepts that every professional website is created with.

This course does not assume any prior experience. We start at square one and learn together bit by bit. By the end of the course you will have created (by hand) a website that looks great on phones, tablets, laptops, and desktops alike.

In the summer of 2020 the course has received a new section where we push our website live up onto the web using the free GitHub Pages service; this means you'll be able to share a link to what you've created with your friends, family, colleagues and the world!

Who is this course for?

  • Anyone who wants to build websites the "professional" way
  • Anyone who has practiced web design as a hobby but is not confident about their skillset in a professional arena
  • Experienced developers looking to renew their HTML5 & CSS knowledge

Requirements

-No prerequisite knowledge required

-Internet access and willingness to learn

Curriculum for this course
88 Lessons 11:20:03 Hours
Modern HTML
30 Lessons 03:18:15 Hours
  • 1.2 HTML setup get coding
    00:06:07
  • 1.3 Writing code
    00:07:09
  • 1.4 HTML setup get coding
    00:06:07
  • 1.5 Create a HTML template
    00:06:15
  • 1.6 What is an element
    00:05:46
  • 1.7 Heading and bolded text
    00:07:01
  • 1.8 Apply HTML tags exercise 1
    00:05:28
  • 1.9 Text formats HTML
    00:10:02
  • 1.10 HTML comments
    00:02:35
  • 1.11 HTML hyperlinks anchor
    00:09:51
  • 1.12 Apply HTML tags exercise 2
    00:07:12
  • 1.13 Mailto send emails
    00:02:58
  • 1.14 Image tags in HTML
    00:06:36
  • 1.15 Social profile linking exercise 3
    00:04:27
  • 1.16 HTML lists ul ol dl
    00:06:44
  • 1.17 HTML tables
    00:08:55
  • 1.18 Back in time challenge
    00:11:10
  • 1.19 HTML block and inline elements
    00:03:48
  • 1.20 HTML5 sematic elements
    00:06:39
  • 1.21 Get on gitpages
    00:03:50
  • 1.22 Challenge 6 live resume
    00:07:34
  • 1.23 HTML forms
    00:08:46
  • 1.24 HTML forms 2
    00:08:33
  • 1.25 Form field options
    00:16:02
  • 1.26 Fieldset and forms
    00:01:23
  • 1.27 Iframes HTML
    00:06:47
  • 1.28 Audio and video tags
    00:04:17
  • 1.29 HTML meta tags
    00:05:44
  • 1.30 Common tags with source files
    00:05:03
  • 1.31 Debugging HTML
    00:05:26
Formative Assessments - HTML
1 Lessons 00:45:00 Hours
  • Quiz
    0:45:00
Modern CSS
55 Lessons 05:51:48 Hours
  • 2.1 Introduction to CSS
    00:02:03
  • 2.2 What is CSS
    00:04:02
  • 2.3 CSS syntax
    00:03:48
  • 2.4 Writing CSS
    00:11:54
  • 2.5 Comments CSS
    00:02:21
  • 2.6 CSS selectors
    00:04:56
  • 2.7 CSS color units
    00:12:11
  • 2.8 CSS color background challenge
    00:04:54
  • 2.9 CSS background images
    00:12:13
  • 2.10 Background size
    00:05:11
  • 2.11 Height and width
    00:07:12
  • 2.12 Chrome devtools
    00:05:20
  • 2.13 CSS units
    00:03:41
  • 2.14 CSS borders
    00:11:33
  • 2.15 Margin and padding CSS
    00:09:02
  • 2.16 CSS padding
    00:08:45
  • 2.17 Box model
    00:03:59
  • 2.18 CSS outline
    00:03:08
  • 2.19 Pseudo classes CSS
    00:08:00
  • 2.20 Pseudo elements CSS
    00:07:13
  • 2.21 Fun fonts CSS
    00:05:01
  • 2.22 Google fonts CSS
    00:04:06
  • 2.23 Font awesome CSS
    00:02:52
  • 2.24 Text an more font CSS
    00:07:48
  • 2.25 CSS display property
    00:09:45
  • 2.26 Navbar maker exercise
    00:05:49
  • 2.27 CSS position
    00:09:16
  • 2.28 Z index CSS
    00:01:41
  • 2.29 Overflow of elements content
    00:03:30
  • 2.30 Project website sidebar nav
    00:11:30
  • 2.31 Float elements CSS
    00:05:13
  • 2.32 Use floats for web template
    00:09:02
  • 2.33 Image gallery with floats
    00:08:29
  • 2.34 Mouse cursor changes
    00:01:58
  • 2.35 Advanced selectors
    00:08:34
  • 2.36 Media CSS
    00:05:33
  • 2.37 CSS selectors specificity
    00:06:05
  • 2.38 Advanced CSS introduction lesson
    00:01:08
  • 2.39 Linear gradients
    00:07:04
  • 2.40 CSS radial gradients
    00:07:05
  • 2.41 CSS 2d transforms
    00:09:09
  • 2.42 CSS 3d transforms
    00:04:39
  • 2.43 CSS animations
    00:06:03
  • 2.44 CSS layouts introduction lesson
    00:01:54
  • 2.45 Flexbox layout
    00:03:52
  • 2.46 Flex navbar challenge
    00:05:34
  • 2.47 Sizing with flexbox
    00:07:54
  • 2.48 Flex items size
    00:08:02
  • 2.49 Flex image gallery challenge
    00:07:59
  • 2.50 Grid layout
    00:03:40
  • 2.51 Grid rows and columns
    00:04:54
  • 2.52 Grid rows and columns width
    00:06:47
  • 2.53 Grid items CSS
    00:07:50
  • 2.54 Grid area names
    00:05:53
  • 2.55 Website examples
    00:14:43
Formative Assessments - CSS
1 Lessons 00:45:00 Hours
  • Quiz
    0:45:00
Summative Assessment
1 Lessons 00:40:00 Hours
  • Exam
    0:40:00
+ View more
Other related courses
05:36:32 Hours
Networking fundamentals
Updated Tue, 13-Jun-2023
0 2 R10000 R3000
21:01:35 Hours
JavaScript complete
Updated Wed, 28-Feb-2024
3 17 R10000 R5000
06:41:37 Hours
React Native Design - Build Front End of 10 Mobile Apps
Updated Tue, 13-Jun-2023
0 0 R10000 R5000
06:55:17 Hours
Data Science Real World Projects in Python
Updated Tue, 13-Jun-2023
0 28 R10000 R5000
About instructor

Marcus Israeli

15 Reviews | 427 Students | 14 Courses
Coding PHP JAVA Kotlin
Student feedback
5
4 Reviews
  • (0)
  • (0)
  • (0)
  • (1)
  • (3)

Reviews

  • Malibongwe Mkala
  • Sinokhanyo Ntuli
  • Wonga Kupiso
  • Kwezi Mazwi
    i did well but when trying to do submission of the answers as the marks does not reflect.
R10000 R5500
Includes:
//send gift when already purchased by user