Intro to HTML & CSS: Build a Responsive Portfolio Website
4.0 (1 rating)
Course Ratings are calculated from individual students’ ratings and a variety of other signals, like age of rating and reliability, to ensure that they reflect course quality fairly and accurately.
5 students enrolled

Intro to HTML & CSS: Build a Responsive Portfolio Website

Build an Portfolio Website to Showcase your Artwork
4.0 (1 rating)
Course Ratings are calculated from individual students’ ratings and a variety of other signals, like age of rating and reliability, to ensure that they reflect course quality fairly and accurately.
5 students enrolled
Created by Haydn Adams, BFA
Last updated 4/2020
English
English [Auto]
Current price: $69.99 Original price: $99.99 Discount: 30% off
5 hours left at this price!
30-Day Money-Back Guarantee
This course includes
  • 2 hours on-demand video
  • Full lifetime access
  • Access on mobile and TV
  • Certificate of Completion
Training 5 or more people?

Get your team access to 4,000+ top Udemy courses anytime, anywhere.

Try Udemy for Business
What you'll learn
  • Students will assemble a responsive HTML/CSS portfolio website.
Requirements
  • Access to the internet (and a copy of Photoshop would be a good too).
Description

In this tutorial I'm going to walk you through how to build an HTML/CSS responsive portfolio, meaning it will work on all devices, from phones to your computer.

The Software You'll Need:

- Visual Studio Code (free)
- Adobe Photoshop (not free)

I'll show you how to:

  • Add a logo to your website

  • Incorporate a responsive navigation

  • Build a portfolio page

  • Add your email address to the contact page

  • Incorporate custom fonts from Google Fonts

  • Show how to write tags, classes and IDs (oh my!)

Who this course is for:
  • Graphic Designers that want to learn how to build a portfolio site in HTML/CSS
  • Beginning Web Design students
Course content
Expand all 28 lectures 01:51:14
+ Working with the Files
3 lectures 15:39
The Index File
07:40
Setting up a container
03:39
Adding a logo to the portfolio
04:20
+ The Navigation
5 lectures 18:55
The Navigation - Part 1
02:15
The Navigation - Part 3
05:11
The Navigation - Part 4
06:01
Testing the Mobile Menu in Chrome
01:23
+ Building the Home Page
3 lectures 18:37
Setting Up The Footer
04:08
Adding an image to the home page
07:39
Adding an intro paragraph to the home page
06:50
+ Building The Footer
3 lectures 14:33
Setting up the Footer
02:13
Customizing the Look of the Footer
06:47
Adding the Instagram icon to the footer
05:33
+ The Portfolio Page
5 lectures 19:49
Creating the Portfolio Page and Updating the Navigation
04:41
Resizing and naming files
04:01
Adding the rest of the images on the Portfolio Page
01:46
Adding Titles of the Work
03:50
+ The Active Class in the Navigation
1 lecture 02:04
The Active Class of the Navigation
02:04
+ The About & Contact Page
4 lectures 09:32
Setting up the About and Contact Page
03:15
Editing the About Page Content
01:54
Editing the content of the Contact Page
03:25
Congrats! Show your work off!
00:58
+ Next Steps
2 lectures 09:29
Adjusting the Padding of the Navigation
04:30
Adding Google Fonts
04:59