HTML CSS and Javascript Website Design Tutorial - Beginner Project Fully Responsive

HTML CSS and Javascript Web site Design Tutorial – Newbie Venture Totally Responsive

by



Discover ways to construct an internet site utilizing HTML, CSS, and Javascript on this newbie undertaking tutorial. The positioning will likely be absolutely responsive and you may navigate to different pages and add your personal customized design.

If you wish to observe me alongside my coding journey, you’ll want to subscribe 🙂
https://www.youtube.com/channel/UCsKsymTY_4BYR-wytLjex7A?sub_confirmation=1

Timeline
0:00 Net Design Intro
1:15 Creating our Venture Recordsdata
4:26 Including our Navbar code
9:44 Including our Navbar CSS
33:08 Including Fontawesome Icons
34:48 Creating Hero Part
37:20 Getting our illustration
39:00 Including Hero Part CSS
43:50 Including Google Fonts
52:38 Including Our Companies Part
54:23 Including Companies Part CSS
57:38 Getting our photographs
1:07:17 Including Footer Part
1:13:52 Including Footer CSS
1:24:15 Navigating to a different web page

Supply Code starter photographs
https://github.com/briancodex/html-css-website-v1

Host your web site for Free

CSS Mega Dropdown Menu

Adobe XD to HTML & CSS Web site


source

48 thoughts on “HTML CSS and Javascript Web site Design Tutorial – Newbie Venture Totally Responsive”

  7. With all the positive comments I feel a bit like a douche here, but I can't find what program you're using. I'm using Mac, and I'm using TextMate which doesn't allow me to do things like "press dot and then tab and then autofill", so I'm having to write it out. But then nothing seems to be explained. Shame really, because this looked like it was going to be a great tutorial for me.

    Reply

  24. Great video! I seem to have an issue where I'm testing the site on the live server and then when I upload it to my web server some parts of my CSS seem to not apply. Any idea why this might occur? For example, I have made the navbar links to max-content because the text was wrapping, and it works fine in testing on the live server, but when I upload the site to my domain the text is wrapped even though the code is exactly the same as the live server in testing. I'm confused.

    Reply

  25. So I decided to learn to code websites and this was the first tutorial I watched. You have no idea how good it feels to have a little website this beautiful after a few hours with literally no experience at all! You sir are amazing!! Thank you so much! :))

    Reply

  36. Hi Brian,
    Can I ask you about 19:40? I followed all your steps and recheck all my codes to match yours, but when I check the result of the page, it only shows an orange box, as there is no "Sign up" text word in the box and all my text color are still orange instead of white color like yours. I check my
    .navbar__link {

    color: #fff;

    display: flex;

    align-items: center;

    justify-content: center;

    text-decoration: none;

    padding: 0 1rem;

    height: 100%;

    }

    .navbar__btn {

    display: flex;

    justify-content: center;

    align-items: center;

    padding: 0 1rem;

    width: 100%;

    }

    .button {

    display: flex;

    justify-content: center;

    align-items: center;

    text-decoration: none;

    padding: 10px 20px;

    height: 100%;

    width: 100%;

    border: none;

    outline: none;

    border-radius: 4px;

    background: #f77062;

    color: #fff;

    }

    Reply

  37. Hello guys! I have problem with this. Some error about compatibility webkit and moz background. Pls help me with this!!!Tnx!!
    #navbar__logo{

    background-color:#ff8177 ;

    background-image: linear-gradient(to top,#ff0844 0%,#ffb1 100%);

    background-size: 100%;

    -webkit-background-clip: text;

    -moz-background-clip: text;

    -webkit-text-fill-color:transparent;

    -moz-text-fill:transparent;

    display: flex;

    align-items:center ;

    cursor: pointer;

    text-decoration: none;

    font-size: 2rem;

    Reply

Leave a Comment