https://nervous-lovelace-1a0fd2.netlify.app/index.html
In this project, you’re going to be building and deploying in your first fully responsive website from Desktop size to Mobile, using the technologies you’ve learned so far: HTML, CSS & JavaScript, without dependencies. (Made in 3 days).
Later in the course, you’re going to learn how to create more complex web applications using Vue.js on top of JavaScript. However, it’s important that you practice the basic coding skills you’ve learned so far before moving on to more complex tasks.
- Your website should be rendered in a browser.
- Include separate HTML / CSS / JavaScript files.
- Have a repo on GitHub.
- Have at least 1 commit per day that you worked on it.
- Be deployed online using Netlify so that anybody can access it.
- Stick with KISS (Keep It Simple Stupid) and DRY (Don’t Repeat Yourself) principles.
In summary, for this project, you’ll have to recreate a pre-existing design using your HTML & CSS skills. You’ll also have to create a few interactions with the DOM, using what you’ve learned about JavaScript so far.
Finally, you’ll have to deploy this project to Netlify, using the Git CLI to do so. When you’re finished, you’ll have your first website live and ready for anyone to interact with it!
- The URL of the GitHub repository for your project.
- The URL of the live website on the Internet.
- The URL of the slides for your project presentation.
- You must present your project during Mid-term final presentations.
For this project, you’ll have access to the following assets:
- A Figma design that you will have to turn into a live, responsive website. This design also includes a few specifications regarding fonts and colors
- A folder with all the images you will need for this project.
You can download all assets from the following project assets Google Drive folder.
You’ll be building a website for a fictional web design company. This includes a few pages:
- a home,
- a “project” page and
- a contact page with a form.
Some of the challenges you’ll have to complete will be the following:
- adding navigation between the pages.
- making all the fields in the contact form required before being able to submit it.
- (bonus) adding animations to different sections, like the “recent projects” cards.
Besides your usual IDE, you will need to create a Figma account in order to open up the design that you’re going to replicate. Creating an account is completely free.
We recommend you download the desktop Figma app for this project. Once you’ve created your account and downloaded the software, you just need to import the .fig file you’ll see inside the Assets folder and you’ll be set.
We’re going to review the basics of Figma together; but if you want to dive deeper into the use of this software, you can watch this introductory video.
During a real-world web development project, most of the time you’ll have to use the design file you get in order to build a website. Here are some of the tasks you’ll have to do in most of your projects:
- Export the assets you’re going to use.
- Review styles (sizes, margins, fonts, colors, etc.).
Before starting the project, we’re going to review the basics of Figma just so you know exactly how to use it in order to create your first responsive website.
As is the case with most professional projects, for this task you’ve received a design prepared for a desktop screen. However, as you know by now, you always need to keep mobile devices in mind.
One of the main challenges of this project is to adapt the existing design to all screen sizes. You are free to modify any aspect of the website as you see fit in order to make it compatible with mobile devices.
The last task of this project is to actually deploy your website once it’s completed. For this particular project, we’ll be using Netlify, a static web page hosting service.
Deploying to Netlify is pretty simple: you just need to create an account, connect it to your Github repository and enter a few commands in your CLI; and you’re good to go.
However, here’s a guide showing you how to deploy a static website using this service that you can follow once your project is completed.
For each of the projects you create at Ironhack, you will also have to make a presentation about it. Communication (including public speaking) is an important skill to practice for finding your first developer job after Ironhack and for later.
- Talking with Slides: 3 minutes
- Demo: 2 minutes
- Total: 5 minutes
- All presentations will be done from a staff member’s computer, so your slides need to be online.
- PowerPoint files, Keynote files or files of any kind will not be accepted.
- Suggested online slide applications:
- Slides
- Prezi
- Google Slides
Upload it on Github Pages or Netlify