HTML CSS Portfolio Website Tutorial

We will build a simple responsive portfolio website using Html and CSS and we will use some basic Javascript to toggle the menu on the mobile screen.

Our portfolio website will be for a developer so this can be called a developer portfolio website but this can be easily extended to any category of portfolio website.

In this detailed tutorial, we will use the mobile-first coding technique, in which we will develop our portfolio website for a mobile view first, and then we will add CSS media queries to make our portfolio website fully responsive for both mobile and desktops.

We will also see how to properly segment your HTML and CSS and how you can use comments to arrange your HTML and CSS.

In this tutorial, we will make use of CSS Grid for the structure where we have to rearrange sections of a website here and there. The power of CSS grids
will help us easily achieve that.
We will often use this CSS grid generator website to help us make the development faster.
https://cssgrid-generator.netlify.app/

We will also use CSS Flexbox to rearrange parts of a section and make use of the available space in a div. Align items horizontally and vertically with the power of a CSS Flexbox.

Download Free Illustrations - https://www.manypixels.co/gallery

We will create some common stylings as well which we will use throughout the application.

Once we are happy with the mobile version, we will add media queries and develop the responsive version of the portfolio website and rearrange different segments for larger screen sizes.

Finally, we will write some javascript to toggle the navigation menu in the mobile view and we will add and remove classes from elements using plain vanilla javascript.

💖 Subscribe to show support: https://bit.ly/2FAgXzS
☕ Buy me a coffee: https://www.buymeacoffee.com/SameerSaini

Chapters:
00:00:00 Intro
00:03:50 Create HTML, CSS, JS Files
00:04:20 Create HTML Structure
00:06:00 Header HTML
00:09:50 Header CSS
00:19:00 Home Page HTML
00:22:00 Home Page CSS
00:29:00 About Page HTML
00:36:05 About Page CSS
00:50:45 Services Page HTML
00:54:25 Services Page CSS
00:59:38 Portfolio Page HTML
01:03:30 Portfolio Page CSS
01:11:15 Contact Page HTML
01:17:08 Contact Page CSS
01:23:05 Footer Page HTML
01:24:10 Footer Page CSS
01:25:18 Adding Media Queries
01:46:38 Add Javascript to Toggle Menu
#PortfolioWebsite #HtmlTutorial #ResponsiveWebsite #CssTutorial

Видео HTML CSS Portfolio Website Tutorial канала Sameer Saini