Ladies Learning Code: Intro to HTML & CSS

In this course, you'll learn to create a beautiful one page website with HTML & CSS.
4.0 (42 ratings) Instead of using a simple lifetime average, Udemy calculates a
course's star rating by considering a number of different factors
such as the number of ratings, the age of ratings, and the
likelihood of fraudulent ratings.
457 students enrolled
$19
$50
62% off
Take This Course
  • Lectures 29
  • Length 1 hour
  • Skill Level Beginner Level
  • Languages English
  • Includes Lifetime access
    30 day money back guarantee!
    Available on iOS and Android
    Certificate of Completion
Wishlisted Wishlist

How taking a course works

Discover

Find online courses made by experts from around the world.

Learn

Take your courses with you and learn anywhere, anytime.

Master

Learn and practice real-world skills and achieve your goals.

About This Course

Published 9/2013 English

Course Description

If you are looking to get your feet wet when it comes to coding, then this is the workshop for you. HTML and CSS are the backbone of all websites, and knowledge of them is a necessity if you are interested in things like web development, creating marketing emails, or even blogging! The web without HTML and CSS would be would be a world without colourful, pretty websites, not to mention the web applications we all use daily. It’s easy to learn, and was designed so that everyone – even non-programmers – can do it. No fancy programs are needed, just a text editor and a web browser!

The Ladies Learning Code Introduction to HTML & CSS workshop is designed to be a hands-on experience. During the session, you’ll build your own version of this and learn the following:

  • Basic techniques and concepts used for website development
  • How HTML and CSS work together to create richer online experiences
  • How to create a beautiful one-page website with images, content, custom fonts and colours and a CSS-defined layout
  • What resources are available if you’d like to continue learning at home (and we think you will)

What are the requirements?

  • A computer plus Google Chrome and Sublime (free downloads)

What am I going to get from this course?

  • By the end of the course you will have built your own beautiful personal website.
  • Course takes approximately 8 hours to complete

What is the target audience?

  • Complete beginners

What you get with this course?

Not for you? No problem.
30 day money back guarantee.

Forever yours.
Lifetime access.

Learn on the go.
Desktop, iOS and Android.

Get rewarded.
Certificate of completion.

Curriculum

Section 1: Introduction
Introduction
Preview
00:58
01:12

Let's get set up

You should have already downloaded the following:

  • Sublime Text (link) - a popular text editor that highlights your code and has other helpful features.
  • Google Chrome (link) - Choose a modern web browser that has good development tools to help make building web pages easier.Firefox is a good option, too! You'll also want to make one of these modern browsers your default browser. Here are the instructions.
  • Today's slides and files (under downloadable materials) - check your download folder to open up a file of resources for this course including the slides.
02:08

Follow along with the video and you'll open and edit files in your browser.

Section 2: Intro to HTML & CSS
02:27

Follow along with the video and you'll:

Learn what HTML is and complete a quick exercise: Saving a new file as an HTML file

01:34

Watch the video and you'll learn what CSS is, you'll add some HTML and CSS to your document to create your first webpage.

03:56

Watch the video and we'll begin to add HTML to our website.

In this section, open up blank.html (from your downloaded folder or available again here) to complete the exercise.

01:39

Follow along with the video and we'll be adding a logo and profile image to your project.

01:10

Watch this video and we'll learn about types of images and add some additional images to our webpage and finishing up writing all the final HTML you'll need for the final project.

00:21

Follow along with this video and we'll learn more about an important concept: clean close. You'll also have a chance to 'clean up your code' so you can tackle the next section and write some CSS.

03:23

Follow along with this video and you'll learn all about CSS. You'll also start to write some CSS for your final project.

00:40

Follow along with this video and you'll learn all about Hex codes. There are a lot of resources online to help you choose your own hex codes like: http://www.colorpicker.com/

00:55

Follow along with this video and learn how to style the way your text looks in your final project.

00:26

Follow along with this video and learn how to change font size with CSS.

00:22

Follow along with this video to learn how to change line height in your final project with CSS.

00:39

Follow along with this video to style the images in your final project. You'll also learn about CSS specificity.

02:19

Follow along with this video and you'll learn how to target specific elements on your page and style them with CSS using classes.

04:03

Follow along with this video and learn about an important but tricky CSS concept: the box model.

02:42

Follow along with this video and you'll learn how to use CSS to centre images.

01:30

Follow along with this video to add a layout to your final project to make it easier to style each section individually with CSS.

01:03

Follow along with this video and you'll complete an excercise to learn to add a background image to your final project.

00:59

Follow along with this video and you'll learn about how we can remove the default browser styles that affect how our webpages look.

01:13

Follow along with this video to learn about child selectors and how we can target certain elements on our page that are nested within classes and style them.

00:53

Follow along with this video and learn about section tags and how to style them for the final project.

00:27

Follow along with this video to learn how to center the header for the final project.

01:09

Follow along this video and learn about an important concept in CSS: floats that allow text to wrap around images in our final project.

01:26

Follow along with this video to add final touches to your final project. You can also use this time to play around with the CSS and style your webpage to really make it your own.

01:28

Follow along with this video to continue adding finishing touches to the layout of your final project.

Section 3: Bonus Sections
05:26

Follow along with this video to add some final bonus touches to your final project like fixed background images, google fonts, adding a menu, styling the menu and getting your links to work.

Section 4: Next Steps
01:16

Watch this video to learn more about next steps for getting your website on the web (hosting) and how to make your website optimized for computers, phones, tablets and other devises (making it responsive).

Students Who Viewed This Course Also Viewed

  • Loading
  • Loading
  • Loading

Instructor Biography

Ladies Learning Code is a not-for-profit startup from Toronto, Canada and we have Chapters in over 9 cities across Canada offering our one-day computer programming and design workshops. We provide women (and men) and girls (and boys) the opportunity to learn beginner-friendly computer programming and other technical skills through hands-on workshops. We're all about showing people that learning to hack can be fun! Our workshops are geared towards complete beginners and are structured to be completed in one full seven hour day.

Ready to start learning?
Take This Course