iqvistas full Logo

CEP24 SCHOLARSHIP ON FRONTEND WEB DESIGN

Developing an application’s or website’s graphical user interface is known as front-end development. The primary objective is for any user to be able to view and operate the GUI with ease.

CEP24 Partially Funded Scholarship on Frontend Web Design

Frontend Web Design

A front-end programmer creates all of the visual components of an application or website, including buttons, menus, animations, and more. The three fundamental components of front-end programming are JavaScript, CSS, and HTML. The website’s content and structure are created using HTML.

Physical/Online Classes

Feb. 1st – Mar. 1st 2024

Cost

N22,500

with Certificate 

Duration

4 Wks

COURSE DETAILS

Introduction to Web Programming

  • It talks about the architecture of a website
  • The different technologies used to design a website.

Introduction to HTML and CSS

  • HTML and CSS syntax.
  • HTML elements.
  • HTML document structure.
  • CSS selectors, properties, and values.
  • Where to write CSS. 
  • Code commenting in HTML and CSS.
  • Pick a code editor.
  • Build your first web page. 
  • Get familiar with browser DeveTool.

HTML Fundamentals

  • Semantics of HTML.
  • Block and inline elements.
  • Nesting of elements.
  • Text elements.
  • Structure elements.
  • Hyperlinks.
  • Lists.
  • Image, video, audio elements.
  • Iframe elements.
  • Tables.
  • Forms.
  • HTML best practices.
  • Create a basic multi page website.

CSS Fundamentals

  • Cascading effect.
  • Specificity.
  • Combining and layering selectors.
  • Advanced selectors.
  • Colors.
  • Lengths.
  • Typography.
  • Backgrounds and gradients.
  • CSS resets.
  • CSS best practices.

Positioning

  • The box model.
  • Positioning with floats.
  • Positioning with inline-blocks.
  • Creating a grid structure.
  • Precise Positioning.
  • Basic website clone.

Bootstrap 3

  • Installation.
  • Responsive grid system.
  • Bootstrap’s style standards.
  • Responsive CSS.
  • Responsive development with browser devTools.
  • Responsive website clone.

Advanced CSS and Bootstrap 4

  • Z dimension.
  • Transform.
  • Animation.
  • Flexbox.
  • Bootstrap 4.
  • Responsive website clone.

Development Cycle With Git

  • Command line interface.
  • Track versions with Git.
  • Cloud storage with GitHub.
  •  

HTML CSS Project

  • Has a navigation bar, a main content section, and a footer

  • Has at least two pages

  • Design is mobile responsive

  •  

Migrating to Bootstrap 5

    • A new breakpoint, xxl, for 1400px and up.
    • Improved gutters. Gutters are now set in rems, and are narrower than v4 (1.5rem, or about 24px, down from 30px).
    • Navbars now require a container within (to drastically simplify spacing requirements and CSS required).
    • Dropped the jumbotron component as it can be replicated with utilities.
    • Renamed several utilities to use logical property names instead of directional names with the addition of RTL support.

    You will also follow a cloning exercise walkthrough to get good experience using Bootstrap v5.

Deploying Basic HTML CSS Website

Many web hosting services offer free hosting for static file websites, that is websites that only consist of static files, such as HTML, CSS, JavaScript and images. But you will be restricted to a subdomain. Below are some free services to host your HTML CSS projects.

  • GitHub Pages (https://pages.github.com/) – GitHub offers one free site for each project. You just need to activate it in your project settings.

  • Netlify (https://www.netlify.com/) – Netlify is a simple to use static web project hosting service. You just need to drag your project folder onto the browser to upload the deploy your projects.

  • Neocities (https://neocities.org/) – Also an easy to use web hosting site that offers free static file hosting with a subdomain of your cho

Who should attend

Frontend web design is a valuable skill for various individuals, including:

Web Developers, Graphic Designers, UI/UX Designers, Entrepreneurs and Business Owners, Marketing Professionals, Content Creators,  Students and Hobbyists, Anyone Interested in Web Presence.

Remember that while frontend web design is accessible to beginners, it does require time, practice, and ongoing learning to master. Additionally, individuals with diverse backgrounds and goals can find value in acquiring frontend skills.

Previous Classes