YoVDO

HTML & CSS Coding for Beginners: Build your own portfolio!

Offered By: Skillshare

Tags

HTML & CSS Courses Computer Science Courses Web Development Courses Project Management Courses Animation Courses Flexbox Courses HTML Courses Responsive Design Courses Media Queries Courses CSS Grid Courses

Course Description

Overview

Welcome to this class!

If you want to learn HTML & CSS to build websites, this course will teach you all of the core fundamentals you will need to know to build amazing websites from scratch!

Together, we will build your own portfolio website, which you can use to showcase your projects. 

Here is my live version here:

https://chris-dixons-portfolio.netlify.com

No coding experience is necessary, and I will do my best to explain everything we do along the way. Although if you have used HTML & CSS Before, you can hopefully sharpen your skills and learn some new tricks.

During this course you will learn all the basics of HTML & CSS, along with some more intermediate topics such as animations, media queries, responsive design, hover effects, Flexbox & Grid, how to include a parallax effect and so much more.

We finish things off by uploading your project to the web for the rest of the world to see!

Looking forward to seeing you in the class!


Syllabus

  • Introduction
  • Share Your Work On Skillshare!
  • What is HTML & CSS
  • Setting up our portfolio project
  • Sketch your ideas and gather your project images
  • The header section & semantic elements
  • CSS first look and linking our stylesheet
  • Quick Aside: Inspecting CSS with the devtools
  • Background images & the parallax effect
  • Quick Aside: Margin, padding and the box model
  • Block, inline and nesting content
  • First look at the CSS Flexbox
  • Contact us section and final mobile first CSS
  • CSS Media queries
  • Custom CSS animations
  • Animation libraries
  • Quick Aside: Browser compatibility
  • Setting up our projects page
  • Including our projects page HTML
  • Mobile first project layout using Flexbox
  • First look at the CSS grid
  • Grid areas for more advanced layouts
  • CSS text overlay, hover effects and animations
  • Hosting
  • Final thoughts
  • Follow me on Skillshare!

Taught by

Chris Dixon

Related Courses

ABC du langage C
Institut Mines-Télécom via France Université Numerique
Abstraction, Problem Decomposition, and Functions
University of Colorado System via Coursera
Advanced Data Structures in Java
University of California, San Diego via Coursera
Advanced React
Meta via Coursera
Testing with Agile
University of Virginia via Coursera