TECH DESIGN: TDJ4M1

ASSIGNMENT: LANDING PAGE LAYOUT DESIGN

Date: SEE ASSIGNMENTS TAB TIME: 10 periods

Objective:
You are to make the necessary preparations for the upcoming “Promotional Website Design”
Culminating Activity, by setting up your work environment and downloading all of the necessary
tools and resources. See the project in UNIT 4 “Website-Design”.
Task A Requirements:
You are to watch the following YouTube tutorial, and complete the HTML/CSS page by following
the tutorial. The page has to be the same as the tutorial.
Building a Landing Page using BS5: https://www.youtube.com/watch?v=h2jVZ8ans_o
You can learn more Bootstrap here: https://www.youtube.com/watch?v=w2zix0oYyE8&t=255s

Other Resources:
 HTML: https://www.youtube.com/watch?v=UB1O30fR-EE&ab_channel=TraversyMedia
 CSS: https://www.youtube.com/watch?v=yfoY53QXEnI&ab_channel=TraversyMedia

Task B Requirements:
After you complete the above Bootstrap Website Tutorial, you are to use Figma or Adobe
Express to design a Landing Page Layout for the Product you developed during your UX
Product Design in Unit 3.
Also, you are to gather all of the necessary assets to get ready for the culminating
activity – Promotional Website Design
 Create a folder for your edited Landing Page - Name it: UX-Landing Page
 Gather all of the Images (your product/brand images), including your logo.
 You can download Notepad ++ or Visual Studio Code (this is better), code editors.
 You can download GIMP to customize your images: https://www.gimp.org/, or use Photopea
https://www.photopea.com/
Resources:
Notepad ++ Portable: https://portableapps.com/apps/development/notepadpp_portable
Visual Studio Code: https://code.visualstudio.com/
Bootstrap Templates: https://bootstrapmade.com/bootstrap-5-templates/

Zengo Selmanoski – TDJ4M1 – Landing Page Layout Design

 WHAT TO SUBMIT
Your completed Website Tutorial (Task A) from the tutorial above (zip the website tutorial
folder including all of the files). Upload the zip folder to the Assignments TAB.
Your Landing Page (Task B) - make sure to name the page properly and submit a PDF or
PNG file format of the UX Landing Page Layout with all the files and upload both of them to the
Assignments TAB. You don’t need to include other files/folders, you will need them for the
culminating.

EVALUATION:
Part A - Website Landing Page Tutorial (K/U) -------------------------------------------------- 20 MARKS
Part A -Website Landing Page Tutorial (A) ------------------------------------------------------ 20 MARKS
Part B - Landing Page Layout (T/I) ----------------------------------------------------------------- 20 MARKS
Part B - Landing Page Layout (C) ------------------------------------------------------------------ 20 MARKS

Zengo Selmanoski – TDJ4M1 – Landing Page Layout Design