Create a Responsive Flexbox and Grid Portfolio Website [PART 1/2] | HTML and CSS Tutorial 2019

STAY AWAY FROM #HOSTGATOR!! – For the past 2 years, I have requested that #hostgator cancel both my domain name & hosting service & for two years in a row, despite multiple phone calls and emails requesting the cancellation

This is the first part of a 2 part video tutorial where you’ll learn to create a responsive website from scratch using some elements of CSS Flexbox, Grid, and much more. I hope you enjoy this tutorial. Make sure to subscribe and to turn on bell notifications so you don’t miss the rest of the tutorials.

Don’t forget to like, comment, and subscribe!
More from me:

Part two:

Disclaimer: To save time, I rarely include css vendor prefixes for cross browser compatibility. If you plan to use this code please make sure that you use a prefixer.
Want to set up your own website?
Get affordable domain and web hosting service by HostGator (Affiliate link):

Save up to 60% off with coupon code:


Video tutorial on how to purchase a domain and hosting plan. Also, how to launch your website online:


Additional files:

Starter files:
AOS library:
Contact info:

responsive website
responsive design
responsive web design
web design
web development
how to make a website
responsive design tutorial
web development tutorial
media queries
website from scratch
responsive web design tutorial
html css
responsive website tutorial
responsive web development
web developer
how to make a responsive website
how to build a website from scratch
how to build a website
build a website
How to

Coding with Julio

  • Coding with Julio
    Posted at 18:13h, 12 April

    I made a mistake when it came to the portfolio section and I did not notice until someone pointed it out. Please be sure to READ this so that you can correct the issue.

    in the portfolio section of the CSS I had

    .profile-img {
    width: 50rem;
    flex: 1;

    Please replace that with

    .portfolio-img {
    flex: 1;

    And also add flex: 1 to the .portfolio-description which I left empty

    .portfolio-description {
    flex: 1;

  • Alex Barrett
    Posted at 04:31h, 22 May

    So I'm 19 minutes in, and I would have to say you could possibly slow down just a bit. Seems like you're rushing – and I find myself constantly pausing and trying to figure out what I may have missed, and stuff. So maybe please slow down, space the HTML out a bit so I can tell what you're copying and pasting a little easier. thank you

  • Nicky V
    Posted at 06:30h, 26 May

    Don't forget to download the library "" that might be the main reason for some peoples hamburger menu animation to not work

  • Ondřej Mladějovský
    Posted at 17:47h, 09 June

    gradient linear doesnt work on background only on background-image. right?

  • Rohit Negi
    Posted at 19:43h, 11 June

    Hey can you give us the final file as well it would make things much more easier

  • errazzouqi abdellatif
    Posted at 22:11h, 12 June

    Hello guys , please check t my portfolio web site and give me your opinions about it :

  • Matt Farla
    Posted at 09:31h, 18 June

    When i click on the hamburger menu, it does not animate fully into a cross. The bars just turn downward 45 deg and thats all. I have checked all the css and js but still it wont animate like it is supposed to. Any idea why?

  • Faidat Yusuf
    Posted at 11:17h, 19 June

    Thank you for this video..

  • Maxim Vasilov
    Posted at 20:24h, 24 June

    Please english subtitle

  • Maxim Vasilov
    Posted at 00:57h, 26 June

    Coding with Julio

    I can't make the menu

    Here is my code, what's wrong?
    /*Start global*/


    margin: 0;

    padding: 0;

    box-sizing: border-box;



    font-size: 10px;

    font-family: 'Roboto', sans-serif;

    color: #eee;



    width: 100%;

    height: 100%;

    background: url("images/sitebg.jpg") no-repeat center fixed;

    background-size: cover;



    text-decoration: none;

    color: #eee;



    font-size: 1.8rem;

    font-weight: 300;



    width: 100%;


    /*End global*/

    /*Start reusable*/

    /*End reusable*/

    /*Start header*/


    width: 100%;

    height: 100vh;



    width: 100%;

    height: 100vh;

    position: fixed;

    top: -100vh;

    background-color: #16162d;

    border-bottom-right-radius: 100%;

    border-bottom-left-radius: 100%;

    transition: all 650ms cubic-bezier(1,0,0,1);



    list-style: none;

    width: 100%;

    height: 100%;

    display: flex;

    justify-content: center;

    align-items: center;



    margin: 0 2rem;



    font-family: 'The Historia Demo', sans-serif;

    font-size: 5rem;

    padding: 1rem;




    background: linear-gradient(to top, #ffe838, #fd57bf);

    -webkit-background-clip: text;

    -webkit-text-fill-color: transparent;


    top: 0;

    border-radius: initial;



    position: absolute;

    top: 5rem;

    right: 5rem;

    width: 5rem;

    height: 4rem;

    display: flex;

    flex-direction: column;

    justify-content: space-between;

    cursor: pointer;

    z-index: 1500;

    transition: transform 650ms ease-out;


    transform: rotate(-45deg);



    background: linear-gradient(to right, #ffe838, #fd57bf);

    width: 100%;

    height: 4px;

    border-radius: .8rem;



    width: 50%;



    transform-origin: right;

    transition: transform 650ms cubic-bezier(0.54, -0.81, 0.57, 0.57);


    .open .bar.start{

    transform: rotate(-450deg) translateX(.8rem);



    align-self: flex-end;

    transform-origin: left;

    transition: transform 650ms cubic-bezier(0.54, -0.81, 0.57, 0.57);


    .open .bar.end{

    transform: rotate(-450deg) translateX(-.8rem);


  • Jensen Covington
    Posted at 15:19h, 01 July

    I was curious if it would be okay to use this layout. im not sure how copyright works and i wanted to ask before doing anything. awesome tutorial!

  • Huynh Luong
    Posted at 04:11h, 02 July

    hi, the font "The Historia Demo" use your local?

  • Eveline Novati
    Posted at 07:25h, 04 July

    can i change the background image into video?

    btw, thank you for this tutorial! you helped me alot!

  • juan Mendez
    Posted at 20:14h, 04 July

    Thank you very much, this was very useful.

  • Praveen M P
    Posted at 06:44h, 07 July

    Hi Julio,
    I need some help. The bars are not visible for me. Can you suggest me some idea?

  • Maurice Principé
    Posted at 20:06h, 09 July

    hi julio,

    do you have this on github by any chance? i'm having trouble keeping track of the different tags you're using and it would be super helpful if i can see the code written. is this something you're comfortable sharing to the public? let me know! thanks 🙂

  • Eldar Adylbekov
    Posted at 15:54h, 11 July


  • chamal madhutharanga
    Posted at 18:41h, 14 July

    Make it slow and make it with very very beginning because some of that link i don't no where to get

  • XelaG Beats
    Posted at 14:22h, 17 July

    Hey guys I have 2 problems with the website. When i go in the menu and click on one of the text the menu doesn't leave. Also my going back to the top button is at the top of the page and i can't figure out why

  • Jackson McCluskey
    Posted at 07:01h, 18 July


    Posted at 17:17h, 18 July

    Julio I have a problem, if go in the menu and click on one of the text the menu doesn't leave.

  • Nan Su Ya
    Posted at 06:51h, 24 July

    Hi .. my toggle menu didnt show up.. could you help me with this problem ?

  • Stack Money809
    Posted at 18:37h, 28 July

    I am having an issue with the navbar. whenever I open the nav bar the X in the top right is not appearing.

  • emmanuel segun
    Posted at 20:37h, 03 August

    my menu toggler is not showing pls how can i fix this im stuck

  • Md Albern
    Posted at 10:05h, 04 August

    can i get the links which your using because the font awesome link in your video got slightly hidden so i can't see proper link and one more thing i can get to show my social media icons in local host please help me out in this problem.

  • Md Albern
    Posted at 17:22h, 05 August

    I was working on nav-bar in CSS but its not coming at the right side and in my code there is change i have seen that in linear-gradient(to right, ——–, ———) the "to" in the column is changing its color so i don't know why can u help me out.