LearnUX.io Awwwards Honorable Mention

HTML & CSS Workshop

  1. Introduction 01:28

    Introduction

    Welcome to the course

  2. HTML basics 04:13

    HTML basics

    Learning about the crucial website ingredients

  3. First exercise in HTML 13:02

    First exercise in HTML

    Installing necessary plugins in Atom, creating skeleton for the simple website and playing with Developer Tools

  4. First steps with CSS 11:53

    First steps with CSS

    Styling our website and creating CSS selectors and classes

  5. Playing with more CSS properties 06:40

    Playing with more CSS properties

    Adding custom colors, margins and paddings

  6. Starting our portfolio project 13:42

    Starting our portfolio project

    Deconstructing the layout and building skeleton in HTML (markup of the website)

  7. Building remaining sections and elements in HTML 13:06

    Building remaining sections and elements in HTML

    Focusing on header, lists, images and paragraphs

  8. Web Typography 09:15

    Web Typography

    Applying selected fonts from Google Fonts in CSS

  9. Placing elements on the defined grid 21:40

    Placing elements on the defined grid

    Creating rows and columns with Bootstrap grid

  10. Building the navigation 15:54

    Building the navigation

    Getting to know more about block and inline-block elements, playing with CSS list properties

  11. Tweaking the header 10:32

    Tweaking the header

    Polishing styles – font sizes, colors and alignment

  12. Adding background image and box shadow 08:16

    Adding background image and box shadow

    Exploring these CSS property

  13. Styling the list & project sections 12:31

    Styling the list & project sections

    Tweaking typography, sizes and position

  14. Styling the footer 04:38

    Styling the footer

    Centering the text and playing with typography

  15. Styling navigation 07:16

    Styling navigation

    Creating sticky navigation and adding decorations

  16. CSS transition function 05:21

    CSS transition function

    Changing the colors on the hover

  17. Summary of the course 01:28

    Summary of the course

    Admiring our website

HTML & CSS Workshop

Duration: 02:40:55 Last update: 1 week ago
  • Key Points
  • Author
  • Source Files
  • Who is this course for?

Learn HTML & CSS basics by implementing the layout step-by-step

  • HTML tags
  • CSS basics and properties
  • Implementing Google Fonts on the website
  • Using dev tools in a web browser

👋Hello, I'm Aga! I'm a coding designer with a strong focus on UX-related issues based in Warsaw, Poland. 👩🏻‍💻I’m co-founder of The Awwwesomes – organization teaching how to create awwwesome things on the Web, organizing coding (HTML & CSS) workshops. 🚀Bridging the gap between designers and developers is my mission! 🌍🎤 I also like sharing my knowledge on conferences for designers and developers around the world. 🍫🐽I’m a huge fan of dark chocolate, dinosaurs, Wes Anderson’s movies and pink color (which you can see on my instagram 📸)

🔗Feel free to follow me on Twitter, visit my website or check out my instagram account.

Sorry, you don’t have access to the project files.

Why don’t you subscribe and get full access throughout the site?

The course is dedicated for UI & UX designers who would like to start learning HTML & CSS by practical examples. Prior coding knowledge is not required. We will cover basics step by step, so you will be able to follow along.

Real life project

In these classes we’re going to code designer’s portoflio which means that we’re going to learn HTML & CSS basics by implementing the layout step-by-step. The goal of these classes is to show you that code is a great tool for UI & UX designers to express their ideas in the real environment for their projects which is a web browser.

How UX Designers work
The skills to master

What you'll learn

After the course you’ll be able to better handoff your projects to developers and better speak their language. Have ever tried tweaking existing HTML templates for Wordpress? This course is going to help you to easily adjust them to your needs.