As a writer, an expat and a gay woman relocating from hectic East London to suburban Dublin on a quest for a slower, more mindful life, I have a first-hand understanding of the importance of a welcoming community who share the same interests.
Writing Room is a website for a creative writing and mindfulness group in Malahide and other towns in North County Dublin, Ireland. Its main purpose is to create an inclusive, safe and meaningful space (physical and online) for writers to write, develop and connect by sharing their stories. It hopes to promote creativity and mindfulness by organising regular topic specific events, workshops and meetups.
The target audience are new and established writers of all backgrounds and nationalities who are looking to write regularly, grow and socialise together, and are based in the north areas of Dublin.
Writing Room site will be useful for local creatives as a platform to connect with like-minded people. Interested writers will be able to easily learn what local writing and mindfulness events are coming up and how they can join them. Geographical proximity of the event locations eliminates the long commute to Dublin city centre which might motivate any hesitant writers to meet and write regularly which will help them to achieve their creative goals.
- to provide a platform for creative adult community living in North County Dublin to connect and participate in a variety of events
- to promote creative writing and encourage regular writing routine by organising writing workshops and meetups
- to evoke interest in mindfulness and its benefits for creativity
- to have access to writing and mindfulness events that take place locally and can be attended regularly without long commute to the city center
- to find clear information on the group purpose, location and signing up process
- to learn more about mindfulness and the creative process
- to join the group by signing up for a selected event
- to create online presence for the writing and mindfulness group in North County Dublin, Ireland
- to promote creative writing by organising writing events
- to gain new group members and create a community of like-minded people
- adult writers at any skill level and of all backgrounds
- living in and around Malahide, Portmarnock, Kinsealy, Skerries and Swords, North County Dublin
- writers new to Dublin
- writers looking to get motivated to write regularly
- creative adults looking to connect and socialise within a like-minded community
- creative adults looking to slow down and introduce mindfulness into their creative process
While researching writing and creative groups in the area, I found that the majority of them are based in central Dublin. Long commutes can demotivate and discourage attending workshops and writing events regularly, alienating writers living in suburbia from the writing community. The very few groups in north parts of Dublin are either closed for new members or provide very limited group information and don’t have a dedicated website. This project fills the gap by providing a clear and accessible platform to encourage creativity, mindfulness and foster a sense of a community for writers in a suburban area of Dublin.
This site is based on the B2C model although the visit doesn’t finish with an actual purchase as all the events are free to join. It satisfies emotional triggers of the visitors to this site, provides them with clear and easily accessible information on the subject, and guides them to join the group by submitting the sign up form. It stands out as other writing groups have either no online presence or their websites have poor UX, or overcomplicated design and content overload.
-
First Time Visitor Goals:
-
As a new visitor to the website, I want to immediately understand what the site’s purpose is so that I can decide if it’s what I’m looking for
-
As a visitor, I want to easily navigate the site so that I can find what I need efficiently
-
As a visitor, I want to immediately understand where the group is based so that I can decide if it’s relevant to me
-
-
Interested Visitor Goals:
-
As a interested user, I want to see the schedule of current events so that I can decide if I want to attend
-
As an interested visitor, I want to know what the past events looked like so that I can decide if I’m interested in joining the group
-
As an interested visitor, I want to understand the signing up process so that I know how to join the selected event
-
As an interested visitor, I want to be able to download the reading list so that I can get ready to join the C event
-
As an interested visitor, I want to be able to easily contact the site owner so that I can ask questions or share ideas
-
As an interested visitor, I want to be able to sign up for a newsletter so that I don’t miss any updates or events
-
As an interested visitor, I want to be able to easily find the social media pages of the group so that I can follow them for any updates
-
-
Frequent Visitor Goals:
- As a frequent user, I want to be able to access the site easily on my chosen device so that I can check the schedule on the go
-
Site Owner Goals:
-
As a site owner, I want to create a site with great UX so that the users are inclined to return to it
-
As a site owner, I want to be able to be contacted from the users via a contact form and social media, so that I can communicate with them and answer any questions
-
The site has a simple layout of 2 pages with the home page containing the highest priority information, and the second page providing an option of further reading on mindful writing for interested visitors, without distracting them from the main content on the home page.
Navigation elements are conventionally placed in a horizontal fashion at the top of the browser window. On their visit, the user lands on a page with an eye-catching hero image which includes a compelling slogan and a call to action button that encourages them to join the group. From here, the user can immediately tell if the group is of interest to them, as it conveys the purpose of the meetups and their location.
Further information is progressively disclosed as the user scrolls down through the page. The group ethos section allows the user to learn more about the group’s setup and benefits. Next, they are introduced to a short text on mindful writing with an option to read more by clicking on a hyperlink to the second page. They can either click it and once done with reading, come back to the home page or continue scrolling through the main page and visit the second page later by clicking the Morning Pages section in the navbar. Next on the homepage, the user is taken to the events schedule where they can view all scheduled events at one glance. A join us button allows them to skip the rest of the content and go to the signup form immediately. Otherwise, the user continues to scroll down through the page to find a gallery to see what past events looked like and get reassured in joining the community.
This is followed by a location page with a map, a contact form and a footer with social media links and an option to sign up for a newsletter. From there, the user also can return to the top of the page by clicking the back-to-top button.
Links to events and contact pages are also presented in the navbar, to allow returning visitors to quickly access the information that will be of most relevance to them.
For consistency of user experience, the site logo, navigation links and footer are repeated on the 2nd page. The second page contains a larger block of text accompanied by a decorative image and an option to go to events schedule. The user has an option to navigate back to the home page or go to the contact form as well via navbar links.
Low fidelity mock-ups were made using Balsamiq to help plan and visualise the navigation design, placement of information, features, relationship between the content and usefulness. They were created for 3 main screen sizes: mobile, tablet and desktop.
-
Colour scheme
The colour palette consists of calm, subdued colors that compliment each other and evoke mindful mood throughout the site.
Majority of them was derived from the hero image colours using Eye Dropper and the remaining colours were added to the scheme using the colour scheme generator Coolors. White was used for text on buttons, for best contrast.
opal: #c5e0d8ff
blue-sapphire: #186577ff
silver: #c9c9c9ff
old-lavender: #846577ff
gunmetal: #2a2d32ff
Apart from the above, white was used for text on buttons for best contrast.
-
Typography
The fonts were sourced from Google Fonts
Courgette, cursive Used for logo and headings, with cursive as a fallback font in case the original font family isn't imported correctly for some reason. I've chosen this font as it's imitating handwriting which supports the goal of the Writing Room group, focusing on creative writing and writing by hand.
Montserrat, sans-serif Main font for the body. This is a clean, popular and very readable font that I've chosen to contrast with the more decorative style of the logo and headings. Sans-serif is the fallback option.
-
Imagery
All images were sourced from Unsplash, Pexels and Pixabay.
Large image of a desk with typewriter and notebook was chosen for the hero image to provide an illustration to the group purpose and serve as a clean background for the slogan and location information.
Other images are used either as a decoration accompanying larger blocks of text to provide a balanced content and ensure user is not overloaded with text, or as the actual site content (gallery).
-
Navigation
-
Conventional horizontally aligned navigation bar with 4 navigation links exists on both pages
-
Navigation bar is always at the top of the page
-
The site logo is clickable and allows the user to return to the top of the homepage from any location on the site
-
The menu links are highlighted in a different colour on hover
-
On mobile screen, navigation menu links are displayed underneath the logo
Desktop:
Mobile:
-
-
Landing Page with a hero image
- Large hero image covers the viewport to grab attention and focus the user on the group purpose
- Overlay cover text provides information on group location
- Slogan reiterates the group ethos
- Call to action button that changes colour on hover invites the visitor to explore the page further and eventually sign up for an event
Desktop:
Mobile:
-
Intro Section with a Quote
- Blockquote is used to further highlight the creative and mindful philosophy of the group
- Intro to Writing Room consists of 4 decoratively styled text blocks with reasons to join the Writing Room
- The icons have been added to headings to visually separate the text and to add a more attractive look to the section
- Large block of text with a decorative image to the right provides the group background and conveys its mission
- The elements stack on top of each other on smaller screens
Desktop:
Mobile view 1:
Mobile view 2:
-
Mindful Writing Section
- This section provides introduction to mindful writing and the large block of text is accompanied by a decorative image on the left to prevent content overload
- For interested visitor, there is an option to click on Find out more link and read another related text on the second page, Morning Pages
- As with all other sections, on smaller screens the individual element get stacked on top of each other
-
Events Schedule
- Type of events are displayed in 4 blocks grouped by the event type
- Each block contains event name, day, time and location
- Morning Pages block includes a link to further reading on Morning Pages for the users who want to learn more
- Mindful Reader Bookclub block presents the user with an option to download the current reading list in PDF so that they are informed about upcoming event topics
- This section will be maintained by the site owner with any updates to the events
- Blocks have alternating colours to make the page more attractive but still simple
- In this section, an interested user has an option to skip the rest of the content and use the link to the contact form or click on the call to action button to jump to the sign up form
- Individual blocks are responsive and get stacked on top of each other on smaller screens
Desktop:
Mobile:
-
Gallery
- Masonry style gallery includes photos from previous events to help the user decide if they are interested in joining the group
- It is responsive and changes to 2 columns on small screens
Desktop:
Mobile:
-
Location
- Address and links to the venues are included in this section
- Embedded Google map with the main location marked allows the user to check the exact location of the meetup place and plan their route
- The external links open in a new tab to allow the user to keep this page open
- On smaller screens, the map shows underneath the text block
Desktop:
Mobile:
-
Contact Form
- The form allows the user to sign up for a chosen event or ask a question
- Name and email fields are required and a validation error message comes up if the user tries to submit the form without details in those fields
- Email needs to be in a valid format - a validation error message pops up if the format is incorrect
Desktop:
-
Footer
-
Footer is conventionally placed at the bottom of the site and consistently displayed on both pages
-
It includes social media links which open in new tabs, option to sign up for a newsletter and back-to-top button
-
The newsletter form has a mandatory email input which recognises an invalid email format and warns the user to correct it with an error message
-
Footer button is styled with a rainbow background to reassure the interested visitor of the group's inclusivity and diversity
-
On hover, the font size increases to confirm to the user the active status
-
Desktop:
- On smaller screens, the height increases and the elements get stacked on top of each other
Mobile:
-
Morning Pages page
- Provides further reading on Morning Pages and mindful writing for interested users
- Large block of text is divided into smaller sections with the use of headings and a decorative line to avoid content overload
- Photo is used as a decorative element to the text, to make the page visually more attractive
- From here, the user has an option to navigate back to the home page using the navigation bar or click on the See our events call to action button and jump to the events schedule
Desktop:
Bottom of the page with call to action button:
Some features around interactivity and personalisation of the site are left to be implemented in the future due to either the limited expertise of the developer at this stage or lack of content.
- add an online booking option to allow the users book events directly via the site
- expand the events schedule section so that each event has its own description
- add a new page where the best stories written by Writing Room members are published and group members can interact with
- add a new page with reading list for Mindful Reader Bookclub including blurbs
- hamburger menu which collapses navigation menu links on smaller screen sizes
- create a custom logo for the site and add it to the navbar
- add JavaScript to highlight Contact and Events menu links once the relevant section is active on the scrolling home page
- smooth scrolling with JavaScript for better UX
- Balsamiq - to create wireframes for the site as part of the preparation work for the project
- Google Fonts - to import Courgette and Montserrat fonts into the HTML file which were then used throughout the site
- Font Awesome - to source icons which were added to some headings for the purpose of aesthetics
- Coolors - to create cohesive colour scheme for the site
- Eye Dropper - to pick specific colours from images
- Pixlr - to edit and resize photos
- Chrome DevTools - to inspect and debug the code through all stages of the development
- Unicorn Revealer - to inspect the site for overflow
- Lighthouse - to audit the site for performance, accessibility, SEO and best practices
- Am I Responsive - to produce a preview of the site on different devices
- W3C HTML Validator - to validate HTML code
- W3C CSS Validator - to validate CSS code
- Color Contrast Accessibility Validator - to test the contrast and readability of colours used
- Autoprefixer - to add vendor prefixes to CSS, for compatibility with different browsers
- GitHub - for hosting the project code and version control
- Gitpod - to write the code and push it to GitHub
- GitHub Pages - to deploy the site
- Word Counter - to limit number of characters used for commit messages to 50, max 72 characters
- Online-Spellcheck - to spellcheck the content of the site and README
- Unsplash - for images
- Pexels - for images
- Pixabay - for images
The project was developed in GitPod, committed to Git and pushed to GitHub. The site was deployed to GitHub Pages with the following steps:
-
Login to GitHub
-
Navigate to your site's repository, which for this project is renatabiniek/writing-room
-
At the top of the repository, locate and click Settings
-
In the left-hand side panel, click Pages
-
Under Source, click the dropdown called None and select Branch: Master and Root folder
-
Click Save
-
A notification message will show up that the page is getting ready to be published
-
Once refreshed, the message will change to Your site is published and a link to the deployed site will be provided:
The live site can be found here: https://renatabiniek.github.io/writing-room/
The process can also be found here.
You can create a fork (copy) of the repository. This allows you to experiment with the code without affecting the original project.
To fork the repository:
- Log in to your GitHub account
- On GitHub, navigate to the repository you want to fork
- In the top right corner of the page, underneath your profile avatar, click Fork
- You should now have a copy of the original repository in your GitHub account
You can clone your repository to create a local copy on your computer. Any changes made to the local copy will not affect the original project. To clone the Writing Room project, follow the steps below:
- Log in to your GitHub account and locate the Writing Room repository
- In the repository, click on Code button located above all the project files
- Under HTTPS, copy the link generated (https://github.com/renatabiniek/writing-room.git)
- Open the terminal you're using, e.g. Gitpod
- Change the current working directory to the location where you want the cloned directory created
- Type
git cloneand then paste the URL you copied earlier:
git clone https://github.com/renatabiniek/writing-room.git - Press Enter to create your local clone.
You can also refer to this GitHub documentation for detailed instructions.
I tested the site regularly during the development process, by previewing it in the live server window and inspecting with Google Chrome DevTools at various breakpoints. Simultaneously, I was checking any new additions and changes on several devices available in my household. Any issues found, were addressed at that stage and double checked before moving on with the rest of the project.
Only later in the project, I started using the element.style box in Google Chrome DevTools more proactively to play around with styling changes before implementing them into my actual code which could have saved me time and multiple commits for the same element.
In the final stage of the project, I have tested the site thoroughly with automatic validators and manually on different devices and in several browsers, taking into account user stories from the UX section, as per below.
-
First Time Visitor Goals:
-
As a new visitor to the website, I want to immediately understand what the site’s purpose is so that I can decide if it’s what I’m looking for
Test result: PASS
The hero image with a typewriter and a notebook literally sets the user at a writing desk, and the slogan slow down. write. reinforces the idea of creativity and mindfulness promoted by the site.
-
As a visitor, I want to easily navigate the site so that I can find what I need efficiently
Test result: PASS
The highest priority sections are presented as menu links in the navbar allowing the user to get to the relevant sections of the site easily.
Call to action buttons are placed strategically throughout the page, to allow the user to jump to the most relevant section without having to scroll through the remainder of the page.
Button taking the user to the events schedule:
Button taking the user to the sign up form:
Button taking the user back to the top of the page:
-
As a visitor, I want to immediately understand where the group is based so that I can decide if it’s relevant to me
Test result: PASS
The overlay text immediately informs the user about the location of the group.
Further down on the page, exact address and Google map location are provided.
-
-
Interested Visitor Goals:
-
As a interested user, I want to see the schedule of current events so that I can decide if I want to attend
Test result: PASS
Events are displayed by type, including days, times and any further details relevant to each event.
-
As an interested visitor, I want to know what the past events looked like so that I can decide if I’m interested in joining the group
Test result: PASS
Simple, visually pleasing gallery of photos from past events is displayed in a masonry style, allowing the user to understand better who attends the events and what might be happening during them.
-
As an interested visitor, I want to understand the signing up process so that I know how to join the selected event
Test result: PASS
Signing up process is explained in the events schedule section and users are directed to the sign up form:
The form is minimalistic and gives the user an option to select an event with radio buttons:
The placeholder text in the message field confirms to the user how to sign up:
-
As an interested visitor, I want to be able to download the reading list so that I can get ready to join the next bookclub event
Test result: PASS
The link to the reading list is provided within the bookclub event section and it opens as PDF in a new tab:
PDF
-
As an interested visitor, I want to be able to easily contact the site owner so that I can ask questions or share ideas
Test result: PASS
The users can navigate quickly to the contact form from the navigation bar:
Or scroll down on the home page to the same form that allows them to send a message to the site owner:
-
As an interested visitor, I want to be able to sign up for a newsletter so that I don’t miss any updates or events
Test result: PASS
A quick sign up option is available in the footer:
-
As an interested visitor, I want to be able to easily find the social media pages of the group so that I can follow them for any updates
Test result: PASS
Social media links are placed in the footer and open in a new tab when clicked:
-
-
Frequent Visitor Goals:
-
As a frequent user, I want to be able to access the site easily on my chosen device so that I can check the schedule on the go
Test result: PASS
The site is fully responsive and easy to navigate on desktop, tablet and phone.
-
-
Site Owner Goals:
-
As a site owner, I want to create a site with great UX so that the users are inclined to return to it
Test result: PASS
The site has a simple layout, with minimalistic design. It is easy to navigate, provides all the information a user might be interested in and allows to contact the site owner with any questions.
-
As a site owner, I want to be able to be contacted from the users via a contact form and social media, so that I can communicate with them and answer any questions
Test result: PASS
The site users can reach out to the site owner via a simple form. The form has validation in place that ensures name and email in correct format are provided so that the site owner can respond to the question or confirm the receipt of the sign up request. Social media links are displayed in the footer and open in a new window when clicked, so that the user doesn't exit the site.
-
I ran the code through the HTML and CSS validators, and fixed the following initial warnings and issues:
-
HTML Validator Errors & Warnings
-
Warning: Section lacks heading. Consider using h2-h6 elements to add identifying headings to all sections.
Fixed: Changed p to h2 on the site slogan.
-
Error: Bad value 100% for attribute width on element iframe: Expected a digit but saw % instead.
Fixed: Changed the value from % to digits on iframe.
-
Error: Duplicate ID writing-cafe. & Error: Duplicate ID morning-pages.
Fixed both: Change the IDs in the contact form to writing-session and morning-session.
-
-
CSS Validator Errors & Warnings:
-
Error: line-height: auto is not a line-height value.
Fixed: corrected the line-height value with relative value.
-
I re-ran the deployed site in the final stages of the project and no warnings or error were found.
-
HTML Validator - Results
No warnings or errors to show for the deployed site.
-
CSS Validator - Results
No errors found for the deployed site.
I generated desktop and mobile Lighthouse reports from Google Chrome DevTools to review performance, SEO, the best practices and accessibility of the site. They both showed very good results.
Desktop
Mobile
The following was confirmed during manual testing:
-
Navigation bar
- Navigation bar stays fixed on top of the page
- Logo and menu links are responsive and remain legible on all screen sizes
- On smaller screens, the menu links are listed underneath the logo instead
- Logo can be clicked on both pages to bring the user back to the top of the home page
-
Footer
- Footer is visible at the bottom of the page on all screensize
- The height increases on smaller screens to adapt to the footer elements stacking on top of each other
-
Links and buttons
- All links and buttons have been repeatedly tested
- Internal links and buttons take the user to the relevant section of the site
- External links (social media, cafe and pub links) open in a new tab, leaving the current site open
- Link to the reading list in PDF opens the file in a new tab, leaving the current site open as well
- On hover, navigation menu links and buttons change color to assure the user that they're active
- On the rainbow button in the footer, the font size increases on hover instead
-
Sign-up/ Contact form:
- The contact form has validation in place for the required fields (name and email)
- Email field requires email address in the correct format
- If the user tries to submit the form without the required information or with an invalid format of the email, error messages will pop up:
Note: Once submitted, the information doesn't go anywhere as this is not in the scope of this project. Feedback site of https://formdump.codeinstitute.net has been used as a placeholder for action.
-
Newsletter sign up form:
- Email field is required and only accepts input in the correct email address format.
- Error messages will pop up if the user tries to submit the sign-up request without the email or with invalid email:
Note: The Sign-me-up button doesn't actually send the information anywhere as this is not in the scope of this project.
-
Color Contrast
Color Contrast Accessibility Validator
Initially, there was a contrast issue found between font colour on footer button and the fall back background colour of the button. I've changed the background to white, and the final result is:
No automated color contrast issues found on the webpage tested
-
Content
Content is legible on all screensizes. It has been proof-read by the developer for logical and grammatical errors, and spell-checked with Online-Spellcheck.
-
CI Peer Review
I've asked fellow CI students to review the site and following points were raised:
-
On Chrome the cover-text div is right to the edge of the screen, aligning this under the Title would keep a constant spacing throughout the site for you.
This was addressed by changing the padding value on the cover-text div.
-
On PC and mobile when you select Events or Contact, Home is being set as the Active item
This is a known issue as Events and Contact are sections of the scrollable Home page and not separate pages. I will be able to fix this once I progress through the course with JavaScript.
-
-
Family and friends
I've asked family and friends to test the site and no new issues were raised.
- Google Pixelbook Go Chromebook
- HP EliteBook laptop 820 G4
- 24inch ViewSonic LED monitor
- Google Pixel 4a phone
- Samsung Galaxy A80 phone
- iPad 5th generation
- iPhone
- various screen sizes in Google Chrome DevTools simulator
Browsers tested:
At the final stages of the development, CSS has been prefixed with CSS vendor prefixes using https://autoprefixer.github.io/, to generate cross-browser compatibility code and ensure the site renders correctly on each browser. Then the site was previewed in:
- Google Chrome
- FireFox
- Microsoft Edge
- Safari
Internet Explorer is no longer supported so my testing didn't focus on IE.
-
Fixed:
-
I had issues with making the navbar and some sections of the site highly responsive, which I eventually solved after learning about flexbox and adding media queries
-
A white space appeared on the right-hand side of the screen on smaller screens which was coming from the specific width of the navbar - this was changed to 100% and overflow-x:hidden was used for the site based on this post
-
Hero image was showing on top of the navbar on scrolling. This was fixed by adding z-index: 1000 to the navbar to keep it on top of the other content
-
List marker items on the Morning Pages page disappeared from view - this was fixed by moving them inside list item with list-style-position. They became part of text and were not affected anymore by any overflow: hidden setting
-
In Code Institute peer review, it was pointed out to me that text alignment of overlay cover text on here image and site logo was inconsistent on different devices. This was fixed by increasing left padding on overlay text on desktop and setting it smaller again in media query for smaller screens
-
In automatic code validation, invalid percentage value on width attribute for iframe was detected - I replaced it with digits
-
Thanks to the same validation, invalid auto value for line-height was noticed and replaced with correct value in the gallery section
-
There were a couple of duplicated ids caught as well and they were replaced with unique ones
-
Once the page was deployed initially, the images from gallery didn't load. I found that the file path had for them had an extra "/" in the address and removed it which fixed the issue
-
When testing different browsers, I found text-overflow on .flex-reasons > divs in Microsoft Edge - it was resolved by removing fixed height of the divs
-
-
Known:
-
When Events and Contact navigation links are active, Home link is highlighted. This is because both Events and Contact refer to relevant sections on the same scrolling Home page. In my investigation, I found that should be able to highlight them as active on a scrolling page with JavaScript
-
On some smaller screens, when a user scrolls down to the bottom of the form and tries to submit it without entering their name or email, the position of the validation error message displays on top of the current view elements. The view needs to scroll back up to the field the error message relates to. Based on my research and conversation with tutor support team, this will need to be addressed with JavaScript
-
The Code Institute materials with the support of tutorial materials on w3schools, MDN Web Docs and posts on stackoverflow were used to create this site. All code seen in use there has been heavily modified to suit the needs of this site, except for the specific cases referenced below.
Reference materials from w3schools and css-tricks were used to implement flexbox.
Blockquote code to separate a quote from other text and specify style of quotation marks was taken from css-tricks
Box shadow code was taken from this MDN Web Docs post
Button shadow code was taken from this w3schools post
This blog post was used for recommendation on best format of git commit messages
Icons taken from Font Awesome
Overflow-x: hidden solution taken from this Stackoverflow post
Images were sourced from Unsplash, Pexels and Pixabay. Thank you to all the photographers!
Hero Image by Annie Spratt on Unsplash
Intro Section Photo by Sixteen Miles Out on Unsplash
Mindful Writing Photo by Carli Jeen on Unsplash
Gallery Images by
- Pexels on Pixabay
- StockSnap on Pixabay
- Anthony Shkraba on Pexels
- Alina Vilchenko on Pexels
- furkanfdemir on Pexels
- Valeria Boltneva on Pexels
- Keira Burton on Pexels
- Nathan Dumlao on Unsplash
Morning Pages Photo by Kinga Cichewicz on Unsplash
Rainbow Flag used as background for footer button from Pixabay
Text content for Mindful Writing section and Morning Pages page has been taken and adapted to suit the purpose of this project from the following sites:
All other content was written by the developer.
Massive thank you to:
- The wonderfully helpful and friendly Slack community where I often looked for help
- My mentor, Gerard McBride, for his guidance and helpful feedback
- Tutors at Code Institute for their support
Writing Room is an imaginary group and the content of this website is for educational purposes only. It was created for the Code Institute’s HTML and CSS Essentials Portfolio Project, as part of their Diploma in Full Stack Software Development. The requirements are to make a static front-end website, using HTML and CSS.
React
Typescript
Django
Laravel
Facebook
Microsoft
Google
Alibaba
D3
Tencent