Class Central is learner-supported. When you buy through links on our site, we may earn an affiliate commission.

freeCodeCamp

Learn HTML5 and CSS3 From Scratch - Full Course

via freeCodeCamp

Overview

Embark on a comprehensive 12-hour journey to master HTML5 and CSS3 from the ground up. Begin with the fundamentals of HTML, including document structure, elements, and attributes. Progress through essential topics such as headings, paragraphs, images, links, lists, and forms. Dive into CSS, exploring selectors, colors, units, typography, and the box model. Advance to more complex concepts like display properties, background images, positioning, and responsive design with media queries. Delve into advanced CSS techniques, including transforms, transitions, animations, and CSS variables. By the end of this extensive course, gain the skills to create your own responsive web projects, armed with knowledge of semantic tags, browser prefixes, and efficient workflows using tools like Emmet.

Syllabus

) Intro.
) What is HTML.
) Google Chrome and Visual Studio Code.
) Download Google Chrome.
) Download Visual Studio Code.
) Create A Project.
) First Webpage.
) Visual Code Settings.
) Download Live Server Extension.
) Basic HTML Document Structure.
) Implementing Basic Document Structure.
) Word Wrap and Emmet.
) Heading Elements.
) Paragraph Elements.
) White Space Collapsing.
) Lorem Ipsum Dummy Text.
) Images.
) Multiple Path Options.
) External Images.
) Nice Images.
) Width and Height Attribute.
) Crop Images.
) Proper Path.
) Comments And Line Breaks.
) External Links.
) Internal Links.
) Links Within Page.
) Empty Links.
) Sup And Sub Elements.
) Strong And Em Elements.
) Special Characters In Html.
) Unordered Lists.
) Ordered Lists.
) Nested Lists.
) Table Element.
) Forms - Input And Submit Elements.
) Forms - Textarea - Radio - Checkbox.
) Prettier And Code Formatter.
) Keyboard Shortcuts.
) External Resources - Head Element.
) Html Project Intro.
) Project Setup.
) Download Images.
) Logo, Heading, Navigation.
) Home Page Completed.
) About Page.
) Numbers Page.
) Contact Page.
) Resource Files.
) Text Editor Setup.
) Css Intro.
) Workspace Setup.
) Inline Css.
) Course Resources.
) Internal Css.
) External Css.
) Power Struggle.
) Basic Css Syntax.
) Element Selectors.
) Grouping Selectors.
) Id Selectors.
) Class Selectors.
) Id And Class Selector Summary.
) Div And Span Elements.
) CSS Inheritance.
) More Info On Inheritance.
) Last Rule, Specificity, Universal Selector.
) Colors Intro.
) Color And Background-Color Properties.
) Color Names.
) Rgb.
) Rgba.
) Hex.
) Vs-Code Color Options.
) External Resources.
) Units Intro.
) Pixels, Font-Size, Width, Height.
) Percent Values.
) Em Values.
) Rem Values.
) VH And VW.
) Default Browser Syles.
) Calc Function.
) Typography Intro.
) Font-Family.
) Font-Stack Generic Fonts.
) Google Fonts.
) Font-Weight Font-Style.
) Text-Align And Text-Indent.
) More Text Properties.
) Box-Model Intro.
) Padding.
) Margin.
) Border.
) Border-Radius, Negative Margin.
) Outline Property.
) Display Property Intro.
) Display Property.
) Basic Horizontal Centering.
) Mobile Navbar Example.
) Box-Sizing Border-Box.
) Display Inline-Block.
) Display:none, Opacity, Visibility.
) Background-Image Intro.
) Background Images Setup.
) Background-Image-Property.
) Background-Repeat.
) Background-Size.
) Background-Position.
) Background-Attachment.
) Linear-Gradients.
) Background Image Shortcuts Combined.
) Linear-Gradient Colorzilla.
) Float Position Intro.
) Float Property.
) Float Property Column Layout Example.
) Position Static.
) Position Relative.
) Position Absolute.
) Position Fixed.
) Media Quries.
) Z-Index.
) ::Before And ::After Pseudo Elements.
) Css Selectors Intro.
) Basic Selectors.
) Descendant Child Selectors.
) First Line And First Letter.
) :Hover Pseudo-Class Selector.
) Link Pseudo-Class Selectors.
) Root Preudo-Class Selectors.
) Transform,Transition,And Animations.
) Transform:transition().
) Transform:scale().
) Transform:rotate().
) Transform:skew().
) Transition Property.
) Multiple Transition.
) Transition Delay.
) Transition-Timing Function.
) Animation.
) Animation-Fill-Mode.
) Last Module Intro.
) Css Variables.
) Font-Awesome Icons.
) Text-Shadow Box-Shadow.
) Browser Prefixes.
) Semantic Tags.
) Emmet Workflow.

Taught by

freeCodeCamp.org

Reviews

5.0 rating, based on 3 Class Central reviews

Start your review of Learn HTML5 and CSS3 From Scratch - Full Course

  • Elizabeth Reese
    I highly recommend "Learn HTML5 and CSS3 From Scratch - Full Course". It provides all the basics you will need to begin using HTML5 and CSS3. I have had two college courses in HTML5 and CSS but learned more from this free course than I did in the ones that cost me a fortune. I liked the fact that it not only teaches a lot about HTML and CSS but also gives you resources that supplement what you are learning. If the program is moving too fast or you need time to really understand what you are doing you can pause or replay the video. It teaches about using Visual Studio as well. Visual Studio is easier than what I have been using and is a real time saver when you combine it with the advantages of emmet. Overall, it is a great course.
  • This course is a must! Highly recommend it. Adding topics such as CSS flexbox and gridview would make it perfect. The content is comprehensive, but these additions would enhance its completeness. Overall, a valuable resource for anyone looking to delve into web development. 100% recommended.
  • Profile image for Shehab Ezzat
    Shehab Ezzat
    This course helped me understand the basics of HTML and CSS well. The explanation was very good in content and method as well.

Never Stop Learning.

Get personalized course recommendations, track subjects and courses with reminders, and more.

Someone learning on their laptop while sitting on the floor.