This app informs the user on things to do and see in Lisbon
I coded the page as part of the SheCodes Responsive Add-On
workshop. It was my first attempt at building a page using a Figma
design - just like a front-end developer would do if they had been
hired to create a landing page! To create the page, I had to
implement all the skills I have learnt in previous workshops as
well as grow in confidence in using Figma as a design tool.
Another skill I gained from this workshop was how to embed HTML
links. The creation of this landing page was super exciting
challenge and the resulted in the most professional looking
landing page/app I have created to date.
Skills: HTML5 · ES6 JavaScript · CSS 3 · VS Code · GitHub ·
Netlify · Figma · Responsive Web Design · HTML Embeds
This landing page promotes my work as a front-end developer so
far.
The landing page you're currently browsing was built as my final
project for the SheCodes Responsive workshop. The page showcases
more advanced HTML, CSS, the use of Bootsrap framework as well as
the creation of a full responsive web page to fit any screen size.
We also learnt about SEO and how this can be used to optimise your
page on search engines. During the workshop we were also shown how
front-end developers build websites using designs from Figma. I
will be going back to previous projects to improve them using the
knowledge gained in this workshop - so watch this space!
Skills: HTML5 · ES6 JavaScript · CSS 3 · VS Code · GitHub ·
Netlify · Bootstrap · Fontawesome · Figma · Responsive Web Design
· SEO
This app shows the user the current weather as well as a 5-day
forecast for any city in the world.
I coded the page as part of the SheCodes Plus workshop and was my
first attempt at building a page that combined HTML, CSS,
JavaScript alongside an API for live weather data. The project
also has a search function to allow the user to type in any city
in the world and the current weather will be displayed. The date
and time displayed on the page is the user’s date and time
according to their time zone. I did improve upon the project after
completing the SheCodes Add On course (see my World Clock app) by
making the time tick rather than it being static. I also learned
how to use GitHub and Netlify to host my code and projects.
Skills: HTML5 · ES6 JavaScript · CSS 3 · VS Code · GitHub ·
Netlify · API ·
This app uses AI to generate book suggestions based on the users
input.
I coded the page as part of the SheCodes AI Add-on workshop. I
learned all about AI and the power of this very growing tool. It
was interesting to see how we could integrate and use AI alongside
our code to create more responsive and effective HTML pages. I
learned how to create AI prompts that would generate meaningful
replies to the user’s inputs. The project is linked to an AI API
and a JavaScript plugin.
Skills: HTML5 · ES6 JavaScript · CSS 3 · VS Code · GitHub ·
Netlify · API · AI · Plugins ·
This landing page promotes one of my favourite shows; Star Wars:
Rebels.
This page was built as part of the SheCodes Monthly Challenges and
was my first-ever submission to the website's challenge page. This
is my first solo project and my first attempt at building a themed
landing page. The page showcases the HTML, CSS, JavaScript skills
I have learned so far. I will be going back to improve the page as
I learn more coding skills. My favourtie feature is the innerHTML
function that allows the user to choose the light or dark side of
force!
Skills: HTML5 · ES6 JavaScript · CSS 3 · VS Code · GitHub ·
Netlify
This app shows the user's the current time for certain locations
around the world.
I coded the page as part of the SheCodes Plus Add-on workshop.
This project I used the skills I had learned in the SheCodes Plus
workshop but then built upon them by including new features such
as a drop-down list, replacing all the innerHTML with what the
user has selected from the dropdown, adding a link to return to
the homepage and linking the project to a CDN, namely Monment.js.
Skills: HTML5 · ES6 JavaScript · CSS 3 · VS Code · GitHub ·
Netlify · Moment.js ·