Challenge goal: The goal of the present challenge is to acquire and consolidate knowledge on HTML (a markup language) and CSS (a stylesheet language) by using them both to create a static webpage (no iterations with the user, show a display of content) based on a provided design.
Target level: This is an entry level course, no prior knowledge of programming is needed.
Final accomplishment: By the end of this course you'll be able to create static webpages using HTML and CSS. A webpage completely done by scratch based on a predefined design.
Design: Figma
- Have HTML and CSS split in two files:
- index.html;
- styles.css.
- Use the images from the resource folder (you can also export them on Figma, if you are up to an extra challenge);
- HTML semantics usage (make sure you are using the correct tags);
- CSS Grid and Flex box are mandatory;
- Don't use inline styles.
- Preferably, use an Integrated development environment (IDE) or code editor.
- Suggested Editor: Virtual Studio Code - VS Code (https://code.visualstudio.com/download);
- Any browser, preferably your favorite.
- Fork this repository and clone it;
- Open your index.html file and open it in your favorite browser (IE doesn't count 😆);
- Every change you make to your HTML or CSS you'll need to refresh your webpage on your browser.
- Right click on your webpage and click on inspect to open the dev tools that will help your work. Use the elements tab (or inspector on firefox) to check the HTML and CSS you're applying to your webpage;
- Not all HTML and CSS features work on all browsers. For more information, you can check on Can I Use if the feature is supported (https://caniuse.com/);
- Check if the code editor of your choice has any extensions that can help you:
- If you chose to use VS Code, you can use Live Server extension that will live reload your browser: https://github.com/ritwickdey/vscode-live-server.