| Deadline | Folder name |
|---|---|
| 10.03.2019 23:59 | hexal |
Create a web page, strictly according to:
PSD:
JPG:
The reference point here is a successful per-pixel comparison via Pixel Perfect extension.
PerfectPixel extension for chrome
Browser Support: Google Chrome, Mozilla Firefox, Microsoft Edge.
Create a new private repository named hexal in your Github account and upload your HTML and CSS files.
If the task is fully completed, and no defects are found by mentor, you are awarded 100 points. This concerns the markup and use of HTML and CSS.
You must use pure HTML and CSS in your solution. Fonts and images must be hosted locally in the assets folder.
- Failure to submit on time may result in losing up to 40 points of the total homework score!
- Failure to comply with the requirements of any task item may result in losing 3 to 10 points.
- Failure to comply with coding standards or syntax requirements may result in losing up to 20 points.
- Failure to comply with the PSD template (except for nuances with fonts) may result in losing up to 40 points.
Fully responsive layout is not required. “Interactive“ means effects or animations depending on user's actions, like on hover or on click.
- Header.
- Interactive nav.
- Think of where
h1should be used. - Header triangle must be centered horizontally.
- Main.
- Slider is not required, but allowed.
- Hex blocks must be positioned as shown on the PSD template.
- Care about lines and colors.
- Social network icons must be interactive.
- Add hyperlinks to social network icons.
- Footer
- Must include a form with relevant inputs and textarea.
- Required fields must be validated on the client side.
- Phone number and email address must be clickable (for example, when a user clicks the phone icon, a prompt appears that allows the user to call this number)
There is a useful tool to manipulate triangles: http://apps.eky.hk/css-triangle-generator/
To simplify work with CSS syntax and selectors, you can use CSS3 generator at: http://css3generator.com/
There’s a good design tool: https://studio.psdetch.com/ No sign-up is required, just click the “open” button or drag&drop the downloaded PSD template. Yes, its functionality is rather limited, but it is perfectly suitable for work with layers. If you need to extract an image, the “export” function is available. It is perfectly functional to meet all the needs you would encounter in this homework.
However, if you lack some of the functionality when using the previous service, give Photopea a try. No sign-up is required, too. It can handle .psd, .sketch and a variety of other formats. It also supports work with layers and export operations (including .svg format). Another advantage is that its interface is very similar to that of Photoshop.