Web Design for Beginners: Real World Coding in HTML & CSS from Udemy

What's inside

Learning objectives

Create any website layout you can imagine
Support any device size with responsive (mobile-friendly) design

Add tasteful animations and effects with css3
Use common vocabulary from the design industry

Create any website layout you can imagine
Support any device size with responsive (mobile-friendly) design
Add tasteful animations and effects with css3
Use common vocabulary from the design industry

Syllabus

Welcome!

Course Introduction

Big Picture Overview of Course (What To Expect)

HTML Essentials

Why HTML is Exciting

First Look at HTML

The Easiest Way to Get Started

Hands On! Create your First HTML File

Russian Stacking Dolls: Bulleted Lists

HTML Document Structure

First Look at Attributes: Linking Pages Together

Section 1 Review

Adding Media to a Web Page

In this lesson we learn how to insert an image into a webpage. If you want to edit or resize an image before placing it on your webpage and you do not have access to Adobe Photoshop I recommend the free image editing software named GIMP.

Image Exercise

In this lesson we learn about the "<audio>" element which allows us to include audio clips on our pages. Download the supplementary material .zip file for a working demo of the audio element.

In this lesson we learn about the "<video>" element which allows us to natively include video clips on our pages. However, we learn that there are several factors which make including video on our pages without the help of third party services quite tricky.

Vector Graphics & Illustrations (SVG & Figma)

Text Basics

Headings

Lists

Bold & Italic

For a larger list of available HTML special characters visit this Wikipedia page.

Also please note that in the video lesson I incorrectly referred to the "&" symbol as "ampersands" (plural). In this case the correct phrase would be simply "ampersand."

Semantics & Organization

Semantic Structural Elements

Navigation

Non-semantic Elements ("div" and "span")

HTML Comments

The "Section" Element

Forms

Different Types of Inputs

Choosing Between a set of options

Tables

How to Create a Table of Data

Do Not Use Tables for Layout

CSS Essentials

CSS Introduction

CSS Selectors

The Cascade

Box Model

Quick Note About CSS Floats

Creating a Page Layout with Floats

Let's apply what we've learned about CSS so far to make our page easier on the eyes.

If you are looking for a color picker I recommend the free Adobe Kuler website / tool. Not only can you click on a circle in the color wheel to find color codes, but Kuler will also provide additional complimentary colors.

Intermediate CSS

Styling Navigation Menu

Overlapping Content & Transparent Backgrounds

Less Exciting Yet Still Necessary CSS Tasks

Styling Data Tables

In this lesson we learn how to customize the appearance of HTML forms. The lesson mentions third party CSS libraries you can leverage to tackle cross browser styling issues. Here are some of the most popular options in the webDev community:

Formalize

Normalize

Note that Formalize is strictly focused on forms, while Normalize helps level the playing field for all elements across all browsers (e.g. h1-h6, p, table, etc...).

CSS Typography

In the past web designer's were limited to a small handful of fonts, but in today's web we are free to use any font we desire thanks to "@font-face" technology.

My favorite free font resources are Google Fonts and Font Squirrel.

Developer Timeout!

Developer Tools | Inspect Elements

CSS Backgrounds

Background Images

Gradient Backgrounds

CSS Sprites allow our pages to load faster by combining many different graphics into a single image file. Many of the world's most popular websites use this technique.

Full Width Backgrounds - Fixed Width Content

Responsive Web Design

Chapter Introduction

Responsive Grids

Responsive Grid with Flexbox

What is Flexbox in CSS?

Flexbox (Part 1)

Flexbox (Part 2)

CSS Grid Layout

CSS Grid Part 1

CSS Grid Part 2

CSS Grid Part 3

CSS3 Special Effects

Box Shadows

Rounded Corners

The "transform" property can be used to manipulate the appearance of elements. In this lesson we learn about rotate, scale, skew, and positioning elements.

For extra credit you can explore the possibilities of 3D transforms. We don't delve into 3D transforms in this lesson because the topic demands its own five hour course but if you are interested in learning about 3D effects in the web browser the brilliant David DeSandro has created a freely-available must-read guide!

CSS Transitions

CSS animations allow us to add movement to any element we choose. In this lesson we learn the essentials of controlling how and when elements move.

If you're looking for inspiration regarding what types of animation / "fade-in" effects you can create or use be sure to visit the brilliant Dan Eden's "Animate.css" demo page.

Leveraging JavaScript without Writing JavaScript

In this lesson we begin to learn what JavaScript is and what it is typically used for. Even though learning how to write JavaScript code is outside the scope of this course we can still leverage existing JavaScript solutions to add new functionality to our pages.

In particular, this lesson showcases the creation of a slideshow. In the lesson we make use of the excellent "Cycle2" script written by Mike Alsup. You can find the official Cycle2 documentation page here.

Be sure to download the .zip file attached to this lesson to dissect and analyze things for yourself.

Quick note about website speed: in this lesson we include JavaScript files in the <head> section of our HTML. While this location may be simple to remember we can achieve better performance by placing JS directly before our page’s closing <body> element.

Be sure to download the .zip file attached to this lesson to dissect and analyze things for yourself.

In this lesson we learn how to initially hide bits of content and then reveal that content later by clicking / tapping on a trigger element.

Here is a link to the declarativeToggle download & documentation page.

As always, you can download the .zip file associated with this lecture to grab a copy of the finished product.

In this lesson we learn how to open images in a modal window, and also how to align thumbnail images in a strict grid.

Here is a link to the Lightbox package we leverage during the lesson.

As always, you can download the .zip associated with this lecture to grab the finished product.

What is Bootstrap?

Bootstrap (Part 1)

Bootstrap (Part 2)

Sass

Getting Started With Sass

Sass Basics

We continue to learn about Sass by reviewing Mixins and operators.

Pushing a Website Live Up Onto The Web

Going Live using GitHub Pages

Cross Browser Compatibility

Cross Browser Support & Feature Detection

Beyond This Course

Next Steps

Good to know

Know what's good

, what to watch for

, and possible dealbreakers

Taught by Brad Schiff who has taught countless coworkers and held training sessions for fortune 100 companies

Teaches students the fundamentals of web design using the same concepts that professional websites use

Helps students develop job-ready skills

Assumes no prior knowledge and begins by teaching the basics

Provides hands-on exercises to reinforce learning

Even supports devices of any size through responsive design

Activities

Be better prepared before your course. Deepen your understanding during and after it. Supplement your coursework and achieve mastery of the topics covered in Web Design for Beginners: Real World Coding in HTML & CSS with these activities:

Brush up on HTML and CSS fundamentals

Show steps

Start by reviewing the basics of HTML and CSS. This will help refresh your memory and ensure you're on solid ground before diving deeper into the course material.

Browse courses on HTML

Show steps

Review HTML tags and structure
Practice writing simple CSS styles
Create a basic web page using HTML and CSS

Read 'The Pragmatic Programmer'

Show steps

Read this classic book on software development to gain valuable insights and best practices. It covers topics such as design, testing, debugging, and team collaboration.

View The Pragmatic Programmer: Your Journey To... on Amazon

Show steps

Purchase or borrow a copy of the book
Read the book and take notes
Apply the principles and techniques described in the book to your own projects

Attend meetups or workshops related to web development

Show steps

Attend industry events to connect with other web developers, share knowledge, and stay updated on the latest trends. This will help you expand your network and stay engaged with the web development community.

Browse courses on Web Development

Show steps

Find local meetups or workshops on web development
Register for the event and attend
Introduce yourself to other participants and engage in conversations

Five other activities

Expand to see all activities and additional details

Show all eight activities

Solve coding challenges on platforms like CodeChef or HackerRank

Show steps

Practice your problem-solving and coding skills by solving challenges on online platforms. This will help you improve your ability to write efficient and effective code.

Browse courses on Coding

Show steps

Create an account on a coding challenge platform
Select a challenge and attempt to solve it
Review your solution and learn from your mistakes
Repeat the process with more challenges

Mentor a junior web developer or participate in online forums to answer questions

Show steps

Share your knowledge and experience by mentoring others or volunteering to answer questions online. This will help you to reinforce your understanding of web development concepts and give back to the community.

Browse courses on Mentoring

Show steps

Find opportunities to mentor others or participate in online forums
Share your knowledge and expertise in a supportive and respectful manner
Be patient and understanding when working with others

Build a personal portfolio website

Show steps

Create a personal portfolio website to showcase your skills and projects. This will provide you with hands-on experience and help you develop a stronger understanding of web development concepts.

Browse courses on Web Development

Show steps

Plan the structure and design of your website
Develop the HTML and CSS code for your website
Test and debug your website
Deploy your website to a web hosting provider

Volunteer for a non-profit organization focused on web development or technology education

Show steps

Volunteer your time and skills to help others learn about or benefit from web development. This will give you practical experience and expose you to a diverse range of projects and technologies.

Browse courses on Volunteering

Show steps

Find a non-profit organization that aligns with your interests
Contact the organization and inquire about volunteer opportunities
Commit to a specific number of hours or projects
Volunteer your time and expertise

Create a blog or tutorial on a specific web development topic

Show steps

Create a blog or tutorial to share your knowledge with others. This will help you solidify your understanding of the topic and contribute to the web development community.

Browse courses on Web Development

Show steps

Choose a topic you're knowledgeable about
Write a detailed outline for your blog or tutorial
Create high-quality content that is both informative and engaging
Publish and promote your content on various platforms

Career center

Learners who complete Web Design for Beginners: Real World Coding in HTML & CSS will develop knowledge and skills that may be useful to these careers:

Front-End Developer

Front-End Developers focus on the user-facing side of a website, ensuring that it is visually appealing and easy to use. They work with designers and back-end developers to bring a website to life. This course teaches the essential coding languages used for front-end development, including HTML, CSS, and JavaScript, making it a valuable resource for aspiring Front-End Developers.

See salaries and explore the career path for Front-End Developer

Web Developer

Web Developers create and manage websites, designing the look and feel of a website and ensuring a positive user experience. This course teaches the essential coding languages used to build websites, including HTML and CSS. As web development is a rapidly changing field, this course may help you stay up-to-date with the latest industry trends and technologies.

See salaries and explore the career path for Web Developer

Web Designer

Web Designers create the visual appearance of a website, working with developers to bring the website to life. This course teaches the essential design principles and provides practical experience with essential design tools, making it a valuable resource for aspiring Web Designers.

See salaries and explore the career path for Web Designer

UX Designer

UX designers focus on the user experience of a website or app, ensuring that it is easy to use and navigate. This course teaches the principles of user experience design and provides practical experience with essential design tools, making it a valuable resource for aspiring UX Designers who want to expand their skillset.

See salaries and explore the career path for UX Designer

UI Designer

UI designers focus on the user interface of a website or app, creating the visual elements that users interact with. This course teaches the principles of design and provides practical experience with essential design tools, making it a valuable resource for aspiring UI Designers who want to expand their skillset.

See salaries and explore the career path for UI Designer

Art Director

Art Directors oversee the visual style and concepts of a variety of projects, including websites, magazines, and advertising campaigns. This course teaches the essential design principles and provides practical experience with essential design tools, making it a valuable resource for aspiring Art Directors who want to expand their skillset.

See salaries and explore the career path for Art Director

Graphic designer

Graphic Designers create visual concepts, using computer software or by hand, to communicate ideas that inspire, inform, and captivate consumers. This course teaches the essential design principles and provides practical experience with essential design tools, making it a valuable resource for aspiring Graphic Designers who want to expand their skillset.

See salaries and explore the career path for Graphic designer

Creative Director

Creative Directors develop the overall vision and strategy for a variety of creative projects, including websites, magazines, and advertising campaigns. This course teaches the essential design principles and provides practical experience with essential design tools, making it a valuable resource for aspiring Creative Directors who want to expand their skillset.

See salaries and explore the career path for Creative Director

Product Manager

Product Managers are responsible for the development and launch of new products or services. This course may be useful for aspiring Product Managers who want to learn how to bring new products to market successfully.

See salaries and explore the career path for Product Manager

Business Analyst

Business Analysts gather and analyze data to help businesses understand their strengths and weaknesses. This course may be useful for aspiring Business Analysts who want to learn how to use data to make informed decisions.

See salaries and explore the career path for Business Analyst

Project Manager

Project Managers plan, organize, and execute projects to achieve specific goals. This course may be useful for aspiring Project Managers who want to learn how to manage projects successfully.

See salaries and explore the career path for Project Manager

Copywriter

Copywriters create written content for marketing and advertising purposes, such as slogans, taglines, and ad copy. This course may be useful for aspiring Copywriters who want to learn how to create effective and persuasive written content.

See salaries and explore the career path for Copywriter

Marketing Manager

Marketing Managers plan and execute marketing campaigns to promote products or services. This course may be useful for aspiring Marketing Managers who want to learn how to create and implement effective marketing strategies.

See salaries and explore the career path for Marketing Manager

Technical Writer

Technical Writers create instruction manuals, technical reports, and other documentation to help users understand and use technical products or services. This course may be useful for aspiring Technical Writers who want to learn how to create clear and concise documentation for a variety of audiences.

See salaries and explore the career path for Technical Writer

Content Writer

Content Writers create written content for a variety of purposes, including websites, blogs, and social media. This course may be useful for aspiring Content Writers who want to learn how to create engaging and informative content for a variety of audiences.

See salaries and explore the career path for Content Writer