Learn Web Designing & HTML5/CSS3 Essentials in 4-Hours from Udemy

What's inside

Learning objectives

In this course, you will learn how to slice up a photoshop mockup and hand-code valid html5 & css3

By the end of the course, you will be able to turn a psd into a beautiful, usable, and valid html5 & css3 website

In this course, you will learn how to slice up a photoshop mockup and hand-code valid html5 & css3
By the end of the course, you will be able to turn a psd into a beautiful, usable, and valid html5 & css3 website

Syllabus

Introduction

A brief introduction of the course.

Preparation

A brief overview of the Photoshop Mockup we will be coding.

This lecture lists everything needed in order to start building your HTML5 & CSS3 website.

This lecture covers how to slice up your Photoshop Mockup and how to Save for Web & Devices.

Learning Outcomes

You will learn how to take a Photoshop Mockup and Save Optimized images and assets for use in your website

A few quick questions to keep your brain in the game!

In this lecture, we hand-code the HTML5 for the "Content" section of the website.

A quick little quiz to jog your HTML5 memory!

In this lecture, learn the difference between Normalize.css and Reset.css and why one or the other may benefit you more in your web development.

Save some time by downloading the normalize.css file in the extras section of this lecture.

In this lecture, we use CSS3 to style the Navigation section of our website.

In Part I of this lecture, we use CSS3 to style the primary "content" section of our website, including how to style "grid-style" columns.

In Part II of this lecture, we use CSS3 to style the sidebar of our website.

Note: The volume in this video is, unfortunately, a bit quiet. Just be sure to turn your speakers up a bit :)

A pop quiz to jog your CSS3 memory!

Just a quick little pop quiz about validating your code.

Learn how to purchase a domain name, a hosting package, install Wordpress and publish a blog post in 10 minutes or less with this step-by-step tutorial.

CHEAP BUT AWESOME HOSTING PACKAGES
Look no further for a hosting package for your website! I've recommended JustHost to my friends, my family, my clients and tens of thousands of my online students!
I also use JustHost for ALL of my personal & professional projects, and have been a very happy customer for 7 years. Hosting packages start as low as $3.95/month, Unlimited GBs of space, Unlimited Domain Hosting, Unlimited Email Accounts, and an Anytime Money Back Guarantee, you simply cannot go wrong with these guys.
You can purchase your domain & hosting by using this link: http://bradhussey.ca/justhost-psd2html (affiliate link)

Affiliate Disclaimer
The hosting link I provide in this video is my personal affiliate link. At no extra cost to you, I receive a small commission should you decide to purchase hosting with my link. Think of it as a "free tip"! I have personally used, tested, and have had an amazing experience with JustHost for 7 years now — I would NEVER recommend this service to you if I didn't 100% stand behind it :)
Should you decide to purchase hosting through my link, thank you so much, I truly appreciate it.

SPREAD THE LOVE
Did you like this video? Have I helped you out in any way? If so, please share the video with your friends on Facebook & Twitter.
Click this link to tweet the video: http://bradhussey.ca/tweet-host-tutorial

SUBSCRIBE FOR MORE
I provide more free tutorials, resources and write about my lifestyle at http://bradhussey.ca. Subscribe for free updates using this link: http://bradhussey.ca/subscribe.
Thanks for watching. You're the best!

In this lecture, we're going to learn how to code a CSS Sticky Footer.

Traffic lights

Read about what's good

what should give you pause

and possible dealbreakers

Explores HTML5 and CSS3, which are standards in web development

Develops skills in slicing up Photoshop mockups and hand-coding valid HTML5 and CSS3

Provides a strong foundation for learners with little to no experience in HTML5 and CSS3

Includes hands-on labs and interactive materials

Offers a comprehensive study of web development

Cover unique perspectives and ideas that add color to web development

Reviews summary

Foundational web design, now outdated

According to learners, this course offers a quick and foundational introduction to HTML5 and CSS3 essentials, focusing on the practical skill of converting a Photoshop mockup into a hand-coded website. Its 4-hour duration makes it ideal for absolute beginners seeking a rapid overview of web design basics. However, due to its last update in November 2014, students frequently note the material is now significantly outdated and lacks coverage of modern web development practices, making it less suitable for building contemporary websites. Some mention minor audio issues and promotional content in bonus lectures.

The short duration makes it a digestible and quick learning experience.

"The 4-hour format was perfect for a quick weekend project to get a feel for web coding."

"It was easy to follow along, even as a complete beginner, thanks to its clear explanations."

"I finished the course quickly and felt I had grasped the basic concepts without feeling overwhelmed."

Teaches the hands-on process of converting Photoshop designs into code.

"The focus on slicing a PSD and hand-coding it was a unique and practical skill to learn."

"I really appreciated the step-by-step guidance on transforming a visual mockup into a functional web page."

"This course clearly demonstrated how to take a design file and translate it into HTML/CSS."

Provides a clear and quick starting point for absolute beginners in web design.

"I learned the very basic structure of HTML and how CSS applies styles to a webpage."

"For someone who has never touched code before, this course gave me a good initial conceptual understanding."

"It was easy to follow and gave me a simple overview of web page construction."

Some lectures have low audio volume and a bonus lesson includes affiliate promotion.

"One lecture had really quiet audio, requiring me to turn up my speakers significantly."

"I found the bonus lecture promoting a hosting service with an affiliate link to be a bit out of place."

"While the course was helpful, the quiet audio in one video was a small annoyance."

The course material is significantly outdated for modern web development.

"This course, updated in 2014, uses techniques and tools that are no longer current in modern web design."

"I found that many techniques taught here are fundamentally sound but don't address responsive design, Flexbox, or Grid."

"It's a good historical look at web development, but not practical for building today's websites."

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 Learn Web Designing & HTML5/CSS3 Essentials in 4-Hours with these activities:

Review HTML5 basics

Show steps

Refreshes essential HTML5 knowledge

Browse courses on HTML5

Show steps

Review HTML5 syntax
Review HTML5 elements

Practice HTML5 coding

Show steps

Refines HTML5 coding skills

Browse courses on HTML5

Show steps

Create a simple HTML5 document
Add HTML5 elements and content
Validate your code

Connect with experienced web developers

Show steps

Provides guidance and support from industry professionals

Browse courses on Web Development

Show steps

Identify potential mentors
Reach out to mentors
Build relationships with mentors

Five other activities

Expand to see all activities and additional details

Show all eight activities

Review Photoshop Mockup code walkthrough

Show steps

Brings your focus back to the main goal of the course - learning HTML & CSS

Browse courses on HTML5

Show steps

Review the PSD file
Review the HTML5 code
Review the CSS3 code

Engage in peer review of HTML5 & CSS3 code

Show steps

Encourages collaboration, knowledge sharing, and critical thinking

Browse courses on HTML5

Show steps

Find a peer to collaborate with
Exchange code for review
Provide constructive feedback
Incorporate feedback into your own code

Practice applying CSS3 styles

Show steps

Reinforces CSS3 concepts and improves styling skills

Browse courses on CSS3

Show steps

Identify elements to style
Apply CSS3 properties
Validate your code
Make adjustments as needed

Develop a simple HTML5 & CSS3 website

Show steps

Provides hands-on experience in applying course concepts

Browse courses on Web Development

Show steps

Plan the website structure
Create the HTML5 code
Create the CSS3 code
Test and debug the website
Publish the website

Build a portfolio of HTML5 & CSS3 projects

Show steps

Provides sustained practice and demonstrates progress

Browse courses on Web Development

Show steps

Plan your portfolio projects
Develop the HTML5 & CSS3 code
Test and debug your projects
Document your projects
Showcase your portfolio

Career center

Learners who complete Learn Web Designing & HTML5/CSS3 Essentials in 4-Hours will develop knowledge and skills that may be useful to these careers:

Web Developer

Web Developers are responsible for the design and development of websites. They work with clients to understand their needs and then create a website that meets those needs. This course can help you learn the skills you need to become a Web Developer. You will learn how to code HTML5 and CSS3, which are the two most important languages for web development. You will also learn how to use Photoshop to create mockups of your websites. This course is a great way to get started in the field of web development.

See salaries and explore the career path for Web Developer

Front-End Developer

Front-End Developers are responsible for the user interface of a website. They work with designers to create a website that is both visually appealing and easy to use. This course can help you learn the skills you need to become a Front-End Developer. You will learn how to code HTML5 and CSS3, which are the two most important languages for front-end development. You will also learn how to use Photoshop to create mockups of your websites. This course is a great way to get started in the field of front-end development.

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

UI Designer

UI Designers are responsible for the look and feel of a website. They work with developers to create a website that is both visually appealing and easy to use. This course can help you learn the skills you need to become a UI Designer. You will learn how to use Photoshop to create mockups of your websites. You will also learn the basics of HTML and CSS, which are the two most important languages for web development. This course is a great way to get started in the field of UI design.

See salaries and explore the career path for UI Designer

UX Designer

UX Designers are responsible for the user experience of a website. They work with researchers and developers to create a website that is both easy to use and meets the needs of the users. This course can help you learn the skills you need to become a UX Designer. You will learn the basics of HTML and CSS, which are the two most important languages for web development. You will also learn about user research and usability testing. This course is a great way to get started in the field of UX design.

See salaries and explore the career path for UX Designer

Product Designer

Product Designers are responsible for the overall design of a product. They work with engineers and marketers to create a product that is both useful and desirable. This course can help you learn the skills you need to become a Product Designer. You will learn the basics of HTML and CSS, which are the two most important languages for web development. You will also learn about user research and usability testing. This course is a great way to get started in the field of product design.

See salaries and explore the career path for Product Designer

Information Architect

Information Architects are responsible for the organization and structure of a website. They work with developers and designers to create a website that is easy to navigate and find information. This course can help you learn the skills you need to become an Information Architect. You will learn the basics of HTML and CSS, which are the two most important languages for web development. You will also learn about information architecture and user experience. This course is a great way to get started in the field of information architecture.

See salaries and explore the career path for Information Architect

Webmaster

Webmasters are responsible for the maintenance and upkeep of a website. They work with developers and designers to keep a website running smoothly and looking its best. This course can help you learn the skills you need to become a Webmaster. You will learn the basics of HTML and CSS, which are the two most important languages for web development. You will also learn about server administration and website security. This course is a great way to get started in the field of web mastering.

See salaries and explore the career path for Webmaster

SEO Specialist

SEO Specialists are responsible for improving the visibility of a website in search engine results. They work with webmasters and content writers to create a website that is both search engine friendly and informative. This course can help you learn the skills you need to become an SEO Specialist. You will learn the basics of HTML and CSS, which are the two most important languages for web development. You will also learn about search engine optimization and keyword research. This course is a great way to get started in the field of SEO.

See salaries and explore the career path for SEO Specialist

Social Media Manager

Social Media Managers are responsible for managing the social media presence of a company or organization. They work with marketing and communications teams to create and execute social media campaigns. This course can help you learn the skills you need to become a Social Media Manager. You will learn the basics of HTML and CSS, which are the two most important languages for web development. You will also learn about social media marketing and community management. This course is a great way to get started in the field of social media management.

See salaries and explore the career path for Social Media Manager

Content Writer

Content Writers are responsible for creating written content for websites, blogs, and other marketing materials. They work with marketing and communications teams to create content that is both informative and engaging. This course can help you learn the skills you need to become a Content Writer. You will learn the basics of HTML and CSS, which are the two most important languages for web development. You will also learn about content writing and SEO. This course is a great way to get started in the field of content writing.

See salaries and explore the career path for Content Writer

Marketing Manager

Marketing Managers are responsible for planning and executing marketing campaigns. They work with sales and product teams to create marketing campaigns that are both effective and profitable. This course can help you learn the skills you need to become a Marketing Manager. You will learn the basics of HTML and CSS, which are the two most important languages for web development. You will also learn about marketing principles and campaign management. This course is a great way to get started in the field of marketing.

See salaries and explore the career path for Marketing Manager

Project Manager

Project Managers are responsible for planning and executing projects. They work with teams of people to complete projects on time and within budget. This course can help you learn the skills you need to become a Project Manager. You will learn the basics of HTML and CSS, which are the two most important languages for web development. You will also learn about project management principles and risk management. This course is a great way to get started in the field of project management.

See salaries and explore the career path for Project Manager

Business Analyst

Business Analysts are responsible for analyzing business needs and developing solutions. They work with stakeholders to identify and define business requirements. This course can help you learn the skills you need to become a Business Analyst. You will learn the basics of HTML and CSS, which are the two most important languages for web development. You will also learn about business analysis techniques and requirements gathering. This course is a great way to get started in the field of business analysis.

See salaries and explore the career path for Business Analyst

Systems Analyst

Systems Analysts are responsible for analyzing and designing computer systems. They work with users and stakeholders to identify and define system requirements. This course can help you learn the skills you need to become a Systems Analyst. You will learn the basics of HTML and CSS, which are the two most important languages for web development. You will also learn about systems analysis techniques and requirements gathering. This course is a great way to get started in the field of systems analysis.

See salaries and explore the career path for Systems Analyst

Data Analyst

Data Analysts are responsible for collecting, cleaning, and analyzing data. They work with stakeholders to identify and define data requirements. This course can help you learn the skills you need to become a Data Analyst. You will learn the basics of HTML and CSS, which are the two most important languages for web development. You will also learn about data analysis techniques and data visualization. This course is a great way to get started in the field of data analysis.

See salaries and explore the career path for Data Analyst