Hackathon opdracht WincAcademy Hackathon: make your own website using HTML/CSS
Live preview: https://hackathon-assignement.netlify.app/
An event in which a large number of people meet to engage in collaborative computer programming.
"a series of 48-hour hackathons to build new web and mobile services"
For this hackathon, you're going to combine all your obtained knowledge. You'll need to use all the skills you've learned throughout this course, and you might be surprised by how much you know by now!
The goal of the hackathon To have you use all of your current HTML/CSS knowledge to create a website you're proud of.
Remember to take breaks regularly
Minimal requirements Make sure your website meets at least the following requirements. The more, the merrier!
Use a clear subject for your website: "My website is about...". Create multiple pages. Use at least 5 different HTML elements. Use semantic HTML elements in the right places. Put CSS in a separate stylesheet (do not use inline CSS (= CSS inside of an HTML file)) Do not use CSS frameworks. Use margin, padding, or border in at least 2 different places on your website. (a.k.a: prove that you know how the box-model works) Use at least 1 image. Use at least 2 links. Use media queries, making your website look different on mobile and desktop. Use CSS-grid to create a layout and position all elements on a page. (Only required if you've been taught about CSS-grid during the course) Use flexbox to position elements (Only required if you've been taught about flexbox during the course) Create at least 1 form. Your website should be mobile-first. Your base CSS should be for mobile devices. Use media queries to make your website look nice on desktop. Don't forget the mobile view meta-tag (see note below). We will pay attention to the cleanliness of your code: Pay attention to any spelling errors (use a linter). Make sure your code is formatted correctly. Use spaces and enters properly. Note: Don't forget to add the following HTML meta-tag to the element in index.html:
This will make sure your website is viewed with the proper scale on mobile. Without this tag, some mobile devices will use a different resolution. When this happens, the mobile screen may end up showing CSS that was intended for desktop views.Bonus features If you want to add more to your website, here are some things you can add:
embed a YouTube video. Use a lot of pretty images, such as those from stock photo websites. Use media queries for more screen sizes, such as a tablet. Use colors that work well together. Use external libraries like Google Fonts to add extra CSS to your website. Use a more complex form with many different types of input fields.