DEV Community

Cover image for Make NASA's landing page in 50 minutes - CSS & HTML
Sebastian
Sebastian

Posted on

1

Make NASA's landing page in 50 minutes - CSS & HTML

Make the landing page of nasa.gov in 50 minutes - YT tutorial

Checkout the finished website here:
https://nasa-landingpage-clone.netlify.app/

Watch the YouTube tutorial:

Hello, and welcome to my blog! 😊

In this video, I make a clone of the nasa.gov landing page. The main purpose of this tutorial is to get some good practice with css grid and css flexbox by building real world projects. This website is also fully responsive.

You can view all the code on Github:
https://github.com/SebCodesTheWeb/NASA-landingpage

--How it's structured--

The markup is simple. It is separated into three parts. A header, main content, and a footer. The main content is made of a grid that responsively changes depending on the viewport width. The header is also a grid combined with flexbox children for easy alignment. The footer is a flexbox in itself.

--About me--

Hello! My name is Sebastian, and I'm a high-school student from Sweden. I have dabbled with some front-end development for the past few months. And since Christmas brake finally arrived, I've decided to start a challenge for myself! I'm going to code for the coming 20 days.

I'm following the front-end career path at Scrimba and I'm currently at module 8 (Flexbox, Grid and Fetch)

By the end of the 20 days I'm hoping to have finished the front-end career path and have started with some backend Node.js development. I will be documenting my progress for the coming days, and filming myself on my Youtube-channel, so feel free to follow along my journey and learn with me!

--Social Media--

Speedy emails, satisfied customers

Postmark Image

Are delayed transactional emails costing you user satisfaction? Postmark delivers your emails almost instantly, keeping your customers happy and connected.

Sign up

Top comments (0)

Billboard image

Create up to 10 Postgres Databases on Neon's free plan.

If you're starting a new project, Neon has got your databases covered. No credit cards. No trials. No getting in your way.

Try Neon for Free →

👋 Kindness is contagious

Please leave a ❤️ or a friendly comment on this post if you found it helpful!

Okay