HTML & CSS coding for beginners: Build your own portfolio
Learn how to use HTML & CSS to create your own portfolio project. Learn Flexbox, Grid, Animations, Responsive Design, Parallax, Media Queries & more!
Watch Promo
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!
Your Instructor
Hello, My name is Chris and I am a web developer and online teacher. I am passionate about what I do and about teaching others. I have started various online and offline businesses.
Whatever your reason for learning to build websites you have made an excellent career choice.
My personal motivation was to become my own boss and have more freedom and flexibility in my life. I also enjoy the technical challenge it provides and the way it constantly evolves. I built my first website back in 1999 and i have watched the web evolve into what it is today.
I try to make my courses enjoyable and try to remember what it was like when I was learning. I also believe the best way to learn is by doing and try to include as many practical examples as possible in my courses.
Thanks for taking an interest and I look forward to you joining me.
Chris
Course Curriculum
-
StartIntroduction (1:55)
-
StartWhat is HTML & CSS? (6:04)
-
StartSetting up our portfolio (5:36)
-
StartSketch your ideas and gather your project images (3:04)
-
StartThe header section and semantic elements (6:43)
-
StartCSS first look and linking our stylesheet (14:17)
-
StartQuick Aside: Inspecting CSS with the devtools (3:19)
-
StartBackground images and the parallax effect (8:15)
-
StartQuick Aside: Margin, padding and the box model (3:45)
-
StartBlock, inline and nesting content (11:21)
-
StartFirst look at the CSS Flexbox (9:54)
-
StartContact us section and final mobile first CSS (7:17)
-
StartCSS media queries (14:59)
-
StartCustom CSS animations (8:28)
-
StartAnimation libraries (12:05)
-
StartQuick Aside: Browser compatibility (4:47)
-
StartSetting up our projects page (3:37)
-
StartIncluding our projects page HTML (4:41)
-
StartMobile first project layout using Flexbox (6:06)
-
StartFirst look at the CSS grid (6:56)
-
StartGrid areas for more advanced layouts (6:03)
-
StartCSS text overlay, hover effects and animations (12:13)
-
StartHosting (2:29)
-
StartFinal thoughts (0:17)