Start applying additional CSS using your custom.css file. Also be referencing and using the skeleton.css file. This should be similar process to the Skeleton exercise we did.
Project Specs Reminder
Click to see specs:
single-page (unless your concept promotes multiple pages then I am open)
html / css / Skeleton css framework
responsive (desktop + mobile breakpoints)
works on Chrome
at least 1 css animation or transition
Google Fonts and/or Typekit Web Fonts
1,000 words approx.
original or copyright-free assets
optimized images
organized files / folders / code (utilize comments and indention in the code)
Select the images throughout your Frames and click “Export” on the bottom right panel.
Choose the file format – PNG, JPG, SVG
Click on “Export” button
Files go to your Downloads folder
Adobe XD
PNGs and JPGs:
Select your images throughout your Artboards and click on “Mark For Export” on the bottom right panel.
Go to File > Export > Batch
Choose your file format and “Design” and save to an “images” folder in your “project-2” folder
SVGs from XD (vectors):
This format is widely used for icons or other vector assets which need to scale on different screen sizes without losing quality, for example in responsive websites.
When exporting as SVG, you have two options to choose from:
Embed: the bitmap image you are saving is placed into the SVG file itself.
Link: the bitmap image you are saving is stored separately, and a reference to it is added in the SVG file.
In doubt, just choose the Embed option.
You can also tick the “Optimize asset” checkbox if you want lighter assets in terms of file sizes (the code within the SVG file will be minified, resulting in smaller file).
In Photoshop- PNGs and JPGs:
Go to Export > Save For Web (Legacy) > Choose File Format > Save. If you want something transparent – choose PNG-24 or PNG-8.
Structure: start to write out divs including containers, rows, and columns, h1 – h6 and p. You can refer to the Skeleton Exercise for help. Base your columns and amounts off the 12-column grid system.
Text: Copy and paste your text into the corresponding locations on the page.
Images: Start to link your images in corresponding locations on the page. If the image is going to be included as a background-image in the css, you can save it for the next step.
