Digital Publication Platforms is a fancy name for the coding, accessibility, and publishing on the web course I am taking as part of my Master’s Degree in Content Strategy at FH Joanneum.
One of the assignments was to prepare an HTML and CSS “business card” – a simple website that represents us and our portfolio.
The only short-lived and unmemorable HTML adventure I have ever had happened in secondary school when I created a tribute to Evanescence – the band that provided the soundtrack to my moping teenage years – for the IT class.
It was an elaborate image map, and I got a “5” (very good in the Polish educational system). Should have been a “6”!
I never crossed into the CSS territory up until November 25, when I bought the Complete Web Development Bootcamp and started learning.
I noted all of the resources I used to create my website on this page. Scroll to the very bottom of this post to see the final product.
HTML and CSS Courses
The Complete 2023 Web Development Bootcamp on Udemy taught by the charismatic Dr Angela Yu from the App Brewery.
Software
Visual Studio Code – Microsoft’s source code editor which runs on your desktop and is available for Windows, macOS and Linux.
Visual Studio Extensions:
- Live Preview – allows you to preview the website directly in VisualStudio
- Prettier – Code formatter
HTML and CSS Guides
- Mozilla HTML and CSS Guides
- Web Hypertext Application Technology Working Group (WHATWG) – HTML standards reference
- HTMHell – a collection of bad practices in HTML copied from real websites by our HTML and CSS course teacher, Manuel Matuzović.
Layout – my nemesis
This was the most difficult part of the whole learning process. I was told that CSS layout is tough overall, which, luckily, meant that there were a lot of resources available to approach the topic from different angles.
Here, I want to applaud the unsung heroes of coding who put out tutorials and videos with painstakingly documented steps. *claps in an empty living room*
HTML structure:
- Semantic HTML elements explainer video by ByteGrad, who discusses the purpose of such sections as <main> or <header> over <div>
Flexbox:
- A Complete Guide to Flexbox by CSS-Tricks with a printable poster. It’s the best cheat sheet there is.
- An Interactive Guide to CSS Flex Box by Fjolt with a flexbox generator.
+ Examples of layouts:
- Ten modern layouts in one line of CSS – I found this post very helpful. It’s a summary of the ten most popular layouts.
- Chrome CSS Overview – a useful feature to use when analysing other website’s CSS
- A list of the best portfolio websites by awwwards – I looked at a lot of code in Developer Tools. This site has a nice collection of clean and creative portfolio designs.
- CodePen – the best helper! I spent a lot of time on CodePen searching and finding examples of the elements I needed (with proper terminology!) that I then deconstructed and replicated as much as possible with my beginner skills.
- FreeFrontend’s HTML and CSS section – very similar to CodePen.
Design
- Adobe Colour Wheel – check Explore and Trends to see ready-to-go colour palettes.
- Randoma11y – Accessible color combinations
- Favicons – free favicons. You can also fashion your own in a free favicon generator. (It’s the small things, you know?)
+ CSS effects
- CSS Colour opacity generator
- Glassmorphism CSS Generator – by @miketromba
- Box shadow generator that saved my sanity.
- CSS Tint and Shade generator
- CSS gradient background – by Alison Quaglia via CodePen
- Pure CSS Pixelated Image Hover Effects (video) by Online Tutorials
+ Fonts and Special Characters
- Free Google Font pairings for those like myself who have not been gifted the ability to instantly pick complementing fonts. (I was queueing up for strategic thinking skills when talents were being handed out in heaven ha ha #Polishdadjoke)
- SYMBL – A useful website to find emoji UTF-8 characters.
- Modular Scale Calculator – Calculate text size and visualize how it will look on a page.
- Archetype App – Visualise font pairings
- Font Awesome and their installation guide
- I found this YouTube tutorial really useful as I was struggling in the beginning with how to link the assets. This video tells you how to link to a Font Awesome external CSS available via an existing CDN.
Accessibility
My Website
Banner image credit: browser mockup by Mainuddin Mahmud via Behance