http://www.linode.com/designcourse – Use code ‘DESIGNC19’ to get $20 credit on your new Linode account!
– Today, you’re going to embark on a journey into the world of Frontend Development! In doing so, you’re going to utilize HTML, CSS & a tiny bit of JavaScript to create an actual website layout that works on multiple devices (yes, it’s “Responsive”!). Throughout this course, I assume you have no experience building sites or apps — BUT, this is a *Crash Course*, which means we pack a LOT of content in a relatively short amount of time. The purpose of this course is to get your feet wet and determine if Frontend development might be right for you. You will get to see the full picture of what a Frontend developer does!

Download the 2 photograph assets from here:
https://unsplash.com/photos/D-vDQMTfAAU
https://unsplash.com/photos/8Vh6ulKc50o (I modified this image slightly, which is available here: https://coursetro.s3.amazonaws.com/tutorial_images/bg.jpg (download this one)).

The full project code is available here:
https://codepen.io/designcourse/pen/zYxPOEP

Let’s get started!

– – – – – – – – – – – – – – – – – – – – – –

Subscribe for NEW VIDEOS!

My site: https://designcourse.com
My personal FB account: http://fb.com/logodesigner
Coursetro FB: http://fb.com/coursetro
Coursetro’s Twitter: http://twitter.com/designcoursecom

Join my Discord! https://discord.gg/a27CKAF
^-Chat with me and others

– – – – – – – – – – – – – – – – – – – – – –

Who is Gary Simon? Well, I’m a full stack developer with 2+ decades experience and I teach people how to design and code. I’ve created around 100+ courses for big brands like LinkedIn, Lynda.com, Pluralsight and Envato Network.

Now, I focus all of my time and energy on this channel and my website Coursetro.com.

Come to my discord server or add me on social media and say Hi!

source

42 Comments

  1. Hey all, 2020 is going to be huge here. I'm releasing several LARGE courses (the first one on Scrimba.com!) — So be sure to subscribe up for the ride! ALSO — If you are an absolute beginner to frontend development, expect to feel like you got hit by a truck after watching this video. But that's the purpose of a crash course, there's a LOT of info packed into a short amount of time. There's a reason why there are courses that are literally 10-20 hours long, on JUST HTML alone. But this course will really help you get a feel for what it's like to work as a frontend developer on a project you might encounter. Don't be discouraged if you still feel overwhelmed by the end of the course — that's to be expected. Keep on taking courses and tutorials though, and I guarantee you it will begin to click a little bit more each time!

  2. Assignment Done!
    "For those who are wondering"
    <script>
    let btn = document.getElementById("ctn-btn");
    let overlay = document.getElementById("overlay");
    btn.addEventListener("click", () => {
    overlay.style.display = "grid";
    overlay.classList.add("animate-overlay");
    });
    overlay.addEventListener("animationend", () => {
    overlay.classList.remove("animate-overlay");
    overlay.style.display = "none";
    });
    </script>

  9. what have i done wrong if in the live server nothing is being showed. Alaso does it matter what type of computer you are on becasue im on a gaming laptop and when creating folders with command prompt it reads c:UsersGaming

  19. Hi sir, question please I had a massive stroke in 2019 that caused a significant amount of brain damage and left me stuck in a wheelchair. I've always loved technology and even have a computer science degree. For my issues would you recommend I continue with your crash course or try another avenue? Thank you!

  31. I can not understand why at around 1 hour mark when I put background with oranges in CSS, next to color code, they do not appear after I save. And also blue background color changes to lighter color.

  33. The way I removed the animation was:
    keyframes overlay {

    0% {

    opacity: 0;

    }

    30% {

    opacity: 1;

    }

    70% {

    opacity: 1;

    }

    100% {

    opacity: 0;

    overflow: hidden;

    visibility: hidden;

    }

    I just added the Visibility property and overflow, both as hidden…. It was really cool to be able to do that myself. thank you so much for the course.

Leave A Reply

Please enter your comment!
Please enter your name here